Devs

July 2, 20253 min read

북마켓에 Google Analytics 대신 Umami 추가하기

이 글은 사이드 프로젝트 '북마켓'에 트래픽 분석 도구로 Google Analytics 대신 Umami를 도입한 과정을 다룹니다. Google Analytics와 Posthog를 검토했으나, Ad Blocker 우회, 데이터 직접 관리, 서버 사양 등의 이유로 Umami를 선택했습니다. 라즈베리파이 환경에서 Umami를 self-hosting하는 방법, 도메인 연결, Nginx 설정, Next.js에 트래킹 코드 적용까지의 실전 경험을 상세히 공유합니다. 서버 비용 부담 없이, 가볍고 효율적으로 서비스 트래픽을 관리하고 싶은 개발자에게 실질적인 가이드를 제공합니다.

Thumbnail for 북마켓에 Google Analytics 대신 Umami 추가하기
May 29, 20254 min read

북마켓 백엔드에 단위 테스트 코드 추가하면서 단위 테스트에 익숙해지기 1편

테스트 커버리지 부족 피드백을 받은 3년차 프론트엔드 개발자가 백엔드 단위 테스트에 도전하는 과정을 기록한 글입니다. 북마켓 백엔드 서비스에 첫 단위 테스트를 구현하며 Jest 설정, 모킹 전략, 비동기 에러 테스트 패턴을 학습한 경험을 담았습니다.

Thumbnail for 북마켓 백엔드에 단위 테스트 코드 추가하면서 단위 테스트에 익숙해지기 1편
May 25, 20257 min read

백엔드 지식을 쌓기 위한 로드맵 with 북마켓

지피티와 함께 백엔드 지식을 쌓기 위한 로드맵을 짜보았다. 북마켓 서버를 개선하면서 백엔드 지식을 쌓아가보자!

Thumbnail for 백엔드 지식을 쌓기 위한 로드맵 with 북마켓
May 20, 20254 min read

북마켓 백엔드 레이턴시 최적화

북마크 관리 서비스 북마켓의 성능 최적화 과정. Render 호스팅의 Cold Start 문제를 해결하기 위해 라즈베리파이 홈서버로 백엔드를 이전하고, NeonDB의 높은 레이턴시 문제를 온프레미스 PostgreSQL 구축으로 해결. Docker 컨테이너 기반 DB 구축, 데이터 마이그레이션, 자동 백업 시스템 구현을 통해 로딩 시간을 4-5초에서 1초 내외로 대폭 개선한 과정

Thumbnail for 북마켓 백엔드 레이턴시 최적화
March 12, 20251 min read

리액트에서 `key={index}`가 더 빠른 경우가 실제로 존재할까?

key는 항상 데이터의 ID를 써야 할까? Wasm 컴포넌트를 쓰는 특수한 경우엔 index가 오히려 성능에 유리할 수도 있다.

Thumbnail for 리액트에서 `key={index}`가 더 빠른 경우가 실제로 존재할까?
December 6, 20237 min read

신입 개발자가 입사 후 3개월만에 서비스 성능 98% 개선한 이야기

모바일 문제풀이 뷰에서 0.1초마다 발생하던 리렌더링 문제를 Renderless Component 패턴으로 해결하여 98% 성능 개선을 달성한 경험

Thumbnail for 신입 개발자가 입사 후 3개월만에 서비스 성능 98% 개선한 이야기
September 30, 20235 min read

Vercel의 새로운 도전, V0.dev 사용 후기

Vercel의 AI 기반 프론트엔드 개발 도구 V0.dev를 사용하여 채팅 앱, 인스타그램 클론, 가계부 서비스 등을 제작한 실제 경험과 평가

Thumbnail for Vercel의 새로운 도전, V0.dev 사용 후기
February 16, 202313 min read

대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편

Next.js의 SSG 작동 방식과 getStaticProps를 통한 정적 사이트 생성 최적화 기법에 대한 심화 가이드

Thumbnail for 대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편
February 15, 20236 min read

CSS 속성을 통해 뚝뚝 끊기는 애니메이션 개선 | 리팩토링을 통해 서비스 최적화하기 1편

Progress Bar의 width 속성 대신 transform scaleX를 사용하여 Reflow를 방지하고 애니메이션 성능을 60fps로 개선한 최적화 사례

Thumbnail for CSS 속성을 통해 뚝뚝 끊기는 애니메이션 개선 | 리팩토링을 통해 서비스 최적화하기 1편