사진 서비스는 GraphQL, 게임 서비스는 REST로 만들었어요
사진 서비스에는 GraphQL과 Apollo를, Game Mate에는 REST와 TanStack Query를 썼어요. 두 서비스를 만들면서 API 계약과 DB 정합성, 테스트를 정하고 ESLint로 코드의 경계를 검사한 과정을 적어 봤어요.
#react
이 태그가 붙은 글입니다.
건강검진 예약을 기존 서비스에 연결한 과정
전화로 문의하던 건강검진을 복지몰에서 고르고 결제할 수 있게 만들었어요. 기존 프로그램에 검진을 더하면서 등록 권한과 검사 선택, 결제 후 돌아올 화면을 따로 풀어야 했어요.
Sentry로 추적한 Bottom Sheet 드래그 크래시
시트를 끌다 놓으면 화면이 멈추는 오류가 있었어요. 라이브러리를 올려 문제의 코드를 없앴지만, 제목까지 스크롤되는 문제는 그때도 놓쳤어요.
오류가 난 영역만 다시 시도하도록 Error Boundary 나누기
목록 조회가 실패했는데 메뉴와 헤더까지 사라졌어요. 실패한 표나 필터만 다시 시도할 수 있도록 조회 위치와 Error Boundary를 함께 바꿨어요.
Next.js의 라우팅과 캐시 문제를 추적한 기록
검색을 눌러도 주소가 그대로였고, 배포 뒤에는 열어 둔 탭의 공지가 닫히지 않았어요. 라우팅과 쿠키, 폼 초기화를 따라가며 서버가 다시 처리해야 할 일을 구분했어요.
선언적으로 코드를 쓰는 기준
화면을 보려는데 조회 순서와 계산부터 읽게 되는 코드가 불편했어요. 리뷰 상세와 검색 필터, 쿠폰 계산을 고치며 화면 구성과 세부 동작을 나눈 방법이에요.
프로토타입을 옮기며 반복되는 판단을 skills에 남긴 과정
프로토타입을 서비스로 옮기는 동안 비슷한 구현을 여러 번 맡겼어요. 그때마다 고치던 내용을 skills에 적었지만, 짧고 강한 규칙이 오히려 잘못된 코드를 만들기도 했어요.
결제 내역에 쿠폰 결제를 추가하며 분기를 한곳으로 모은 과정
쿠폰 결제를 넣으니 결제수단만으로는 화면을 고를 수 없었어요. 저장 전에는 금액을 고치고 쿠폰을 풀어야 했고, 저장 뒤에는 현장 결제와 함께 보여줘야 했어요.
서로 다른 두 SSE를 하나의 상담 화면에 연결한 과정
AI 답변과 상담사 메시지가 서로 다른 서비스에서 왔어요. 두 SSE를 한 대화창에 이어 붙이며, 메시지를 보내는 곳과 보여 주는 곳을 따로 정했어요.
3단계 리뷰 작성 폼의 역할을 RHF, Zod, 퍼널로 다시 나눈 과정
리뷰 폼을 RHF와 Zod로 옮기면서 시술 선택 UI도 다시 붙였어요. 시트를 닫으면 선택을 취소하고, 확인할 때만 폼에 넣도록 바꾼 과정이에요.
예약 폼의 작성 상태를 Zustand에서 React Hook Form으로 옮긴 과정
예약할 가족을 추가했는데 날짜 선택은 이전 인원수대로 움직였어요. 서버의 가족 목록과 사용자가 고른 일시를 구분하고, 작성 중인 값은 React Hook Form에서 바꾸도록 고쳤어요.
TypeScript로 호출부의 실수를 줄이는 방법
값의 추론을 유지하는 satisfies, optional property, 제네릭과 배타적인 props를 실무에서 어떻게 쓰는지 정리했어요.
NestJS의 책임 분리를 참고해 Electron 수집 앱을 나눈 기준
채용 플랫폼을 추가할 때마다 수집 흐름도 복사하고 있었어요. NestJS를 넣었다가 걷어냈지만, 요청을 받는 코드와 수집 순서, 사이트별 처리는 나눠 남겼어요.