사이드 프로젝트 도전기 (Day 4) - API 연동과 실무 지식 습득 🚀

사이드 프로젝트 도전기 (Day 4) - API 연동과 실무 지식 습득 🚀

사이드 프로젝트 도전 4일차입니다. 지난 3일차에 프론트엔드와 백엔드의 첫 연결에 성공한 후, 오늘은 포트폴리오 상세 페이지의 모든 기능을 API로 연동하는 작업을 진행했습니다.

---

AI 활용으로 얻은 실무 경험

이번 프로젝트의 첫 번째 목표는 '바이브 코딩'을 적극 활용해 빠르게 완성하는 것이었습니다. 신속한 결과물 확보를 통해 AI 코딩 툴에 익숙해지는 것을 최우선으로 삼았죠.

놀라운 점은, AI가 제공하는 코드가 실무 중심적이라는 것입니다. 제가 생각했던 방식과는 다른, 더 효율적인 해결책들을 제시해 주었습니다. 만약 나중에 이직하게 된다면, 실제로 이런 방식으로 작성된 코드를 분석하고 개발하는 경험을 하게 될 텐데, AI를 통해 미리 간접적으로나마 경험해 볼 수 있었습니다.

---

좋아요 버튼 로직 개선 사례

가장 인상 깊었던 예시는 '좋아요' 버튼 로직 처리입니다.

기존에는 포트폴리오 상세 조회 API를 호출할 때 단순히 api key만 전달하여 데이터를 받아왔습니다. 하지만 사용자가 좋아요를 중복해서 누르지 못하도록 하려면, 로그인한 사용자가 해당 포트폴리오에 이미 '좋아요'를 눌렀는지 확인하는 작업이 필요했습니다. 좋아요 정보는 별도의 portfolio_likes 테이블에서 관리하고 있었고요.

처음에는 '포트폴리오 상세 조회 API'와 '좋아요 여부 확인 API'를 따로 호출해야 하나? 하고 생각했습니다. 하지만 AI는 더 나은 방법을 제안했습니다.

💡 AI의 제안:

• 포트폴리오 상세 조회 API에 로그인 사용자의 JWT 토큰을 함께 전달합니다.
• API 응답에 is_liked: true/false 값을 추가하여, 좋아요 여부를 한 번에 알려주도록 합니다.
• 좋아요 이벤트 클릭 시에도 응답 결과에 is_liked 값을 포함시켜 상태를 즉시 파악할 수 있게 합니다.

이처럼 AI가 실무 중심의 답변을 제공해 주어, 마치 다른 회사 개발자의 로직 처리 방식을 배우는 듯한 기분이 들었습니다. 단순한 CRUD(Create, Read, Update, Delete) 페이지를 구현하는 사이드 프로젝트임에도 불구하고, 제가 몰랐던 새로운 접근법을 알게 되어 매우 흥미로웠습니다.

---

4일차 작업 요약

오늘은 포트폴리오 상세 페이지를 완전히 마무리했습니다.

✔ 완료된 작업:

• 포트폴리오 상세 페이지 UI와 API 연동
• 피드백 작성 및 조회 기능 구현
• '더보기' 버튼을 활용한 피드백 추가 로드 기능
• 좋아요 버튼 기능 구현

빠른 완성을 위해 미처 확인하지 못한 부분들은 앞으로의 미션으로 남겨두고, 내일은 '포트폴리오 만들기' 작업을 시작하려 합니다.

내일도 화이팅! 💪