누구든지 하는 리액트 (by velopert) 강의와 블로그 글을 보고 정리한 글입니다.
React 2022년 개정판 강의를 보며 정리헌 글입니다.

Ⅰ. Webpack, Babel은 무슨 용도인가요?

Webpack

• 리액트 프로젝트를 만들 때 여러 개의 컴포넌트 코드들을 의존하는 순서대로 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어낸다.
• 프로젝트를 만들 때 파일을 하나하나 만든 것들을 일일이 html 상에서 불러오는게 아니다. 특정 확장자마다 어떤 처리 작업을 하도록 준비 해준다.
  - EX1) image(.png 혹은 .jpg)를 번들링(빌드) 하면, image들을 압축하고 특정 경로에 특정 이름으로 문자열로서 저장한다. 나중에 특정 javascript 파일에서 image를 사용하기 위해 import하게 되면 해당 이미지의 저장된 경로를 문자열로서 받아온다.
  - EX2) style의 경우 .sass를 사용하면 하나 혹은 여러개의 css 파일로 변환해서 저장해준다.

  왜 필요할까?
  - 한 html에서 많은 자바스크립트 파일들을 요청하면 네트워크 부하가 커지고 느려지며 변수나 함수 이름의 충돌이 발생할 수 있다.
  - 모듈단위로 개발하여 유지보수성을 높일 수 있다.

Babel

• ES6 즉, 모던 자바스크립트를 사용하는데 일부 새로운 자바스크립트 문법들은 구형 브라우저에서 지원이 안된다.
• 따라서 JSX 를 비롯한 새로운 자바스크립트 문법들을 모든 브라우저에서 실행되기 위해서 우리는 Babel 이라는 트랜스파일러를 사용한다.

  왜 필요할까?
  자바스크립트는 정말 많은 환경(웹 브라우저, NodeJS, Deno 등)에서 실행되며 웹 브라우저 역시 각기 다른 자바스크립트 엔진으로 코드를 읽는다.