[CRA 없이 리액트하기] #2 webpack,babel 설정해보기, 후기

지난 글 #1 에서는 리액트 개발환경 설정에 필요한 cra , webpack 과 babel 에 대하여 알아보았다.

 

이번에는 실제로 webpack 과 babel 을 어떻게 사용하는 지에 대한 것과

개발 서버를 띄울 수 있는 설정과 ,

여러 파일들을 묶어 하나로 번들링하는 빌드 작업 설정을 해보는 글을 작성 해볼 것이다. 

 

파일 구조 설정

public 과 src에 코드를 작성 

CRA 를 사용할때와 동일하게 파일 구조를 잡으려고 한다.

src 안의 index.js 는 밑에서 작성할 Entry Point , 즉 시작점이 되며

저 파일에 연결된 수많은 파일들이 있을 것이다.

 

public 의 index.html 은 이렇게 생겼다.

id 가 root 인 div 요소 1개만 

index.js 에서 id 가 root 인 div 태그를 불러와 react 와 연결 할 수 있게 하였다.

 

 빌드를 하면 여기(/public)에 있는 index.html 에

빌드된 bundle.js 을 script 태그로 넣어주고,

css 등을 style 태그로 넣어주도록 webpack 설정을 하여 

 

최종 결과물이 

/build 에 index.html , bundle.js 가 나오도록 할 것이다.

 

 

babel 설정하기

"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",

일단 이것들을 설치를 해줘야 한다. npm 이든 yarn 이든.. 아 devDenpendency 로 설치해야함!

 

하나씩 무엇인지 간략히 보았다.

 

@babel/core

말 그대로 핵심 부분인 것 같다. 없으면 안돌아감~

 

@babel/preset-env 

사실 babel 만으로는 아무것도 할 수 있는게 없다고 한다.

최신문법을 예전 문법으로 변환하는 여러 plugin 들을 모아 이것을 이용하라고 설정을 해줘야 한다.

plugin을 하나하나 찾아서 설정하면 번거롭기 때문에 

여러개를 모은 preset 을 제공을 한다. 그중 preset-env는 es6+ 것들을 죄다 모아둔 것이래나..

아 똑똑하대ㅋㅋ 

@babel/preset-react 

preset-env 와 동일한 개념이다. 리액트(jsx 등?)를 해석하려면 필요한가 보다.

 

@babel/plugin-transform-runtime

얘는 preset-env 에 들어있지 않는 듯 하다.

 

es8 에 추가된 async await 문법을 그냥 사용하면 

regeneratorRuntime is not defined 라는 에러가 발생하게 되고 

그것을 해결하기 위해 이 플러그인을 설치를 해줘야 했다.

 

 

babel.config.js

공식 문서를 보며 규칙에 맞게 작성을 해봄

babel.config.js 파일을 만들고

이곳에 사용할 preset 과 plugin 들을 규칙에 맞게 작성한다.

이 규칙은 공식 문서를 천천히 읽어보면 알 수 있다. 

구글검색해도 나오긴함

 

일단 이렇게 설정을 해놓으면 babel 설정은 끝

 

webpack  설정하기

 "webpack": "^5.61.0",
 "webpack-cli": "^4.9.1",
 "webpack-dev-server": "^4.4.0",
 
 "babel-loader": "^8.2.3",
 "style-loader": "^3.3.1"
 "css-loader": "^6.5.0",
 "html-loader": "^3.0.0",
 
 "html-webpack-plugin": "^5.5.0",
 "clean-webpack-plugin": "^4.0.0",

얘는 설치할게 좀 많다.

우선 가장 핵심인 

webpack , webpack-cli (cli 에서 사용할 수 있게) 

그리고 개발 서버를 설정 할 수있는 webpack-dev-server 를 설치한다.

 

그리고 나머지 loader 와 plugin 들을 설치를 한다. 

설명은 밑에서 차례대로 할 것이다.

 

 

webpack.config.js

babel 과 마찬가지로 webpack 도 설정파일을 만들어주고 규칙에 따라 작성해야한다.

다음은 webpack.config.js 의 시작 부분이다.

entry 와 output 설정 , 맨위는 필요한 플러그인,모듈 을 불러오는 코드

entry

진입점, 시작점으로 부터 연결되어있는 모든 파일을 찾아내서 하나의 결과물의 아웃풋으로 만든다.

 

output

어떤 위치에, 어떤 형식으로 아웃풋이 나오는가를 설정하는 곳  

 

module (loader 들)

html ,css ,babel 로더를 설정해주었다.

