[Bundler] Parcel
초기 세팅 요약
yarn init -y //버전 관리 선언을 잊지 말아요!
yarn add -D parcel-bundler번들러는 많은 파일들을 하나의 파일로 묶어서 보내주는 역할을 한달까…
그래서 네트워크의 응답 속도나 유지 보수를 올려줍니다.
번들러는 하나만 있지 않습니다.
작거나 중간 크기의 프로젝트는 parcel로, 중간 크기거나 대형 프로젝트는 webpack을 사용합니다. (그 밖에 더 있어요!)
//package.json
...
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},
...위와 같이 설정하면 사용하기 편리해져요!
yarn run dev//개발 서버 시작!
parcel을 인스톨하고 개발 서버를 열어보면, dist라는 폴더가 생겨요.
run하는 순간 우리가 만든 파일들을 저렇게 요약해서 dist 폴더를 만들어요.
dist폴더는 run할 때 새롭게 생성되거나 지울 수 있는 것이 원활해야 합니다! favicon같은 경우 dist에 없으면 읽어 내질 못하고, 그런 것들을 매번 dist에서 수작업 할 수는 없어요.
yarn add -D parcel-plugin-static-files-copy알아서 dist폴더에 파일을 넣어주는 패키지에요!
package.json으로 가서 설정해줍니다.
저는 static이라는 폴더를 따로 만들어서 favicon을 넣었습니다.
//package.json...
"staticFiles": {
"staticPath": "static" //저는 static폴더에 정적 파일을 넣었습니다.
},
...
그리고 다시 개발 서버를 열면 dist에 static폴더에 넣은 친구들이 자동으로 넣어지는 것(복사)을 확인할 수 있습니다.
이제 다른 브라우저에서도 우리가 짠 코드가 잘 동작하게 하기 위한 패키지를 받아요!
yarn add -D postcss autoprefixerpostcss와 autoprefixer입니다.
PostCSS💦
CSS후처리기입니다. Javascript를 사용해서 CSS를 변경해주는 패키지입니다. flex가 먹히지 않는 브라우저에서 처리가 가능하도록 후 처리를 도와줍니다.
Autoprefixer💦
벤더 프리픽스입니다. 이는 아직 CSS 권고안에 포함되지 못한 기능이나 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 사용합니다.
Autoprefixer은 PostCSS에서 많이 사용되는 플러그인입니다.
//package.json...
"browserslist":[
"> 1%", //점유율이 1퍼 초과인 브라우저의
"last 2 versions" //최근 2가지 버전까지 지원하겠다
]
...
그리고 .postcssrc.js파일을 만들어요.
node.js에서 동작하는 CommonJS에서는 브라우저에서 동작하는 ESM이 사용하는 import와 export와 다르게 require과 module.export로 같은 기능을 구현합니다.
module.exports ={
plugins:[
require('autoprefixer')
]
}PostCSS에서 autoprefixer 플러그인을 추가해줍니다!
그리고 개발 서버를 실행합니다.
에러가 뜨는 경우는 버전 문제일 경우가 있을 거에요!
저는 autoprefixer의 버전을 한 단계 낮췄습니다.
PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
yarn add -D autoprefixer@9prefixer을 9버전으로 바꾸면 잘 동작합니다.
이걸 적용하면 css가 어떻게 보일까? 라면
webkit이라는 속성이 생겨있습니다.(제가 따로 만들지 않았어용)
저게 다른 브라우저에서도 동작하게 해주는 속성인 거죠! 지금은 잘 동작하기 때문에 밑줄이 그어졌습니다.
이제 babel을 깔아봐요!
Babel💦
자바스크립트 컴파일러입니다.
그.. 최신 브라우저도 지원하지 못하는 문법이나 기술이 하루가 빠르게 생기고 있죠… 지금도.. 생기고 있을 거야.. 이런 새로운 문법을 기존의 브라우저에 사용하기 위한 컴파일러입니다. 간편하고 예쁜 문법들은 프로그래밍에 있으면 무조건 좋기 때문에 babel은 그냥 필수네요!
yarn add -D @babel/core @babel/preset-env그리고 .babelrc.js 파일을 만들어요!
module.exports = {
presets:['@babel/preset-env']
}이렇게 작성하면 기본적으로 우리가 작성하는 모든 JS는 ES5 문법으로 변경이 되어서 브라우저에서 정상 동작합니다.
그리고 package.json에서 작성했던 browerslist가 있어야 PostCSS와 동일하게 동작합니다.
이걸로 async, await도 JS문법으로 사용 가능합니다.
초기 세팅 결과는 위에서 확인 가능합니다!(22년 9월 5일 작성)
