리액트 프로젝트는 처음부터 모든 파일과 설정을 직접 만드는 것이 아니라 기본 구조가 이미 설정된 템플릿(보일러 플레이트)을 사용해 빠르게 시작하는 것이 일반적이다.
리액트 생태계에서는 주로 CRA, Vite를 사용하고 있으며 2025년에는 Vite를 권장한다.
CDN 방식
CDN 방식은 과거에 쓰였던 방식이라 넣었지만 현재는 거의 쓰이지 않는다.
HTML에서 script 태그로 React 라이브러리를 불러오는 방식이다.
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>바벨(Babel)이란?
Babel은 최신 JavaScript(ES6+) 문법과 JSX 문법을 일반 JavaScript 코드로 변환해 주는 트랜스파일러이다. 기본적으로 브라우저는 HTML 파일 안의 <script> 태그에 포함된 순수 JavaScript만 이해할 수 있는데, JSX는 브라우저가 바로 해석할 수 없는 확장 문법이기 때문에 실행 전 변환 과정이 반드시 필요하다. 이 변환 작업을 담당하는 도구가 Babel이다.
ES6+(2015년 이후 등장한 최신 JS 문법들)과 JSX 모두 코드를 더 직관적이고 개발자 친화적으로 작성할 수 있게 도와주지만, 실제 브라우저가 실행하는 대상은 결국 ES5 기반에 가까운 순수 자바스크립트이다. 그래서 React 개발 환경에서는 Babel이 관문 역할을 하게 된다.
참고로 React 초기(0.x 시절)에는 JSX 변환을 react-tools 라는 별도 변환기(JSX Transformer)가 담당했는데, 시간이 흐르면서 이 기능이 자연스럽게 통합되었고 현재(2025년) 기준 개발 생태계에서는 Babel이 사실상 그 역할의 표준 도구가 되었다.
JSX를 CDN 방식으로 직접 실행할 때 <script type="text/babel"> 을 쓰는 것도 같은 이유다. 브라우저에게 “이 스크립트는 먼저 Babel을 거쳐서 변환해야 한다” 라고 알려주는 표시이며, Babel이 JSX/신규 JS 코드를 구형 브라우저에서도 이해 가능한 형태로 바꿔준 뒤 실행을 이어간다.
CDN 방식 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN Example</title>
<!-- React, ReactDOM, Babel 불러오기 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<!-- Babel로 JSX 코드 변환 -->
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
</script>
</body>
</html>CDN 방식의 장단점
장점:
- 설치 없이 바로 실습 가능
단점:
작은 데모는 좋지만 프로젝트가 커질수록 모든 걸 직접 만들어줘야 한다
- index.html 직접 만들고
- script 태그 직접 붙이고
- 각 Component 파일도 직접 .js 로 만들고
- 그걸
<script>로 하나씩 import 해야 하고 - css 파일 링크도 직접 걸어야 하고
- 이미지 경로도 직접 상대경로로 관리해야 하고
- JSX 쓰려면
<script type="text/babel">로 감싸야 하고 - 배포용으로 빌드도 직접 해야 하고
- 파일이 늘어나면
<script>태그가 수십 개가 되어버린다
즉, 폴더 구조도 전부 수동이다. React 앱이 커질수록 구조 정리 자체가 일이 된다.
→ 그래서 CDN 방식은 실제 애플리케이션 개발에는 절대 안 쓴다.
CDN 방식 폴더 구조 예시
my-cdn-app/
├── index.html # 메인 HTML 파일
├── components/ # 수동으로 만든 컴포넌트 폴더
│ ├── Header.js
│ └── Footer.js
├── styles/ # CSS 파일들
│ └── main.css
└── images/ # 이미지 파일들
└── logo.png모든 구조를 개발자가 직접 관리해야 하며, 자동화된 빌드 시스템이 없다.
CRA (Create React App)
npx create-react-app myapp
cd myapp
npm start공식 생성 도구로 2022년까지는 React 프로젝트 생성 표준처럼 사용되었다.
설정 없이 바로 실행되기 때문에 친절하다는 느낌을 주기도 한다.
하지만 2023년부터는 공식적으로 deprecated 되었고, 실무에서도 거의 사용되지 않는다.
CRA는 시작하는 순간, 개발 도구 전체를 한 번에 몽땅 설치한다
- webpack
- babel
- 테스트 환경
- dev server
- react-scripts
- eslint
- hidden config 파일들
이 모든 게 한 번에 설치된다. 그 결과,
- node_modules 폴더가 처음부터 수백 MB로 부풀어 있음
- 새 프로젝트 만들 때마다 패키지 설치 시간 오래 걸림
- 팀원에게 공유해도 node_modules 는 git 에 못 올리니까 팀원도 다시 몇백 MB를 설치해야 함
- 설정 파일이 내부 react-scripts 안에 숨어 있어서 커스터마이징이 거의 불가능
심지어 설정을 꺼내 쓰려면 npm run eject 를 해야 하는데 이건 되돌릴 수 없다. 사실상 "되돌릴 수 없는 해부 수술"이다.
CRA 폴더 구조
my-react-app/
├── node_modules/ # 프로젝트의 모든 npm 패키지들 (수백 MB)
├── public/ # 정적 파일들이 위치하는 폴더
│ ├── index.html # React 애플리케이션의 진입점 HTML 파일
│ └── favicon.ico # 브라우저 탭에 표시될 아이콘
├── src/ # React 컴포넌트와 소스 파일들
│ ├── App.js # 메인 애플리케이션 컴포넌트 ******
│ ├── App.css # App 컴포넌트의 스타일 시트 ******
│ ├── index.js # ReactDOM.render를 통해 App을 렌더링
│ └── index.css # 전역 스타일 시트
├── package.json # 프로젝트 메타데이터 및 의존성 정보
└── README.md # 프로젝트 설명 파일CRA 주요 명령어
npm start # 개발 서버 시작
npm run build # 프로덕션 빌드
npm test # 테스트 실행
npm run eject # 설정 파일 꺼내기 (되돌릴 수 없음!)"그래서 CRA의 불편함을 해결하기 위해 등장한 게 Vite이다."
Vite
CRA의 느림과 과도한 초기 설치 문제를 해결하기 위해 2023년 이후 React 프로젝트 생성의 사실상 표준은 Vite로 넘어왔다.
Vite는 개발 중에는 번들링을 안 한다. 변경된 모듈만 빠르게 변환해서 필요한 브라우저에게 바로 주는 방식이다. 그래서 개발하면서 기다리는 시간이 거의 없다.
현재는 성능 향상을 위해서 vite 도구를 사용해서 프로젝트 생성하고 실행한다. 실 프로젝트는 vite로 생성해서 사용하는 것이 권장된다.
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev명령어 설명
npm create vite@latest→ 최신 버전(@latest)의 Vite를 사용하여 프로젝트 생성my-react-app→ 프로젝트 이름을 my-react-app으로 설정--template react→ Vite가 제공하는 템플릿 중 React 기반 템플릿 사용 (생략가능)
Vite가 빠른 이유
Vite는 구형 번들러 웹팩(webpack) 기반이 아니라 esbuild 라는 초고속 변환기를 사용한다.
그래서 결과가 체감될 정도로 다르다.
npm install훨씬 짧음npm run dev하면 서버가 거의 즉시 뜬다- 코드 저장할 때 새로고침 / HMR 속도가 빠르다
Vite 폴더 구조
- CRA 는 설정이 react-scripts 안에 숨어있지만
- Vite 는 설정이
vite.config.js로 명확히 보인다
내가 지금 어떤 환경 위에서 개발하고 있는지가 눈에 보인다.
my-react-app/
├── node_modules/ # 설치된 패키지 (CRA보다 훨씬 가벼움)
├── public/ # 정적 파일 위치
│ └── vite.svg # 기본 이미지 (favicon 같은 용도)
├── src/ # 소스 코드 디렉토리
│ ├── assets/ # 이미지, CSS 등 정적 자원
│ ├── App.css # App 컴포넌트의 스타일
│ ├── App.jsx # 메인 App 컴포넌트
│ ├── main.jsx # React DOM 렌더링 시작점
│ └── index.css # 전역 CSS
├── .gitignore # Git에서 제외할 파일 목록
├── index.html # HTML 템플릿 (루트에 위치!)
├── package.json # 프로젝트 메타 정보 및 스크립트
├── vite.config.js # Vite 설정 파일 (명확하게 노출)
└── README.md # 프로젝트 설명CRA와의 폴더구조 차이점:
index.html이 루트 디렉토리에 위치.gitignore파일 기본 제공assets폴더로 정적 파일 관리- 설정 파일(
vite.config.js)이 명확하게 노출됨
비교 표
| 구분 | CDN 방식 | CRA (Create React App) | Vite |
|---|---|---|---|
| 환경 | HTML + 스크립트 직접 로드 | Node.js + Webpack | Node.js + ESBuild + Rollup |
| 속도 | 매우 느림 | 느림 | 매우 빠름 ⚡ |
| 설정 난이도 | 쉬움 (하지만 수동 관리 필요) | 쉬움 | 쉬움 (자동 설정) |
| 파일 구조 | 완전 수동 | 복잡 (숨겨진 설정 많음) | 간결하고 투명 |
| JSX 지원 | Babel CDN 필요 | 기본 내장 | 기본 내장 (초고속 변환기 ESBuild 사용) |
| 적합한 용도 | 테스트, 학습용 | 소규모 프로젝트 (현재 비권장) | 중~대형 실무용 ⭐ |
| 빌드 시스템 | 없음 (수동 관리) | Webpack (무거움) | Rollup (가벼움) |
| 초기 설치 | 필요 없음 | 수백 MB | 가벼움 (수십 MB) |
리액트 애플리케이션 실행 과정
- npm run dev로 개발 서버를 실행한다.
- 개발 서버는 index.html 파일을 연다
- index.html 파일은 main.tsx를 연다
- main.tsx에서 App컴포넌트를 읽어 실행한다.
- App 컴포넌트가 웹 브라우저를 화면에 표시한다.
VSCode 개발 환경 세팅(확장 프로그램)
코드 품질 및 생산성 향상을 위한 추천 확장 프로그램:
- ESLint: 코드 품질을 유지하고 일관된 코딩 스타일을 적용
- Prettier: 코드 포맷터로, 코드를 일관된 스타일로 자동 정리
- React.js code snippets: React 코드 스니펫을 제공하여 빠르게 코드 작성 가능
일단 하나만 설치한다면 React.js code snippets를 추천한다.