module: {
  rules: [
    {
      test: "선택할 파일 확장자의 정규표현식"
      use: [{
        loader: "사용할 로더 이름"
        option: "로더 옵션"
....

이런식의 규칙으로 작성을 한다.

로더들은 자바스크립트 외의 다른 파일들을 읽어올 수 있게 할 수 있다.

 

babal-loader 는 아까 설정한 babel을 js 혹은 jsx 파일을 읽을 때 적용하는 것

 

css 관련 파일들은 import "style.css" 로 블러올 수 있는데

이 작업을 하려면 css를 모듈로 변환을 해줘야 한다.

우선 css-loader 로 css 파일을 읽은 뒤 

style-loader 로 읽은 css들을 dom 에 적용한다.

 

이때 use 안에 순서를 조심해야한다!!

css-loader 를 읽고 style-loader 를 읽어야하고 뒤에서부터 앞으로 읽으므로 저 순서대로 작성한다.

 

html-loader는 html파일을 읽을 수 있게 해준다.

minimize:true 를 줘서 빌드시 공백을 제거하여 1줄짜리 html을 만드는 설정인가 보다.

 

 

plugins

plugin 을 설정하는 곳 resolve 는 js ,jsx 를 import 할때 파일 확장자를 입력 안해도 되게 해주더라

플러그인은 번들링 후의 결과물을 처리하는 곳이다.

 

html-webpack-plugin 으로 html 파일을 템플릿으로 지정할 수 있다.

번들링된 파일들을 index.html 에 자동으로 script 태그로 넣어주는 역할을 한다.

 

clean-webpack-plugin 은 번들링된 결과물을 번들링 할때마다

내용물을 지우고 새 번들링 요소들이 생길 수 있도록 해준다.

 

이밖에도 다양한 플러그인들이 존재하고 규칙에 따라 작성해주면 된다.

 

webpack-dev-server

webpack.config.js 의 밑부분 , 개발서버에 대한 설정이 들어있다.

webpack-dev-server 로 개발 서버를 열 수 있다.

마찬가지로 규칙에 맞게 webpack.config 파일에 작성을 해주면 설정할 수 있다.

 

이렇게 webpack config 파일을 어느정도 다 작성 한 후 

package.json 파일의 "scripts" 부분에 스크립트를 작성해주었다.

start 는 개발서버 오픈 , build 는 번들링한 결과물을 내보냄

각각 yarn start , yarn build 를 입력하면 설정해놓은 스크립트가 실행된다.

yarn build 를 실행하고 build폴더에 생긴 번들파일의 결과물 

개발서버도 정상적으로 실행되고 , 새로고침을 하지 않고 코드에 변경이 생기면 자동으로 반영이 된다!

 

build 명령어를 실행하면 build 폴더에 index.html 과 bundle.js 가 생긴다.

작성한 모든 파일과 라이브러리들이 js 파일 1개로 번들링 되고 난독화도 되었다. 

아까 설정한 플러그인으로 index.html 에 자동으로 번들링된 js 파일이 script 태그로 추가 되었다.

index.html 을 열면 작성한 리액트 앱이 실행된다. 

 

나만의 템플릿으로 만들기 

build 와 node_modules 를 제외하고 깃허브에 업로드함

어느정도 완성한 템플릿을 깃허브 레포지토리에 업로드 해놓았다.

 

https://github.com/GHooN99/start-react-without-cra

GitHub - GHooN99/start-react-without-cra: CRA(Create React App) 없이 리액트 개발 환경을 직접 만들어 보자!

리액트 프로젝트를 시작하고 싶을때 이 레포지토리에 갖춰진 템플릿을 다운받아

바로 코드를 작성하면 된다.

 

어떻게 파일을 다운로드 해서 가져올까??

git clone vs npx degit

git clone 으로 레포지토리를 받아와서 사용할 수 도 있다.

위의 레포지토리를 이용하려면 

git clone https://github.com/GHooN99/start-react-without-cra.git

으로 가져오면 된다.

 

하지만 git clone 으로 가져오면 새로운 프로젝트를 시작하고 버전관리를 새로 하고 싶을 때

git 커밋 내역까지 같이 가져오기 때문에 지워주고 다시 git 초기화를 해야 해서 번거롭다.

 

그렇다면 어떻게 커밋내역을 가져오지 않고 파일만 가져올 수 있을까??

  

 

degit 이라는 패키지를 이용하면 특정 깃허브 레포지토리를

버전 기록 없이 파일들만 다운받을 수 있다.

위의 레포지토리로 

npx degit GHooN99/start-react-without-cra folder-name

이렇게 명령어를 치면 folder-name 이라는 폴더안에 깃허브 레포지토리에 있는 파일들만 다운로드 된다.

폴더 안에서 새롭게 리액트 프로젝트를 시작하면 되는 것이다!

원한다면 git init 명령어를 실행해 버전관리를 시작해도 된다.

 

npx는 npm 패키지를 받아 1번만 실행시켜주는 명령어이다.

더 궁금하다면 npx vs npm 이라고 쳐보면 바로 나옴

 

 

앞으로 추가해볼만 한 것들

지금까지 webpack의 다양한 로더와 플러그인을 이용을 해보며 설정을 해보았다.

CRA 에서는 더 많은 기능을 제공을 해준다.

 

지금은 이 정도로만 추가했지만 필요한 로더와 플러그인 들을 적절하게 설치를 할 수도 있고

또 개발하는데 있어 도움을 주는 다양한 툴들도 설치를 해서 

더 편한 개발 환경을 제공할 수 도 있다.

 

더 추가해보면 좋을 것들 을 생각해보고 적어보았다.

 

sass(scss), postcss 와 autoprefixer 

css 의 확장되고 더 많은 기능이 추가된 scss를 지원하게 하려면 해당 로더를 설정해줘야 한다.

 

또 다양한 브라우저 지원을 위해

자동으로 css 접두어를 붙여주는 postcss에 있는 autoprefixer 라는 기능도 사용해볼 수 있겠다.

 

file loader , url loader

이미지 파일등을 로딩하는데 필요한 로더들이다.

사실 이미지파일을 사용하려면 필수인 것 같다.

 

webpack 번들링 최적화..?

지금은 index.js 와 연결된 모든 코드들을 1개의 파일로 묶어준다.

하지만 리액트 관련 라이브러리 등 그것도 1개로 묶는 바람에

번들링된 코드의 길이가 엄청나게 긴 것을 확인했다.

 

엄청 긴 코드는 용량도 클듯, 차라리 적당한 몇개로 쪼개서 번들링 한다면 

js 파일들을 다운로드 받는 속도가 더 빨라질 수도 있겠다.

 

번들링하는 과정에도 여러 옵션이 있고 적절하게 파일을 나누는 방법도 있다.

엄청나게 다양한 옵션이 있는데 전부는 아니더라도 적절하게 파일을 나누는 것을 적용해볼 필요가 있다고 생각했다.

 

eslint,prettier  등등 

자바스크립트의 특성상 코드를 작성할 당시에 오류를 찾기 힘들다.

그것을 코드를 작성할 때 코드 컨벤션 체크나 에러를 나타내면서 도움을 주기 위해

linter 라는 것을 사용하고  그 중에 제일 많이 쓰이는 것이 eslint 라고 한다.

 

또 여러가지 코딩스타일 설정을 강제 할 수 있어 코딩컨벤션을 맞추는데 도움도 된다. 

특히 jsx나 react hooks 에 대한 규칙을 지키지 않았을때 에러나 워닝으로 알려주는 기능이 있어

리액트로 개발을 할때 유용해 보인다고 생각했다.

 

코딩 스타일(공백 , 띄어쓰기 등등..? )을 잡아주는 prettier 도 함께 설정하면 좋을 듯 하다.

  

 

마무리하며

리액트 프로젝트를 만들 때 CRA 를 유용하게 사용했다.

 

분명 환경 설정에 대한 시간소비 없이 금방 코드에 집중 할 수 있게 해주는 좋은 툴이지만

어떻게 구성되어있는지는 한번 쯤은 알아놔야 할 것 같았다.

 

그래서 CRA 가 어떤 식으로 구성되어있는지 공식 깃허브를 찾아보고

yarn eject 명령어를 통해 여러가지 config 파일들이 존재한다는 것을 알았다.

 

그 중 중요한 부분인 번들러 , webpack 과 babel 에 대하여 개념을 알아보았고

 

webpack 으로 직접 리액트 개발 환경을 만들어 보았다.

 

webpack 에는 다양한 플러그인 , 로더 들이 있지만 이번 글들에서는

리액트 앱이 돌아갈 정도로 일부분만 적용하였다.

 

전부 다 공부하는 것은 이 시기엔 무리이고 

어떠한 기술을 어떻게 사용하는지 기본적인 구조 ,흐름만 알고 

 

공식문서에 자세히 설명되어있으니 필요할 때 

언제든지 찾아보면 금방 적용할 수 있는 수준까지는 공부를 더 해봐야겠다고 생각했다.

 

 

 

공식문서와 인터넷의 여러 글들을 살펴보면서 설정을 하는데

처음에는 너무 힘들었다... 에러가 발생하는 것을 보려면 직접실행할때까지 찾지 못한다.

특히 config 파일에 오타 하나라도 들어있으면 계속 어딘지 찾아야함,,,

 

그래도 확실히 해볼만한 경험이였다.

 

html css js 으로만으로 페이지를 제작했던 시절부터

nodejs 로 js 가 브라우저 밖으로 나오고부터 

개발을 좀 더 편하게, 실수를 줄일 수 있게 만들어 주는 여러 툴들이 나오고..

여러 파일을 하나로 묶어주는 기술 , 최신의 언어를 하나의 언어로 바꿔주는 기술도 나오고..

이러한 기술..??이 발전해 나가는 과정이 흥미로웠다.

 

조금 더 공부하여 시야가 넓어지면

어떠한 문제가 생겼을때 새로운 개념을 만들어내서 해결을 해나가는 과정

그것이 조금 더 잘 보일 것 같았다.

 

지금은 너무 멀리 있는 것 같지만 

하나씩 하다보면 언젠가 근처에 와있을 것이라 믿는다.