메로그

프로젝트가 커지면서 빌드 시간이 조금씩 늘어나는 게 계속 신경 쓰였습니다.8.5초 정도면 참을 만한 수준이긴 하지만, CI에서 여러 번 돌고 배포 파이프라인에 끼어 있다 보면 이 몇 초가 누적되어 꽤 큰 비용이 됩니다.마침 Vite 8이 Rolldown을 기본 번들러로 채택하며 출시됐고, 빌드 시간 단축을 목표로 Vite 6에서 8로 마이그레이션을 진행했습니다.결과부터 말하면 빌드 시간이 8.5초에서 2.7초로, 3배 이상 단축됐습니다.다만 메이저 버전을 두 단계 건너뛰는 마이그레이션이다 보니 중간에 여러 문제를 겪었고, 그 과정을 기록으로 남깁니다.목차왜 마이그레이션을 했는가Vite 8과 Rolldown마이그레이션 과정겪은 문제들결과배운 점마무리왜 마이그레이션을 했는가이유는 단순합니다. 빌드 시간 단축..

최근에 평소 쓰던 React 스택으로 크롬 확장 프로그램을 만들 일이 생겼습니다. 막상 시작하려니 "내가 쓰던 TanStack Query나 Tailwind를 그대로 써도 되나", "API는 어떻게 호출해야 하나" 같은 질문이 계속 걸렸습니다. 직접 부딪혀 보니 결론은 의외로 단순했습니다. UI 로직은 평소 React와 거의 똑같고, 다른 건 브라우저와 플랫폼 API 레이어뿐이었습니다.이 글은 그 과정에서 헷갈렸던 지점을 정리한 것입니다. WXT를 왜 쓰는지부터 시작해서, 확장을 만들 때 실제로 막히는 부분인 API 호출 방식, 스타일 격리, 스토리지를 차례로 다룹니다. 저처럼 React는 익숙하지만 확장 개발은 처음인 분께 도움이 되길 바랍니다.목차WXT를 쓰는 이유그대로 쓰는 것과 바꿔야 하는 것API..

클라우드 모델 API 를 기반으로 프로젝트를 진행 중, 토큰에 대한 비용이 계속 빠져나가면서 고민에 빠졌습니다.그러다 생각해보니 Claude Code가 깔려 있는데 이걸 그대로 쓰면 어떨까 하는 생각이 들었습니다.그러면 토큰 비용도 없고, 원격 서버를 왕복하지 않으니 속도도 더 낫고 무엇보다 퀄리티가 더 좋지 않을까 하는 생각이 있었습니다.그래서 챗봇의 응답 생성부를 OpenAI API에서 Anthropic의 Claude Agent SDK로 통째로 갈아끼웠습니다.이 글은 설치부터 챗봇용 설정, 스트리밍, 도구 연결까지 실제로 동작시킨 코드로 정리한 기록입니다.목차OpenAI API를 걷어낸 이유호출 방식이 근본적으로 다릅니다설치기본 사용법챗봇용으로 설정하기스트리밍 토큰 받기필요한 도구만 골라 붙이기전체 ..

AI 채팅 앱은 이제 모바일에서도 자연스럽게 쓸 수 있어야 합니다.매번 브라우저를 열어 주소를 치고 들어가는 대신 홈 화면 아이콘으로 바로 띄울 수 있도록, 편의성을 더하기 위해 PWA를 붙였습니다.이 글은 App Router에 설치형 PWA를 붙이고, 데스크톱 브라우저까지 설치 안내 기록입니다.목차설치형 PWA의 최소 조건Web App Manifest 만들기서비스 워커는 왜 따로 등록해야 하는가iOS 설치 안내와 하이드레이션 함정데스크톱까지 설치 지원 넓히기보안 헤더 추가하기로컬에서 확인하기마무리설치형 PWA의 최소 조건먼저 "설치 가능(installable)"이라는 상태가 무엇인지 정리하고 시작했습니다. 브라우저가 홈 화면 설치 프롬프트를 띄우려면 세 가지가 필요합니다.유효한 Web App Manif..

프론트엔드 프로젝트를 진행할 때 마다 어떤 프로젝트 구조로 진행할지 고민을 많이 하게 됩니다.필자는 도메인 기반, 컨택스트 기반 으로 프로젝트를 진행하다가 신규 프로젝트에서는 React 에 FSD 를 차용하여 Nextjs 에서 App Router 와 FSD 를 합친 구조를 만들게 되었습니다. app 아래에서는 특정 도메인 형태로 구분하되, 그 외 기능 기반을 별도 FSD 형태로 관리하는 구조 입니다.다만 Next.js App Router 환경에 그대로 가져오면 충돌이 생기는 부분이 있어서, App Router의 특성에 맞게 구조를 조정해야 합니다. 이 글은 FSD를 Next.js App Router에 최적화해서 도입하는 과정을 담고 있습니다.목차FSD를 그대로 적용하면 생기는 문제pages 레이어를 ap..

Next.js App Router로 프로젝트를 만들면서 createContext only works in Client Components라는 에러를 마주쳤습니다. ThemeProvider를 layout.tsx에서 바로 사용했기 때문이었는데, 이 에러를 고치면서 RSC(React Server Components)에서 children이 어떻게 동작하는지, 그리고 서버와 클라이언트 사이에 실제로 무슨 데이터가 오가는지 정확히 이해하게 됐습니다. 기존 React 멘탈모델로는 직관적이지 않은 부분이 있어서 정리해 두려 합니다.목차문제 상황왜 에러가 발생하는가해결: Provider를 Client Component로 분리하기그러면 page.tsx도 Client Component가 되는 걸까import와 childre..