CRA랑 웹팩, 바벨, 빌드 차이

Reference

• https://paulallies.medium.com/webpack-managing-javascript-and-css-dependencies-3b4913f49c58
• https://helloinyong.tistory.com/177
• https://egg-programmer.tistory.com/280

웹팩(Web Pack)

모듈 번들러

• 여러 개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리
• 모듈 번들러는 여러 개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번의 요청을 통해 가지고 올수 있게 하고, 최신 자바스크립트 문법을 브라우저에서 사용할 수 있게 해줌
• 자바스크립트코들르 압축하고 최적화할 수 있기 때문에 로딩 속도를 높일 수 있음
• 예) 웹팩(webpack), parcel 등

바벨(Babel)

• 코드 변환기
• 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환

자바스크립트는 끊임없이 진화하는 언어입니다. 새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 https://tc39.github.io/ecma262/에 추가됩니다. 그리고 궁극적으로 명세서(specification)에 등록됩니다.

자바스크립트 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨 명세서 내 어떤 기능을 먼저 구현할지 결정합니다. 명세서에 등록된 기능보다 초안(draft)에 있는 제안을 먼저 구현하기로 결정하는 경우도 있습니다. 구현 난도가 높아서 이런 결정을 내리는 경우도 있지만, 구미를 당기지 않아 이런 결정을 내리기도 합니다.
엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이죠.
엔진별로 어떤 기능을 지원하고 있는지는 https://kangax.github.io/compat-table/es6/에서 확인할 수 있습니다.

바벨의 주요 역할:

1. 트랜스파일러
   바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다.
   바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다.
   웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줍니다.
2. 폴리필
   새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줍니다.
   반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있습니다.
   변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다.
   폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다.

• core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다.
• polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다.

폴리필 (Polyfill)

Reference

• 왜 React 프로덕션 빌드가 브라우저에서 실행되지 않습니까? (https://www.it-swarm-ko.tech/ko/reactjs/%ec%99%9c-react-%ed%94%84%eb%a1%9c%eb%8d%95%ec%85%98-%eb%b9%8c%eb%93%9c%ea%b0%80-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80%ec%97%90%ec%84%9c-%ec%8b%a4%ed%96%89%eb%90%98%ec%a7%80-%ec%95%8a%ec%8a%b5%eb%8b%88%ea%b9%8c/832093824/)
• 폴리필
• https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88
• https://ingg.dev/webpack/
• https://ljs0705.medium.com/spa-single-page-app-%EC%97%90%EC%84%9C-webpack%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-ce7d3f82fe9
• https://devlog.jwgo.kr/2018/12/03/webpack-babel-react/
• https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0
• https://create-react-app.dev/docs/deployment
• https://create-react-app.dev/docs/production-build
• https://ljs0705.medium.com/spa-single-page-app-%EC%97%90%EC%84%9C-webpack%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-ce7d3f82fe9
• https://coding-dahee.tistory.com/100
• https://flamingotiger.github.io/frontend/DevEnv/webpack-setup/

Reference

• https://hianna.tistory.com/666
• https://developer0809.tistory.com/85
• https://github.com/jmyoow/webpack-js-html.git