Create React App 을 사용하지 않고 직접 webpack 을 설치해서 Create React App 이 어떻게 만들어지고 무엇을 도와주는지 이해하고 webpack 사용법을 공부하기 위해서 글을 기록 합니다. ( webpack 설치 과정은 제로초님의 강의를 참고 하였습니다.)
먼저 개발을 진행할 폴더에 터미널로 접근 합니다.
그리고 터미널에
npm init
을 적어 줍니다.
그럼 package name, license, author 등을 입력하라고 글이 나오는데 package name 은 원하는 이름을 적고 license 는 MIT 로 해주고 author 는 본인의 이름을 적고 나머지는 엔터로 넘어가시면 됩니다.
그리고 마지막으로 Is this OK? (yes) 라는 글이 뜨는데 yes 를 입력해주시면 됩니다.
npm i react react-dom
설치가 성공적으로 진행 되었다면 package.json 에 react 와 react-dom 이 기록 됩니다.
해당 폴더에 package-lock.json 파일이 생성 됩니다.
5.리액트 하는데 필요한 web pack , webpack-cli 를 설치 합니다.
-D 가 의미하는 것은 개발할때만 이용한다는 의미. 실제 서비스 할때는 webpack 필요없음.
npm i -D webpack webpack-cli
react, react-dom 을 불러오는 코드 입니다. 그리고 불러온 ReactDom 으로 컴포넌트를 root 이름을 가진 div 태그 내에 랜더링 합니다.
그리고 컴포넌트의 코드는 분리하여 다른 jsx 파일에 코드를 작성 합니다.
8. index.html 을 생성하고 html 파일 안에
위와 같이 body 안에 div 와 script 태그를 추가 해 줍니다. div 태그는 app.js 파일에서 생성하는 UI 들을 div 태그 안에서 그리게 됩니다.
9. client.jsx 파일에서 render 함수에 넣어 랜더링 할 컴포넌트의 코드를 작성할 컴포넌트이름.jsx 파일을 생성해 코드를 작성 해 줍니다.
함수형 컴포넌트를 정의하는 코드 위에는 해당 파일에서 필요로 하는 패키지나 라이브러리를 불러오고 가장 아래에는 정의한 컴포넌트를 다른 파일에서도 사용할 수 있도록 해주는 코드이다. node 의 모듈 시스템이다. 이렇게 하면 client.jsx 에서 컴포넌트를 사용할 수 있다.
이 많은 파일들을 webpack 이 하나의 app.js 파일로 합쳐줘서 html 파일에 연결하여 실행할 수 있도록 해줍니다.
webpack 은 webpack.config.js 파일로 작동 합니다. 파일의 내용을 작성 합니다. 그리고 해당 폴더에 src 라는 이름의 폴더를 생성 합니다.
package.json 파일에 명령어를 등록 합니다.
위와 같이 명령어를 등록하고
npm run dev
를 터미널에 작성하면 webpack 이 실행 됩니다.
또는
npx webpack
을 터미널에 작성하면 webpack 이 실행 됩니다.
webpack 이 실행되면 src 폴더에 app.js 라는 이름의 js 파일이 생성 됩니다.
아마 지금까지 따라오셨다면 아래와 같은 에러가 터미널에 보여질 것 입니다.
위의 에러는 webpack 이
위의 코드 부분에서 이해를 못하겠다는 뜻 입니다.
에러의 이유는 위의 코드가 jsx 이기 때문에 이해를 못하겠다는 뜻 입니다. 이 에러를 해결하려면 webpack 한테 babel 을 설정 해줘야 합니다.
babel 한테도 jsx 를 따로 설정해줘야 합니다.
npm i -D babel-loader @babel/core @babel/preset-react @babel/preset-env
터미널로 babel 을 설치 해줍니다.
create React App 이 만들어지는 과정을 직접 하나하나 설정 하면서 create React App 을 이해하고 webpack 을 경험 해보며 webpack 사용법을 공부 할 수 있는 시간이 되었습니다.