2018.10 인천부평 ECMA Script 6 스터디 2주차 자료~

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

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

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

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

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

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

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

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

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

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

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

15. 아직 FIX 하지 마시고...

16. 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"

17. 다시 돌아오면

18. 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

19. 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 ) );

20. 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,"칠", "팔");

21. 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 }`;

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

23. 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);

24. 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);

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

26. 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);

27. 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);

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

30. EXPORTS / REQUIRE

32. NODE.JS
2 - R O U N D

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

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

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

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

37. EXPRESS.JS 시작하기
• index.js 파일을 만들고 [공식 예제]를 입력합니다.

38. EXPRESS.JS 시작하기
• 터미널에서 node index.js 실행 후
• 웹 브라우저에서 localhost:3000으로 접속

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

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

41. 테스트

42. npm install

43. npm start

44. http://localhost:3000

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

46. HEROKU 가입

47. HEROKU 가입

48. HEROKU 가입

49. HEROKU 가입

50. HEROKU 가입

51. HEROKU 가입

52. HEROKU 프로젝트 생성

53. HEROKU 프로젝트 생성

54. HEROKU 프로젝트 생성

55. HEROKU 도메인 확인

56. HEROKU 도메인 확인

57. HEROKU 도메인 확인

58. HEROKU 관리도구 설치

59. HEROKU 관리도구 설치

60. HEROKU 관리도구 설치

61. HEROKU 서버에 전송

62. HEROKU 서버에 전송

63. HEROKU 서버에 전송

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

66. HEROKU 서버에 전송

67. HEROKU 서버에 전송

69. [프로젝트명].herokuapp.com

70. 수고하셨습니다.