공부 배경
내가 ICT 인턴을 진행하는 기업의 서비스는 90%가 Vanila TypeScript로 이루어져있고, 요새 새로 추가하는 신규 기능 같은 경우는 React를 통해 개발을 진행하고 있다. 나는 입사 당시만해도 React를 전혀 몰랐기 때문에 아무런 감흥도 없었는데, 인턴 동기들은 상당히 당황? 했던 것이 CRA(create-react-app) 이라는 툴체인을 사용하지 않은 부분이었다.
CRA가 뭔데?
CRA가 뭔지 React 공식 홈페이지의 말을 인용해보겠다.
React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면
Create React App.
- 많은 파일과 컴포넌트 스케일링
- 서드 파티 npm 라이브러리 사용
- 일반적인 실수를 조기에 발견
- CSS와 JS를 실시간으로 편집
- 프로덕션 코드 최적화
- 별도의 환경설정 없음
즉 한마디로, 번들러(웹팩) 설정을 해주고 다양한 라이브러리 등을 사용하기 쉽게 해주는 도구인 것이다. 보통 React를 처음 공부할 때 CRA를 많이 이용하여 SPA 및 Component, props, state 등의 개념을 익히기 시작한다.
npx create-react-app [프로젝트 명]
하지만, 분명 단점도 존재한다. 그것은 이미 세팅된 설정들을 바꾸기 어렵고, eject 등의 명령어를 통해 바꿀 수 있지만 그렇게 되면 CRA의 라이브러리 버전 관리를 통한 의존성 문제 제거 등의 다양한 이점을 누리지 못하게 될 수도 있다.(eject 가 뭔지, 대체 방안은 없는지는 다른 글에서 기회가 되면 포스팅 해보겠다)
요약
-
CRA란?
- 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 툴
-
CRA의 장점
- webpack, babel과 같은 모듈 번들러, 트랜스파일러를 자동으로 설정해줘서 초보자가 접근하기 쉽습니다.
- ES6+문법, CSS 후처리와 같은 개발환경을 자동으로 설정해줍니다.
- webpack, babel과 같은 모듈 번들러, 트랜스파일러를 자동으로 설정해줘서 초보자가 접근하기 쉽습니다.
-
CRA의 단점
- 웹팩, 바벨 설정을 변경하기 어렵습니다.(eject 사용해서 수정해줘야함)
- 작은 프로젝트를 진행할 때 너무 파일이 무겁습니다.
CRA가 쓰기 싫었던 이유
나는 분명 웹개발 초보이다. 웹팩 등의 바벨 설정 문제가 생기면 해결도 잘 못할 뿐더러 어디서 문제가 발생했는지 파악하기도 어려울 수도 있다. 그런 입장에서 CRA는 최고의 선택일 수 있다. 그럼에도 내가 CRA에 의구심을 갖고 다른 것을 쓰려고 한 이유를 정리해두려 한다.
1. 빌드가 느리다.
빌드가 뭔지 또 그게 어떤 문제로 이어질 지 바로 떠오르지 않았다면, 컴파일, 빌드, 배포 개념 및 CI/CD 개념 정리 를 읽어보는 것을 추천한다.
ICT인턴십을 진행하는 회사의 웹사이트를 빌드하는데 10분정도의 시간이 걸린다. 사실 엄청 긴 시간은 아닐 수 있다. 나도 그렇게 생각했다. 하지만 회사 사수분은 이것이 너무 느리다며 개선을 원했고 그 때 나는 어느 토스 프론트 개발자분의 이글을 보고 CRA가 최선은 아님을 알게 되었다.
그래서 실제 이 토이 프로젝트를 배포하게 된다면, 나는 AWS의 클라우드 서비스를 이용해야 하고 이것은 빌드 시간을 기준으로 요금을 책정한다.
그 말은 즉슨, 빌드 시간이 짧으면 짧을수록 비용을 절감 할 수 있다.
2. 번들링 도구(웹팩 등)을 공부해보고 싶어졌다.
위에서도 잠깐 언급했지만 나는 웹팩이 뭔지 전혀 몰랐는데, 회사에서 일을 해보며 자연스럽게 package.json 을 보며 관심을 갖게 되고 더 나아가 webpack.config 등의 파일을 보는데 두려움이 적어졌다.
번들러, package.json의 이해, npm vs yarn 등의 글 포스팅이 그 관심의 증거이다.
그래서, 이러한 초기 설정 및 프로젝트 관리를 직접 해보고자 하는 마음이 생겨 CRA가 아닌 다른 것들을 찾아보게 되었다.
