모듈

이전 게시글에서 확장자 문제에 부딪혔고, 이런 문제를 해결해보고자 했다. 이를 이해하기 위해서는 이 문서를 읽는게 직빵이었는데, 이 글에 해당 내용을 담으려고 읽다가 보니 그냥 번역해서 오픈소스에 기여해보는게 좋을거란 생각이 들어서 해보았다. https://github.com/microsoft/TypeScript-Website-Localizations/pull/224 #6 Translate module-reference/Theory.md to korean by d0422 · Pull Request #224 · microsoft/TypeScript-Website-Localizationsen Theory 리뷰 요청합니다 : @yeonjuan @bumkeyy ref #6 감사합니다. 처음 해보는거라 잘 모르는..

기존에 웹서버를 직접 구현해봤었는데, 이제는 그 원리를 알았으니, 이미 만들어진 좋은 도구를 사용해야할 때라고 생각해서 번들러를 도입하고자 했다. 그러던 중, 어떻게 번들링이 일어나는지 의문이 생겼고, 번들링 과정에 대해 찾아보게됐다. 번들러를 왜쓰고, 기능은 무엇이 있으며, 어떻게 번들링이 일어나는지 알아보자. 번들러 왜쓰는데 React, Angular, Vue 등 프레임워크가 등장하고, 점점 js파일이 많아지면서 하나의 페이지에서 사용되는 js파일들이 엄청나게 많아지기 시작했다.이러면 한 페이지가 로드될때 모든 js파일을 네트워크를 통해 받아와야 한다. 번들링 없이 ESM만을 사용해 만든 프로젝트의 경우, 이런식으로 모든 js파일을 http요청을 통해 받아오는 것을 확인할 수 있다. 이 모든 파일을 ..

48 모듈 모듈이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드조각을 말한다. 이는 파일 단위로 분리한다. 모듈이 성립하기 위해서는 모듈 자신만의 파일 스코프를 가져야 한다. JS와 모듈 파일마다 독립적인 파일 스코프를 가지지 않음 파일을 분리해서 script로 로드해도 독자적인 스코프를 가지지 않음 ⇒ 변수 중복 등의 문제 발생 CommonJS와 AMD진영해서 각각 해결 방안을 제시함 NodeJS는 CommonJS를 택하여 기본적으로 NodeJS에서는 파일별로 독립적인 파일 스코프를 가짐 ES6 모듈(ESM) 브라우저에서도 동작하는 모듈 기능을 추가함 브라우저script 태그에 type=”module”이라는 어트리뷰트를 추가하면, 해당 스크립트는 모듈로 작동한다. 다만, 일반적인 js파일이..