React 세팅하기 (without create-react-app)

React 개발 환경 세팅하는 법!

1. create-react-app을 사용한다.
2. 처음부터 직접 세팅한다.

create-react-app은 리액트 환경을 빠르게 세팅해주는 패키지이다.

공식으로 제공하는 기능이다. React 공식 홈페이지 Create React App에서 사용 방법을 알 수 있다.

새로운 React 앱 만들기 – React

 

강의나 구글링으로 React 세팅 방법을 찾아봤지만 대부분 1번 방법으로 React를 세팅하고 있었다.

그래도 React 공부할 겸 2번 방법을 선택했다. 여기 저기 열심히 찾아보며 겨우 세팅했다...

이제 열심히 세팅한 내용을 정리해보자!

(window + vscode 환경, 혹시 잘못된 정보가 있으면 알려주시면 감사하겠습니다.)

 

 

1. package.json

터미널 창에 npm init 명령어로 package.json 파일을 만든다.

 

2. react 설치

터미널 창에 npm i react react-dom 명령어를 실행한다.

기본적으로 react 문법을 사용하기 위해 react 패키지를 설치하고,

react로 작성한 내용을 DOM에 올리기 위해 react-dom 패키지를 설치하는 것이다.

설치하면 package.json 파일에 아래와 같은 내용이 추가되었을 것이다. (버전은 설치 시점에 따라 달라짐!)

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
}

 

 

3. webpack

UI를 조그맣게 나누어 컴포넌트 단위로 개발하는 React이니까 여러개의 js 파일들이 만들어진다.

수많은 자바스크립트 파일을 매번 서버에 요청해서 불러오는 것은 비효율적이다.

여러개의 파일을 하나로 모아줄 모듈 번들러, webpack을 사용한다.

 

1) webpack 패키지도 설치한다.

npm i -D webpack webpack-cli

webpack-cli는 webpack과 관련된 명령어를 사용할 수 있게 해주는 패키지다.

 

2) webpack을 설정하기 위해 root 폴더에 webpack.config.js 파일을 만든다.

아래 구문 아래 설정을 쓰면 된다.

const path = require('path');

// webpack 모듈 설정
module.exports = () => {
    mode: 'development', // 개발용:development, 실제:production
    devtool: 'eval', // 소스맵 관련 옵션
    resolve: {
        extensions: ['.js', '.jsx']
    }, // webpack으로 읽을 파일들의 확장자
    
    entry: {
    	bundle: ['./src/index']
    }, // 입력
    output: {
    	path: path.join(__dirname, 'dist'), // __dirname: 현재 실행 중인 폴더 경로
        filename: '[name].js'
    } // 출력
}

resolve.extensions 설정으로 webpack으로 읽을 파일들의 확장자를 설정할 수 있다.

위의 예시에서 entry에 파일 확장자를 안 적어도 되는 이유다.

파일을 import 해올 때 여기 적힌 확장자는 생략해서 적어도 된다. (ex. import App from './App';)

같은 이름 + 다른 확장자의 파일이 있을 경우, 앞쪽의 확장자가 우선시된다.

 

entry에는 하나로 묶을 파일의 시작 파일을 입력한다.

그냥 entry: './src/index.js' 이런 식으로 적어도 된다.

entry가 여러개일 경우 배열로 적어도 된다. entry: ['./src/index.js']

entry에 따로 이름을 지어주고 싶을 땐 위의 예시처럼 object로 표현!

entry: { bundle: ['./src/index.js']} -> bundle이란 이름으로 entry를 표시할 수 있다.

 

output에는 하나로 묶은 파일을 저장할 위치를 표시한다.

path 모듈을 사용해 경로를 지정해준다. path.join으로 __dirname과 dist를 합쳐 [현재실행중인폴더경로]/dist로 경로 설정!

파일 이름은 보통 dist, build라는 이름을 많이 사용한다.

filename은 하나로 묶은 파일의 이름을 지정해주는 것이다. 직접 적어도 되고, 예시처럼 [name]이라고 하면, entry의 키 값이 그 자리에 들어간다. -> bundle.js가 된다.

 

추가로 같이 사용할 플러그인들)

번들링된 css 파일과 js 파일을 html 파일에서 불러올 수 있도록 해야하는데,

HtmlWebpackPlugin 플러그인으로 할 수 있다.

npm i -D html-webpack-plugin

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

module.exports = () => {
    .
    .
    .
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
}

webpack.config.js에서 plugins에 설정해주면 된다.

template 속성에 html 파일 경로를 적는다.

 

CleanWebpackPlugin이라는 것도 있다.

빌드할 때 기존에 만들어진 번들된 파일들을 지워준다.

혹시 남아있을 가비지 파일을 제거해주기 위한 플러그인이다.

npm i -D clean-webpack-plugin

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

module.exports = () => {
    .
    .
    .
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
    ],
}

 

 

4. Babel

React 문법이나 최신 자바스크립트 문법은 일부 브라우저에서 지원하지 않는다.

