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 를 입력해주시면 됩니다.
- 그럼 해당 폴더에 package.json 파일이 생성 됩니다. 여기에 react 개발에 필요한 package 들을 넣어주면 됩니다.
- react 와 react-dom 을 설치 합니다. 여기서 i 는 i 뒤에 입력하는 파일들을 설치하겠다는 뜻 입니다.
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- 해당 폴더에 webpack.config.js 파일을 생성 해줍니다.
성공적으로 생성 되었다면 해당 폴더에 위와 같은 파일이 생성 됩니다.
생성한 webpack.config.js 파일에 위의 코드를 작성 합니다. - client.jsx 파일을 생성해서 파일안에 아래의 코드를 작성 합니다. js 파일로 생성할 수 있지만 jsx 확장자로 파일을 만들면 파일 안에 jsx 문법을 사용했다는 것을 바로 알아볼 수 있는 장점이 있다.
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 에서 컴포넌트를 사용할 수 있다.
- 아래의 코드와 같이 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 을 설치 해줍니다.
- babel-loader : babel 이랑 webpack 연결 해준다.
- @babel/core : 기본적인 babel, 최신문법으로 바꿔준다.
- @babel/preset-react : jsx 를 바꿔준다.
- @babel/preset-env : 사용자의 환경에 맞게 알아서 바꿔준다.
- webpack.config.js 파일에 module 를 추가하고 그 안에 rules 를 정의한다. entry 의 파일을 읽고 거기에 module 의 rules 를 적용해서 output 으로 app.js 파일이 만들어지게 된다.
rules 는 여러개의 규칙들을 정의할 수 있기 때문에 배열이다.
위와 같이 module 을 작성해주고 터미널에 npx webpack 을 입력해서 잘 작동 한다면 성공적으로 잘 진행 된 것이다.
create React App 이 만들어지는 과정을 직접 하나하나 설정 하면서 create React App 을 이해하고 webpack 을 경험 해보며 webpack 사용법을 공부 할 수 있는 시간이 되었습니다.
