문제React.js와 Supabase를 연동한 프로젝트에서 일부 무거운 컴포넌트에 코드 스플리팅(dynamic import+lazy loading)을 적용해도 메인 js 파일 크기가 거의 800kb에 달하는 문제가 발생했다.이는 `supabase`, `react query`, `lucide-react`와 같은 대용량 라이브러리가 프로젝트에 별다른 조치 없이 사용되고 있기 때문이었다. 해결vite에서는 크고 무거운 라이브러리들을 `manualChunks` 설정으로 초기 번들에서 제외시켜줄 수가 있다.핵심 원리는 자주 바뀌지 않고 무거운 외부 라이브러리를 별도의 js 파일로 분리하고, 브라우저 캐싱을 활용해 초기 번들 용량을 줄여주는 것이다.// vite.config.tsimport path from "p..

개요투두 리스트 기반 협업 툴을 개발 중인데, 백엔드 api에 카카오 간편 로그인 api가 있어서 당연히 간편 회원가입 api도 있을 거라고 생각했지만 없었다.하지만 요구사항에는 간편 회원가입도 구현하라고 나와있어서 방법을 고안해야 했다.(물론 백엔드 api 개발을 요청드리는게 가장 빠르고 확실한 방법이지만, 당시 백엔드 팀과 소통할 수 없는 제약사항이 있었다.) 백엔드에서 구현해놓은 카카오 간편 로그인 api는 정말 '간편한 로그인'에 초점이 맞춰져 있었다.서버에 회원으로 등록된 카카오 계정이 아닐 경우, 자동으로 회원가입까지 진행시키고 나서 로그인을 완료시켜주기 때문에 별도의 간편 회원가입 단계가 사실상 필요하지 않은 구조였다. 하지만 요구사항에 의하면 회원가입 폼에서 카카오 버튼 클릭 시 간편 회원..