Never give up

React - Without CRA 본문

WEB

React - Without CRA

대기만성 개발자 2022. 5. 23. 11:58
반응형

해당 포스트는 npx Create-React-App 없이 개발을 해볼 용도로 만들어봤고

 

정말 기본적인 프리셋(?)만 설정해서 사용하는 방법을 여기저기 찾아보면서 정리해봤습니다

(본 목적은 나중에 헷갈릴 때 찾아볼 용도로...)

 

1. 폴더를 만들고 내부에서 npm init -y를 입력해서 package.json파일을 만들어줍니다

< npm init -y로 생성된 package.json >

해당 방법으로 node 프로젝트라는 정의(?)를 해줍니다

 

 

2. react, react-dom 설치

< react, react-dom 설치 >

React 라이브러리와 DOM과 연결시켜주는 react-dom을 설치해줍니다

 

 

3. babel 설치

< babel 설치 >

babel은 transpiler로 es6 이상을 es5 형식에 맞게 변환을 해주는 역할을 합니다

 

preset-react는 jsx를 js형태로 사용할 수 있도록 해주는 프리셋이고,

preset-env는 es5 형태로 변환할 수 있도록 해주는 프리셋입니다

 

 

4. webpack 설치

< webpack 설치 >

webpack은 모듈 번들러로 웹 파일들을 하나의 파일로 묶어주는 역할을 합니다

 

webpack은 모듈 번들러

webpack-cli는 커맨드라인 인터페이스

webpack-dev-server는 임시서버(node) 구동 시켜주는 역할

css-loader, style-loader는 css문법을 js로 변환 및 html의 style태그에 넣어주는 역할을 합니다

 

5. 플러그인 설치

< 플러그인 설치 >

html-webpack-plugin은 html파일에 번들링된 react 코드를 사입, dist폴더에 번들링 된 파일을 옮겨주는 역할

clean-webpack-plugin은 이전에 번들링 되었던 파일을 제거하는 역할을 합니다

 

6. webpack, babel 설정 파일 작성

babel.config.js

// 바벨은 preset정의 (바벨 역할을 모아놓음)
module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react']
}

babel에는 위에서 설치했던 프리셋들을 넣어줍니다

 

이외에도 타겟 js버전, 브라우저 버전등을 셋팅할 수 있습니다

 

webpack.config.js

// 1. 엔트리 포인트 설정
// 2. rules에 로더 설정 및 순서 배치(뒤의 요소부터 번들링에 반영)
// 3. build 위치 및 개발 서버 셋팅
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin

// dev/production 분리용
require('dotenv').config()

module.exports = {
    mode: process.env.mode,
    entry: './src/index.js',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/',
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            hash: true,
            favicon: 'public/favicon.ico'
        }),
        new webpack.DefinePlugin({
            mode: process.env.mode,
            port: process.env.port
        })
    ],
    devServer: {
        host: 'localhost',
        port: process.env.port,
        open: true,
        historyApiFallback: true,
        hot: true
    }
}

.env

mode = production
port = 3000

webpack 설정으로 엔트리 포인트, 로더, 빌드 위치, 개발서버 셋팅, 파비콘 설정 등을 할 수 있습니다

 

필자는 기본 모드를 production으로 넣어놨는데 이유는 8번 scripts부분에서 확인할 수 있습니다

 

7. public 폴더 생성 및 index.html, favicon.ico(optional)만들어주기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Without CRA</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

정말 기본적인 셋팅만 해봤습니다

 

8. package.json에 scripts부분 변경

"scripts": {
    "start": "webpack serve --progress --mode development",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

먼저 start 부분을 보면

 

webpack serve는 개발환경에서 빌드

--progress는 빌드 진행상황 표시

--mode developement는 개발모드로 빌드

(모드는 development, none, production이 있습니다)

 

npm run build를 하게되면 위에 .env에 설정한 production 모드로 빌드가 됩니다

(webpack --mode production)

 

이후 테스트를 해보면

< 빌드된 화면 >

정상작동 되는것을 확인할 수 있습니다

 

일단 테스트용도로 hooks를 사용해봤는데 strictmode를 사용하면 2번씩 빌드되는 현상이 있어서

 

필자는 strictmode를 제외하고 테스트를 진행했습니다

 

(전체 소스 코드 : https://github.com/devmemory/without_CRA)

 

- 추가 : 타입 스크립트 버전 (링크 : https://github.com/devmemory/react_without_cra_ts)

- 타입스크립트 버전은 babel 대신 esbuild loader를 사용하고 있습니다

 

참고한 블로그

https://hankyeolk.github.io/2021/08/08/withoutCRA.html

반응형
저작자표시 비영리 동일조건

'WEB' 카테고리의 다른 글

React - make html element to pdf(Feat. jspdf, html2canvas)  (4) 2022.07.02
React, Node - Graphql example(feat. apollo)  (0) 2022.05.24
React - redux toolkit example(createStore is deprecated)  (0) 2022.05.18
Node - XLSX example (feat. scraping)  (0) 2022.05.11
Node - Nodemailer example  (2) 2022.04.26
'WEB' Related Articles more
Comments