Chapter1. 번들링
1.번들링의 개념에 대해서 이해한다.
2.프론트엔드 개발에서 번들링이 왜 중요한지 설명할 수 있다.
Chapter2. 웹팩
3.웹팩의 개념에 대해서 이해한다.
4.프론트엔드 개발에서 웹팩이 왜 중요한지 설명할 수 있다.
Chapter3. 웹팩의 핵심 컨셉
5.웹팩의 핵심 컨셉 6가지에 대해서 자신의 언어로 설명할 수 있다.
6.웹팩의 핵심 컨셉 6가지를 자신이 스스로 제작한 웹 애플리케이션에 적용하여 번들링할 수 있다.
7.HTML, CSS, JavaScript 번들링에 필요한 로더와 플러그인이 무엇인지 알고 적용할 수 있다.
Chapter4. 웹팩과 리액트
8.리액트에 웹팩이 필요한 이유에 대해서 자신의 언어로 설명할 수 있다.
9.리액트로 제작한 프론트앤드 애플리케이션을 웹팩으로 번들링할 수 있다.
10.리액트 애플리케이션에 꼭 필요한 로더와 플러그인을 번들링 시 적용할 수 있다
1.회고가 나오기전 어제 미리 작성(생략)
2.프론트엔드 개발에서 번들링을 하지 않는다면 용량이 훨씬 커지기 때문에 사용자가 이용하기도 어려우며 빈번하게 파일을 주고받아야 해서 로딩 속도도 느려진다. 하지만 번들링을 통해 파일을 묶어주면 한번에 파일을 다 받을 수 있기 때문에 편리하다.
3.회고가 나오기전 어제 미리 작성(생략)
4.Webpack이 필요한 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이며 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어들고 JavaScript ES6의 문법들을 ES5로 번환해주는 babel-loader를 사용할 수 있어 상위 언어를 개발에 편하게 사용하고 낮은 버전으로 배포할 수 있게 되며 보안까지도 신경쓸 수 있게 되는 장점이 있다.
5.웹팩의 핵심 컨셉은 entry, output, loaders, plugins, mode, browser compatibility가 있으며 각각의 컨셉은 아래와 같다.
-Entry 입구라는 의미를 가지고 있으며 다른 파일들을 하위로 두는 최상위 부모 컴포넌트에 사용된다.
-Output 결과, 산출물 같은 의미를 가지고 있으며 어떤 경로에 어떤 이름으로 번들된 파일을 내보낼지를 정하는 부분이다.
-Loaders 로딩과 유사한 의미로 import에 관여한다고 볼 수 있다. css, js를 import해서 사용하려면 각각의 js, css loader를 사용해야한다.
-Plugins 로더와 유사한 기능이지만 제한이 없으며 제작자의 의도에 따라 사용방식이 다르기 때문에 규칙도 가지각색이다. 클래스 형태로 나오기 때문에 new를 포함해서 사용해야한다.
-Mode production, development, none의 세가지 모드가 있으며 기본값은 none이 아닌 production이다.
-Browser Compatibility는 Target부분에서 설정하며 기본 값은 web이고 es"number"값을 통해 특정 ECMAScript 버전으로 번들링할 수 있다.
6.웹팩을 적용해 번들링을 한 내용을 어제 배포했으며 오늘은 리액트 번들링 과제를 진행했다.
7.html은 html-webpack-plugin을 사용하며 JS,CSS는 "style-loader", "css-loader"를 사용하여 config에 적용한다.
8.4번과 유사한 답변이 들어가겠지만 아무래도 리액트는 npm run start를 이용하지 않으면 html의 실행으로 작동하지 않기 때문에 번들링을 통해 html으로 실행할 수 있는 추가적인 장점이 있다.
9.리액트로 제작한 애플리케이션을 웹팩으로 번들링했다.
10.로더와 플러그인을 필요에 따라 사용할 수 있으며 에러메세지를 보고 원인을 찾아 해결했다.
오늘도 조금 어렵고 난관이 많았지만 해결하는 보람이 있는 과제였다.