작년 12월 연말의 어느 날. 꽤나 한가한 일정을 보내던 나는 평소 눈엣가시처럼 여기던 자체 서비스 리팩토링/최적화를 하고 싶다는 의견을 대표에게 피력했고, 1주일의 스프린트를 할당받아 레거시 코드에 대한 최적화 및 리팩토링을 진행했다. 길지 않은 시간동안 부족한 실력으로 해내려다 보니 부족한 점이 많았지만, 나름 뿌듯한 1주일의 기억으로 아직도 남아있다. 언젠간 써야지 써야지 해놓고 기록만 해뒀던 내용을 이제야 꺼내본다. 문제점 큰 문제가 3개가 있었다. 1. 번들 사이즈 무식하게 큼. 당시 자사의 서비스 웹은 CRA를 통해 제작된 페이지로, 최적화따윈 되지 않은 통짜 CSR 그 자체였다. 청크파일 용량이 총 1.8mb에 달했는데, 네트워크 환경이 느린 곳에서는 페이지 로드가 심각할 정도로 느렸다. 아..

As you know, Create-React-App(CRA) made by Facebook is first recommanded Tool Chain in react environment. Create-React-App(줄여서 CRA)는 React 공식 가이드에서 첫 번째로 추천하는 툴체인이다. (first recommanded !== most recommanded) (물론 첫 번째로 추천한다는 말이 제일 추천한다는 말은 아니긴 하다) Anyway, CRA is powerful ToolChain to make single-page-application And also useful starter-kit for who learning react recently! (like me) 아무튼 공식 가이드에서 소개..

React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면) 다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다. 이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다. (cra eject는 되돌릴 수 없다는 게 큰 마음..