React 기본 : React Web-pack 기본 설정하기

본 내역은 ZeoCho TV의 무료웹강의를 기본으로 하고 있습니다. 

 

드디어 Web-pack이라는 개념까지 와버렸네요. 아직 느낌은 React 1도 모르겠는데 말입니다. 아주 기본적인 개념은 지금까지 연습한 React는 Component 1개를 가지고 연습을 했으나 실제적으로 활용되는 Component의 개수는 표현할 수 없을 정도로 많다고 합니다. Facebook 자체가 2만개 이상의 Component로 이루어졌다고 하니 말입니다. 

 

이럴경우 코딩상에서 전부 Component를 정의하고 관리하고자 하면 불가능에 가까울 수 밖에 없겠죠? 이러한 비효율적 코딩작업을 방지하기 위해 개발된 것이 웹팩(Web-pack)이라는 개념입니다. 즉, 하나의 Package로 프로그래밍을 지원하는 개념인거죠. 

 

이러한 웹팩을 실행하기 위한 도구(javaScript 실행기)가 Node라고 합니다. 그래서 React 처음 시작하는 대부분의 강좌들이 Node.js를 먼저 설치하고 진행한 이유를 알 것 같습니다. 저 또한 React 초반에 Node.js부터 무조건 설치하고 따라한 흔적이 이 블로그에도 남아 있습니다. (이제 조금 이해가 될 것 같습니다.)

 

결론적으로 React에서 Web-pack이란 package.json이라는 파일을 만드는 것을 말하고 이를 위해서는 Node.js가 미리 설치되어 있어야합니다. (예전부터 Node.js는 이미 설치했기때문에 문제 없을겁니다.)

 

---

 

▒ Package.json

 

▶ 작업할 폴더를 만들고 React용 기본 index.html 파일을 다음과 같이 만듭니다.

 

 

 

▶ Terminal 창에서 Package 작업

 

VS Code Terminal 창에서 'npm init' 명령어를 칩니다. 이 명령어는 pakage.json 파일을 만드는 명령어입니다. 다음중에서 name은 원하는 이름, author는 본인이름이나 회사, license는 누구나 사용할 수 있는 MIT를 쓰고 마지막에 yes를 입력하면 해당 폴더에 package.json 파일이 생깁니다. 

 

 

VS Code를 보면 package.json의 내용이 보입니다. 

 

 

 

▶ Package.json 안에 React와 ReactDom 설치

 

terminal 명령어는 다음과 같습니다. 

 

npm i react react-dom

 

그럼 다음 그림처럼 React 버전과 함께 설치가 된 걸 확인할 수 있습니다. 

 

 

 

 

▶ Web-pack 설치

 

명령어는 다음과 같습니다. 

 

npm i -D webpack webpack-cli

 

여기서 -D의 의미는 개발(Development)의 의미입니다. 

 

설치가 완료되면 devDependencies가 설치된 걸 확인할 수 있습니다. 

 

 

devDependencies는 개발시에만 활용되며 실제 서비스에서 사용되는 것은 dependencies입니다. 구분을 알 필요성이 있습니다. 

 

▶ Node에서 React와 ReactDom 불러오기 

 

jsx 파일을 만들어서 다음과 같이 React 및 ReactDom을 불러옵니다. 

 

 

▶ index.html 수정하기 

 

client.jsx에서 React와 ReactDom을 불러왔기때문에 이전 index.html에서 CDN 주소를 링크시킬 필요는 없습니다. 여기서는 id="root"라는 명령어와 app.js의 경로가 제일 중요합니다. 

 

 

▶ module.exports 시킬수 있는 config.js 파일 만들기

 

 

 

여기까지가 React Webpack 구조의 기본사항입니다. 보통 이러한 작업을 자동으로 하는게 create-react-app으로 만들어지는데 기본구조를 모르고 사용하게되면 왜 create-react-app을 사용하는지 모르고 사용하기 때문에 의미가 많이 퇴색됩니다. 

 

저 또한 이렇게 수동으로 한번 세팅하니까 약간 개념이 잡혀 가는 것 같습니다. 이해를 하게되면 create-react-app을 이용하여도 쉽게 이해할 수 있다고 합니다. (정말 진심으로 동의하는 대목입니다.)