Bundler [패스트캠퍼스 챌린지 22일차]

번들러 왜 필요한가?

순수하게 HTML, CSS, JS로 개발하는 건 비효율적임

자주 사용되는 번들러

parcel bundler

• 구성 없는 단순한 자동 번들링

• 소/중형 프로젝트에 적합

webpack

• 꼼꼼한 구성 (너무 디테일한 옵션)

• 중/대형 프로젝트에 적합

프로젝트 생성 parcel bundler

npm init -y

-> package.json 파일 생성됨
-> package.json 안에 내용 추가

"script" : {
    "dev" : "parcel index.html",
    "build": "parcel build index.html"
},

npm i -D parcel-bundler

-> 개발 의존성 파슬 번들러 설치
-> node_modules랑 package-lock.json 생성됨

구글에서 reset.css cdn 검색

-> 코드 복사해서 html 문서에 scss 링크 태그 위에 붙여넣기

정적 파일 연결

정적 파일(이미지 파비콘 이런 애들)

png, jpg 같은 이미지 파일을 ico로 만들어 보자 - 파비콘

구글에 ico converter 검색
32px이면 충분
32bits
변환한 파일은 루트 경로에 저장

새로고침 해도 파비콘이 뜨지 않네?

html 파일은 파슬 번들러를 통해 dist라는 폴더로 변환돼서 삽입됨
그럼 dist 폴더에 파비콘 파일 넣으면 되겠네?
댓츠 노노
:dist 폴더는 언제든지 파슬 번들러의 개발 서버 실행을 통해 새롭게 생성하고 지울 수도 있어야 함
-> 직접 사용하는 파일을 dist에 넣는 건 그다지 좋은 방법은 아님

그럼 어떡해?

개발 서버를 열거나 제품화를 시킬 때 파일을 해당 dist 폴더로 자동으로 넣어줄 수 있는 패키지의 도움을 받자!

(구글에서 parcel plugin static files copy 검색)
npm i -D parcel-plugin-static-files-copy 설치하고.
package.json에 옵션 추가

"staticFiles": {
    "staticPath": "static"  
}

-> 이 패키지를 통해 static이라는 폴더를 dist 폴더로 복붙해주는 거다

루트에 static 폴더 만들어서 파비콘 파일 넣어주기

autoprefixer

개발자 도구에서 styles 보면 중앙선 찍찍 그어진 애들 있음
webkit이나 ms같은 접두사 붙은 애들.
표준 기술이 동작하지 않는 환경 (구형 브라우저)에서는 그 브라우저에 해당하는 접두사가 붙은 속성이 실제로 적용 될 수도 있음.
만약 표준 기술이 동작 가능하면? 같은 기능의 다른 속성들은 동작 안함. 그래서 중앙선 찍찍 그어져있는 거.

공급 업체 접두사 Vendor Prefix

구형 브라우저에서도 최신의 css 기술이 동작할 수 있도록 일종의 '보험'을 들어두는 방법

webkit이나 ms 같은 접두사를 자동으로 붙여주는 패키지 설치해보자

npm i -D postcss autoprefixer
: 띄어쓰기로 구분해서 한번에 두 개의 패키지를 설치한 거

package.json에 새 옵션 추가해주기

"browserslist" : [
    ">1%",
    "last 2 versions"
]

해석: >1% 전세계 점유율이 1% 이상인 모든 브라우저
last 2 versions 해당하는 브라우저 맨 마지막 두 개의 버전까지는 지원하겠다

루트 경로에 .postcssrc.js 만들기

맨 앞에 붙은 .은 구성 옵션이나 숨김파일을 의미
파일명 뒤에 붙은 rc는 구성파일을 의미함 Runtime configuration

//ESM
//CommonJS

//import autoprefixer from 'autoprefixer'
const autoprefixer = require("autoprefixer");

/*
export {
  plugins: [
    autoprefixer
  ]
}
*/
module.exports = {
  plugins: [autoprefixer],
};

ESM(에크마스크립트모듈)의 import export는 브라우저에서 사용하는 가져오기 내보내기 방식임
->근데 nodejs는 ESM을 지원하지 않음
->nodejs는 commonJS를 지원함

---

복습해야하는데
언제하지
배우는 내용들은 항상 새롭다
복습할 때도 새롭겠찌

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online