React 기본 : React Webpack 설치순서 정리 및 초보자에게 가장 많이 나오는 코딩 에러

지난시간 index.html에서 시작하여 React의 기본 package를 수동으로 하나하나 설치함으로써 최종 Webpack 명령어를 사용하여 화면에 출력까지 진행해 보았습니다. 

 

진도를 더 나가기에 앞서 React의 Webpack 설치에 대한 순서를 정리하고 저같이 완전 초보인 사람이 아무리 똑같이 따라해도 에러가 나는 경우가 다반사인데 대부분 어떤 내용이 에러인지 정리를 해보겠습니다. 

 

 

▒ Webpack 설치순서

 

관련된 프로그램이 결국 브라우저에 표현되는데 관여하는 파일은 index.html입니다. 여기서부터 다음 순서로 만들어 보는 과정을 갖도록 하겠습니다. 

 

---

 

1. Package.json 만들기

 

Pacjage.json은 Terminal창에서 npm init으로 만듭니다. 

 

① npm init

 

npm init 명령어 입력후 화면에 뜨는 내용을 입력하는데 대부분은 엔터만 치면 되고 타이핑이 필요한 부분은 

package name : 자신의 현 프로젝트 이름을 씀

author :  본인의 이름 또는 개발자명 

license : MIT 로 누구나 사용할 수 있게 (현재 연습이기 때문이지요.)

 

마지막으로 적용한 내용을 'yes' 타이핑 하면 기본 package.json 파일이 생성됩니다. 

 

 

② React를 사용하기 위한 명령어

 

CDN 주소를 사용하지 않고 Webpack에서 react를 사용할 수 있게 환경설정 합니다. 

 

npm i react react-dom

 

여기서 i는 install의 약자입니다. react와 react-dom 2개를 설치하는 명령어입니다. 

 

 

③ 개발자용 webpack 설치하기 

 

webpack과 webpack-cli를 같이 설치해 줍니다. 

 

npm i -D webpack webpack-cli

 

 

④ JSX 언어와 webapck을 연결하는 Babel 설치

 

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

 

위와 같이 기본적으로 총 4개를 설치합니다. 이후 상황에 따라 더 필요한 환경설정은 실행을 하게되면 자동으로 콘솔에서 에러로 알려주게 됩니다. 

 

---

 

2. webpack.config.js  파일 설정하기 

 

웹팩의 입력 -> 모듈 -> 출력을 담당하는 js파일을 만듭니다. Node 명령어인 path도 기본으로 설정하는편이 낫습니다. 

 

 

 

지난시간 내용을 천천히 따라해 보았으면 webpack.config,js의 내용을 전부 이해하리라 생각되며 직접 Key-in도 가능합니다. 

 

여기서 변동이 가능한 부분은 입력을 담당하는 entry의 파일명이 client,jsx인데 다른 파일명을 사용해도 무방합니다만 저 같은 경우도 무작정따라하면서 배우는 입장이라 그대로 사용할 예정입니다. 

 

 

---

 

 

 

 

3. client.jsx 파일 만들기

 

webpack에서 입력 entry를 담당하는 영역입니다. 

 

이 곳에서는 react와 react-dom을 require해서 실제 프로그램이 이루어지고 있는 Component를 렌더링시켜 root가 있는 HTML로 보내는 역할을 하고 있습니다. 

 

 

 

참고로 ZeroCho강의에서는 맨 마지막줄에 다음과 같이 selectors를 사용하고 있는데 에러가 나서 root만 사용합니다. 

 

 

---

 

4. 실제 프로그램이 작성되는 Class형 Component 파일

 

콤포넌트파일 이름을 Practice.jsx로 가정하고 진행을 해 보도록 하겠습니다.

 

여기서도 react가 require가 되고 프로그램이 끝나면 맨 마지막에 module이 export되야 합니다. 

 

 

①번은 react를 require하면서 component를 React에서 사용하겠다라는 내용이며 ②번은 실제 들어가는 프로그래밍 내용입니다. ③번이 여기서 사용된 모듈을 내보내는데 Practice라는 Class형 Component내용만 내 보낸다는 의미이며 이 내용은 client.jsx 파일에서 entry로서 사용됩니다. 

 

 

이렇게 작성이 완료되면 webpack을 실행하면 됩니다. 

 

package.json에서 webpack 명령어를 등록하거나 npx webpack이라고 타이핑하면 됩니다. 

 

그러면 미리 만들어 놓은 dist라는 폴더안에 app.js라는 퍼일이 만들어지고 내용은 index.html을 통하여 브라우저에 표현됩니다.

 

---

 

▒ 초보가 가장 많이 하는 에러 

 

우리가 직접 머리속에서 프로그래밍을 만들고 그리는 수준이면 여러가지 에러 형태가 나오겠지만 순전히 따라하면서 배우는 입장에서 에러는 딱 3가지로 나뉩니다. 

 

첫번째는 오탈자입니다. 

 

예를들어 client를 cleint로 쓴다든지 하는 경우인데요. 눈에 잘 안보이는 경우가 많지만 그래도 차근 차근 뜯어보면 보이는 에러입니다. 

 

두번째는 CamelCase를 지키지 못하는 경우인데요. JavaScript 파일사용시 흔히 일어납니다. 예를들어 WordRelay로 사용되어야 할 부분을 Wordrelay로 사용하고 지나가는 경우인데요. 역시 쉽게 발견할 수 있습니다. 

 

마지막으로 저한테는 찾아내는데 가장 어려운 에러메시지였는데요. 'unexpected token'입니다. 즉, 쉽표가 필요한 곳이나 세미콜론이 필요한 곳에 제대로 적용하지 못했다라고 하는 내용입니다. 

 

이 중에서 가장 어려운 부분은 괄호와 괄호사이를 지켜야 하는 부분에서 에러가 가장 많이 나고 찾기도 힘듭니다. 

 

만일 저처럼 초보인경우 공부하는 과정중에 에러가 도저히 보이지 않는다고 하면 괄호의 규칙을 지키지 않아서 생긴것이라고 이해하고 천천히 살펴보기를 권합니다.