"리액트를 배우고 싶은데, 시작부터 막히시나요?"
웹 개발의 표준이 된 리액트(React), 하지만 프로젝트를 생성하는 방법부터
고민이 시작됩니다.
과거의 표준이었던 CRA(Create React App)와 현재 가장
핫한 Vite(비트) 사이에서 무엇을 선택해야 할까요?
오늘 이 글 하나로 여러분의 고민을 완벽하게 해결해 드리겠습니다.
웹 개발에 입문하시는 분들이 가장 어려워하는 것이 바로
'초기 환경 설정'입니다.
복잡한 설정 없이 명령줄 한 줄로 리액트 세상을 여는 방법을 지금부터
차근차근 알아보겠습니다.
🐢 1. 전통의 강자, CRA (Create React App)
리액트를 처음 배우는 튜토리얼에서 가장 많이 보셨을 이름, 바로
CRA입니다.
Facebook(현 Meta)에서 공식적으로 만든 리액트 프로젝트 생성 도구입니다.
📌 CRA의 특징
-
✅ 안정성: 오랫동안 사용되어 온 만큼 참고 자료가
방대합니다.
-
✅ 올인원: Webpack, Babel 등 복잡한 설정이 모두
숨겨져 있어 초보자가 신경 쓸 필요가 없습니다.
-
⚠️ 단점: 프로젝트 규모가 커질수록 빌드 속도가 현저히
느려집니다.
⚡ 2. 압도적인 속도, Vite (비트)
최근 프론트엔드 개발자들 사이에서
사실상의 표준(De Facto Standard)으로 자리 잡고 있는
도구입니다.
프랑스어로 '빠르다'는 뜻을 가진 Vite는 그 이름값을 톡톡히 해냅니다.
📌 Vite의 특징
-
✅ 초고속: 브라우저의 기본 기능(ES Modules)을
활용하여 서버 구동 시간이 거의 0초에 가깝습니다.
-
✅ 가벼움: 불필요한 의존성이 적어 설치도 빠르고
프로젝트도 가볍습니다.
- ✅ 최신 트렌드: 대부분의 최신 리액트 강의와 실무 프로젝트는 Vite를 권장합니다.
⚖️ 3. 한눈에 보는 CRA vs Vite 비교
두 도구의 차이점을 표로 정리해 보았습니다.
왜 Vite를 써야 하는지 확실히 알 수 있습니다.
| 구분 | CRA (Webpack) | Vite (ESBuild) |
|---|---|---|
| 개발 서버 구동 속도 | 느림 (수십 초 소요) | 즉시 실행 (ms 단위) |
| 빌드 도구 | Webpack (무거움) | ESBuild (Go 언어 기반, 빠름) |
| 환경 변수 설정 | 다소 복잡함 | 매우 간편함 |
👉 결론: 특별한 이유가 없다면, 무조건
Vite를 선택하세요!
🚀 4. 3분 완성! Vite로 리액트 설치하기
이제 직접 설치해 볼 시간입니다.
준비물은 Node.js가 설치된 컴퓨터 하나면 충분합니다.
STEP 1. 터미널 열기
VS Code의 터미널이나 윈도우의 PowerShell, 맥의 터미널을 열어주세요.
STEP 2. 설치 명령어 입력
* 'my-react-app' 부분은 여러분이 원하는 프로젝트 이름으로 바꾸셔도
됩니다.
STEP 3. 프로젝트 폴더로 이동 및 실행
npm install
npm run dev
위 명령어를 순서대로 입력하면
Local: http://localhost:5173/ 주소가 나타납니다.
해당 주소를 클릭하면 리액트 로고가 빙글빙글 돌아가는 화면을 만날 수
있습니다.
🎓 마치며
"시작이 반이다"라는 말처럼, 환경 설정만 끝내도 이미 훌륭한 개발자의 첫발을 떼신 겁니다.
댓글 쓰기