[개발일지][1인 프로젝트] 3일차 개발일지

3일차는 2일차에서 완성한 명세를 통해 실제 구현을 진행하며 MVP 골격을 만들었다.

그 중 수동 회원가입/로그인, 내 정보 수정, 이벤트 CRUD, 이벤트 생성/수정 UX를 실제 화면과 API로 연결했다.

 

구현한 기능

1. 회원가입 및 로그인 :
 Default는 소셜 로그인이지만, MVP 초기는 수동 가입부터 완성 후 소셜 로그인을 붙이도록 계획 해 수동 회원 가입 부터 완성.
 회원가입 시 필요한 정보로는 ID, PWD, PWD 확인, 이름, 성별, 휴대폰 번호, 생년월일, 주소 및 상세주소, MBTI정도를 기입하도록 구현. 휴대폰 인증을 완료해야만 가입이 되도록 하고 비밀번호는 최소 8자 이상에 영문과 특수문자가 1글자 이상 들어가도록 필수 조건을 설정함(아직 개발 초기단계이기에 SMS에 SOLAPI는 적용하지 않음).
  생년월일은 직접 입력이나 달력 모두 사용가능하게 구현했고 주소는 Daum 주소 검색 팝업을 통해 입력되도록 구현함(상세주소는 선택 입력).
  로그인은 JWT Bearer 방식으로 구현했고 로그인 성공시, access token을 저장해 인증 API요청에서 사용되도록 함(로그아웃 시, 저장된 JWT 토큰이 제거되도록 구현).
=> PASS와 같은 본인 인증 시스템을 넣어 이름과 성별, 휴대폰 번호, 생년월일은 자동으로 채워지도록 하려 했으나 사업자 등록을 해야만 적용이 가능하다고 해 우선 SMS인증으로만 본인 확인을 검증하는 방식으로만 구현(추후 확장 시, 구현 예정).

2. 내 정보 수정 :
  아직 홈 화면을 구현 안했기에 최초 로그인 시, 내 정보 화면으로 리다이렉팅되도록 설정했고 이름, 전화번호, 주소, 상세주소, MBTI는 수정이 가능하게 설정함(생년월일과 성별은 변경보다는 조회에 가깝다고 판단해 수정 하지 못하게 막음).
  비밀번호 변경 기능도 추가했고 로직 또한 최소 8자 이상/영문 혹은 특수문자 1글자 이상 사용으로 회원가입 시와 동일하게 설정.
  
3. 이벤트 CRUD :
  먼저 운영자용 이벤트 관리 화면부터 구현을 해 이벤트 CRUD의 모든 기능 생성 및 검증 완료.
  이벤트 생성 및 수정 항목으로는 이벤트명, 장소명, 주소 및 상세주소, 시작 일시, 총 모집 정원, 남성 모집 인원, 여성 모집 인원, 라운드 수, 라운드 시간, 평가 시간, 최종 선택 수가 들어가도록 함(Default는 남성 12명, 여성 12명, 라운드 수 10, 라운드 시간 600초로 설정).
  이벤트 조회에서 D-day UI를 추가 해 시작일 기준으로 몇일이 남았는지 표시되도록 했고 이벤트 생성 시, 현재 날짜보다 이전 날짜로 생성하지 못하도록 막아뒀음.
  이벤트 삭제를 할 때 실수 방지를 위해 이벤트명을 직접 똑같이 입력을 해야만 삭제가 되도록 실수 방지 대책을 마련함.
=> 이벤트 삭제 시 신청이나 참가자, 라운드, 페어링 기록이 있는 이벤트는 삭제를 할 수 없도록 막아두었음(운영 기록이 생긴 이벤트는 CANCELED 상태로 변경되는 게 적절하다고 판단했기 때문)

 

구현 API 

POST /auth/signup: 회원가입
POST /auth/login: 로그인
POST /auth/logout: 로그아웃
GET /me: 내 정보 조회
PATCH /me/profile: 개인정보 수정
PATCH /me/password: 비밀번호 변경
GET /admin/events: 운영자 이벤트 목록 조회
POST /admin/events: 이벤트 생성
PATCH /admin/events/:eventId: 이벤트 수정
DELETE /admin/events/:eventId: 이벤트 삭제
PATCH /admin/events/:eventId/status: 이벤트 상태 변경

 

