게시글은 리액트 공부용이며 출처를 제시합니다.
출처: 소플의 처음 만난 React, 리액드를 다루는 기술, 모던 자바스크립트 deep dive
⛳ 원래 import는 브라우저에 없던 기능
리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있다.
import logo from './logo.svg';
import './App.css';모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이다.
브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다.
참고로 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.
이러한 기능을 브라우저에서도 사용하기 위해 번들러를 사용한다.
⛳ Bundler
대표적인 번들러로는 웹팩, Parcel, borwerify라는 도구들이 있다.
리액트 프로젝트에서는 주로 웹팩을 사용하는 추세
편의성과 확장성이 다른 도구보다 뛰어나다
번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한다.
또한 최적화 과정에서 여러 개의 파일로 분리될 수 있다.
내가 진행한 프로젝트는 대부분 src의 index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 된다.
⛳ Loader
웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있다. 이렇게 파일들을 불러오는 것은 웹팩의 로더라는 기능이 담당한다.
css-loader ▶️ CSS 파일을 불러온다.
file-loader ▶️ 웹 폰트나 미디어 파일 등을 불러올 수 있게 한다.
babel-loader ▶️ JS 파일들을 불러오면서 최신 JS 문법으로 작성된 코드를 ES5 문법으로 변환한다.
JSX도 코드가 번들링 되는 과정에서 babel에 의해 일반 JS 형태의 코드로 변환된다.
📢 로더는 원래 직접 설치해야 했지만 create react-app이 모든 작업을 대신한다.
