[JS] CommonJS와 ESM을 모두 지원하는 라이브러리 만들기 (Feat. Vite)

모듈 시스템의 역사JavaScript 모듈 시스템은 크게 CommonJS와 ES Module(ESM)로 나뉩니다. 이 중 먼저 등장한 것은 CommonJS입니다. CommonJS원래 JavaScript는 모듈 시스템을 지원하지 않았습니다. 여러개의 script 태그를 이용하여 라이브러리들을 가져온다고 하더라도 모두 하나의 전역에서 객체를 정의하는 방식이었습니다. 이 방식은 당연히 변수명이 겹치는 등 많은 문제점이 있었습니다. 그래서 등장한 것이 CommonJS 모듈 시스템입니다. CommonJS는 다음과 같은 방식으로 모듈을 불러오고 내보냅니다.// add.jsmodule.exports.add = (x, y) => x + y;// index.jsconst { add } = require('./add')..

• format_list_bulleted JS
• · 2025. 3. 28.

[JS] webpack, babel로 개발환경 구축하기

우리가 React나 Next 앱을 만들 때 보통 세가지 방법을 씁니다. create-react-app (React)Vite (React)create-next-app (Next.js)위의 것들로 프로젝트를 만들면 npm build 혹은 npm run build 명령어 한번으로 빌드가 완료됩니다. 빌드를 위해 필요한 모든 설정과 과정이 하나의 명령어로 압축되어 있기 때문입니다. 개발할 때는 CRA나 CNA로 프로젝트를 시작하면 해당 프레임워크에 최적화된 옵션으로 빌드 설정을 해주기 때문에 보통은 해당 명령어로 프로젝트를 시작하는 것이 좋습니다. 하지만 빠르게 변하는 프론트엔드 생태계에서 현재 널리 사용되고 있는 도구가 언제 또 바뀔지 모르기 때문에, 도구를 사용할 줄 아는 것을 넘어서 그 내부 작동 원리를..

• format_list_bulleted JS
• · 2024. 12. 4.