[개발 일지] DateP 프로젝트: 백엔드와 GPT 연동, 로딩 상태와 Modal 개선

안녕하세요! 오늘은 제가 진행 중인 DateP 프로젝트에서 백엔드와 프론트엔드를 연결하고, GPT 기반 데이트 코스 추천 기능을 완성한 이야기를 공유하려고 합니다. 추가로 API 로딩 상태와 UI 개선 작업도 진행했는데, 하루 동안 꽤 알찬 작업을 마무리한 것 같아 뿌듯하네요. 그럼 어떤 작업을 했는지 하나씩 정리해 볼게요!

1. 백엔드, 프론트엔드, GPT 데이트 코스 연결 완료

DateP는 데이트 코스를 추천해주는 앱인데, 이번에 핵심 기능인 GPT 기반 코스 추천을 백엔드와 프론트엔드에 제대로 연동했습니다. 백엔드에서 GPT API를 호출해 데이터를 받아오고, 프론트엔드에서

그 결과를 렌더링하는 과정을 마무리했어요.

이제 사용자가 앱에서 버튼 하나만 누르면 GPT가 추천한 데이트 코스가 쫙 나오는 멋진 기능을 볼 수 있습니다.

2. API 로딩 상태 구현과 Places Modal 개선

기능이 동작하는 것도 중요하지만, 사용자 경험이 빠질 수 없죠. 그래서 두 가지 UI 개선 작업을 추가로 진행했습니다.

(1) API별 로딩 상태 추가

GPT 호출이나 백엔드 데이터 요청은 시간이 조금 걸릴 수 있어서, 각 API 호출에 로딩 상태를 넣었어요.

• 구현: React의 useState로 로딩 상태를 관리하고, 데이터가 도착하기 전엔 간단한 스피너를 띄웠습니다.
• 효과: 사용자가 "아, 지금 데이터 가져오는 중이구나" 하고 기다릴 수 있게 됐어요. 깜빡이는 화면 대신 부드러운 경험을 줄 수 있어서 만족스럽네요.

(2) Places 데이터 수신 시 Modal 바로 표시

기존엔 Places(장소 데이터)가 들어와도 수동으로 Modal을 띄워야 했는데, 이번에 Places 데이터가 도착하면 바로 Modal이 뜨도록 수정했습니다.

• 구현: RN에서 데이터를 감지하는 useEffect 훅을 활용해 상태 변화를 체크하고, Modal을 즉시 호출.
• 장점: 사용자 입장에서 더 직관적이고 빠르게 반응하는 느낌을 줄 수 있어요. "딜레이 없이 바로 뜨네!"라는 반응을 기대하고 있습니다.

오늘의 Git 커밋

작업을 마무리하고 Git에 커밋도 깔끔하게 남겼습니다:

 

---

마무리

오늘 하루로 DateP 프로젝트의 핵심 기능이 거의 완성된 느낌이에요. 백엔드와 GPT를 연결해서 데이터가 흐르는 걸 보니 "내가 이걸 해냈구나" 하는 성취감이 들었고, 로딩 상태와 Modal 개선으로 사용자 경험도 한층 업그레이드됐습니다. 다음 목표는 UI를 조금 더 다듬고, 테스트를 돌려보는 거예요.

혹시 비슷한 프로젝트 하시는 분 있으면 댓글로 꿀팁 공유 부탁드릴게요!

읽어주셔서 감사합니다. 다음 개발 일지에서 또 만나요! 😊