Spurt — 태스크 관리 모바일 웹앱

개요

미루는 습관을 줄이도록 돕는 태스크 관리 모바일 웹앱입니다. 디프만 16기에서 10명(프론트 4, 백엔드 3, 디자인 3)이 기획부터 운영까지 함께했습니다. Next.js 15 App Router와 React 19로 만들었습니다.

인증을 직접 만들기

카카오·애플 로그인을 라이브러리 없이 공식 문서를 기준으로 구현했습니다. 라이브러리에 맡기면 보이지 않던 결정들을 직접 해야 했습니다.

• 토큰 저장 위치: Access·Refresh 토큰은 HttpOnly·Secure 쿠키에 두고, Route Handler를 거쳐 다뤘습니다. 스크립트에서 토큰을 읽을 수 없게 하기 위해서입니다.
• 경로별 접근 제어: 미들웨어에서 인증 여부를 판단해, 클라이언트와 서버가 같은 기준으로 접근을 막도록 맞췄습니다.
• 만료 처리: 401 응답을 받으면 토큰을 재발급하고 원래 요청을 재시도합니다. 여러 요청이 동시에 만료를 만나도 재발급 요청은 하나로 합쳤습니다.

이때 토큰을 어디에 두고 언제 복원할지를 직접 따져본 경험이, 이후 실무에서 인증 초기화 최적화로 이어졌습니다.

1초마다 전부 다시 그리던 홈

홈의 D-Day 타이머가 1초마다 갱신될 때, 타이머와 관계없는 할 일 항목까지 모두 리렌더링되고 있었습니다. React DevTools Profiler로 범위를 확인한 뒤 순서대로 막았습니다.

1. props가 바뀌지 않은 항목은 React.memo로 부모의 리렌더링을 받지 않게 했습니다.
2. 렌더마다 반복되던 목록 필터링·정렬은 useMemo로, 자식에 넘기는 함수는 useCallback으로 고정해 memo가 실제로 동작하게 했습니다.
3. 타이머는 컴포넌트 마운트·언마운트에 맞춰 시작하고 정리해, 보이지 않을 때 돌지 않게 했습니다.

그 밖에

• use-funnel의 back을 쓰면 입력 상태가 초기화되는 문제를 찾아, history.replace를 쓰는 우회책을 팀에 공유했습니다.
• View Transitions API로 화면 전환을 다듬고, 먼저 보이는 이미지에 priority를 지정해 LCP를 개선했습니다.
• PR마다 빌드와 린트를 자동 검사하는 GitHub Actions CI를 구성했습니다.