- 발행일
직짱건강 — 백엔드를 기다리지 않고 설문 인터페이스를 먼저 완성한 방법
직장인 대상 건강 설문과 위치 기반 병원 추천을 묶은 헬스케어 서비스입니다. 6인 협업 프로젝트에서 프런트엔드로 참여했고, 백엔드 API가 없는 상태에서 JSON 목업으로 설문 플로우를 먼저 완성해 병렬 작업이 가능하게 만든 게 핵심 기여였어요.
All Posts
All Posts
- 발행일
Google Places 응답의 lat이 함수인지 숫자인지 몰랐다 — 둘 다 대비한 분기와 거리 NaN
찜한 병원까지의 거리가 NaN으로 나오는 경우가 있었습니다. Places 응답의 location.lat을 typeof로 검사해 함수면 호출하고 숫자면 그대로 쓰는 분기를 넣고, LatLng 객체로 다시 감싸 거리를 계산하게 바꿨어요. 문서를 지금 읽어 보면 location은 늘 LatLng 객체라 lat은 늘 함수인데, 그날은 둘 다 대비했습니다. 실제로 어느 쪽이 왔는지는 기록에 없습니다.
- 발행일
해상도 대응 CSS 2,230줄을 넣고 하루 만에 1,895줄을 지웠다 — 브레이크포인트마다 규칙을 통째로 복제한 날
1920px 시안대로 만든 화면을 다른 해상도에 맞추려고 미디어 쿼리 블록마다 규칙을 통째로 복사해 넣었습니다. 하루 만에 CSS가 2,230줄 늘었고, 이튿날 1,895줄을 지우며 달라지는 속성만 남기는 구간 구조로 다시 짰어요. 그 뒤로도 태블릿 브레이크포인트 숫자를 한 시간 동안 네 번 바꿨고, 설치해 둔 react-responsive 훅은 한 번도 안 썼습니다.
- 발행일
리액트 쿼리 적용이라고 다섯 번 적었는데 찜 화면은 끝내 Recoil과 useEffect였다 — 한 달 뒤 내가 쓴 회고와 어긋나는 코드
사흘 동안 "리액트 쿼리 적용"이라는 제목으로 커밋 다섯 개를 올렸습니다. 마이페이지·설문·비밀번호는 useMutation으로 갔는데, 정작 서버 목록을 보여 주는 찜 화면은 끝까지 Recoil 아톰 다섯 개와 useEffect였어요. 한 달 뒤 쓴 회고에는 "서버 상태는 TanStack, 클라이언트 상태는 Recoil"이라고 적었는데, 코드는 그렇지 않았습니다.
- 발행일
data.data가 data.data.data가 됐다 — 응답 껍데기를 벗기는 자리를 36분 만에 옮겼다
마이페이지 회원 정보가 화면에 안 찍혀서 새벽에 커밋 둘을 올렸습니다. 첫 커밋은 API 함수가 벗기던 껍데기를 화면 쪽으로 넘겨 data.data.data를 읽게 했고, 36분 뒤 두 번째 커밋이 그걸 되돌리고 팀원이 만들어 둔 타입 붙은 훅으로 갈아탔어요. 나흘 뒤에는 상태 코드마다 써 두던 에러 문구를 지우고 서버가 주는 message 하나로 통일했습니다.