[React.js] Webpack 설치해보기

 

제로초님의 React 기본강좌 webgame 만들기 강의를 들으면서 웹팩 설치 관련 내용을 정리한 글입니다.

문제가 생길시 글 내리겠습니다 :)

웹팩이란? 🤔

최신 프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 요소를 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구를 말한다. 

 

웹팩에서 모듈은 HTML, CSS, Javascript, Images, Font 등등 을 모두 포함한다. 이 요소 하나하나가 모듈인셈이다. 웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될수 있는데 이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜주는 역할을 한다. 이렇게 압축 시켜주는걸 `모듈 번들러` 라고 한다.

---

Webpack 설치하기

자, 이제 본론으로 돌아와서 웹팩을 설치하는 법을 정리하고자한다. 

node.js 가 깔려있다는 전제이니 node.js 설치 방법은 다루지 않겠다. 

1. npm 설치

npm init

해당 프로젝트로 경로를 이동한 뒤 터미널에 `npm init` 명령어를 입력해 npm을 설치해준다.

설치가 완료되면 위에 이미지처럼 몇가지 설정을 해야하는데

프로젝트명, 권한자와 라이센스 정도만 입력해줘도 괜찮다. (실서비스 프로젝트에 대해선 좀더 알아봐야겠다.)

제로초님 강의에선 라이센스를 MIT로 입력해주어서 나도 그렇게 진행했다.

 

자동으로 생성된 package.json

자! npm 설치가 완료되면 해당 폴더에 내가 만든적도 없는 파일이 생성된다! 바로 package.json이다.

package.json은 프로젝트의 정보와 의존성(dependensies)를 관리하는 문서이다.

해달 파일에 npm을 설치할때 입력했던 정보들이 들어가 있을 것이다. 

앞으로 뭔갈 설치할때마다 이 파일에 자동으로 등록이 될테니 지켜보자 👀

 

2. React와 React-Dom 설치

npm 설치가 완료되었으면 이제 react와 react-dom을 설치할 차례이다.

npm i react react-dom

react와 react-dom을 install 하겠다는 명령어이다. 해당 명령어를 터미널에 입력하면 리액트와 리액트 돔이 설치된다.

react, react-dom을 설치후 폴더 상황, package.json 상황

우리 폴더에 node_modules와 pakage-lock.json이 생겼다!

그리고 package.json을 들어가보면 dependencies에 reacr와 react-dom이 추가된걸 확인할 수 있다.

 

3. webpack과 webpack-cli 설치

두구두구두...대망의 웹팩과 웹팩-cli를 설치할 차례이다.

npm i -D webpack webpack-cli

2단계인 리액트를 설치할때와 같은 명령어이지만, 이상한게 하나 붙어있다. `-D` 는 Dev server에서만 사용하겠다는 뜻이다.

 

package.json에 추가된 코드

설치가 완료되면 이번에도 webpack과 webpack-cli 두가지가 추가되어있을 것이다.

다만, react, react-dom과는 다르게 Dev server에서만 사용하겠다 했으니 devDependencies에 들어가 있는 것이다.

react, react-dom도 실서비스용이 아니라면 -D 를 붙여서 설치해주는것이 좋다.

 

4. webpack.config.js 파일 생성하기

앞에 3단계 처럼 패키지 관리자 툴을 이용하여 설치하는 것이 아니라 직접 파일을 생성해주어야한다.

프로젝트 폴더 최상위 위치에 생성해준다.

 

module.exports = {
	// 여기에 설정 넣을거임!
};

 

 

 

위처럼 파일을 생성해준 뒤에 생성해준 webpack.config.js에 위의 코드를 입력해준다.

이제 module.exports 안에 우리 프로젝트의 설정을 입력해주는거다.

 

설명을 위해 webpack.config.json의 설정 방법은 맨 하단에 설명하겠다!

 

5. client.jsx 파일 생성

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

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

client.jsx 파일을 생성한뒤, 위와 같이 입력을 해준다.

1,2 번째 줄은 react와 react-dom을 불러오는 코드이다.

그리고 마지막 코드는 index.html 안에 있는 #root(#root를 가지고 있는 DOM)에 InstallTest component를 render 하겠다는 거다.

 

6. InstallTest component 생성 및 코드

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

class InstallTest extends Component {
	state = {
    	text : '성공적인 웹팩 설치! 😊',
    };
    
    render(){
    	return <h1>{this.state.text}</h1>
    }
}

module.exports = InstallTest;

InstallTest.jsx 파일을 만들어준 다음 위의 코드를 입력해준다. 코드내용은 대략 이렇다.

 

1. const React = require('react');

npm에서 리액트를 불러와준다.

 

2. const {Component} = React;

이걸 작성해주면 class 컴포넌트 이름 extends React.Component{} 에서 React.을 생략하고 줄여서 사용할수있다.

 

3. module.exports = InstallTest; 

🔥🔥이걸 꼭 작성해줘야 한다! 해당 컴포넌트를 내보내주는 코드이다!!@@@

그래야 다른 곳에서도 해당 component를 재활용하여 사용할 수 있다!

client.jsx에 넣어도 될 코드를 굳이 따로 파일을 만들어서 작성해준 이유가 코드의 재활용때문이므로 이 코드를 잊지말자.

 

7.  index.html 파일에서 app.js 경로 설정

<script src="./dist/app.js"></script>

