차세대 빌드 툴, Vite2020년 Vite 출시 이후 현재까지 Vite의 점유율이 빠르게 증가하고 있습니다.Webpack은 오랫동안 표준 빌드 툴로 자리잡았지만, 점점 많은 개발자들이 Vite로 전환하고 있습니다. 왜 빠를까?Vite가 빠른 이유는 기존 Webpack의 문제점을 해결하고 보다 효율적인 방식으로 모듈을 처리하기 때문입니다. Webpack프로젝트의 모든 파일을 번들링 한 후 실행 Vitedependencies와 source code 두 가지 카테고리로 나누어 개발 서버의 시작 시간 개선 dependencies개발 시 내용이 바뀌지 않을 일반적인 JavaScript 코드, 기존 번들러로는 몇 백개의 JavaScript 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었..

Webpack의 시대는 갔다 ?지난 2월 14일, Create-React-App은 더 이상 사용할 수 없도록 지원이 중단되었습니다 (관련링크)  React는 공식적으로 새로운 리액트 앱 프로젝트를 생성할 때 Next.js 혹은 Remix 등의 프레임워크 툴을 활용해 만드는 것을 추천하고있습니다.  그렇다면, 프레임워크에 의존하지 않고 리액트 프로젝트를 만들 순 없을까요 ? 이에 대해서도 리액트는 대안책을 제시했습니다. (링크)   그러나 슬프게도 리액트가 제시하는 빌드 툴에는 webpack이 존재하지 않습니다.그렇다면, 현재 대부분의 개발자들이 webpack을 사용하지 않는 것일까요 ?  절대 아닙니다.  webpack은 무려 13년 전부터 사용된 번들러로, 2025년 현재까지도 높은 점유율을 차지하고 ..

패키지 매니저란?💡 자바스크립트 프로젝트에서 사용되는 의존성 관리 도구입니다패키지 매니저는 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할을 합니다패키지 매니저의 역할패키지 설치npm install react@latest패키지 매니저를 사용하여 프로젝트에 필요한 패키지를 설치할 수 있습니다. 패키지는 일반적으로 오픈소스 라이브러리이며, 패키지 매니저를 통해 패키지의 이름 또는 버전을 지정하여 설치할 수 있습니다.버전 관리npm install react@18.0.5패키지 매니저는 패키지의 다양한 버전을 관리합니다. 이를 통해 특정 버전의 패키지를 설치하거나 업데이트 할 수 있으며, 프로젝트가 정확한 버전의 패키지를 사용하도록 보장할 수 있습니다.스크립트 실행npm ..

npm install -D @babel/core @babel/cli바벨이 설치되면 node_modules / .bin / babel 이 있는 것을 알 수 있다.이제 app.js를 만들고 코드를 쳐본다// app.jsconst alert = (msg) => window.alert(msg);그리고 바벨을 실행시켜본다.npx babel app.jsapp.js에 작성했던 코드가 잘 나오는 것을 알 수 있다.바벨은 세 단계로 빌드를 진행한다.파싱 (Parsing)코드를 읽고 AST(추상 구문 트리)로 변환하는 단계를 ‘파싱’이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데, 컴파일러 이론에 사용되는 개념이다.변환 (Transforming)추상 구문 트리를 변경하는 것을 ‘변환’ 단계로, 실제 코드를..