📖 TIL - "Vite & CRA야 고마워..." React 환경 구축기

📌 문제 설명

React 개발 환경 구축기.
CRA나 Vite의 도움 없이 순수하게 React 환경을 구축해보면서 겪은 시행착오와 해결 과정을 기록합니다.

🤔 개발 과정과 문제 해결

1. 기본 환경 구성

• no-cra 폴더 생성
• index.html에 root div 추가
• React와 ReactDOM CDN 추가

CDN으로 추가하는 이유?
1. 빠른 시작 - npm install 없이 React 개발 환경을 빠르게 세팅
2. UMD 버전 - 브라우저 환경에서 바로 사용 가능한 형식으로 빌드됨
3. 웹팩이나 바벨 같은 빌드 도구 없이도 React 사용 가능

2. 첫 번째 난관: JSX 문법 에러

// SyntaxError: Unexpected token '<'
// JSX는 자바스크립트 문법이 아닌, 확장 문법이었다...

3. 해결 시도

방법 1: 순수 React 구문으로 작성

const App = () => React.createElement('h1', null, 'Hello, React without CRA!');
ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));

방법 2: Babel 도입

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

"transformScriptTags.ts:253 You are using the in-browser Babel transformer..."
브라우저에서 실시간 변환은 비효율적이라고 경고가 뜬다!

4. Babel 정식 설정

npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-react

// .babelrc
{
  "presets": ["@babel/preset-react"]
}

5. 번들러 도입 계기

"잠깐... 파일이 100개 이상이면? 실제 브라우저는 한 번에 6개씩 네트워크 요청을 가져오는데,
사용자가 구닥다리 네트워크를 사용하면... 어떡하지?"

npm install --save-dev webpack webpack-cli babel-loader

6. Webpack 설정의 진화

기본 설정

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  // ...
}

캐시 문제 해결

// 파일명에 해시값 추가
filename: "bundle.[contenthash].js"

7. 플러그인으로 기능 확장

HTML 자동 생성

npm install --save-dev html-webpack-plugin

이전 번들 파일 정리

npm install --save-dev clean-webpack-plugin

HMR 설정

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
    open: true,
    hot: true,
}

8. 환경변수 관리

# .env.development
APP_API_URL=https://dev-api.example.com

# .env.production
APP_API_URL=https://api.example.com

npm install --save-dev dotenv-webpack cross-env

✨ 새롭게 배운 점

1. 트랜스파일러와 번들러의 차이

   • Babel: JSX → 순수 JavaScript
   • Webpack: 여러 파일을 하나로 묶기

2. 브라우저 캐시 전략

   • contenthash로 파일명 동적 생성
   • 캐시 무력화 방법

3. 환경별 설정 관리

   • development vs production
   • cross-env로 크로스 플랫폼 호환성

4. 웹팩 플러그인 시스템

   • 플러그인은 동기적 실행
   • 순서가 중요한 이유

🚀 이런 점이 효율적이에요

• 모든 빌드 과정 자동화
• 환경별 최적화 가능
• HMR로 개발 생산성 향상
• 불필요한 파일 자동 정리

⭐️ 마무리 생각

직접 다루어본 React 환경 구축기...정리하고 용어 찾고, 검색하다보니 생각보다 오래걸렸지만
덕분에 CRA및 Vite가 해주는 일들을 완벽하게 이해하게 됐다!
이제는 'npx create-react-app'나 'yarn create vite xxxx —template react'을 입력할 때마다 감사한 마음이 들 것 같다... 😅
또한 플러그인 만드신분들께도 심심한 감사의 말씀을....!
나중엔 어떤 플러그인들이 쏟아져나올지 기대된다!!