3 분 소요

📔 웹팩을 사용하게 된 계기

거의 대부분의 페이지가 수많은 컴포넌트를 가지고 있고, 컴포넌트가 한 개인 페이지는 잘 없다고 봐도 무방하다. 페이스북만 봐도 컴포넌트가 2만 개 이상인데, 이걸 한 파일에서 코드로 모두 다루기엔 유지 보수가 거의 불가능해진다. 다른 방법으로 script태그에 src 속성을 줘서 스크립트를 합치는 방법도 있겠지만, 중복이 발생하기가 쉽고, 이를 제거하기가 상당히 고생스럽다.

이를 계기로 여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 합쳐주는 기술인 웹팩이 등장한다.

⚙️ 웹팩 설치하기

먼저 node가 컴퓨터에 깔려있어야 한다.

  1. cmd창을 열고 웹팩을 설치하고자 하는 위치에서 npm init을 누른 뒤 원하는 패키지 이름을 입력한다.

npmInit.png

입력을 받는데 그냥 엔터 키 치고 넘어가도 되고 적절히 입력해줘도 된다. 마지막에 yes을 입력해주면 pakage.json 파일이 만들어 질 것이다.

  1. npm i react react-dom 을 입력하면 npm이 react와 react-dom을 설치해준다. 그러면 pakage.json에 두 가지가 설치되었음이 기록된다.

  2. npm i -D webpack webpack-cli 를 입력해서 둘 다 설치해준다. -D 옵션은 개발에서만 사용하겠다는 의미로, 실제 서비스를 할 때는 웹팩이 필요하지 않다.

    npmDownload.png

    여기까지 마쳤으면 package.json이 다음과 같이 나타난다.

  3. 만든 패키지 안에 webpack.config.js 파일을 하나 만들어주고 다음과 같이 입력해준다.

     module.exports = {    
    
 }

  4. 같은 위치에 client.jsx 파일을 만들어준 후 다음과 같이 입력해준다. react와 react-dom을 노드의 모듈 시스템을 통해 불러온다.

     const React = require('react');
 const ReactDom = require('react-dom');

  5. 이제 index.html을 준비해 주는데, 이제 npm에서 알아서 불러오기 때문에 따로 react나 react-dom, babel 같은 걸 불러오지 않아도 된다. 다만 body 태그 안에 두 가지 태그가 필요하다.

     <!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
     <div id="root"></div>
     <script src="./dist/app.js"></script>
 </body>
 </html>

여기까지가 리액트를 세팅하는 방법인데, creat-react-app을 사용하면 이 과정이 알아서 세팅된다.

📔 모듈 시스템

옛날에는 컴포넌트가 2만 개라면 무조건 모든 컴포넌트를 다 불러와야 했는데, 지금은 모듈 시스템을 통해서 여러 개의 jsx 파일로 쪼개고, 필요한 컴포넌트만 가져와서 사용할 수 있다.

WordRelay.jsx

const React = require('react');
const { Component } = React;

class WordRealy extends Component {
	state = {
		...
	};
	
	render() {
		...
	}
}

module.exports = WordRelay;

client.jsx 파일로부터 컴포넌트를 쪼갤 때는 따로 require함수를 통해 리액트를 다시 불러와 주고, module.exports = className; 코드를 마지막에 반드시 추가해주어야 한다.

client.jsx

const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay');

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

다음과 같이 필요한 컴포넌트만 가져와서 사용할 수가 있게 되었다.

📔 웹팩의 필요성

모듈 시스템을 통해 여러 개의 파일로 쪼갤 수 있었지만, html 파일에서는 하나의 자바스크립트 파일만 즉, 하나의 컴포넌트만 인식하게 되어서 jsx 파일들을 하나로 합쳐주어야 html 파일에서 사용할 수 있게 된다. 그래서 이 파일들을 하나로 합쳐주는 웹팩이 등장하게 된다.

webpack.config.js

const path = require('path');
//node에서 경로를 쉽게 지정하게 해주는 것

module.exports = {
    //중요하지는 않은 부분
    name : 'wordrelay-setting', //웹팩 설정의 이름
    mode : 'development', //실서비스 : production
    devtool : 'eval',
    resolve : {
	    extensions: ['.js', '.jsx']
    },
    
    //entry와 output은 중요한 부분이다.
    entry : {
        app : ['./client'].
    }, // 입력
    output : {
        path : path.join(__dirname, 'dist'),
        filename : 'app.js'
    }, //출력
}

입력부인 entry를 살펴보면 원래는 다음과 같이 작성된다. app : ['./client.jsx', ‘./WordRelay.jsx’] 다만 client.jsx에서 이미 WordRelay.jsx를 이미 불러오고 있고, 이를 웹팩이 알아서 파악을 해주기 때문에 굳이 다 적어줄 필요는 없다. 그리고 resolve의 extension에 확장자를 적어놓으면 웹팩이 알아서 맞는 확장자를 찾아 합쳐준다.

출력부인 output에서는 노드 문법이 사용된다. 현재 폴더 위치 C:\Users\user\Documents\GitHub\React-Webgame\webpack path.join함수를 사용하면 자동으로 경로를 합쳐 다음의 경로를 리턴한다. C:\Users\user\Documents\GitHub\React-Webgame\webpack\dist 이를 통해 간단하게 path를 지정해줄 수 있다.

📔 웹팩으로 빌드하기

  1. cmd 창에 webpack이 명령어로 등록되어 있다면 그냥 webpack 이라고 입력해주고, command not found가 뜬다면 npx webpack 을 입력해주면 app.js 파일이 자동으로 만들어진다.

    다음과 같이 에러가 발생하게 되는데 웹팩이 라고 적힌 jsx 문법을 이해하지 못하기 때문이다.

error.png

  1. jsx 문법을 인식할 수 있게 하기 위해 babel을 웹팩에 등록을 해주어야 하고, babel 내에서도 추가적인 설정이 필요하다. 먼저 바벨을 설치하기 위해 다음과 같이 입력해준다. npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-transform-class-properties
    • core : 바벨의 기본적인 기능들 제공
    • preset-env : 각자의 브라우저 환경에 맞게 최신 문법을 옛날 문법으로 바꿔준다.
    • preset-react : jsx 문법을 사용할 수 있게 해준다.
    • babel-loader : 바벨과 웹팩을 연결해준다.
    • @babel/plugin-transform-class-properties : 클래스 속성을 초기화할 때 생성자를 사용하지 않고 간단하게 클래스 내부에 속성을 정의할 수 있도록 해준다. 바벨은 개발환경에서만 사용되므로 D 옵션을 준다.

    설치 후의 pakage.json은 다음과 같다.

      	...
      
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
   //새로추가된 부분
     "@babel/core": "^7.24.4",
     "@babel/plugin-transform-class-properties": "^7.24.1",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "babel-loader": "^9.1.3",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
   }
 }

  2. webpack.config.js에 설정을 추가해준다.

         ...	
     entry : {
         app : ['./client'],
     }, // 입력
    
     module : {
         rules : [{
             test: /\.jsx?/,
             loader: 'babel-loader',
             options: {
                 presets: ['@babel/preset-env', '@babel/preset-react'],
 		            plugins: ['@babel/plugin-transform-class-properties'],
             },        
         }],
     },
    
     output : {
         path : path.join(__dirname, 'dist'),
         filename : 'app.js'
     }, //출력
 }

    rules에는 여러 규칙이 적용될 수 있기 때문에 배열의 형태를 가지고, test는 정규표현식으로 지정해주었는데, .js와 .jsx 파일을 적용하겠다는 의미이다.

댓글남기기

참고