index.html 파일에서 app.js 파일의 경로를 dist 폴더 밑에 만들어준다.

dist 폴더가 없다고 당황하기 금지 ❌ 당연히 안만들었으니까 없다.

따로 만들어줄 필요 없다. webpack을 실행하면서 알아서 등장할예정~

 

8. InstallTest component 불러오기

먼저, client.jsx 파일을 연다. 

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

그리고 react,react-dom을 불러온 다음 코드에 위의 코드를 넣어준다.

이렇게 하면 class InstallTest 를 불러와서 사용할 수 있는것이다.

 

9.  webpack.config.js 설정하기

그런데 리액트에서 문제는 html에선 딱 한가지 경로밖에 불러오지 못한다는 거다. 우린 지금 test 를 하는건데도 두개의 파일을 만들었다.

바로 client.jsx와 installTest.jsx인데...html에선 한가지밖에 불러오지 못한다...

그래서 이 모든걸 합쳐주는 웹팩이 필요한 것이다!

 

mission : app.js 파일 한개로 여러개 jsx 파일을 출력하기! 🏃‍♀️🏃‍♀️🏃‍♀️🏃‍♀️🏃‍♀️🏃‍♀️🏃‍♀️

entry : {} 

- 입력, 파일을 입력하는 곳이라고 보면 된다. 배열로 입력한다. 

 

output: {}

- app.js 한개의 파일로 여러개 파일을 하나로 합친다.

 

10. webpack 명력어 등록

command 라인에 명령어로 등록이 되어 있어야 동작을 한다. webpack 명령어를 실행하는 두가지 방법이 있다.

 

1. webpack 명령어 등록해주기.

2. package.json 파일 안에 "scripts" 추가해주기

이렇게 scripts 안에 입력해주면 `npm run dev` 를 입력하면 웹팩이 실행이된다!

아니면 `npx webpack` 을 입력하면 실행이 된다.

 

자, 여기서 webpack 을 실행하면 에러가 뜰텐데 그건 바벨(babel)을 설치 하지 않아서다. 바벨은 이어서 설치할 예정이다.

우선 폴더 구조를 다시 보자.

오잉? 👀👀

내가 생성하지도 않았던 dist 폴더와 app.js 파일이 자동으로 생성됐다!

이게 앞에서 내가 따로 생성해주지 않아도 

저절로 생긴다고 했던 이유다 🙌

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11.  Babel 설치하기

1. babel 코어 설치

npm i -D @babel/core

2. babel preset-env 설치 : 나의 브라우저 환경에 맞춰서 최신문법을 옛날 문법으로 지원해준다.

npm i -D @babel/preset-env

3. babel preset-react 설치 : jsx 지원

npm i -D @babel/preset-react

4. babel-loader 설치 : babel과 웹팩 연결해준다.

npm i -D babel-loader

5. babel plugin proposal-class-properties 설치 : state = {} 문법을 사용하려면 추가해야하는 플러그인

npm i -D @babel/plugin-proposal-class-properties

정상 설치되었다면 package.json 파일에 devDependencies에 자동으로 버전명과 함께 등록이 됐을거다.

 

Tips : 설치하다가 중간에 error가 뜨면 에러 메세지를 잘 읽고 해결하자.

프로젝트마다 필요한 설치 프로그램이 다른데 필요한 프로그램이 생기면 친절하게 메세지로 알려준다 😊

 

12. 바벨 설정

자, 이제 바벨을 설치해주었으니 webpack.config.js 에서 babel과 webpack을 연결해주자.

 

webpack.config.js에 다음과 같이 module을 추가해준다. 

위의 흐름은

1. entry에 있는 파일을 읽고 2. module을 적용한 후 3. output에 뺀다.

라고 이해하면 위의 코드를 이해하기 쉬울 것이다. 

 

자, 이제 모든 세팅이 끝났다. 다시 npx webpack을 명령어에 입력해보자.

 

정상적으로 webpack이 실행됐을때 뜨는 터미널 화면

저 밑에 successfully가 보이는가! 성공적으로 webpack을 설치하고 세팅하고 연결한것이다! 오예!

 

이제 index.html을 live server로 확인해보면

 

아까 InstallTest component에 입력한 내용이 정상 출력된다. 굿굿

 

웹팩 설치 소감 : 👏👏👏👏
제로초님 강의를 3번정도 정독한거 같다. 오타로 인한 에러도 발생해서 땀 뻘뻘 흘리면서 못찾고 해결했던 시간도 있었고
이해가 안돼서 여러번 돌려봤지만, 웹팩이 어떤 역할을 하고 어떻게 돌아가는건지에 대해 어느정도 이해할 수 있을 거 같다.

---

+ + +

놀랍게도~~~~ 🙀🙀🙀🙀🙀🙀

이 위 과정을 거치지 않고 한번에 webpack 설치 실행을 해주는 명령어가 있다~!

바로바로 create-react-app 이다.

이 명령어 하나만 치면 돼서 쉽고 간결하지만 이렇게 설치를 하면

웹팩이 어떻게 연결이 되는지에 대한 흐름 이해를 못해서 직접 설치를 해본 것이다. 

 

지금까지 vue나 react를 알음알음 공부하면서 webpack에 대해서는 흐린눈을 해왔는데 이렇게 짚고 넘어가니 후련한 기분이다. ㅎㅎ