No-CRA react 만들기

정소현·2024년 8월 20일
0

React

목록 보기
5/12
post-custom-banner

CRA나 Vite를 사용하지 않고 React 어플리케이션을 구성해보기
이유 : CRA는 간편하게 설정을 자동화해 주지만, 커스터마이징에 제약이 많아 실무에서 한계가 있을 수 있음

목표

  • CRA대신 Webpack과 Babel을 이용해 React 프로젝트를 설정하는 방법을 익힌다.
  • 번들러와 트랜스파일러의 개념을 이해하고, React 애플리케이션을 효율적으로 구성할 수 있는 역량을 기른다.

🌼 NO-CRA REACT 개발 시작

  1. 프로젝트 폴더생성
  2. HTML 파일생성 (index.html)
    React 애플리케이션이 실행될 기본 html구조 설계
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No CRA</title>
    </head>
  <body>
    <div id="root"></div>
    <script>
      const App = () => {
        return (
          <>
            <h1>Hello World</h1>
          </>
        );

        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(<App />);
      };
    </script>
  </body>
</html>
  1. React와 ReactDOM CDN 추가
<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>
  1. script Tag작성
  2. Babel적용하여 JSX사용하기
  • 트랜스파일
    : 프로그래밍 언어의 코드를 다른 프로그래밍 언어 또는 동일한 언어 내에서 다른 버전이나 형식으로 변환하는 도구
    - Babel설치
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  1. Script Tag 수정
    script Tag 안에 type = "text/babel"설정을 넣어 babel이 어떤 스크립트를 트랜스파일할지 결정해줌
 <div id="root"></div>
    <script type="text/babel">
        const App = () => {
            return (
                <>
                    <h1>Hello World</h1>
                </>
            );

            const root = ReactDOM.createRoot(document.getElementById("root"));
            root.render(<App />);
        };
  1. 패키지 초기화
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-react

or 

yarn init -y
yarn add @babel/core @babel/cli @babel/preset-react --dev
  • babel-cli @babel/core: 빌드타임에 바벨을 실행시키기 위한 CLI 명령어 도구.
  • @babel/preset-react: React 용 바벨 문법 변환 패키
    .babelrc 파일을 만들어줌
    {
    "presets": ["@babel/preset-react"]
    }
    1. build 스크립트 작성 package.json 에 해당 build 스크립트를 입력해줌
"scripts": {
    "build": "babel src -d dist"
 },

npm run build or yarn run build를 통해 실행시켜주면, dist 폴더에 app.js 가 생김

const App = () => {
  return /*#__PURE__*/ React.createElement("h1", null, "Hello, World!");
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(/*#__PURE__*/ React.createElement(App, null));

index.html 수정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>No CRA</title>
    <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>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/app.js" type="module"></script>
  </body>
</html>

Webpack도입 및 설정

번들러란?

번들러란 여러개의 파일로 구성된 코드나 리소스를 하나의 파일(또는 몇 개의 파일)로 묶어주는 도구. 여러 JavaScript, CSS, 이미지파일등을 하나의 파일로 결합하여 배포 및 로드 성능을 개선하는데 사용됨
참고) 브라우저는 한번에 6개씩 나누어서 네트워크 요청을 가져옴. 여러개의 파일이 있다면 그만큼 로드가 지연됨.

프로젝트 준비

  1. 패키지 설치
npm install --save-dev webpack webpack-cli babel-loader
or
yarn add --dev webpack webpack-cli babel-loader
  • webpack webpack-cli: 빌드타임에 웹팩을 실행시키기 위한 CLI 명령어 도구.
  • babel-loader: 바벨과 통합하기 위한 바벨 로더
  1. Webpack설정파일생성
    프로젝트 루트에 webpack.config.js 파일을 생성 후 설정
