리액트를 배포하려면 npm run build 를 해야하고, 그 결과로 나온 build 된 js 파일이 생성되게 된다.근데... 이 번들이라고 하는 js 파일의 크기가 크면,SEO 의 단점이라고 할 수 있는 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리가 중요해지게 됨. 종종 이 번들 사이즈를 검토해주어야 하는데, 이게 얼마나 큰지 또 어디를 확인해야하는지를 어떻게 알 수 있을까? ...흔히 알려져 있는 빌드 파일 분석 툴인 webpack-bundle-analyzer 가 있다. 직관적인 시각 요소를 제공해주지만.. 이거는 또 eject 를 해야하는 위험이 있고,한 번 eject 를 해버리면 되돌리기가 어려워진다. 여기서 잠깐. Ejecteject 의 장점- CRA(Create-React-App) 에서 ..

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다. 예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데.. 운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다. React :: 환경변수(.env) 셋팅하기 토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. bornatnoon.tistory.com 우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스) 케이스에 따른 .env 설정 방법 ※ 참고. 리액트 프로젝트 생..