Create-React-App 없이 React 환경 구축하기

JEON HAN BIT·2023년 3월 13일
0

React

목록 보기
1/2

목적

무작정 create-react-app 을 사용하다가 cra가 무슨일을 해주는지 궁금해서 직접해봄.

기대효과

create-react-app 이 도대체 무엇을 해주는지 알수있다.
webpack , babel 의 역할을 알고 프로젝트 설정을 직접 관리 할 수 있다.
직접 커스텀하여 프로젝트를 생성,관리하면서 npm,webpack,babel 을 공부하고
전반적인 개발환경의 이해도가 높아진다.


package.json 생성

빈 폴더에 프로젝트 설정 파일인 package.json을 생성한다.

npm init 
// package.json 파일을 손쉽게 만들어주는 명령어
// -y 옵션을 붙일시 전부 디폴트값으로 빠르게 만들어 줌

react,react-dom 설치

npm i react react-dom

Babel 설치

바벨을 설치한다. 트랜스파일러인데 크로스 브라우싱 및 폴리필을 알아서 해줍니다.
JSX 코드를 자바스크립트 코드로 변환하기 위해선 바벨을 설치해야 한다.
개발시에만 필요하기때문에 개발의존성에만 추가한다. ( -D 옵션을 붙여준다 )

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

@babel/core: 바벨의 코어
@babel/preset-env: 문법버전을 사용자 브라우저 환경에 맞게 바꿔줌
@babel/preset-react: JSX파일을 JS로 트랜스파일링

Webpack 설치

웹팩을 설치한다. 웹팩은 번들러로 여러 파일을 최소한으로 묶어주며
유지보수가 쉬운 모듈단위의 코딩을 도와주고 네트워크 병목현상을 줄여줍니다.

npm i -D webpack webpack-cli webpack-dev-server

webpack-cli : 설치시 터미널에서 웹팩명령어 명령가능
webpack-dev-server : 메모리상에만 존재하는 개발서버이다.

Webpack 로더 설치

npm i -D babel-loader css-loader style-loader file-loader

babel-loader : 웹팩과 바벨을 이어준다.

css-loader : css파일을 모듈로 변환해줌
style-loader : 변환된 css 을 dom에 붙여준다.

file-loader : 프로젝트에서 사용하는 파일(이미지,폰트..)을 모듈로 변환해준다.

Webpack 플러그인 설치 ( 번들링 작업이 끝난 파일에 적용 )

npm i -D html-webpack-plugin clean-webpack-plugin

html-webpack-plugin : html파일에 js 번들을 자동으로 묶어주는 플러그인
clean-webpack-plugin : 빌드 이전 결과물을 제거하는 플러그인

루트폴더에 파일,폴더 생성

루트폴더 안에 dist 폴더를 생성한다. ( 번들링 결과물이 모일예정 )
public 폴더 생성 후 index.html을 생성
src 폴더 생성 후 app.js , index.js 생성
webpack.config.js 생성
babel.config.js 생성

<!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>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.html

import React from "react";
import ReactDom from "react-dom";
import App from './app'
import './app.css';

ReactDom.render(<App/>,document.querySelector('#root'))

index.js

import React from 'react'

function app() {
  return (
    <div>안녕하세옹</div>
  )
}

export default app

app.js

#root{
    background-color: hotpink;
}

app.css


Webpack 설정하기 (webpack.config.js)

const path = require('path') 
// Node.js 의 빌트인 객체 'path' , 경로를 사용할때 유용하다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 웹팩 플러그인을 import 해준다.

module.exports={
    mode:'development',  
    resolve: {
        extensions: ['.js', '.jsx'], 
      },
    entry: './src/index.js' // 번들링 진입점. index.js 에 들어가 여러 파일을 추적
    ,
    output:{
        path:path.resolve('./dist'), // 번들링 결과물 경로,이름 지정
        filename:'bundle.[hash].js'
    },
    module:{  // 불러올 여러 파일들의 형태 , 로더 설정
        rules:[
            {
                test:/\.css$/, 
                use:['style-loader','css-loader']
            },
            {
                test:/\.png$/,
                use:[
                    {
                    loader:'file-loader',
                    options:{
                        name:'[name].[ext]?[hash]'
                    }
                    }
            ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/', 
                use:[
                    {
                        loader:'babel-loader',
                    },
                ]
              },
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./public/index.html' // 번들링 한 js를 어디에 묶을건지 
        })
    ],
    devServer: { // 개발서버 세팅
        host: 'localhost',
        port: '3000',
        open: true, 
        //historyApiFallback: true,
        hot: true, // 변경된 점 즉시 반영
      },

}

Babel 설정하기 (babel.config.js)

module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-react'],
  };

package.json 스크립트 설정 및 개발서버 실행

"scripts": {
    "build": "webpack --progress --mode production",
    "start": "webpack-dev-server"
  },

드디어 완료 ! 터미널에 npm start 입력시 개발서버가 잘 구동되는것을 볼수있다.

0개의 댓글