ES6 & AMD & CommonJS & Babel

1. LEARN MODULE WITH ES6
Seonghoon Baek

2. Frontend Developer
OpenSource
- Webpack document-team
- Webpack-korea Owner
- Translator
Speaker
- 2017 Google Developers Group
CSS & BEM
https://github.com/Lutece

3. WHAT ABOUT?
➤ Set node environment to
express
➤ Module
➤ ES6 Module
➤ Export
➤ Import
➤ ES6 Module 실습
➤ Non-standard Module System
➤ Babel & Transpiling
➤ Babel 실습

4. HELLO EXPRESS

5. SET NODE ENVIRONMENT TO EXPRESS
1. https://nodejs.org/ko/download/
2. 명령 프롬프트에서 Node 확인하기
$ node -v
3. 프로젝트 폴더 생성
4. npm init
5. npm install express
6. index.html 파일 생성
7. server.js 파일 생성
https://github.com/Lutece/examples/tree/module_env

6. SET NODE ENVIRONMENT TO EXPRESS
Server.js
package.json
Complete !!!

7. MODULE

8. WHAT IS MODULE?
용도에 따라 여러 코드조각들을 파일 단위로 나눠 분류한 것.
따라서 파일 단위로 분류된 각각의 것들을 Module 이라고 할 수 있습니다.

9. WHAT IS MODULE?
피자 만들기
피자 주문하기
피자 배달하기
피자

10. ES6 MODULE

11. ES6 MODULE
Module의 특성을 담고 있는 Javascript 파일을 의미합니다.

12. 1. Module로써 사용되는 공간은 export, import 문을 사용할 수 있습니다.
2. Strict Mode를 인식합니다. (선언하지 않아도)
3. 파일 별로 Scope 영역을 갖게 됩니다.
4. export, import 는 Top-level 영역에서만 사용이 가능합니다.
ES6 MODULE 의 특징

13. ES6 MODULE 의 특징
“use strict”

14. 실습

15. ES6 MODULE - EXPORT

16. EXPORT
Export 문은 Module 안에 선언된 것들을
외부에 공개해주는 역할을 합니다.

17. EXPORT

18. EXPORT

19. EXPORT

20. EXPORT 예문
https://github.com/Lutece/examples/blob/module-export/module/export.js

21. IMPORT
Import 문은 외부에 있는 Module 안에서 export된 것들을
내부로 가져오는 역할을 합니다.

22. IMPORT
Import

23. IMPORT

24. EXPORT, IMPORT 실습

25. 실습
plus.js
multiple.js
main.js
x => x + x
(x, y) => x * y
Plus(3);
Multiple(2,4);

26. 실습 - 힌트

27. NON-STANDARD-MODULE-SYSTEM

28. NON-STANDARD-MODULE-SYSTEM

29. NON-STANDARD-MODULE-SYSTEM

30. NON-STANDARD-MODULE-SYSTEM
WE NEED STANDARD!!!!

31. NON-STANDARD-MODULE-SYSTEM
STANDARD = MODULE

32. NON-STANDARD-MODULE-SYSTEM

33. NON-STANDARD-MODULE-SYSTEM

34. NON-STANDARD-MODULE-SYSTEM
AMD

35. NON-STANDARD-MODULE-SYSTEM

36. NON-STANDARD-MODULE-SYSTEM
AMD

37. NON-STANDARD-MODULE-SYSTEM
AMD

38. NON-STANDARD-MODULE-SYSTEM
Import, export

39. NON-STANDARD-MODULE-SYSTEM
Import, export

40. BABEL & TRANSPILE

41. BABEL & TRANSPILE

42. BABEL & TRANSPILE
Transpiling
Tool

43. TRANSPILE

44. BABEL & TRANSPILE
Transpile
1. ES6,7.. => ES5

45. BABEL & TRANSPILE
Transpile

46. 실습

47. BABEL & TRANSPILE
https://github.com/Lutece/examples/tree/module-babel

48. NON-STANDARD-MODULE-SYSTEM
참고 자료 http://d2.naver.com/helloworld/12864