Bundler
1.[Bundler] 번들러 개요
이번에는 번들러(Bundler)의 개념에 대해 알아보는 시간을 가져봅시다. 또한, 대표적인 번들러인 parcel, webpack 두 가지의 차이점에 대해 알아봅니다.
2.[Parcel] 프로젝트 생성
parcel-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.
3.[Parcel] 정적 파일 연결
본인이 프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지에 대해 배워봅시다.
4.[Parcel] autoprefixer
공급업체 접두사를 자동으로 진행해주는 패키지인 autoprefixer를 설치하고 설정해봅시다.
5.[Parcel] Babel
Parcel bundler를 통해 컴파일러의 하나인 Babel을 설치하는 방법에 대해 살펴봅시다.
6.[Parcel] 커맨드 라인 인터페이스
Parcel-bundler에서 사용하는 여러 CLI에 대해 알아보는 시간을 가져봅시다.
7.[Webpack] 프로젝트 생성
webpack-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.
8.[Webpack] entry, output
webpack은 기본적인 구성 옵션을 추가할 수 있습니다. entry, output 등의 옵션에 대해 살펴봅시다.
9.[Webpack] plugins
webpack 번들러를 통해 개발 서버 오픈을 하기 위해 필요한 플러그인을 설치하는 시간을 가져봅시다.
10.[Webpack] 정적 파일 연결
webpack 번들러를 통해 정적 파일 연결을 진행해봅니다.
11.[Webpack] module
이번에는 프로젝트에 css 파일을 통해 스타일을 적용해보도록 하겠습니다. webpack은 두 가지 방법을 제시하고 있으므로 각각 알아봅시다.
12.[Webpack] SCSS
이번에는 프로젝트에 SCSS 파일을 연결해보는 방법에 대해 살펴봅시다. 참고로 이전 글에서 css 파일을 적용하는 법과 연장선 상에 있는 내용이므로 module 글을 참고하는 것을 추천드립니다.
13.[Webpack] autoprefixer
공급업체 접두사를 자동으로 진행해주는 패키지 autoprefixer를 webpack을 통해 설치하는 방법에 대해 알아봅니다.
14.[Webpack] Babel
ES5 버전으로 변환시켜주는 컴파일러, Babel을 설치해보도록 합시다.
15.[Webpack] Netlify 배포
Webpack을 통해 만든 프로젝트를 GitHub에 올려 Netlify 배포까지 완성해보도록 하겠습니다.
16.[Bundler] NPX, Degit
parcel, webpack을 통해 만든 템플릿을 터미널을 통해 손쉽게 다운로드하는 방법에 대해 살펴봅시다.