회고

회고. 22.07.26

JJ_hyun 2022. 7. 28. 14:23

번들링

  • 번들링의 개념에 대해서 이해한다.

프론트 엔드 개발자에게 번들링은 사용자에게 웹 어플리케이션을 제공하기 위한 파일 묶음 이다. 

 

  • 프론트엔드 개발에서 번들링이 왜 중요한지 설명할 수 있다.

사실 작은 규모의 프로젝트의 경우 HTML CSS JavaScript 파일을 그냥 전송해도 크게 상관이 없는 듯 하다.

하지만 규모가 커지면서 발생하는 문제들이 있는데 이를 번들링이 해결해 준다. 

 

프로젝트 규모가 커지거나, 파일을 나눠서 관리할 경우 만약 변수가 같다면 충돌이 일어날 것이다. 

또한 불러와야 할 파일이 많아진다는건 무거워 진다는 소리고 인터넷 속도가 느릴 경우 이는 사용자에게 불편함을 야기할 수 있다. 

만약 번들 파일을 줄이고자 파일의 공백을 다 지워서 코딩을 하게 되면 가독성이 떨어진다. 

 

 

 

웹팩

  • 웹팩의 개념에 대해서 이해한다.

22.7 현재 애플리케이션 배포를 위해서 가장 많이 사용되는 번들러이다. 

웹팩이란 여러 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. HTML CSS JavaScript 등의 자원을 각각의 모듈로 보고

이를 조합해 하나의 묶음으로 번들링하는 도구이다. 

 

  • 프론트엔드 개발에서 웹팩이 왜 중요한지 설명할 수 있다.

여러가지 이유 중 두가지를 꼽자면 하나는 웹 애플리케이션의 속도향상과 현재 웹의 특성상 많은 JS코드양의 따라

변수와 스코프의 이슈를 해결하기 위해 번들러는 사용하는 목적도 있다. 

또한 일부 브라우저에서 지원하지 않은 ES6 문법은 ES5문법으로 변환해주는 loader를 사용할 수도 있다. 개발자 본인이

원하는 최신의 개발 방식을 선택하여 개발할 수 있게 지원해 준다.

 

 

 

웹팩의 핵심 컨셉

  • 웹팩의 핵심 컨셉 6가지에 대해서 자신의 언어로 설명할 수 있다. 

target : 기본값은 web이다. 다양한 환경을 컴파일 할 수 있는데, esX를 넣으면 지정관 JS버전으로 컴파일을 할 수 있다. 

module.exports = {
  target: ["web", "es5"],
};

=> 작성된 코드를 ES5 버전으로 컴파일 하겠다고 지정한 모습을 볼 수 있다. 

 

entry : 프론트엔드 개발자가 작성한 코드의 시작점이다. 

 

output : 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack 에 알려주는 역할이다. 

 

loader : webpack 은 기본적으로 JS 와 JSON 파일만 이해를 한다. loader 를 사용하면 다른 유형의 파일(HTML,CSS .. ) 를

처리할 수 있게 해준다. 

 

plugins : 번들을 최적화 하거나 에셋을 관리하고, 환경변수에 주입하는 등 광범위한 작업을 할 수 있게 해준다. 

 

optimization(최적화) : 선택한 항목을 최적화 해준다. 대표적으로 minimize 와 minimizer 가 있다. 

 

 

  • HTML, CSS, JavaScript 번들링에 필요한 로더와 플러그인이 무엇인지 알고 적용할 수 있다.

loader : 파일을 해석하고 변환하는 과정에 관여한다.

( 자바스크립트가 아닌 웹자원(HTML,CSS...)의 변환을 도와주는 속성. )

 

plugin : 웹팩의 기본적인 동작에 추가적인 기능을제공하는 속성, 해당 결과물의 형태를 바꾸는 역할.

 

CSS 에 필요한 loader

- css-loader : CSS파일을 가져오고, CSS코드로 변환해준다. 

- style-loader : 스타일을 DOM에 적용해준다. 

 test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 합니다
        exclude: /node_modules/,

 

 

웹팩과 리엑트

  • 리액트 애플리케이션에 꼭 필요한 로더와 플러그인을 번들링 시 적용할 수 있다.

-> babel/core : 리액트는 ES6 문법을 사용한다. 이를 ES5 문법으로 변환해줌. 

-> babel/preset-react : jsx 문법을 JavaScript 문법으로 변환시켜 준다. 

-> babel/preset-env : es6 -> es5 로 변환 뿐만 아니라 브라우저에 따라 알아서 컴파일 해준다. 

-> babel-loader : 자바스크립트 파일을 babel preset.plgin 과 webpack을 사용하여 es5로 컴파일 해주는 plgin