React

CRA 없이 리액트 프로젝트 생성하기 (Create React Project Without CRA)

전개발 2023. 12. 13. 14:39

CRA는 리액트 프로젝트를 빠르게 세팅하도록 도와주지만, 어떠한 동작을 통해 프로젝트를 세팅하는지는 알 수가 없습니다. 그래서 CRA없이 손수 세팅하는 연습을 해보았습니다.

진행 순서

  1. npm 패키지 생성
  2. 패키지/모듈 설치
  3. Babel 설정
  4. WebPack 설정
  5. npm-scripts 설정 (Package.json)
  6. React 코드 작성 (HTML, JS)
  7. develop 서버로 렌더링

npm 패키지 생성

  • 프로젝트 디렉토리 생성 후, 해당 경로에서 npm 패키지를 생성합니다. (package.json)
mkdir [project-name]
cd [project-name]
npm init -y

패키지/모듈 설치

  • 필요한 패키지/모듈을 설치합니다.
  • 이때, 일반 패키지와 개발용 패키지를 나누어 설치합니다.
  • npm i
    • react
    • react-dom
  • npm i -D
    • (WebPack 관련)
    • webpack
    • webpack-dev-server
    • webpack-cli
    • (Babel 관련)
    • @babel/core
    • @babel/preset-env
    • @babel/preset-react
    • (Loader)
    • babel-loader
    • html-loader
    • (Plugin)
    • html-webpack-plugin
npm i react react-dom
npm i -D webpack webpack-dev-server webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader html-loader html-webpack-plugin

Babel 설정

  • .babelrc 파일을 만들어서 작성합니다.
  • presets 배열에 특정 preset을 정의하면, 해당 preset에 속하는 번들 파일과 플러그인이 자동설치되는 방식입니다.
// .babelrc
{
    "presets" : [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

WebPack 설정

  • .webpack.config.js 파일을 만들어서 작성합니다.
  • 코드상의 module.exports = {} 에서 웹팩을 설정합니다.
    • mode : 현재 모드를 설정합니다 (production | development | none)
    • entry : 애플리케이션 진입점(js)를 나타냅니다.
    • output : 번들 파일을 저장할 경로를 나타냅니다.
    • module 블록 : 로더를 정의하고 규칙을 생성합니다.
      • loader의 기본 form
      • module: { rules: [ { test: '빌드할 파일 확장자 정규식' exclude: '제외할 파일 정규식' use: { loader: '사용할 로더 이름' option: '로더 옵션' } } ] }
    • plugins 블록 : 플러그인을 정의합니다.
      • html-webpack-plugin은 html 관련 plugin으로, 템플릿을 지정하거나 파비콘을 설정할 수 있도록 도와줍니다.
    • devServer : webpack-dev-server를 설정합니다.
// webpack.config.js

// import html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

// webpack
module.exports = {
    mode : 'development',
    entry : './src/index.js',
    output : {
        filename : 'bundle.[hash].js'
    },
    module : {
        rules : [
            {
                test : /\.(js|jsx)$/,
                exclude : /node_modules/,
                use : {
                    loader : "babel-loader",
                },
            },
            {
                test : /\.html$/,
                use : [
                    {
                        loader : 'html-loader',
                        options : {
                            minimize : true,
                        }
                    },
                ],
            }
        ],
    },
    plugins : [
        new HtmlWebpackPlugins({
            template : 'public/index.html',
        })
    ],
    devServer : {
        host : "localhost",
        port : process.env.PORT || 3000,
        open : true,
    }
};

npm-scripts 설정 (package.json)

Webpack-dev-server

  • 웹팩에서 개발서버를 제공해줍니다. 우리가 흔히 npm start를 통해 개발 서버를 실행시키는 것은 웹팩으로부터 온것 !
  • 이를 설정하기 위해 package.json에 “start” 명령을 추가해준다.
// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },

React 코드 작성 (HTML, JS)

HTML

  • public/index.html 파일을 만들어서 작성합니다.
  • 이때,내부에 리액트가 띄워질
  • 를 반드시 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.js

  • react 18 버전부터는 createRoot를 이용해 가상돔의 루트요소를 생성합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);

App.js

  • 루트요소에 보여질 컴포넌트입니다.
import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

develop 서버로 렌더링

  • npm start 명령으로 webpack 개발 서버를 실행해줍니다.
npm start

참고 게시글

https://velog.io/@party3205/React-Cra-%EC%97%86%EC%9D%B4-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%A7%81%EC%A0%91-%EA%B5%AC%ED%98%84%ED%95%98%EB%A9%B0-%EC%9B%B9%ED%8C%A9-%EB%B0%94%EB%B2%A8-%EB%8B%A4%EB%A3%A8%EA%B8%B0

https://medium.com/wasd/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766

느낀 점

  • React 프로젝트를 만들 때 항상 CRA를 사용했기에 바벨과 웹팩 설정 코드만 보아도 굉장히 괴로웠었는데, 이번 세팅 과정을 통해 이제 코드가 무섭지 않게 되었답니다!
  • 항상 이해하고 사용하는 습관이 잘 안되고 있던게 아쉬웠는데, 차분히 코드를 살펴보니 이해가 쏙쏙 잘되는 것을 깨달았습니다. 양심도 한 스푼정도 챙긴 느낌..이드네요…ㅎㅎㅎㅎ