12분
나닮 프론트엔드 — 기술 스택 선택과 프로젝트 구조
나닮는 일기를 기반으로 AI 페르소나를 만들어주는 서비스다. 혼자 개발하고 있다. 프론트엔드 기술 스택을 고를 때 가장 많이 고민한 건 "이걸로 끝까지 갈 수 있을까?"였는데, 돌이켜보면 그 고민 자체가 좀 과했던…
나닮 프론트엔드
기술 스택 선택 → 빌드·배포 → 캐싱과 버전 관리 → PWA와 iOS Safari → 상태 관리와 인증 → SSE 스트리밍. 6편 연재 뒤로 Capacitor, iOS 네이티브, 터치 제스처 같은 삽질기가 이어진다. 연재 1편이 맨 위다.
17분
나닮 프론트엔드 — 빌드부터 배포까지, Docker와 Nginx 이야기
프론트엔드 코드를 작성하는 건 전체 여정의 절반쯤이다. 나머지 절반은 그 코드가 사용자 브라우저에 도달하기까지의 여정 — 빌드, 컨테이너화, 네트워크 프록시, 배포 — 이런 것들이다. 나닮를 만들면서 이 부분에서…
18분
나닮 프론트엔드 — 캐싱 삼중주와 수동 버전 관리라는 선택
SPA를 배포하고 나서 "사용자한테 안 보여요"라는 말을 들어본 적 있는가? 나는 있다. 정확히는 나닮를 운영하면서 꽤 여러 번 들었다. 새 기능을 넣고 배포했는데, 사용자가 이전 버전을 계속 쓰고 있는 거다.…
18분
나닮 프론트엔드 — PWA 구현기와 iOS Safari와의 전쟁
나닮는 일기 앱이다. 매일 쓰는 서비스다. 그런데 매번 브라우저를 열고 주소를 입력해서 접속한다? 그건 일기장이 아니라 웹사이트다. 사용자가 홈 화면에서 아이콘 하나 톡 누르면 바로 일기를 쓸 수 있어야 한다.…
17분
나닮 프론트엔드 — Zustand과 TanStack Query, 그리고 인증의 함정들
프론트엔드에서 "상태 관리"라는 말을 들으면 무슨 생각이 드는가? 나는 솔직히 처음에 Redux 하나면 다 될 줄 알았다. 서버에서 받아온 데이터든, 로그인 여부든, 다크모드 토글이든 — 전부 하나의 store에…
16분
나닮 프론트엔드 — SSE로 AI 대화 스트리밍하기, 그리고 에러를 한국어로
나닮에서 AI 페르소나와 대화하는 기능을 만들 때, 처음에는 단순한 POST 요청으로 구현했다. 메시지를 보내면 서버가 LLM 응답을 생성해서 통째로 돌려주는 방식. 작동은 했다. 근데 문제는 체감 속도였다.…
10분
Capacitor iOS 앱에서 OAuth 로그인 후 앱으로 안 돌아올 때
나닮은 Capacitor로 iOS 앱을 띄우고 있다. 카카오/구글/애플 소셜 로그인을 넣었는데, SFSafariViewController에서 로그인은 잘 되는데 앱으로 돌아오지 않고 그냥 웹 페이지가 로드되는…
5분
578줄짜리 친구 페이지를 탭 오케스트레이터로 쪼갠 이야기
친구 페이지 리디자인을 하면서 FriendListPage.tsx 한 파일에 몰려 있던 로직을 탭 단위로 나눴다. 578줄이 47줄로 줄고, 나머지는 탭·카드·모달 컴포넌트로 흩어졌다. 그때 썼던 패턴만 정리해…
6분
iOS 네이티브 앱 붙이면서 맞닥뜨린 것들 — 키보드, 배지, 이메일 링크
나닮을 Capacitor로 iOS 네이티브에 올리면서, 키보드 올라올 때 탭바, 입력 필드 가림, APNs 배지, 이메일 링크 앱/웹 분기, SMTP 안정성까지 손댄 걸 짧게 정리해 둔다. 웹뷰만이 아니라…
6분
모바일에서 터치 스와이프 제대로 쓰려면 — iOS WKWebView까지
감정 캘린더 월 이동, 친구 페이지 탭 전환, 하단 탭바 스크롤 투 탑을 모바일 터치로 넣으면서 겪은 걸 정리해 둔다. 특히 iOS WKWebView에서는 React 합성 이벤트만으로는 수평 스와이프가 안 먹힌다는…