[React] ⑧ WebPack 설치 및 개발환경구성 (1)

2021.10.04

59번째 포스팅

 

입사 210일차.

개발에는 늘 진입방지턱이 존재한다.

대표적으로는 C의 포인터, React의 WebPack 등이 있다.

오늘은 React의 진입방지턱 역할을 하는 WebPack의 설치법 및 개발환경구성을 알아보려고 한다.

 

 

0. 출처

① ZeroCho님의 무료 인프런강좌 (링크)

② Do it! 리액트 프로그래밍 정석 (eBook)

③ 초보자를 위한 Node.js 200제 (오프라인 구매)

 

 

1. package.json

  ① npm(Node.js에서 사용할 수 있는 모듈들을 모아둔 저장소)을 사용해서 설치한다. 

  ② package의 정보를 관리한다.

  ③ Visual Studio Code(이하 VSC)에서 터미널을 연다.

 

  ④ WebPack을 설치할 폴더로 이동한 뒤, npm init 입력

 

  ⑤ 아래와 같이 메세지가 출력된다면 사용할 package 이름을 입력해준다.

       패키지 이름까지 작성해주면 여러가지를 입력하라고 표시되는데 author, license만 입력해주면 된다.

        저는 package name : day06, author : limreus, license : MIT 로 진행했습니다.

 

  ⑥ 마지막에 나오는 확인여부에 yes만 입력하면 Webpack 설치경로로 지정했던 폴더에 package.json 파일이 생성된다.

 

 

2. React&ReactDOM 설치

  ① npm을 사용해서 설치한다.

  ② package.json이 설치된 폴더에 npm i react react-dom 을 입력한다.

 

  ③ 설치가 완료되면 Terminal에 react와 react-dom의 버전이 표시되고, 해당 내용들이 package.json에 자동으로 작성된다.

 

 

3. webpack 설치

  ① npm을 사용해서 설치한다.

  ② package.json이 설치된 폴더에 npm i -D webpack webpack-cli 를 입력한다.

        ( -D는 개발용으로만 사용하겠다는 명시(생략가능) )

 

  ③ 설치가 완료되면 Terminal에 webpack과 webpack-cli의 버전이 표시되고, 해당 내용들이 package.json에 자동으로 작성된다.

  ④ WebPack은 -D를 붙여서 설치했기때문에 devDependencies로 작성된다.

 

 

4. webpack.config.js, client.jsx

  ① 같은 폴더안에 webpack.config.js, client.jsx 파일을 만들어준다.

  ② 각 파일에는 아래의 그림처럼 코드를 작성해준다.

 

  ③ 위의 파일들이 만들어지면 react, react-dom, babel을 Script로 가져올 필요가 없게 된다.

        (아래의 그림과 같이 더 이상 스크립트를 작성할 필요가 없다. (생략가능))

 

 

5. index.html

  ① Component를 렌더링하는 메인페이지

  ② 기본구조

 

 

다음포스팅의 주제

[React] ⑧ WebPack 설치 및 개발환경구성 (2)