목록2022/06/15 (2)
hmk run dev
ESM(ES Modules)가 등장하기 전까진 Javascript 모듈화를 네이티브 레벨에서 진행할 수 가 없었습니다. 따라서 개발자들은 번들링(bundling)이라는 우회적인 방법을 사용할 수 밖에 없었습니다. (번들링: 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업) 이 같은 상황에서 webpack, rollip 같은 도구로 번들링 작업을 하며 프론트엔드 개발자의 생산성을 향상 시켰습니다. 하지만, 1000개가 넘는 JavaScript 모듈이 있는 거대한 프로젝트라면 어떨까요? 실제로 이러한 상황을 어렵지 않게 마주할 수 있으며, 이 경우 Webpack과 같은 JavaScript 기반의 도구는 병목 현상이 발생하곤 합니다. (개발 서버를 실행하는 데 있어 비합리적..
웹팩 이전의 script 태그를 가져오는 방식 아래 방식의 단점 1. 변수 이름 충돌의 가능성 script 태그의 module 타입 사용하기 아래처럼 script 태그의 type의 module을 사용하면 변수 충돌 가능성을 배제시킬 수 있다. 각각의 word 변수는 각각 모듈 안에서만 유용하다 아래 방식의 단점 1. 오래된 웹브라우저에서 호환성이 낮다. 2. 자바스크립트 파일을 모두 다운로드 받아야 하므로 리소스 가 많이 든다. hello.js var word = "Hello"; export default word; world.js var word = "World"; export default word; 웹에서도 모듈의 개념을 사용하고, 여러개의 파일을 하나로 묶어 제공하고 싶다는 생각이 반영된 것이 바..