{"componentChunkName":"component---src-templates-blog-post-js","path":"/web/201217-Javascript-표준/","result":{"data":{"site":{"siteMetadata":{"title":"Junbyeol Blog","author":"Junsung Yoon","siteUrl":"https://junbyeol.github.io","comment":{"disqusShortName":"","utterances":"junbyeol/junbyeol.github.io"},"sponsor":{"buyMeACoffeeId":"junbyeol"}}},"markdownRemark":{"id":"9d72d762-14aa-52a8-b741-fb780692ea1f","excerpt":"이 글은 윤준성의 개발꼬맹이 시절, 혼자 노션에 공부하며 정리해둔 것 중 괜찮은 것을 추려올린 글입니다.\n기술블로그 글 기고 목적으로 작성되지 않아, 가독성이 좋지 않거나 알 수 없는 워딩이 있을 수 있습니다. https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html https://ahnheejong.name/articles/ecmascript-tc39/ ECMAScript 199…","html":"<blockquote>\n<p>이 글은 윤준성의 개발꼬맹이 시절, 혼자 노션에 공부하며 정리해둔 것 중 괜찮은 것을 추려올린 글입니다.\n기술블로그 글 기고 목적으로 작성되지 않아, 가독성이 좋지 않거나 알 수 없는 워딩이 있을 수 있습니다.</p>\n</blockquote>\n<p><a href=\"https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html\">https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html</a></p>\n<p><a href=\"https://ahnheejong.name/articles/ecmascript-tc39/\">https://ahnheejong.name/articles/ecmascript-tc39/</a></p>\n<h2 id=\"ecmascript\" style=\"position:relative;\"><a href=\"#ecmascript\" aria-label=\"ecmascript permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ECMAScript</h2>\n<ul>\n<li>1990년대 중반, Netscape Navigator가 브라우저에 동적인 부분을 더하기 위해 개발</li>\n<li>1996년, Microsoft가 상표권 이슈를 피하기 위해 JScript라는 자바스크립트의 방언을 개발</li>\n<li>\n<p>이들이 찾아간 곳은 ECMA 인터내셔널(Ecma International)</p>\n<ul>\n<li>정보와 통신 시스템을 위한 국제적 표준화 기구</li>\n<li>ASCII 코드, CD-ROM 볼륨, JSON 등 온갖 표준을 책임지고 있다</li>\n</ul>\n</li>\n<li>이들간의 합의 끝에 ECMA-262(ECMAScript 언어 표준)이라는 표준이 탄생하고, 이를 ECMA 인터네셔널의 산하 위원회, TC39(Technical Committee 39)가 관리하게 된다</li>\n<li>\n<p>2020년 6월까지 ECMA-262의 개정판이 11판 까지 나왔다</p>\n<ul>\n<li>개정 연도에 따라 ECMAScript 2015 혹은 ES2015로 불리는 것.</li>\n<li>또한, 몇번째 개정판인지에 따라 ES6라고 불리기도 한다.</li>\n<li>즉, 2015년에 나온 6번째 개정판이 ES6 == ES2015</li>\n</ul>\n</li>\n</ul>\n<blockquote>\n<p>즉, ECMAScript가 사양이라면, Javascript는 그 구현체.</p>\n</blockquote>\n<h2 id=\"javascript-모듈화\" style=\"position:relative;\"><a href=\"#javascript-%EB%AA%A8%EB%93%88%ED%99%94\" aria-label=\"javascript 모듈화 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Javascript 모듈화</h2>\n<ul>\n<li>원래 자바스크립트는 모듈화가 없었다</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/src/foo.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/src/bar.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/src/baz.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/src/qux.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/src/quux.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<ul>\n<li>\n<p>그래서 여러 js 파일들을 일일이 <script>로 가져와야 하는데, 이는 큰 문제가 있다.</p>\n<ul>\n<li>\n<p>모든 변수들이 전역 컨텍스트에 담긴다</p>\n<ul>\n<li>이름이 같은 두 변수가 있다면.. js 파일 호출 순서에 따라 덮어쓰기가 돼버린다!</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>이를 어떻게 해결해야 하는가? 해결방법은 크게 ES6 전과 후로 나뉜다</li>\n</ul>\n<h2 id=\"es6-이전의-js-모듈화\" style=\"position:relative;\"><a href=\"#es6-%EC%9D%B4%EC%A0%84%EC%9D%98-js-%EB%AA%A8%EB%93%88%ED%99%94\" aria-label=\"es6 이전의 js 모듈화 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ES6 이전의 js 모듈화</h2>\n<ul>\n<li>CommonJS, AMD 등 확장된 Syntax를 지원하는 일종의 애드온을 활용했다</li>\n</ul>\n<aside>\n💡 CommonJS, AMD는 사실 명세일 뿐. 구현체는 따로 있어야 한다. 이 구현체를 우리는 모듈 로더(Module Loader)라고 부른다. AMD의 대표적인 모듈 로더는 RequireJS.\n</aside>\n<ul>\n<li>물론, CommonJS나 AMD를 지원하지 않는 브라우저/엔진 이라면 활용 불가능</li>\n</ul>\n<h3 id=\"commonjs\" style=\"position:relative;\"><a href=\"#commonjs\" aria-label=\"commonjs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CommonJS</h3>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">// CommonJS</span>\n\n<span class=\"token comment\">// 모듈 정의</span>\nmodule<span class=\"token punctuation\">.</span>exports <span class=\"token operator\">=</span> foo<span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 모듈 사용</span>\n<span class=\"token keyword\">const</span> foo <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"./foo\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>동기적인 모듈 호출이 특징</li>\n<li>\n<p>장점</p>\n<ul>\n<li>동기 코드라 직관적</li>\n<li>지금까지도 NodeJS가 이를 채택하고 사용중</li>\n</ul>\n</li>\n<li>\n<p>단점</p>\n<ul>\n<li>비동기보다 느리다</li>\n<li>트리쉐이킹(tree shaking, 임포트 되었지만, 실제로 사용되지 않는 코드를 찾는 최적화 기술)</li>\n<li>\n<p>동기적으로 작동하여, 브라우저에서는 사용할 수 없다</p>\n<ul>\n<li>CommonJS 방식을 브라우저에서 사용하기위한 빌드도구 Browserify도 등장</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h3 id=\"amdasynchronous-module-definition\" style=\"position:relative;\"><a href=\"#amdasynchronous-module-definition\" aria-label=\"amdasynchronous module definition permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AMD(Asynchronous Module Definition)</h3>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">//AMD</span>\n\n<span class=\"token comment\">//모듈 정의</span>\n<span class=\"token function\">defineModule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'util'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>  \n    <span class=\"token function-variable function\">trim</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> \n        <span class=\"token comment\">//</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token function-variable function\">extend</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">//</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">//모듈 사용</span>\n<span class=\"token keyword\">var</span> util <span class=\"token operator\">=</span> <span class=\"token function\">loadModule</span><span class=\"token punctuation\">(</span><span class=\"token string\">'util'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>  \nutil<span class=\"token punctuation\">.</span><span class=\"token function\">trim</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p><a href=\"//todo\">//todo</a> AMD 신택스</p>\n<h2 id=\"es6의-모듈화\" style=\"position:relative;\"><a href=\"#es6%EC%9D%98-%EB%AA%A8%EB%93%88%ED%99%94\" aria-label=\"es6의 모듈화 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ES6의 모듈화</h2>\n<ul>\n<li>ES6에서 드디어 자바스크립트가 모듈화를 지원!</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token comment\">// ES6</span>\n<span class=\"token keyword\">import</span> foo <span class=\"token keyword\">from</span> <span class=\"token string\">\"bar\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> qux<span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>\n<p>장점</p>\n<ul>\n<li>동기/비동기 로드를 모두 지원</li>\n<li>간단한 문법</li>\n<li>실제 객체/함수를 바인딩하기에 순환 참조 관리가 편리</li>\n<li>코드 정적 분석(코드를 실행하지 않기 전에 하는 분석)이 가능하여, 트리 쉐이킹이 가능</li>\n</ul>\n</li>\n<li>\n<p>단점</p>\n<ul>\n<li>\n<p>비교적 최근에 정의된 문법이라 구형 브라우저가 구현하지 않을 수 있음</p>\n<ul>\n<li>그래서 CommonJS, AMD, ES6를 모두 지원하는 SystemJS가 나오기도..</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"트랜스파일러\" style=\"position:relative;\"><a href=\"#%ED%8A%B8%EB%9E%9C%EC%8A%A4%ED%8C%8C%EC%9D%BC%EB%9F%AC\" aria-label=\"트랜스파일러 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>트랜스파일러</h2>\n<ul>\n<li>ES6 문법으로 일단 js 코드를 작성</li>\n<li>\n<p>트랜스파일러가 이 코드를 옛날 js코드로 바꿔주면 구형 브라우저에서도 쓸 수 있다!</p>\n<ul>\n<li>가장 유명한 트랜스파일러가 바벨(babel)</li>\n</ul>\n</li>\n<li>\n<p>트랜스파일러가 있으면 꼭 js로 짤 필요도 없지!</p>\n<ul>\n<li>TypeScript, CoffeeScript 같은 자바스크립트의 슈퍼셋 언어로 코드를 작성하자!</li>\n</ul>\n</li>\n</ul>","frontmatter":{"title":"Javascript 표준","date":"December 17, 2020"}}},"pageContext":{"slug":"/web/201217-Javascript-표준/","previous":{"fields":{"slug":"/language/201123-함수형-프로그래밍/"},"frontmatter":{"title":"함수형 프로그래밍"}},"next":null}}}