파이썬으로 만든 CLI 도구에서 --version만 찍어 봐도 묘하게 굼뜬 느낌을 받은 적 없으신가요? 🤔 버전 문자열 하나 출력하는 데 쓰지도 않을 asyncio나 urllib.request 같은 모듈까지 전부 불러오고 있기 때문인데요. 파이썬의 import 문은 실행되는 순간 모듈을 찾아서 끝까지 실행하기 때문에, 파일 맨 위에 적어 둔 모듈은 쓰든 안 쓰든 시작할 때 모두 비용을 치릅니다. 그래서 지금까지는 무거운 모듈을 함수 안에서 import하는 꼼수를 많이 써 왔습니다. 실제로 파이썬 표준 라이브러리에서도 테스트를 뺀
자바스크립트에서 모듈을 불러올 때 보통 파일 맨 위에 import 문을 작성하죠. 이 방식은 간결하고 직관적이지만 항상 파일의 최상단에 위치해야 하고 조건에 따라 불러올 모듈을 바꾸는 게 불가능합니다. 앱 규모가 커지면서 모든 모듈을 한꺼번에 불러오는 것이 성능 문제로 이어지기도 하는데요. 이런 상황에서 빛을 발하는 게 바로 Dynamic Import, import() 표현식입니다. 이 글에서는 import()의 기본 사용법부터 코드 분할, React에서의 활용까지 차근차근 살펴보겠습니다. 정적 import/export 문법이 아직
자바스크립트 생태계에서 모듈 시스템은 꽤 오랜 기간 혼란스러운 주제였는데요. Node.js가 처음부터 채택한 CommonJS의 require와 ES6에서 도입된 import가 공존하면서, 개발자들은 환경에 따라 두 가지 방식을 오가야 했습니다. 위 두 코드는 동일하게 ExpressJS 라이브러리를 불러와 서버 객체를 생성하고 있지만, 사용하는 모듈 시스템이 다릅니다. Node.js 초기에는 ES 모듈을 쓰려면 Babel 같은 트랜스파일러가 필수였지만, 버전 13.2부터 ES 모듈이 정식 지원되기 시작했고, 새로 시작하는 프로젝트에서
자바스크립트로 개발하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, import는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. 예를 들어, 위 두 코드는 Expres
자바스크립트로 개발하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, import는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. 예를 들어, 위 두 코드는 Expres