�ݺ�ߣ

ES6 STUDYS E C O N D T I M E
2 0 1 8 . 1 0 . 2 7
장 승 빈

TODAY SUBJECTS
• 지난시간 복습
• 개발 환경 (보완)
• ES6
– FUNCTION PARAMETER
– SPREAD OPERATOR
– DESTRUCTURING ASSGINMENT
– MODULE SYSTEM
• Node.js
– npm
– heroku

지난 시간 복습
이 라 고 쓰 고 보 정 이 라 고 읽 는 …

지난 시간에…
• 변수 선언 : let
– 상수는 const (objec는 ref 재할당하지 않는)
– ES6이상 에선 var를 사용하지 않기
• 템플릿 리터럴 : template literal
– 문자열 보간법 : string interpolation
– 함수 전달

(FUNCTION) HOISTING
• 끌어올림(hoisting)은 함수에서 사용할 때 문제
// 변수 호이스트
console.log(hoistVariable);
var hoistVariable = "hoist Variable";
// 함수 호이스트
hoistFunc();
function hoistFunc(){
console.log('hoist Function!');
}

지난 시간에…
• 화살표 함수 : arrow function
– 변수 선언과 달리 모든 함수를 화살표 함수로 변경하면 안됨
– lexical this의 특징을 잘 생각해서 사용할 것!

화살표 함수 사용하면 안되는 경우
• 클래스의 메소드에 사용하면 안됨!
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log( this.i, this)
}
}
obj.b();
obj.c();

화살표 함수 사용하면 안되는 경우
• OOP(객체지향)적으로 개발할 때 생성자로 사용하면 안됨

개발 환경
C O D E R U N N E R 플 러 그 인
E S L I N T 플 러 그 인

CODE RUNNER PLUGIN
• code runner
– 스크립트 실행 가능

ESLINT 플러그인
• 에디터 자체에서 problem 패널에 출력
• fix 기능도 사용 가능

아직 FIX 하지 마시고...

ESLINT RULES 추가
• console.log를 오류로 잡지 않기
– no-console
• var를 사용하지 않도록
– no-var
{
"env": {
"es6": true,
“node”: true
},
“extends”: “eslint:recommended”,
“parserOptions”: {
“ecmaVersion”: 2015
},
“rules”: {
“indent”: [
“error”,
“tab”
],
“linebreak-style”: [
“error”,
“windows”
],
// ...
],
"no-console": [
"error",
{ "allow": ["log"] }
],
"no-var": "error"
}
}
],
// 주의: 위 콤마도 같이 추가
"no-console": [
"error",
{ "allow": ["log"] }
],
"no-var": "error"

ES6
F U N C T I O N PA R A M E T E R
S P R E A D O P E R AT O R
D E S T R U C T U R I N G A S S G I N M E N T
M O D U L E S Y S T E M

FUNCTION - DEFAULT PARAMETER
• 함수 인자의 기본값을 지정 가능!
const sum = ( a, b, c=10, d=20 ) => a+b+c+d;
console.log( sum( 1 ) );
console.log( sum( 1, 2 ) );
console.log( sum( 1, 2, 3 ) );
console.log( sum( 1, 2, 3, 4 ) );
console.log( sum( 1, 2, 3, 4, 5 ) );

FUNCTION - REST PARAMETER
• 개수를 알 수 없는 여러 개의 파라미터를 받는 방법
function restParamsFunc(arg1, arg2, ...args){
console.log(arg1);
console.log(arg2);
for(let i=0; i<args.length; i++){
console.log(args[i]);
}
}
restParamsFunc(1,2,3,4,5,6,"칠", "팔");

FUNCTION - TAGGED TEMPLATES
• 쓸데가 있을까 싶습니다만...
function taggedTamplateFunc(strings, a, b) {
let x = a;
let y = b;
let str1 = strings[0];
let str2 = strings[1];
console.log( str1 + x + str2 + y );
}
let x = 30;
let y = 28;
taggedTamplateFunc`x=${ x }, y=${ y }`;

SPREAD OPERATOR
• 전개 연산자 사용법 : ...(배열/객체명)
– 2개 이상의 함수인자 또는 배열 요소를 확장할 수 있는 표현식(?) 구문
– 배열/객체명은 반복 가능한(iterable) 객체를 반환(대입?)
// iterable에 관해서는 다음주에…
• 함수 인자로 사용
– rest parameter 참고
• 배열 요소 할당에 사용
– (뒷장에서)