const path = require("path");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      //.css .js 등 서로 다른 확장자를 가진 파일을 처리할 때 어떤 규칙을 적용할지 정의
      {
        test: /\.js$/, // 어떤 파일을 대상으로 할지 정규표현식으로 작성
        exclude: /node_modules/, // node_modules 폴더는 제외
        use: {
          loader: "babel-loader", // babel-loader를 사용
        },
      },
    ],
  },
  mode: "development", // 없으면 warning 이 남
};
  • entry: 번들링의 시작점(엔트리)입니다. 여기서는 src/index.js를 엔트리로 지정
  • output: 번들링 결과물의 출력 위치와 파일명을 지정dist/bundle.js로 설정
  • module.rules: Babel을 사용해 JavaScript 파일을 트랜스파일링하기 위해 babel-loader를 설정
  • mode : 개발모드를 설정해줄 수 있음.
  1. 로더설정
    여러 로더들을 사용해 이미지, css 불러오는 방식을 설정
  2. 프로젝트 빌드 및 실행
    package.json의 scripts 항목에 다음 명령어를 추가
"scripts": {
    "build": "webpack"
},

빌드명령어를 시작하면 dist폴더에 파일이 생김

development vs production

: 코드최적화가 있는지에 따른 빌드속도가 차이가난다.

  • production : 트리셰이킹, 코드 스플리팅, 상수 폴딩, 코드 난독화 등의 최적화 과정이 포함되어 더 오래걸림

Plugin

Webpack플러그인은 빌드과정중 특정 기능을 추가하거나 개선하는 역할을 한다.
1. 파일 이름에 해시값 추가
캐시 문제를 해결하기 위해 빌드된 파일 이름에 해시값을 추가
코드가 변경될 때마다 새로운 파일 이름이 생성, 브라우저에서 업데이트 된 js파일을 캐시하지 않도록 설정 가능
2. HTML Webpack plugin 설정

yarn add --dev html-webpack-plugin
or
npm install --save-dev html-webpack-plugin
  1. dist플더 확인

개발 환경에 더하기

1. clean Webpack Plugin

: clean Webpack Plugin 설정 시 빌드 시마다 HTML파일이 자동으로 업데이트, 파일을 삭제해줄 필요가 없다. 

npm install --save-dev clean-webpack-plugin
or
yarn add --dev clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

 plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
    }),
  ],

2. 개발 서버 설정

: Webpack 개발 서버를 설정해 코드 변경 사항이 실시간으로 반영되도록 설정
1. 개발 서버 설치 및 설정

npm install --save-dev webpack-dev-server
or
yarn add --dev webpack-dev-server
devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000, // 개발 서버가 실행될 포트번호
    open: true, // 서버가 실행되면 자동으로 브라우저를 염
    hot: true, // 코드 변경 사항을 실시간으로 반영
  },
  1. 명령어 설정
    package.json의 scripts 항목에 개발 서버 명령어를 추가
 "scripts": {
    "build": "webpack",
    "start": "webpack serve"
 },

설치가 끝난 후 yarn start or npm start 명령어로 개발 서버를 실행하고, 코드가 수정될 때마다 자동으로 변경 사항이 브라우저 반영

환경 변수 관리

: 실제 프로젝트에서는 개발, 스테이징, 프로덕션 환경에 맞게 다른 설정을 적용해야함. Webpack 과 함께 dotenv-webpack을 사용해 환경변수를 관리
1. 환경 변수 파일 생성
: 프로젝트 루트에 .env.development, .env.production 파일을 생성해 각 환경에 맞는 변수 설정

# .env.development
APP_API_URL=https://dev-api.example.com
# .env.production
APP_API_URL=https://api.example.com
  1. dotenv-webpack플러그인 설정
npm install --save-dev dotenv-webpack
or
yarn add --dev dotenv-webpack

webpack설정 파일에 플러그인 추가

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DotenvWebpack = require("dotenv-webpack");

const mode = process.env.NODE_ENV || "development";

module.exports = {
	mode,
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
    }),
    new DotenvWebpack({
      path: `./.env.${process.env.NODE_ENV || "development"}`,
    }),
  ],
};

script변경

  "scripts": {
    "build": "webpack",
    "start": "NODE_ENV=production webpack serve"
  },

환경변수 사용

const apiUrl = process.env.APP_API_URL;

크로스 개발환경 추가
윈도우 환경에서는 set NODE_ENV=~ && 이런식으로 사용해야함

각각 환경에서 오류가 나지 않도록 변경해주기 위해서 cross-env 패키지를 설치

npm install --save-dev cross-env
    "start": "cross-env NODE_ENV=development webpack serve"
profile
정소현
so
이전 포스트

React_memoization, Redux, CustomHook

다음 포스트

REDUX2 & React-Router-DOM

post-custom-banner

0개의 댓글