[React 기초] Webpack 설치 및 실행 (기본편) : 1탄 - 자바스크립트 웹팩

구구단 게임 예제를 통하여 Class형 Component든 함수 Component든 하나의 모듈 개념으로 Component가 관여하는 것을 알 수 있었습니다. 하지만 실제 예에서는 하나의 Component만 사용되는 경우는 거의 없고 수천 수만가지의 Component가 사용이 되어 하나의 프로그램을 이룹니다. 이렇게 수많은 Component(자바스크립트 프로그램)를 하나로 통하하여 효율적으로 사용할 수 있는 프로그램을 웹팩(Webpack)으로 불립니다. 

 

이러한 프로그램을 자동으로 통합하여 Webpack으로 만들어 주는 프로그램 또한 머리 좋은 누군가가 개발하여 Create-react-app이라는 프로그램으로 널리 통용되나 근본적인 내용을 모르면 사칙연산을 모르고 수학문제를 푸는 경우가 같기 때문에 조금 힘들더라도 기본부터 하나하나 정리해 보려고 합니다. 

 

웹팩은 React뿐 아니라 자바스크립트에서도 꼭 필요한 작업으로 하나 잘 세팅해 놓으면 충분히 다른 소스에 재활용할 수 있습니다. 

 

제로초 TV의 React강의와 코딩앙마의 프론트엔드 개발환경 세팅 강좌를 통해 나만의 것으로 만들어 보고자 합니다. 

 

웹팩을 만들기 위해서는 사전에 Node .js가 설치 되어 있어야 합니다. 

 

▒ Webpack 설치 순서

 

지금까지 React를 연습한 경우에는 script를 통해서 React를 import 하였고 JSX문밥을 위하여 Babel script를 HTML에 가져왔습니다만, 이제 순수하게 HTML id root에서 시작을 하도록 합니다. 

 

1. 기본 HTML과 JS 만들기 

 

아주 기본적인 프로그램상 웹에서 표현할 수 있는 id가 root인 HTML을 만듭니다. 파일명을 index.html로 합니다. 여기에 간단한 자바스크립트 파일(index.js)을 만들어서 script src로 연결해 봅니다. 편의상 향후 사용하는 JS파일등을 한곳에 모아 사용하는게 효율적이기 때문에 src폴더라는 곳에서 작업을 하도록 합니다. 

 

 

성기 웹에서 나오는 자바스크립트 파일(index.js)은 다음과 같습니다. 

 

 

 

2. npm (node package management)

 

이제 본격적으로 웹팩을 설치를 하는데 Node.js를 미리 google에서 검색하여 자신의 PC에 설치를 하고 진행합니다. 현재 VS Code를 사용하기에 Terminal에서 작업합니다. 

 

① npm init

 

Node 팩키지를 초기화 시켜줍니다. 이는 관련 package를 설치할 수 있는 환경으로 만들어 주는 작업입니다. 터민널에서 진행합니다. package name을 포함하여 Terminal에서 입력하는 문구가 나오는데 전부 skip해도 되고 필요한 내역을 입력해도 됩니다. 

저는 다음과 같은 경우만 입력했습니다. 최종 yes하면 package.json이라는 파일이 생성됩니다. 

 

 

package.json에서는 개발에 필요한 모든 환경 설정을 만들어 주는 역할을 합니다.

 

② React와 React-DOM 설치

 

역시 npm에서 설치를 할 수 있습니다. 자바스크립트만의 웹팩에서는 React가 필요 없겠지만 React를 하기 위해서 React 관련 소스를 설치해 줍니다. 

 

 

package.json에 dependencies를 보면 react와 react-dom이 설치된 버전을 확인할 수 있습니다.

 

 

 

③ 개발용 웹팩 설치

 

이제는 웹팩을 설치해 주는 웹팩과 웹팩명령어실행(cli) 파일을 설치해 줍니다. 개발용이기에 -D라는 명령어를 사용합니다. 이는 --save-dev와도 같은 명령어입니다. 

 

 

package.json에 devDependencies가 생긴것을 확인할 수 있습니다.

 

 

 

실제서비스에서 사용되는 서비스는 dependencies에서 개발에서만 사용되는 서비스는 devDependencies에서 사용됩니다. 

 

3. 웹팩 설정 (webpack.config.js)

 

웹팩을 실행 했을경우 웹팩의 명령어들이 실행되기 위한 환경설정을 해주는 파일입니다. webpack.config.js라는 파일을 직접 만들어 주고 다음과 같이 기본 형태를 만들어 봅니다. 

 

 

 

webpack.config.js의 기본 설정을 설명하면 다음과 같습니다.

 

환경설정을 할 수 있는 module을 외부로 보내는 (exports) 기본 설정중 첫번째 entry 항목은 프로그램의 기본이 되는 JS를 가져오는 역할을 합니다. React에서는 Component가 src폴더에 작성이 되갰지요. 

그 JS파일을 사용하여 출력(output)으로 dist라는 폴더를 만들어 main.js라는 파일을 만든다고 보면 됩니다.

 

src폴더에 새로운 JS파일을 만들어 보고 어떻게 작동되는지 확인해 보겠습니다. 

 

다음과 같이 src 폴더에서 간단한 text.js파일을 만들어 봅니다. 

 

output인 dist폴더에 새로운 main.js를 만들기 위하여 index.js와 text.js를 합쳐주는 역할을 하는 웹팩을 볼 예정입니다. 

index.js 파일로 text.js 파일을 합쳐 볼 생각으로 이를 위해서는 text.js 파일을 index.js파일로 보내는 export 작업을 하고 index.js에서는 import를 합니다. 

 

text.js

 

기존 '웹팩연습'대신 'textInput'으로 변경된 index.js

 

4. 웹팩 실행

 

웹팩 실행을 위해서는 package.json으로 가서 scripts에서 명령어를 등록(직접 타이핑)해 줍니다. 여기서는 build라는 명령어로 하겠습니다. 

 

 

Terminal에서 웹팩 실행 명령어인 npm run build를 기입하고 엔터합니다. 

 

 

dist라는 폴더가 생기고 main.js라는 새로운 파일이 생기면서 index.js와 text.js 두 자바스크립트가 하나로 합쳐진 것을 볼 수 있습니다. 

 

 

정말 잘 되었는지 웹에서 확인하기 위하여 처움 만들었던 index.html로 연결해 주고 웹을 실행해 보면 다음을 확인할 수 있습니다.  경로를 바꾸어 주어야겠지요. 

 

 

 

다음시간부터는 기본 개념은 끝났으니 좀 더 심화과정을 학습해 보도록 하겠습니다.