DESTRUCTURING ASSIGNMENT
• 비구조화 데이터 할당
– 배열의 구조화 할당
const someArray = [1, 2, 3];
let one = someArray[0];
let two = someArray[1];
let three = someArray[2];
console.log(one, two, three);
– 배열의 비구조화 할당
const someArray = [1, 2, 3];
let [one, two, three] = someArray;
console.log(one, two, three);

ARRAY DESTRUCTURING
• 전개 연산자 활용
const someArray = [1, 2, 3, 4, 5, 6];
let [one, two, ...numbers] = someArray;
console.log(one, two, numbers.length);
• 기본값 지정 가능
let [a, b, c=10] = [1,2];
console.log(a, b, c);
• 매칭 건너뛰기~
let [x, , , y] = [1, 2, 3, 4];
console.log(x, y);

TIPS - VARIABLE SWAP
• 변수의 값을 교차할 때 temp를 선언하지 않아도
let first = 1;
let second = 2;
console.log(first, second);
[first, second] = [second, first];
console.log(first, second);

OBJECT DESTRUCTURING
• 배열과는 달리 key가 일치하는 값만 가져옴
const someObject = {
numberProp: 200,
booleanProp: true,
stringProp: "어떤속성"
};
let {numberProp, stringProp} = someObject;
console.log(numberProp, stringProp);
// 다른 이름으로
let {stringProp: str, booleanProp: bool} = someObject;
console.log(str, bool);

OBJECT DESTRUCTURING
• 기본값 설정
const someObject = {
numberProp: 200,
booleanProp: true,
stringProp: "어떤속성"
};
let {stringProp, a=10, b=20} = someObject;
console.log(stringProp, a, b);
// 다른 이름으로
let {stringProp: str, a:x=10, b:y=20} = someObject;
console.log(str, x, y);

MODULE SYSTEM
• 프로그램의 조각(?)
– 함수(클래스)보다 크면서 라이브러리보다 작은 그 사이 어딘가 속하는 코드 집합
• 하나의 프로그램을 여러 개의 파일로 나눌 때 사용하는 방법
– export
– import
• 그러나 node.js에서는 ES6 모듈 문법이 기본 지원이 아님

NPM.JS
• Node Package Manager
• Nodejs로 개발된 프로그램을 관리하는 콘솔(CLI) 프로그램

기본 사용법
• 설치 : npm install [모듈명]
– install 약자로 i 사용 가능
• 삭제 : npm remove [모듈명]
– 역시 remove 약자로 rm 사용 가능
• 전역 설치
– 옵션 -g 를 사용
– 시스템의 node.js모듈 디렉터리에 설치됨

EXPRESS.JS
• node.js 가장 많이 사용되는 웹(http) 서버 Frameworks
• 새 프로젝트 디렉토리를 생성한후 VSCode 로 엽니다.

EXPRESS.JS 시작하기
• 터미널(ctrl+`)을 열고 npm i express --save 실행

• index.js 파일을 만들고 [공식 예제]를 입력합니다.

• 터미널에서 node index.js 실행 후
• 웹 브라우저에서 localhost:3000으로 접속

EXPRESS.JS
• 터미널에서 [Ctrl + C] 를 눌러 테스트를 종료합니다.

EXPRESS GENERATOR
• express (프로젝트 템플릿) 생성기
– https://expressjs.com/ko/starter/generator.html
• 전역 설치해야하는 유틸리티
– npm i -g express-generator

HEROKU
• PaaS 형태의 서비스
– 사용자가 서버를 세팅하거나 관리(유지보수)할 필요 없고
– 프로그램 소스만 전속하면 자동으로 프로그램 서버가 동작
• 무료플랜이 있음
– 30분만 접속자가 없을 시 서버가 sleep
(개발시에는 무리 없을 듯..)
• git 을 사용해 node.js 프로그램 소스를 전송

[TIP] HEROKU 사용시
• 전송할 필요 없는 파일 제외
– 모듈들은 업로드 해봐야 package.json 파일 기반으로 다시 설치됨
– .gitignore 파일 생성
– node_modules/ 입력
• package.json 파일이 필요
– 내용 중 build script에 start 스크립트가 필요

�ڶ��로젝트명].��ǰ�ܲ��.��ǳ�

�ݺ�ߣ

ES6 for Node.js Study 2주차

Recommended

More Related Content

What's hot (20)

Similar to ES6 for Node.js Study 2주차 (20)

More from 승빈이네 공작소 (19)

ES6 for Node.js Study 2주차