yarn 혹은 npm 으로 create-react-app 을 한 후, eject 해보면 여러 사용된 라이브러리를 확인할 수 있다.
(eject 는 되도록 하지말자.. 다시 패키징할 수 있는 방법이 없음)
그럼 리액트 내부적으론 어떤 라이브러리들이 사용되고 있을까 ?
1. BABEL
바벨은 자바스크립트 transcomplier 이다. 바벨은 ECMAScript 2015+ 이후의 코드를 예전 버전으로 변환해준다. 그래서 개발자들이 개발할 때는 최신 버전의 자바스크립트 문법을 사용하여 개발하고, 배포할때는 babel을 이용하여 예전 브라우저도 이해할 수 있는 예전 버전의 js코드로 변환한다.
이 뿐 아니라, 타입스크립트나 JSX 와 같이 순수 자바스크립트가 아닌 친구들을 JS로 변경해준다.
어느 정도 버전까지 변환할건지도 세부적으로 설정이 가능하다.
2. Webpack
webpack은 사용된 소스코드나 이미지를 번들링하여 사용자에게 제공할 수 있도록 도와준다.
사용자가 다른 페이지를 열어서 또 그 새로운 페이지에 필요한 js나 이미지가 있다면 그것들을 모아서 번들링해준다.
이것 외에도, 소스코드를 조금 줄여주고, 변수이름이나 함수이름을 해커들이 쉽게 알아보지 못하도록 처리해준다.
즉, Webpack은 작성한 소스코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링해준다.
3. ESLint
코드의 잘못된 점이 있을때 즉각적으로 경고 사인을 보내준다.
4. JEST
자바스크립트로 소스코드를 작성할때, 유닛 테스트를 할 수 있게해주는 테스팅 프레임워크이다.
5. PostCSS
css 전처리기중의 하나로, LESS 나 SASS 처럼 그들 프레임워크에 맞게 코드를 작성하면 브라우저가 이해할 수 있는 css로 바꿔주는 것과 비슷하다.
SASS는 정해진 것만 할 수 있는 반면, PostCSS 는 굉장히 다양한 플러그인이 있어서 원하는 것을 추가해서 사용할 수 있다.
