패키지 관리자와 번들러는 리액트를 사용하는 개발자에게 도움을 주는 친구입니다. 이 두 친구가 없었더라면 개발하는데 더 오랜 시간이 걸렸을 겁니다. 새로운 친구를 만나는 것은 언제나 설레는 일입니다. 그럼 두 친구를 만나볼까요?
패키지 관리자
npm과 yarn
패키지 관리자에는 npm과 yarn이 있습니다. 저는 패키지 관리자를 자바의 gradle 혹은 maven과 유사한 개념으로 이해했습니다. 패키지 관리자에서 사용하는 package.json 파일에는 dependencies를 입력할 수 있는데요. 여기에 사용하고자 하는 라이브러리를 추가하거나 변경할 수 있습니다.
npm과 yarn은 동일한 기능을 제공하지만, yarn이 npm보다 더 빠르고 효율적인 캐시 시스템과 부가 기능을 제공합니다. 리액트에서는 yarn을 사용하는 추세입니다.
번들러
번들러에는 webpack, Parcel, browserfiy 등이 있습니다. 번들러를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 또 최적화 과정에서 여러 개의 파일로 분리할 수도 있습니다. 리액트에서는 주로 webpack을 사용합니다.
loader
webpack은 loader라는 기능을 제공합니다. loader는 여러 가지 종류가 있는데요. css-loader, file-loader, babel-loader가 있습니다.
css-loader는 CSS 파일을 불러올 수 있게 해주고, file-loader는 웹 폰트나 미디어 파일을 불러옵니다. babel-loader는 js 파일을 불러오면서 최신 js 문법으로 작성된 코드를 바벨을 이용해 ES5 문법으로 변환해줍니다.
ES5로 왜 변환하나요?
바벨은 우리가 작성한 ES6 문법을 ES5로 변환합니다. 그 이유는 ES6를 지원하지 않는 구 버전 브라우저와 호환하기 위해서입니다. 또한 JSX도 정식 JS 문법이 아니기 때문에 ES5로 변환해야 합니다.
다음 글은 JSX에 대해 다룹니다.
💁♂️reference
리액트를 다루는 기술
김민준 지음ㅣ길벗ㅣ2019ㅣ도서 정보
Do it! 리액트 프로그래밍 정석
박호준 지음ㅣ이지스퍼블리싱ㅣ2020ㅣ도서 정보
EOD.