구형 브라우저에서도 작동할 수 있도록 ES5 이하 버전으로 변환해주는 Babel을 사용한다.

 

1) Babel 패키지를 설치한다.

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

babel-loader는 webpack에서 babel을 사용하기 위한 패키지

@babel/core는 babel을 사용하기 위한 core 패키지

@babel/preset-env로 지원할 브라우저를 선택할 수 있다.

@babel/preset-react는 react 문법을 자바스크립트로 변환할 수 있도록 해준다.

 

2) webpack으로 자바스크립트 코드를 babel로 읽을 수 있도록 설정한다.

webpack.config.js

module.exports = () => {
    .
    .
    .
    module: {
        rules: [{
            test: /\.jsx?$/, // babel-loader로 읽을 파일 확장자 정규표현식
            exclude: '/node_modules', // 제외할 파일 경로
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'], // babel-loader에서 사용할 옵션
            }
        }]
    },
}

module은 파일들을 읽을 때 사용할 모듈들을 설정하는 곳이다.

module.exports 안에 적어주면 된다. 본인은 entry 아래에 적었다.

(jsx는 React 구문으로 적힌 파일 확장자이다.)

@babel/preset-env는 지원할 브라우저 리스트를 설정할 수 있다고 했는데, 아래처럼 설정하면 된다.

presets: [
	['@babel/preset-env', {
        'targets': {
            'browsers': ['last 2 versions'] // 최신 2 버전까지만 지원
        }
    }], '@babel/preset-react'
]

browsers 설정 참고 browserslist

browserslist/browserslist

 

 

5. 개발 서버

개발용 서버 webpack-dev-server로 프론트엔드 개발을 하고 바로 바로 브라우저에서 로컬로 확인할 수 있다.

npm i -D webpack-dev-server

위의 명령어로 패키지를 설치한 후, webpack.config.js 파일에서 설정을 해준다.

module.exports = () => {
    .
    .
    .
    devServer: {
        publicPath: '/', // 번들 파일을 사용할 브라우저 경로
        open: true, // dev-server로 실행시 브라우저로 바로 열리도록 하는 설정
    }
}

기타 설정들은 DevServer에서 확인 가능

DevServer | webpack

 

 

6. css, scss 파일 읽기

npm i -D css-loader node-sass sass-loader mini-css-extract-plugin

위 명령어로 css와 scss 파일을 읽기 위한 패키지들을 설치한다.

css-loader는 css 파일을 컴포넌트에서 import/require 하여 사용할 수 있도록 해준다.

node-sass는 Sass를 사용하기 위한 패키지이다.

scass-loader는 Sass/SCSS 파일들을 css 파일로 컴파일해준다.

mini-css-extract-plugin으로 js 파일에서 css 파일들을 분리한다.

 

webpack.config.js에서 위의 패키지들을 사용할 수 있도록 설정한다.

.
.
.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = () => {
    .
    .
    .
    module: {
        rules: [{...},{
            test: /\.(sc|c)ss$/, // scss나 css인 확장자 파일
            use: [
                'cache-loader',
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ] // 위 확장자의 파일을 읽을 loader들
        }]
    },
    plugins: [
        .
        .
        .
        new MiniCssExtractPlugin(),
    ]
}

 

참고)

cache-loader로 loader들로 읽은 결과를 디스크에 캐시로 남겨, 더 빠르게 읽을 수 있게 해준다.

npm i -D cache-loader

 

 

7. 실행 스크립트 설정

package.json

"scripts": {
    "start": "webpack serve --env development",
    "build": "webpack"
},

webpack 명령어로 webpack을 실행하여 webpack.config.js에서 설정한 output 경로에 번들 파일을 만들 수 있다.

바로 터미널에서 webpack을 치면 못 알아듣는다.

package에 script로 설정해준다. 위의 예시대로 적으면 터미널에 npm run build를 치면 webpack 명령어가 실행된다.

npm start를 하면 webpack-dev-server로 개발용 서버가 실행된다.

 

 

 

 

이렇게 기본적인 설정이 끝이났다.

이후, TypeScript를 사용하기 위해 추가로 설치하고 설정해준 것이 있다.

보러가기

React with TypeScript

 

계속 개발하면서 추가로 필요한 설정들도 차근차근 추가해주면 될 것 같다.

 

 

 

이 글에 써진 건 당장 필요한 것들만 세팅한 것이라,

더 필요한 것들은 아래 글들 + 공식 문서를 참고하면 좋을 것 같다.

 

이 글의 React 세팅에 도움이 되었던 컨텐츠들

ZeroCho TV - React 기본 강좌 2-3. 웹팩 설치하기 포함 그 이후 관련 재생목록 영상들

jeff0720 velog - React 개발 환경을 구축하면서 배우는 웹팩(Webpack) 기초

React 개발 환경을 구축하면서 배우는 웹팩(Webpack) 기초

baeharam - [React] CRA 없이 리액트 환경 만들기

[React] CRA 없이 리액트 환경 만들기 - 배하람의 블로그