Bundler
1.Bundler(Parcel-01.프로젝트 생성)
구성 없는 단순한 자동 번들링소/중형 프로젝트에 적합parcel-template-basic 폴더 생성하고 진행!개발 의존성 패키지로 parcel-bundler 설치reset.css cdn으로 불러오기!
2.Bundler(Parcel-02.정적 파일 연결)
img, faviconhttps://www.icoconverter.com/현재 index.html 파일은 Pacel Bundler을 통해서 dist라는 폴더에 변환되서 삽입!hash 기호를 통해 경로가 연결dist는 언제든지 parcel bundler을 통해
3.Bundler(Parcel-03. postcss, autoprefixer)
표준기술을 제공하지 못할 경우 시범 테스트로 만들어진 기술을 사용할 수 있도록 접두사에 특정 구문을 입력한 것browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시할 용도그 명시를 Autoprefixer 패키지가 활용하게 된다뒤에 rc(R
4.Bundler(Parcel-04. babel)
ES6 이상의 코드를 이전 JS엔진에서 실행할 수 있는 이전 버전과 호환되는 JS버전으로 변환하는데 주로 사용앞으로 작성하는 모든 js는 babel을 통해서 es5 문법으로 변해서 작동 함전 시간에 postcss를 추가하면서 입력한 부분은 babel에서도 동일하다!그렇
5.Bundler(Parcel-05. CLI)
https://ko.parceljs.org/HMR(Hot Module Replacement)는 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식을 말함
6.Bundler(Parcel-06. 저장소 업로드)
.DS_Store : Macgit init으로 버전관리 초기화git status으로 기본 목록 확인git add .으로 버전관리 시작git status로 활성화 확인git commit -m 'Create project'으로 버전 하나 생성git log으로 버전 생성 확
7.Bundler(Webpack-01.프로젝트 생성)
매우 꼼꼼한 구성중/대형 프로젝트에 적합설치시 webpack-dev-server@next의 메이저 버전을 webpack-cli와 일치시켜줘야한다(@next를 붙여준다)parcel과 달리 webpack은 구성 파일을 직접 생성해주어야 한다webpack은 우리가 구성요소를
8.Bundler(Webpack-02. entry, output)
node.js 환경에서 작동한다새롭게 구성 파일이 생성이 되면 이전 구성파일이 여전히 존재한다!clean 이라는 옵션을 통해서 이전 구성 파일을 지워주고 구성파일을 만들어준다https://webpack.js.org/https://webpack.js.o
9.Bundler(Webpack-03. plugins)
1. 개발서버 open 01. html-webpack-plugin package 설치 02. 구성파일에 추가 03. 실행 
상대 경로를 ./images/관광고.jpg로 할 수 있는 이유는 최종적으로 dist에 번들된 결과로서의 경로이기 때문이다webpack.config.js에서 구성 파일에 패키지 추가
11.Bundler(Webpack-05. module)
index.htmlstatic/css/main.csswebpack 자체는 css 파일을 읽을 수 없기 때문에 오류가 발생 패키지 설치 필요!상대경로를 잘못 작성!(main.js)
12.Bundler(Webpack-06. SCSS)
1. scss 적용하기 01. css -> scss 02. sass-loader sass package 설치 03. main.scss 수정 04. 실행!
13.Bundler(Webpack-07. Autoprefixer(PostCSS))
공급업체 접두사postcss는 스타일의 후처리를 도와주는 패키지autoprefixer는 공급 업체 접두사를 붙여주는 플러그인postcss-loader는 webpack에서 동작을 도와주는 loader 설치
14.Bundler(Webpack-08. babel)
1. babel 01. @babel/core @babel/preset-env @babel/plugin-transform-runtime package 설치 02. .babelrc.js 03. webpack.config.js 수정 04. babel-loader package 설치
15.Bundler(Webpack-09. Netlify 배포)
git init으로 버전관리 초기화git status으로 기본 목록 확인git add .으로 버전관리 시작git status로 활성화 확인git commit -m 'Create project'으로 버전 하나 생성git log으로 버전 생성 확인github에 새로운 re
16.Bundler(Webpack-10. NPX, Degit)
degit : github 저장소에 있는 특정한 저장소를 현재 경로에 다운로드 받기 위한 패키지npx를 사용하여 설치 없이도 사용할 수 있게 해준다(node.js)npx degit을 이용하면 버전관리가 없는 새로운 프로젝트를 다운받는 것git clone으로 갖고 오면