적용 기술

프론트 : React Hook Form으로 폼 상태를 관리. Zod를 붙여 입력값 검증을 처리(ex) 비밀번호 규칙, 필수 입력 값, 시작 일시 형식, 오늘 이전 날짜 생성 시 차단 검증 등). 서버에서도 API를 직접 호출 해 우회할 수 있기에 추가적인 검증을 넣음(ex) 이벤트 시작일이 오늘 이전이면 NestJS 서비스 레벨에서도 400 Bad Request를 반환).
백엔드 : NestJS의 Controller-Service 구조로 구성. Controller는 라우팅과 요청 검증을 담당, Service는 실제 비즈니스 로직과 Prisma DB 처리를 담당.
DB 접근 : Prisma 사용. 이벤트, 사용자, 운영자 권한, 자기소개서 등의 테이블 구조를 Prisma schema로 관리하고 API에서는 Prisma Client를 통해 CRUD를 처리.
API 요청과 서버 상태 관리 : React Query를 사용(이벤트 생성/수정/삭제 후 queryClient.invalidateQueries로 이벤트 목록 캐시를 갱신해 화면이 최신 상태를 다시 불러오도록 함).

 

이슈

1. pnpm 설치 이슈 :
  "command not found"나 Corepack 권한 문제로 활성화가 되지 않음, 우회 설치를 통해 pnpm 9.15.0을 설치 완료

2. Node version 이슈 :
  Node 버전이 이전에 사용했었던 Node 18 환경이여서 Vite/Tailwind native binding 관련 에러가 발생, Node 24로 버전 업을 하니 dev 서버 정상 동작 확인

3. Admin 계정 500, ECONNREFUSED 에러로 인한 접속 불가 :
  새로 기능을 추가하거나 수정 후 admin 계정을 통해 테스트를 해보려 하면 계속 반복해서 에러가 떠서 해결하는 데 시간이 오래 걸림, 원인 확인 결과 계정 문제가 아닌 API 서버가 꺼져 있거나 4000번 포트의 프로세스가 문제 였던 것을 확인함(/api/v1/health, 직접 로그인 API, Vite proxy 요청을 확인해 원인을 분리 후 API 서버를 다시 띄워 해결).

 

4. API request failed 404 에러 이슈 :
  이벤트 수정 후 dev 테스트를 진행해 보니 404 에러 발생. 원인 확인 결과 실행 중인 API 서버가 이전 코드로 떠있어 새 라우트가 인식되지 않은 것으로 확인이 됨(API 서버를 re-build 해 해결).

5. 이벤트 시작 일시 입력 시 발생하는 UX 문제 :
  이벤트 시작 일시의 중간 숫자를 지우려고 하면 커서가 맨뒤로 이동해 맨 뒤의 숫자부터 지워지게 됨. 원인 확인 결과 백스페이스 사용 시, 입력값을 자동 포맷하면서 controlled input이 매번 다시 랜더링되고 커서 위치가 초기화되는 것을 확인(커서 앞 숫자 개수를 계산하고 포맷 후 같은 숫자 위치로 커서를 복원하는 방식으로 해결).

 

다음 개발 방향

다음 개발 단계는 회원 탈퇴와 같은 user 기반 기능 작업을 마무리하고 여유가 된다면 공지사항 CRUD도 구현할 예정.

 

Any comments : Codex가 너무 편하다.. 이전 개발 할 때에는 프레임워크에 맞게 초기 설정도 해야 하고 ERD 짜고 명세도 전부 직접 작성하고 해야 하는데, 시간이 오래 걸리는 작업은 Codex 쪽에서 전부 처리해주고 초기 세팅도 처리해주고 트러블 슈팅도 빠르게 원인을 찾아줘서 개발 속도가 생각보다 빠르다. 좀 더 빠르게 구현이 된다면 초기 MVP 보다는 더 많은 기능을 생각하고 추가할 수 있을 것 같다.