본문 바로가기

개발 공부/Front-end study log

(33)
[JavaScript] 데이터 명령 (1) (문자, 숫자) 보호되어 있는 글입니다.
[JavaScript] 클래스(1) : 생성자 함수, this, ES6 Classes, 상속(확장) 1. 클래스 복습 const myname = { firstName: 'Mad', //속성 lastName: 'Cow', //속성 getFullName: function () { //속성에 함수값이 할당되면 : 메소드 return `${this.firstName} ${this.lastName}` //객체데이터의 속성&메소드를 통틀어 '멤버'라고 부름 } } console.log (myname) this는 현재 코드 기준으로, 'this'가 소속된 함수가 실행되는 객체 데이터 'myname'을 지칭 즉 this 를 myname으로 변경해도 적용됨 하지만 변수의 이름이 언제든 변경될 수 있기 때문에, 객체 이름을 직접 명시하기 보다, this를 통해 객체 데이터를 지칭할 수 있음. (이전 JS 객체데이터 설명..
[JavaScript] 함수(2) : 호이스팅, 타이머 함수, 콜백 1. 호이스팅 (Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 함수 표현방식으로 double() 함수를 표현, 아래에서 순차적으로 double 함수를 실행하는 방법 double 함수 표현을 사용했을 땐, 입력 순서를 지켜야 함 함수 표현 대신, 함수 선언 방식으로 수정해서 입력하면 double( )이 먼저 기술되어도 실행됨 즉 이 현상이 '호이스팅'. 함수 표현 범위가, 자바스크립트 유효범위의 가장 최상단으로 끌어올려져서 함수가 실행됨 복잡한 코드를 작성할 때, 특히 함수 이름만 보고도 함수 추측 가능한 경우 (e.g. double, triple, addseven 등) 뒤쪽에서 함수를 선언하는 글을 작성할 수도 있음. 2. 타이머 함수 setTimeout (함수, 시간) : 일정 ..
[JavaScript] 함수(1) : 함수 정의, 화살표 함수, 즉시실행함수(IIFE) 1. 함수 1) 함수 정의하여 콘솔에 띄우기 (기명함수) 2) 반환 키워드 'return' 을 활용해 반환한 값을 함수 밖으로 내보내기 3) 익명의 함수를 특정 변수에 담아서 활용 (함수 표현) 4) return 키워드 주의사항 함수 내에서 return 키워드가 사용되는 부분에서 함수가 종료됨. return 키워드의 작성 순서를 신경써야 함, 즉 조건을 만들어 특정 조건을 실행할지 말지를 결정할 때도 응용가능 (응용) 5) arguments 객체 매개변수를 지정하지 않아도 arguments 객체를 통해 함수 활용 가능, sum함수 실행 시 인수로 넣은 7, 3이 데이터 순서 배열형태로 적용됨 함수 사용시 활용할 인수가 너무 많아서 변수를 x, y, z.... 일일이 지정이 어려울 때 사용가능 그러나 일반..
[JavaScript] 연산자(operator)의 종류 1. 산술 연산자 (arithmetic operator) console.log(1+2) → 2 console.log(5-7) → -2 console.log(3*4) → 12 console.log(10/2) → 5 console.log(7%5) →2 (나머지 연산자) 2. 할당 연산자 (assingment operator) const a = 2 → '=' 가 할당 연산자, a라는 문자데이터에 숫자 2를 할당 → const는 복수 할당 불가. 즉, a에 2 이외의 다른 숫자를 할당할 수 없음 let a = 2 → let은 복수할당 가능. a에 새로운 숫자를 할당할 수 있음 a=a+1 → 재할당됨 (a=a+1) a += 1 → a=a+1과 같은 의미 (축약형) a -= 4 → a=a-4 (축약형 응용) a *..
[JavaScript] 데이터타입 확인+ 함수 export/import 자바스크립트는 한 줄의 명령이 끝났다는 표시를 'semi-colon ; '를 끝에 붙임. (code convention; 관습) 그러나, ';'세미콜론을 입력하지 않아도 작동함 parcel-bundler 등 bundler를 통해 압축과정을 거치면 자동으로 ';'붙어서 나옴. 그래서 개발자들이 js 몇 천~만 줄 작성할 땐 ;를 안 붙이기도 함. 그러나 전체 작성내용에 ';'를 작성하지 않을 경우 오류 발생하는 경우도 있기 때문에 주의 1. typeof 특정 데이터의 type을 알아내는 키워드 console.log(typeof 'Hello world!') → 콘솔표시 string(문자데이터) console.log(typeof 123) → number(숫자데이터) console.log(typeof true)..
[JavaScript] 개요 1. 개요 ECMA Script (ES, 에크마 스크립트) : Europe Computer Manufacturing Alliance (유럽 컴퓨터 제조 협회) 기본 JS 표준화 진행 꾸준하게 1년에 한 번씩 조금씩 바뀌고 있음. (e.g. ES6 = ES2015... JS의 각각 표준화 버전) : 익스플로러 구버전 등은 ES5버전 이전 것만 사용가능, 신 브라우저부터는 대체로 ES6 이후 버전 활용 가능 (바벨 플러그인 통해서 ES6이후 JS 버전들을 구 브라우저에서도 기능하도록 만들어줄 수도 있음) 새로운 작성 규칙 규칙1. 터미널 입력 규칙2. 파일 내 코드 입력 2. Setting for Study 1. 시작 - 개발 작업 진행할 폴더 생성 후 visual studio에서 폴더 오픈 npm init..
[Node JS] NVM, NPM _ 유의적 버전 (Semantic Versioning, SemVer) 1. 개념 유의적 버전 = 의미가 있는 버전 (Semantic Versioning) 의미를 부여해서 해석하고 구분 가능. 숫자 구분방법 ^Major.Minor.Patch (e.g. ^12.14.1) 12 = 기존 버전과 호환되지 않는 새로운 버전. 프로젝트 전혀 새로운 기능 도입 등 14 = 기존 버전과 호환되는 새로운 기능이 추가된 버전. 1 = 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전. 버전을 일치시키는 것이 매우 중요하며, sem ver 규칙에 의거하여 프로젝트 진행. ^ = Major 버전 안에서 가장 최신 버전으로 업데이트 가능 (항상 붙어있는 것은 아님, carot 기호) 2. 실습 확인 (1) lodash 패키지 버전 확인 package.json에 적용한 lodash와, 실제로 ..