2편

1편에서 모듈 번들러가 어떤 역할을 하는지 가볍게 알고넘어왔다.

필자는 Webpack, Vite에 대하여 공부중이기 때문에 전문적인 블로그글에 비해 전문성이 떨어진다.

정말 아무것도 모른다면 내 블로그글을 읽고 가볍게 이해하고 전문적인 글을 다시 찾아보는것을 추천한다.

SetUp

CRA 없이 셋업하기, 빌드하기와 관련된 블로그글들은 엄청나게 많다.

글을 쓰는 시점 나는 부트캠프를 다니고있다.

프로젝트기간 중 배정된 코치님과 오피스아워를 가졌고 그때 나는 질문을했다.

Q. 실무에서 CRA 를 쓰는경우가 없다고 알고 있는데, 신입기준 환경설정까지 완벽하게 해야하는지 ?
A. 그렇게 까지 안해도되지만, 내 동료가 이러한 환경설정을 해보고 관심을 가지고있는 사람이었으면 좋겠다.

이러한 답변을 들었고, 완벽하게 이해는 못해도 공부해보고 정리해두자 라는 생각을 가졌다.

이제 CRA 없이 React 환경을 구축해보자.

참고블로그

해당 블로그를 토대로 진행해본다.

정말 기본적인 방법이다. 그냥 이렇게 쓰는구나 정도만 이해하면된다.

yarn init -y || npm init -y (앞으로 설치할 패키지들은 yarn, npm중 하나로 통일하여 받는다)

초기 설정시 name, version, description 등 세부설정을 하려면 -y 키워드를 제거.

yarn add react react-dom react-hot-loader

React18로 진행, 간단한 환경셋팅이라 18로 진행한다. 실 프로젝트에 적용하려면 버전을 낮추는것을 추천

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

개발용 패키지들은 devDependencies로 빼서 설치한다.

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack-cli : 커맨드라인에서 webpack을 실행할 수 있다.
webpack-dev-server : 업데이트 되는 코드들에 대한 리로드
html-webpack-plugin : webpack에게 html 전달

yarn add -D babel-loader css-loader style-loader

babel-loader : JS 파일 컴파일
css-loader : CSS 파일 가져오는 용도
style-loader : CSS File -> Style Tag 변환 후 head에 삽입

yarn add dotenv (환경변수를 사용하기위한 패키지)

기초적인 환경을 구축하기위한 패키지들은 준비가 되어있다.

하지만 실 프로젝트에 적용하려면 추가적인 패키지들이 더 필요하다.

예를들어 나는 scss파일을 사용하고 싶을때 webpack이 scss파일을 이해할 수 있도록 추가적인 패키지 설치가 필요하다.

하지만 지금은 간단한 환경구축이니, 다음 게시물에서 다뤄본다.

webpack의 환경설정을 위한 webpack.config.js 파일이 필요하다.

webpack은 무조건 webpack.config.js 를 바라보기 때문에 필수로 설정해야하는 부분이다.

우리가 사용할 패키지들 모두 해당파일에서 설정이 이루어진다.

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
require('dotenv').config();

const port = process.env.PORT || 8080;

module.exports = {
  /*	
	production, development, none 세가지 모드가 있다.
    
    실제로 배포를 하기위한 프로젝트에선 production으로 진행해야 배포가 이루어진다.
    
    지금하는 연습에서도 production으로 진행하면 에러처리가 될 것이다.
    
    개발모드로 진행하도록한다.
  */
    mode: 'development',
  /*
  	entry:'./src/index.js' (default)
    
    output 설정으로 생성한 번들을 저장할 위치를 지정할 수 있다.
    
    config 파일에 output이 설정되어 있지 않다면, 기본값은 ./dist/main.js 이다.
    
    생성된 번들 파일들이 ./dist 디렉토리 밑으로 들어가게 된다.
    
    output.path - 번들이 된 파일을 내보낼 디렉토리 위치를 지정
    output.filename - 번들이 된 파일의 이름을 지정
  */
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.[hash].js',
        publicPath: '/', // react-hot-reloading 을 위한 셋팅 
    },
  /*
  	module 에는 우리가 정한 규칙을 추가한다.
    
    webpack이 module을 만났을 때 설정하는 부분이다.
    
    기본적으로 webpack은 아무것도 할 줄 모른다. 
    
    개발자가 rules를 통해 webpack에게 명령을 해야한다.
    
    여기서 우리가 이전에 받은 webpack관련 loader 패키지들을 사용한다.
    
    이 외에도 브라우저별로 셋팅을 하기위한 postcss-loader, autoprefixer 등이 필요하다.
    
    하지만 지금은 기본적인 환경설정만 한다.
  */
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
  /*
  	loader 들은 모듈을 처리하지만, plugins 들은 번들이된 파일을 처리한다.
    
    plugin 은 번들이된 파일을 난독화 하거나, 압축하는 사용한다.
    
    plugin 을 사용하기위해 require로 가져와 new 로 새로운 인스턴스를 생성하여 plugins에 추가한다.
    
    아래의 HtmlWebpackPlugin 은 생성된 번들 파일을 자동으로 로드(<script />)한 HTML 파일을 생성해주는 것이다.
  */	
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
        }),
    ],

    devServer: {
        host: 'localhost', // 테스트 환경이기 때문에 localhost
        port: port,
        // 서버 실행 시 자동으로 브라우저 열어주는 옵션
        open: true,
        // 브라우저에서 URL 변경하도록 도와주는 옵션
        historyApiFallback: true,
    },

    resolve: {
        extensions: ['.js', '.jsx'], // jsx 파일 처리를 위해 추가
    },
};

여기까지가 기본적인 webpack.config.js 의 설정이다.

구글링하면 나오는 코드와 비슷하겠지만 주석은 거의 다르다.

내가 아는 webpack의 개념으로 주석을 다시 썼다.

여기까지 작성하고 우리가 만들어야하는 src/index.js, App.jsx, App.css, public/index.html 을 추가하여

package.json 에서 script 명령어를 설정하고 실행하면 정상적으로 작동한다.

yarn build

빌드 명령어를 통해 dist로 번들화된 파일이 제대로 나오는지까지 확인해보자.