이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를
Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로 웹 프로젝트를 시작하는 아주 기초적인 방법을 알려드리겠습니다. Vite란? Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험
자바스크립트에서 모듈을 불러올 때 보통 파일 맨 위에 import 문을 작성하죠. 이 방식은 간결하고 직관적이지만 항상 파일의 최상단에 위치해야 하고 조건에 따라 불러올 모듈을 바꾸는 게 불가능합니다. 앱 규모가 커지면서 모든 모듈을 한꺼번에 불러오는 것이 성능 문제로 이어지기도 하는데요. 이런 상황에서 빛을 발하는 게 바로 Dynamic Import, import() 표현식입니다. 이 글에서는 import()의 기본 사용법부터 코드 분할, React에서의 활용까지 차근차근 살펴보겠습니다. 정적 import/export 문법이 아직
ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(Node.js)에서 실행이 안 되서 애를 먹는 경우가 종종 있는데요. 이번 포스팅에서는 자바스크립트 트랜스파일러(Transpiler)인 Babel을 이용하여 이 문제를 깔끔하게 해결해보겠습니다. 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서는 별도 포스팅을 참고바랍니다. Node.js에서 ES6 코드 실행 오류 먼저 간단한 예제 프로젝트를 하나를 만들겠습니다. js
자바스크립트 생태계에서 모듈 시스템은 꽤 오랜 기간 혼란스러운 주제였는데요. Node.js가 처음부터 채택한 CommonJS의 require와 ES6에서 도입된 import가 공존하면서, 개발자들은 환경에 따라 두 가지 방식을 오가야 했습니다. 위 두 코드는 동일하게 ExpressJS 라이브러리를 불러와 서버 객체를 생성하고 있지만, 사용하는 모듈 시스템이 다릅니다. Node.js 초기에는 ES 모듈을 쓰려면 Babel 같은 트랜스파일러가 필수였지만, 버전 13.2부터 ES 모듈이 정식 지원되기 시작했고, 새로 시작하는 프로젝트에서
자바스크립트로 개발하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, import는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. 예를 들어, 위 두 코드는 Expres