Skip to content

Changes

Page history
Update AdvancedModule&basicBabel authored by serendipia's avatar serendipia
Show whitespace changes
Inline Side-by-side
AdvancedModule&basicBabel.md
View page @ 7e0b99be
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
5. AMD 5. AMD
다른 모듈 포맷으로 UMD 등도 있지만, 보지 않을 겁니다. 다른 모듈 포맷으로 UMD 등도 있지만, 보지 않을 겁니다.
![](https://scontent-sea1-1.cdninstagram.com/vp/c627355c96c16212fa3b04a564a00519/5CD52B34/t51.2885-15/e35/41086482_1869265183167393_2694830420924312265_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&ig_cache_key=MTg2MjIyOTczOTMzMTI3MzcyMQ%3D%3D.2) ![](https://scontent-sea1-1.cdninstagram.com/vp/c627355c96c16212fa3b04a564a00519/5CD52B34/t51.2885-15/e35/41086482_1869265183167393_2694830420924312265_n.jpg?_nc_ht=scontent-sea1-1.cdninstagram.com&ig_cache_key=MTg2MjIyOTczOTMzMTI3MzcyMQ%3D%3D.2)
## Object Literal ## Object Literal
...@@ -74,6 +75,7 @@ EcmaScript5 및 이전 버전은 모듈을 염두해두고 디자인되지 않 ...@@ -74,6 +75,7 @@ EcmaScript5 및 이전 버전은 모듈을 염두해두고 디자인되지 않
``` ```
이건... IIFE...? 이건... IIFE...?
![](http://ext.fmkorea.com/files/attach/new/20170811/486616/638771632/739224727/99b983892094b5c6d2fc3736e15da7d1.jpg) ![](http://ext.fmkorea.com/files/attach/new/20170811/486616/638771632/739224727/99b983892094b5c6d2fc3736e15da7d1.jpg)
즉시호출함수표현식(Immediately-Invoked-Function-Expressions)는 함수를 선언하고, 선언한 함수를 그 즉시 호출합니다. 함수는 새로운 **스코프**를 생성하고, `privacy`(정보를 보호 할 수 있는 성질)을 생성합니다. `privacy`에 대해서는 1분 뒤에 다시 볼게요. 즉시호출함수표현식(Immediately-Invoked-Function-Expressions)는 함수를 선언하고, 선언한 함수를 그 즉시 호출합니다. 함수는 새로운 **스코프**를 생성하고, `privacy`(정보를 보호 할 수 있는 성질)을 생성합니다. `privacy`에 대해서는 1분 뒤에 다시 볼게요.
...@@ -163,7 +165,7 @@ const Module = (function() { ...@@ -163,7 +165,7 @@ const Module = (function() {
Module.publicMethod(); // 이렇게 접근할 수 있습니다. Module.publicMethod(); // 이렇게 접근할 수 있습니다.
``` ```
[privacy 정복하고 가즈아](http://yubylab.tistory.com/entry/%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-for-javascript-Module-Pattern) [click - privacy 정복하고 가즈아](http://yubylab.tistory.com/entry/%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B4-for-javascript-Module-Pattern)
모듈 패턴이라하면, javascript 의 모듈 패턴은 일반적인 유효범위를 설정하는 언어에서와 같이 private 와 public 등의 캡슐화를 사용하는 방법이며, namespace를 사용하여 javascript 에서 함수 혹은 변수객체를 다룰때 중복된 name 사용으로 인한 문제를 방지할 수 있다고 생각하시면 될 것 같습니다. 모듈 패턴이라하면, javascript 의 모듈 패턴은 일반적인 유효범위를 설정하는 언어에서와 같이 private 와 public 등의 캡슐화를 사용하는 방법이며, namespace를 사용하여 javascript 에서 함수 혹은 변수객체를 다룰때 중복된 name 사용으로 인한 문제를 방지할 수 있다고 생각하시면 될 것 같습니다.
...@@ -312,11 +314,11 @@ EcmaScript6 또는 ES2015 이전에 자바스크립트는 모듈을 정의하기 ...@@ -312,11 +314,11 @@ EcmaScript6 또는 ES2015 이전에 자바스크립트는 모듈을 정의하기
### CommonJS & AMD ### CommonJS & AMD
[CommonJS와 AMD](https://d2.naver.com/helloworld/12864) [click - CommonJS와 AMD](https://d2.naver.com/helloworld/12864)
![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS10xxwEviJQcWauIab8wpmz7qpDLKB1dnhBbKXTau51D20pbxBqg) ![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS10xxwEviJQcWauIab8wpmz7qpDLKB1dnhBbKXTau51D20pbxBqg)
[CommonJS 조금 더 알아보기](http://www.daleseo.com/js-module-require/) [click - CommonJS 조금 더 알아보기](http://www.daleseo.com/js-module-require/)
- CommonJS - CommonJS
...@@ -381,7 +383,7 @@ require(["My"], function(My) { ...@@ -381,7 +383,7 @@ require(["My"], function(My) {
![](http://optimal.inven.co.kr/upload/2018/03/07/bbs/i14016573499.jpg) ![](http://optimal.inven.co.kr/upload/2018/03/07/bbs/i14016573499.jpg)
[CommonJs 와 ESM 코드 비교](https://jsmodules.io/cjs.html) [click - CommonJs 와 ESM 코드 비교](https://jsmodules.io/cjs.html)
# 모듈 번들러 & 모듈 로더 # 모듈 번들러 & 모듈 로더
...@@ -474,7 +476,7 @@ loadScript("file1.js", function() { ...@@ -474,7 +476,7 @@ loadScript("file1.js", function() {
심장에 안와닿습니다.. 더 설명해주세요 심장에 안와닿습니다.. 더 설명해주세요
**스택오버플로우에서 본 답변을 번역해봤습니다. 이 답변 덕분에 쪼끔 이해가 되었습니다.** ##### 스택오버플로우에서 본 답변을 번역해봤습니다. 이 답변 덕분에 쪼끔 이해가 되었습니다.
SystemJS는 모듈이 필요한 순간에 모듈을 로드합니다. 처음부터 모든 모듈을 로드하지 않고 해당 모듈이 필요한 그 순간, 로드할 수 있게 해주는 모듈 로더입니다. SystemJS는 모듈이 필요한 순간에 모듈을 로드합니다. 처음부터 모든 모듈을 로드하지 않고 해당 모듈이 필요한 그 순간, 로드할 수 있게 해주는 모듈 로더입니다.
...@@ -492,7 +494,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더 ...@@ -492,7 +494,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더
오잉.. 그럼 번들링이 훨씬 조은거 아니에여..? 오잉.. 그럼 번들링이 훨씬 조은거 아니에여..?
**여기 또다른 의견을 번역해봤습니다.** ##### 여기 또다른 의견을 번역해봤습니다.
![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl3crhTwkj-dE4xiGpK9OKrqmj_VpUrGWeN-Vw0od2f47tOR_2) ![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl3crhTwkj-dE4xiGpK9OKrqmj_VpUrGWeN-Vw0od2f47tOR_2)
...@@ -504,7 +506,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더 ...@@ -504,7 +506,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더
때문에 모듈 번들러를 사용할지 모듈 로더를 사용할지는 실제로 테스트를 거쳐 나온 데이터에 기반하여 선택하시면 됩니다. 때문에 모듈 번들러를 사용할지 모듈 로더를 사용할지는 실제로 테스트를 거쳐 나온 데이터에 기반하여 선택하시면 됩니다.
라고 했습니다. 라고 하시더군요.
## webpack ## webpack
...@@ -518,7 +520,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더 ...@@ -518,7 +520,7 @@ SystemJS는 모듈 파일들을 lazy하게 로딩하기만하는 모듈 로더
![웹팩 번들링 그림](https://t1.daumcdn.net/cfile/tistory/9915694B5A33349630) ![웹팩 번들링 그림](https://t1.daumcdn.net/cfile/tistory/9915694B5A33349630)
[웹팩의 기본 개념](http://blog.jeonghwan.net/js/2017/05/15/webpack.html) [click - 웹팩의 기본 개념](http://blog.jeonghwan.net/js/2017/05/15/webpack.html)
--- ---
...@@ -696,7 +698,7 @@ npm install babel-preset-env ...@@ -696,7 +698,7 @@ npm install babel-preset-env
] ]
``` ```
[브라우저 리스트](https://github.com/browserslist/browserslist) > [브라우저 리스트](https://github.com/browserslist/browserslist)
아직 공식 스펙에서 지원하지 않은 기능들을 transform-plugin을 추가하여 사용할 수 있습니다. 여러 플러그인은 babel 공식 홈페이지에서 확인실 수 있습니다. 추가로 설치한 플러그인은 plugins 옵션으로 추가할 수 있습니다. 아직 공식 스펙에서 지원하지 않은 기능들을 transform-plugin을 추가하여 사용할 수 있습니다. 여러 플러그인은 babel 공식 홈페이지에서 확인실 수 있습니다. 추가로 설치한 플러그인은 plugins 옵션으로 추가할 수 있습니다.
...@@ -706,7 +708,7 @@ npm install babel-preset-env ...@@ -706,7 +708,7 @@ npm install babel-preset-env
## babel polyfill ## babel polyfill
바벨을 사용하면 새로운 문법을 구형 자바스크립트 문법으로만 바꿔줍니다. 바벨을 사용하면 문법만 새로운 것에서 구형 것으로 바꿔줍니다. 문법만요.
![](https://scontent-lga3-1.cdninstagram.com/vp/61d45647dce8d8d0cdaf225dbe5dc9f8/5CBACC24/t51.2885-15/e35/c0.20.492.492/49290808_341489233111280_1292483849175136503_n.jpg?_nc_ht=scontent-lga3-1.cdninstagram.com) ![](https://scontent-lga3-1.cdninstagram.com/vp/61d45647dce8d8d0cdaf225dbe5dc9f8/5CBACC24/t51.2885-15/e35/c0.20.492.492/49290808_341489233111280_1292483849175136503_n.jpg?_nc_ht=scontent-lga3-1.cdninstagram.com)
...@@ -791,11 +793,11 @@ npm run build 명령을 수행할 때 babel을 실행하고, src 폴더에 있 ...@@ -791,11 +793,11 @@ npm run build 명령을 수행할 때 babel을 실행하고, src 폴더에 있
이제 구형 브라우저에서는 src 폴더 대신 lib 폴더에 있는 자바스크립트 파일을 사용하면 됩니다. 코딩은 src 폴더에서 ES2015 스타일로 하면 되고요. 당연한 소리이지만 폴더 이름은 src, lib으로 고정되어있는 것이 아니라 사용자 마음대로입니다. 이제 구형 브라우저에서는 src 폴더 대신 lib 폴더에 있는 자바스크립트 파일을 사용하면 됩니다. 코딩은 src 폴더에서 ES2015 스타일로 하면 되고요. 당연한 소리이지만 폴더 이름은 src, lib으로 고정되어있는 것이 아니라 사용자 마음대로입니다.
[바벨 명령어](https://babeljs.io/docs/en/babel-cli/) >[바벨 명령어](https://babeljs.io/docs/en/babel-cli/)
> NOTE: create-react-app 은 기본적인 바벨 세팅이 되어있어 별도의 설정 없이도 손쉽게 사용할 수 있는 장점이 있다고합니다! > NOTE: create-react-app 은 기본적인 바벨 세팅이 되어있어 별도의 설정 없이도 손쉽게 사용할 수 있는 장점이 있다고합니다!
[바벨7이 업그레이 된 점](https://www.slideshare.net/ssuser2295821/babel-7) > click - [바벨7이 업그레이 된 점](https://www.slideshare.net/ssuser2295821/babel-7)
##### 끝나따!!! ##### 끝나따!!!
......