[Pre Onboarding] 9월 2일 6주차

김종원·2021년 9월 2일

WeCode wanted 원티드 위코드

[Pre Onboarding]

목록 보기

12/12

[Pre Onboarding] 9월 2일

webpack

웹팩은 모듈 번들러 이다!

번들러(bundler)

번들이란 여러 파일, 여러 구성을 합치는 것을 말하므로 번들러란 합치게 해주는 것을 말합니다.
모듈화된 파일들을 하나로 묶어 관리해야하므로 번들러의 역할이 중요해졌습니다.
모듈간의 의존성을 파악하여 하나의 파일로 만들어줍니다.
npm run build 후에 하나의 자바스크립트 파일로 나온 결과물이 바로 번들된 결과입니다.
ex) webpack, RequireJS, Rollup, Parcel

모듈(module)

A module is one of the separate parts.

자바스크립트에서의 모듈이란 기능이 구현된 "자바스크립트 개별 파일"이라고 생각하면 됩니다.
잘 만든 모듈패턴은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope이 되도록 구현해야 합니다. 그래야 파일 내에서 변수도 자유롭게 선언할 수 있고, 관련 기능만 하나의 파일에 구현해서 다른 파일의 방해를 받지 않을 수 있게 됩니다!
바닐라 자바스크립트에서의 모듈패턴은 scope 개념을 활용해서 직접 구현해야 하며, 다른 도움 없이는 모듈화 시스템을 구축할 수 없습니다. commonJS, AMD, ES2015 등을 통해서 모듈화 시스템을 사용할 수 있습니다. 프론트앤드에서 모듈화는 아주 예전부터 있던 개념이며, react가 없던 시절에도 모듈화를 사용했었습니다.

정의

프로그램을 구성하는 단위
자신만의 독립적인 실행 영역
보통 파일 단위로 나뉨

모듈패턴과 필요성

자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용
전역 변수의 사용을 최소화 하기 위함
변수 scope을 지정해서 사용하기 위함
Reusablility, Isolation, Organization
모듈 단위로 소스를 개발하면 각 모듈 간의 의존성을 최소화하거나 의존성 파악하기 쉬움

babel

compiler?

In computing, a compiler is a computer program that translates computer code written in one programming language into another language

풀어서 설명하자면, 사람이 읽기 편한 프로그래밍 언어에서 컴퓨터가 읽기 편한 코드로 바꿔주는 것을 컴파일러라고 합니다.

바벨이 필요한 이유?

Babel은 JavaScript 컴파일러이다.

JavaScript는 컴파일 언어가 아닌데?
Babel은 방금 나온 따끈따끈한 신상 자바스크립트 버전을 어느 브라우저에나 사용할 수 있도록 ES5 버전으로 변환해줍니다. 즉, 브라우저는 아직 새로운 자바스크립트 버전을 맞이할 준비가 안 됐는데, 개발자는 새로운 버전으로 효율적인 문법을 미리 쓰면 좋으니까 이런 Babel이 나온 것입니다.
자바스크립트에서 자바스크립트로 변환하는 것이지만, 높은 버전에서 낮은 버전으로 바꿔주고, 그 낮은 버전은 브라우저가 해석할 수 있는 버전이므로 컴파일이라는 단어를 쓰는 것 같습니다. 하지만, c, c++, java에만 사용하는 컴파일이라는 단어에 익숙한 사람은 컴파일러 대신 "트랜스파일러"라고 하는 사람도 있습니다.
우리가 create react app으로 개발을 할 때 아직 브라우저가 받아드리지 못하는 각종 최신 메서드 들을 사용하는 경우가 많습니다. create react app에서는 이미 Babel 설정이 되어있기 때문에 우리는 버전을 고려하지 않고 마음대로 개발할 수 있었던 것이죠!

바벨과 관련된 필수 module

무조건 항상 설치하고 시작!

babel-loader: 바벨과 웹펙이 어떻게 동작할수있도록하는 loader
@babel/core: babel로 컴파일해서 결과물 파일이 나오도록 babel관련한 핵심 모듈들이 들어있다.
@babel/preset-env: ES2015?6?7 등 어떤 버전을 쓸지에 관한 모듈
@babel/preset-react: jsx(브라우저에서는 이해하지 못함)를 js로!

webpack 설치와 실행

Step1. 빈폴더 부터 만들기 시작

빈폴더 만들기
```
mkdir react-webpack
cd react-webpack
```
그리고 application의 시작점(entry point)인 자바스크립트 파일 하나는 생성해줘야 합니다.
```
mkdir src
touch src/index.js
```
- 익숙한 create react app의 구조를 따라하겠습니다. src 폴더 밑에 이 프로젝트의 가장 시작점! index.js 파일을 만들어줍니다.
package.json 파일도 초기화
```
npm init
```

Step2. webpack 설치와 설정파일

웹팩, 바벨 둘 다 배웠으니까 처음에 필수로 필요한 모듈 한꺼번에 설치!

yarn add webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react -D
yarn add react react-dom

babel도 세팅을 해줘야 하는데 좀 이따 하기로 하고, 일단 webpack 설정 파일부터 생성합니다. 이 프로젝트의 root 경로에 만드시면 됩니다.
config는 사용자마다 다 다르다

```jsx
// webpack.config.js

const path = require('path');

const config = {
  entry: './src/index.js', //무슨파일부터 시작해라고 하는것
  output: { //
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

module.exports = config;
```

- 만약 나는 지금 단계에서 꼭 깊게 공부해야만해! 그런 경우 Node.js에 모듈시스템을 사용하기 위해 기본으로 채택된 commonJS를 검색해서 알고 넘어가면 됩니다. commonJS, require, module.exports를 검색해보세요. 다 알아서 해주는 create react app에서는 ES6에서 제공하는 import, export 를 사용하여 모듈시스템을 잘 썼지만, 이 키워드는 브라우저에서 이해하지 못하는 문법입니다. 그래서 babel을 써야하고, babel이 적용되지 않는 webpack 설정 파일은 Node.js의 모듈방식을 따라야 하므로 require, module.exports 등을 사용하는 것입니다.'

webpack 실행하기

이제 설정이 잘 되었는지 실행해볼까요? webpack 명령어를 사용해서 실행해야 하므로 package.json 의 script에 webpack 을 추가해보겠습니다.

{
  "name": "react-webpack",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack"
  },
  "author": "wecode",
	"devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

그리고 build 명령어를 실해봅시다.
```
yarn build
```
build 폴더 밑에 bundle.js 파일이 생겼나요? 그러면 성공. good 👍🏼

김종원

발전하기위한 기록

이전 포스트