React 기본 : React Webpack 빌드하기 (Node 명령어 등록, 웹팩에 Babel 로더 설치)

본 내용은 ZeroCho TV의 무료강좌를 기본으로 하고 있습니다. 

 

지난 2시간은 React의 기본을 몰랐더라도 전체 팩키지가 형성되는 과정을 직접 Key-in 해보면서 이해를 해보았습니다. 이제는 기본적인 Tree가 형성이 되었으니 가장중요한 app.js를 만드는 webpack build를 해보도록 하겠습니다. 

 

Webpack Build를 하기 위해서는 명령어인 webpack을 사용하면 됩니다. 그런데 Node에서 자주보는 에러에 대해 설명하고 넘어가야겠습니다.

 

▒ Node 명령어 등록하기 

 

우선 VS Code Terminal창에서 webpack이라고 타이핑하고 엔터를 쳐보면 다음과 같은 에러메시지가 표시됩니다. 

 

 

즉, 프로그램으로 인식되지 않는다는 표시는 Node에서 이런 명령어가 등록되어 있지 않다라는 뜻입니다. 2가지 해결방법이 있습니다. 

 

① package.json에 등록하기 

 

package.json항목중에 script항목으로 가서 다음과 같이 webpack 명령어를 등록합니다. 

 

 

등록한 후 Terminal창에서 다음과 같이 명령어를 사용합니다. 

 

 

그전에 app.js의 폴더이름을 dist로 정의하였으니 미리 폴더를 하나 만들어줍니다. 그리고 npm run 명령어를 실행해 봅니다. 

 

dist 폴더안에 app.js 파일이 만들어진 것을 볼 수 있습니다. 에러가 하나 발견되었다고 나오는데 우선 Node 명령어 등록하는 기준으로 이해해 주기 바랍니다. 

 

② 두번째 방법은 Terminal 창에서 다음과 같이 npx만 붙혀주면 됩니다. 

 

 

 

어느방법을 사용하더라도 괜찮습니다. 그럼 역시 dist 폴더안에 app.js 파일이 생긴것을 볼 수 있습니다. 

 

 

 

---

 

 

 

▒ Babel Loader 설치

 

위 npm run dev 또는 npx webpack 을 실행해보면 다음과 같이 error 하나가 뜹니다. 

 

 

내용을 살펴보면 

 

"1개의 에러가 있는데 에러는 client.jsx 파일에서 발생되었고 알맞은 로더가 필요하다. 그래서 >ReactDom.render.... 의 내용을 이해하지 못하겠다." 정도로 해석하면 됩니다. 

 

이는 <WordRelay /> 의 형식이 JSX 문법이며 이를 위해서 이전 시간에 배웠던 Babel이라는 Loader가 필요하다는 뜻입니다. 

 

create-react-app를 사용하면 이 모든 것이 자동으로 설치되나 무엇이 어떤 기능과 의미인지 모르기때문에 웬지 그냥 암기해버린 느낌이지만 최초 시작인 HTML부터 하나씩 설치해 보는 과정이 훨씬 이해하는 측면에서 좋다고 판단됩니다. 

 

이제 Babel을 설치해 보도록 하겠습니다. 필요한 Babel의 파일들을 개발자용으로 설치를 해보도록 하겠습니다. 

 

필요한 파일들 Babel Core (기본적 내용을 설치), Babel Preset-env (브라우저별 설정 맞추어 주는 곳), Babel Preset-react (JSX 문법을 지원하는 곳), Babel Loader 4개를 설치해 줍니다. 

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

 

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

 

npm 명령어에서 스페이스 공간은 and와 같은 개념입니다. 상기와 같이 붙혀 쓸 수도 있고 개별적으로 써서 설치할 수 있습니다. 

 

VS Code 터미널창에 다음과 같이 입력하고 설치합니다. (일부러 나누어 해 보있습니다.)

 

 

 

package.json에서 잘 반영이 되었는지 확인합니다. 

 

 

 

---

 

▒ webpack.congig.js 에 webpack 연결설정

 

webpack을 연결하기 위해서 Loader인 Babel에 관련된 부분을 설치 하였습니다. 이제 webpack.config.js에서 좀 더 연결하는 설정을 한번 더 해 보겠습니다. 

 

 

여기서 package.json에 Babel Plugin도 다음과 같이 설치하였습니다. 

 

 

설치하는 명령어는 다른 Babel 설치와 같습니다. (npm i -D @babel/plugin-proposal-class-properties)

 

이제 중요한 webpack.config.js에서 Babel과 webpack을 연결시키도록 하는데 module이라는 단어로 연결시키도록 하겠습니다.

 

즉, entry (입력) --> output (출력) 개념을 잡았고 이 둘을 연결시키는 중간 역할이 module 입니다. 다음과 같습니다. 

 

 

한가지씩 설명해 보면,

 

① module의 중간역할을 선언하고 관련된 연결을 rules로 정의합니다. 

 

② test: /  /  로 감싸주는 것을 정규표현식이라고 합니다. 광범위한 내용이라고 하니 별도로 공부하는 것으로 하고 여기서는 js파일이나 jsx파일을 test 해주는 규칙으로 이해하면 될 듯합니다. 

 

③ Webpack 연결을 위해 Babel Loader를 선언해 줍니다. 

 

④ Option은 기 설치한 Babel 내역을 표현해 줍니다. 

 

 

이렇게 module을 선언하고 다시 Terminal 창에서 npx webpack 명령어를 입력후 엔터치면 다음과 같이 에러없이 app.js가 생성이 됩니다. 

 

 

 

잘 설치 되었는지 간단히 Test 해보죠.

 

WordRelay.jsx에서 간단히 다음과 같이 작성을 해봅니다. 

 

 

 

Terminal 창에서 다시 webpack을 build 합니다. 

 

 

app.js가 client.jsx와 WordRelay.jsx에 의해 generated 되었습니다. 

 

index.html로 가서 결과를 보면 다음과 같습니다. 

 

 

잘 실행이 되었습니다. 어려운 과정이었습니다. 

 

[사실 따라만 하는 수준이었는데도 불구 에러가 나서 스스로 복습하고 다시하는 과정을 몇 번 했습니다. 다음시간에는 저같은 초보자들이 할 수 있는 에러에 대해 이야기 하고 진도를 나가도록 하겠습니다.]