Recent Posts

Recent Comments

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Today

Total

관리 메뉴

DH의 개발 공부로그

[React] React 모듈시스템과 Webpack으로 개발환경 밑바닥부터 설정하기! 본문

React

[React] React 모듈시스템과 Webpack으로 개발환경 밑바닥부터 설정하기!

DeveloperDH 2022. 12. 22. 00:52

728x90

※ 노드가 깔려있어야 합니다.

웹팩을 쓰는 이유

여러개로 나누어져 있는 컴포넌트, 즉 파일들을 하나의 파일로 합쳐서 파일의 수를 줄여
효율적으로 관리할 수 있게 해주기 때문이다.

1. package.json 생성

npm init

2. react 설치

npm i react react-dom

3. webpack 설치

npm i -D webpack webpack-cli

-D: 실제서비스에서는 필요가 없고 개발환경에서만 사용할 때 적용하는 코드

"dependencies": { // 실제 서비스에서 사용하기 위한 것들
  "react": "^18.2.0"7,
  "react-dom": "^18.2.0"
},
"devDependencies": { // 개발환경에서만 사용할 것들
  "webpack": "^5.75.0",
  "webpack-cli": "^5.0.1"
}`

4. index.html 만들기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>파일이름</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

5. client.jsx파일과 webpack.config.js 파일 만들기

// client.jsx※ 이 방법은 import 방식이 아닌 require를 이용한 방식입니다.
const React = require('react');
const ReactDom = require('react-dom');
const App = require('./App') // 분리한 컴포넌트
ReactDom.render(, document.querySelector('#root'))

// webpack.config.js
const path = require('path');
module.exports = {
  name: '이름', // 세팅할 파일의 이름, 선택사항
  mode: 'development', // 개발용,실서비스에서는 'production'
  devtool: 'eval', // 빠르게
  resolve: {
    extensions: ['.js', 'jsx'] // entry 파일에 해당 확장자가 붙어있는 파일을 불러옴
  } 
  
  // 중요
  entry: {
  	app: ['./client'], 
  } // 입력
  output: { 
    path: path.join(__dirname, 'dist'), // 현재 폴더의 dist 폴더에 생성 __dirname: 현재 폴더 경로,
    filename: 'app.js',
  } // 출력
}

6. webpack으로 빌드하기

webpack을 실행하는 방법은 여러가지가 있지만 두가지를 정리해보겠습니다.

1. package.json script 부분에 webpack을 추가하여 npm으로 실행하기

> npm run dev

2. npx webpack

> npx webpack

npx란 npm에서 제공해주는 하나의 도구로,
npm은 기존 로컬에 있어야만 실행할 수 있는 것에 반면
모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시키는 방식입니다.

중요

두개의 방식으로 작업을 해도 지금은 오류가 날 것 입니다.
문제는 아직 jsx 방식으로 컴퓨터가 읽지 못해서입니다.

그래서 그러한 작업을 해줄 바벨을 설치해야 합니다.

7-1. babel 설치

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

바벨도 개발환경에서만 필요하기 때문에 -D로 설치해줍니다.

babel-loader : 바벨과 웹팩을 연결
@babel/core : 기본적인 바벨, 최신문법을 변환
@babel/preset-env : 사용자의 컴퓨터 환경에 맞춰 읽을 수 있도록 최신문법을 변환
@babel/preset-react : react, 즉 jsx를 변환

7-2. webpack.config.js에 추가

webpack을 이해하기 쉽게하기 위해서 코드작성의 순서는 입력받고 변환하고 출력하기로
진행하게끔 작성해주면 좋습니다.(entry와 output 사이에 작성)

module: {
  rules: [{
    test: /\.jsx?/, // 정규표현식
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react'],
    },
  }],
},

이렇게 작업을 하고 다시 빌드를 해보면 정상적으로 빌드가 되었을 것입니다.

참고

ZeroChoTV 리액트 웹게임 만들기