babel

CRA를 사용하지 않으려는 이유CRA(Create-React-App)을 사용하면 빠르게 React 프로젝트를 설정할 수 있다. npm create-react-app my-app 명령어 한줄로 프로젝트에 필요한 기본 패키지가 모두 설치되고 설정 파일이 모두 자동으로 생성되고 기초 파일까지 생성된다. 이렇게 편한 사용법을 이유로 지금까지 진행했던 프로젝트에서 많이 사용했다. 하지만 분명 편리한 방법이지만 한계점이 분명히 존재한다. 프로젝트의 방향성에 따라 프로젝트의 기존 설정을 변경해야할 때가 존재할 수 있다. CRA를 이용해 생성된 React 앱은 하나의 build 의존성을 갖고 모든 패키지와 설정 정보를 다른 곳에 보관하고 있다. 이로 인해 Webpack, Babel, Typescript 등의 ..

모듈 번들러 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로써 유지보수성, 네임스페이스화, 재사용성 문제를 해결하기 위해 사용한다. 프론트엔드 개발은 모듈단위로 파일을 엮어 개발하는 방식을 사용한다. 즉, 모듈 끼리 의존성을 띄고있는데 아래와 같은 문제들이 생긴다. 많은 모듈들의 순서 처리(의존성 처리) 모듈이 많아질수록 HTTP 요청이 많아저 발생하는 오버헤드 해결방법 ES6+ 스펙의 코드를 처리하는 방식 이러한 문제들을 해결하기 위해 나타난 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성을 해결해 하나의 JS 파일로 만드는 도구이다. 이미지 압축, 최소화 등의 여러가지 기능들도 제공하며 유명한 번들러는 Webpack, Parcel, Rollup 등이 있다. 트랜스파일러 ..