React 시작하기 - 01. webpack 설정

Hyeonii·2023년 2월 15일
.gitignoreReactbabelnpmpackage.jsonwebpack
0

React 집중반

목록 보기
1/1
post-thumbnail

💁🏻 들어가기에 앞서
본 글은 DeKu님의 블로그 글을 따라해보며 정리한 내용입니다.
DeKu님이 집필하신 '스무디 한 잔 마시며 끝내는 리액트 + TDD' 책 많이 사랑해주세요.
블로그 보고 많은 도움을 받고 있습니다. 감사합니다 😍


스무디 한 잔 마시며 끝내는 리액트 + TDD- 당장 사러가기



그리고 활기를 불어넣기 위한 귀여운 짤
모두 화이팅 !


참고 블로그

공식 사이트


React 프로젝트에 webpack 설정하기


1. npm 프로젝트 생성

프로젝트 폴더에 package.json 파일을 생성합니다.

npm이란? 
----
Node Package Manager의 약자로
node.js 프로젝트를 진행하면서 설치되는 모듈들을 관리하는 패키지 매니저입니다.

설치한 모듈은 node_modules 라는 폴더에 저장되며, 패키지 버전과 빌드 관련 내용은 package.json이라는 파일에서 관리합니다.

  • npm 세팅을 직접 설정하고싶다 : npm init

  • 기본 설정으로 생성하고싶다: npm init -y

명령어 입력 후 파일 목록을 보면 package.json 파일을 생성되어 있습니다.
앞으로 패키지를 설치하면 package.json에 패키지 이름과 버전이 기입됩니다.


2. 리액트를 사용하는데 필수적인 라이브러리 설치

react 와 react-dom을 설치해줍니다.

npm install --save react react-dom


여기서 --save flag는 모듈을 package.json의 dependency 항목에 추가한다는 의미입니다.

node_modules 파일을 삭제하고 npm install or yarn install로 다시 모듈을 설치 하는 경우, package.json의 dependency 항목에 포함되지 않은 모듈들은 설치되지 않습니다.

하지만 npm 5.0.0부터는 기본적으로 설치된 모든 패키지를 종속 항목으로 저장하기 때문에 더 이상 --save 옵션을 사용할 필요가 없다고 합니다.



3. webpack과 babel 설치

npm install --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react rimraf

  • webpack : 여러개의 파일을 하나로 합쳐주는 번들러입니다. css loader 기능, jsx 변환 기능도 포함합니다.

  • babel : 유행어나 사투리를 표준어로 변환해주는 변환기라고 생각하시면 됩니다.
    특정 언어로 작성된 코드를 비슷한 다른 언어로 변환(컴파일)시키는 역할을 한다.
    babel은 최신 js 코드나 실험적인 js 코드를 표준 js 코드로 변환해줍니다.



4. package.json의 script 설정

...
"scripts": {
    "start": "webpack-dev-server --mode development",
    "prebuild": "rimraf dist",
    "build": "webpack --progress --mode production"
},
...

  • 모드 (--mode) : webpack을 실행시킬때는 항상 build mode를 설정해주어야 합니다.

  • prebuild: 항상 빌드 전에 실행됩니다. rimref라는 모듈로 build를 실행하기 전 기존 build때 생성되었던 파일을 제거 해줍니다.

  • 프로그래스 (--progress): 빌드 진행 과정을 모니터링하게 해주는 flag입니다.



5. webpack 설정 (빌드 관련 설정)

webpack.config.js파일을 생성한 후 아래와 같이 작성해줍니다. 

// webpack.config.js

// 절대 경로를 참조하기 위한 코드입니다.
const path = require('path');

// webpack에서 htmml을 다루기 위한 플러그인입니다.
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  entry: {
    // 최종적으로 하나로 합쳐질(번들링) 파일 경로입니다. (최상위 컴포넌트의 경로를 적어주면 됩니다.)
    'js/app': ['./src/App.jsx'],  
  },
  output: {
    // 생성된 번들(bundle) 파일이 저장되는 위치입니다.
    path: path.resolve(__dirname, 'dist/'),
    // 다른 파일에서 생성된 번들을 참조할 때 '/'를 기준으로 참조합니다.
    publicPath: '/', 
  },
  module: {
    rules: [
      {
        // 리액트 파일인 jsx와 js를 babel을 이용하여 빌드합니다.
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // template: 기본 생성된 HTML 대신 사용자 본인의 템플릿 파일을 전달합니다.
      template: './src/index.html',  
      filename: 'index.html',
    }),
  ],
};

wabpack 설정에서 주목할 포인트는 아래와 같습니다.

  • 번들링할 파일의 경로와 이름정의

  • 번들링할 파일 종류 정의

  • 번들링할 파일의 HTML 템플릿 적용



6. babel 설정 (컴파일 관련 설정)

.babelrc파일을 생성한 후 아래와 같이 작성해줍니다. 

// .babelrc

{
    "presets": [
      [
          "@babel/preset-env",
          // 컴파일 브라우저를 설정합니다.
          // 브라우저의 상위 버전 두개(예: IE 11, 10)와 한국(KR)에서 5% 이상의 점유율을 가지고 있는 브라우저에 대응하여 컴파일합니다.
          { "targets": { "browsers": ["last 2 versions", ">= 5% in KR"] } } 
      ],
      "@babel/react"  // 리액트도 컴파일 할 수 있도록 한다.
    ]
}

babel 설정에서의 포인트는 아래와 같습니다.

  • 컴파일 타겟 브라우저의 버전을 설정합니다.

  • 리액트를 컴파일 하기 위해서 하단에 "@babel/react"라는 코드를 추가해줍니다.



7. src/index.html 파일 생성

HTML을 생성하고 body 부분에 React코드가 들어갈 "app"이라는 id를 가진 div 태그를 추가해줍니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"><!-- React 코드가 삽입되는 자리입니다 --></div> 
  </body>
</html>



8. src/App.jsx 파일 생성

React 코드를 작성하고 index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해줍니다.

//  src/App.js

...
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello World!</h1>;
};

// index.html의 'app'이라는 id를 가진 div에 리액트 코드를 삽입해준다
ReactDOM.render(<App />, document.getElementById('app'));



9. 프로젝트 시작/빌드

  • 시작: npm start

  • 빌드: npm run build

npm start 명령어 실행 후 http://localhost:8080에 들어가면 화면을 확인 할 수 있습니다.



+) git commit을 위한 작업

.gitignore 파일을 생성한 후 commit하지 않을 파일과 디렉토리를 적어줍니다.

//.gitignore

node_modules

package-lock.json

마지막으로 README.md 파일 생성하여 프로젝트에 대한 설명을
markdown 언어로 적어주시면 완성입니다 :)

// README.md

## React Setting Test
---

리액트 세팅을 테스트하고 
마음에 드는 세팅을 저장해두는 레포지토리입니다. 

@2023.02.15





profile
Hyeonii
까먹기 전에 적어두기

0개의 댓글