[데브코스]1차 프로젝트 회고

들어가면서

Vanilla JS로 Open API를 활용해 정적 웹 애플리케이션을 제작했던 프로젝트.
처음 해보는 개인 프로젝트였지만, 주제 선정부터 기획, 개발까지 팀과 함께 했기에 많은 배움과 우여곡절이 있었다.
이 회고록에서는 그 과정과 아쉬웠던 점, 그리고 개선할 방향에 대해 이야기해보려 한다. 😊

---

주제 선정🚀

우리 팀은 공공데이터 포털에서 제공하는 API 중 실시간 지하철 정보와 유기 동물 보호소 API를 두고 투표를 진행했다.
실시간 지하철 정보 API로 프로젝트를 시작했으나, 제공되는 데이터가 기대보다 적어 기능 구현에 한계를 느꼈다.
결국, 팀의 2순위였던 유기 동물 보호소 API를 활용하기로 결정했고, 주제를 변경하여 새롭게 출발했다.

기획 과정에서의 깨달음🎯

첫 기획이었던 만큼, 경험 부족으로 기획의 기본 구조를 놓쳤었다.
우리는 API를 먼저 선정하고 거기에 맞춰 개발하려 했지만, 기획의 시작은 배경과 의도를 명확히 설정하는 것이 중요하다는 것을 뒤늦게 알았다.
결국, 주제를 유기 동물로 확정하며 예상 사용자층과 제공 기능 등을 다시 고민했고, 이후의 개발 방향이 더욱 명확해졌다.

프로젝트 결과💡

완성된 기능들:

• 보호기간이 얼마 남지 않은 유기 동물들을 조회 할 수 있는 기능.
• 사용자가 시/도/군을 선택하면 해당 지역의 유기 동물을 조회할 수 있는 기능.
• 상세 페이지에서 보호소의 위치를 지도에 표시하고, 유기 동물 정보를 제공.
• Vanilla JS로 SPA를 구현하며 컴포넌트 형식으로 작성.

최대한 간결하고 효율적인 코드 작성을 목표로 했으며, 기능은 단순했지만 프로젝트의 흐름을 설계하는 데 큰 도움이 되었다.

데이터 페치 로직과 한계점

내가 작성한 fetchData 함수는 API 호출을 담당하며 다양한 매개변수를 처리할 수 있도록 설계되었다.
그러나 단일화된 함수로 모든 요청을 처리하다 보니, 다음과 같은 문제점이 있었다. 😓

1. 가독성 저하

   • fetchData에서 사용하는 매개변수 종류가 많아, 각 호출이 어떤 데이터를 요구하는지 파악하기 어려웠다.
   • 호출하는 곳마다 어떤 매개변수를 전달해야 할지 헷갈리는 일이 자주 발생했다.

2. 재사용성의 한계

   • 단일 함수로 모든 요청을 처리하다 보니, 특정 API에 특화된 로직을 추가하기 어려웠다.
     예를 들어, fetchCoords와 같은 API는 다른 인증 방식을 사용하므로 별도로 관리하는 것이 더 효율적이었다.

3. 디버깅 어려움

   • 모든 요청 로직이 한 함수에 묶여 있어, 특정 요청에서 문제가 발생할 경우 디버깅에 시간이 많이 걸렸다.

개선 방향

1. 요청별 함수 분리

   • 각 API의 특성에 맞게 별도의 함수로 분리해 가독성과 재사용성을 높인다.

     
     const fetchSido = async () => { /* 시/도 API 호출 */ };
     const fetchSigungu = async (sido) => { /* 시/군/구 API 호출 */ };
     const fetchShelters = async (sido, sigungu) => { /* 보호소 API 호출 */ };

2. 매개변수 객체화

   • 매개변수를 객체로 전달해 가독성을 높이고 오류 가능성을 줄인다.

     
     const fetchData = async ({ pathname, params }) => {
     const url = new URL(`http://apis.data.go.kr${pathname}`);
     Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
     return fetch(url).then((res) => res.json());
     };

3. 에러 처리 로직 개선

   • try-catch문을 활용하여 fetch 로직을 작성하여, 에러처리를 용이하게 한다.

나의 개발 목표와 회고🌱

이번 프로젝트에서는 Vanilla JS로 SPA를 구현하며 컴포넌트화에 집중했다.
React나 Vue 같은 프레임워크 없이 상태 관리와 컴포넌트를 구현하며 기본기를 다질 수 있었고,
로직을 모듈화하려는 시도를 통해 코드 재사용성을 높이고자 했다.
물론 부족한 부분도 많았지만, 직접 설계하고 부딪혀보며 배우는 과정이 가장 큰 수확이었다.

마무리하며

첫 프로젝트에서 부족함을 느끼는 건 당연한 일이었다.
하지만 문제를 발견하고 개선 방향을 고민했던 과정은 나를 한 단계 성장하게 만들었다.
다음 프로젝트에서는 이번에 배운 점을 적용해 더 효율적이고 확장성 있는 구조를 만들고 싶다.
꾸준히 발전하며, 다음 목표를 향해 나아가자! 💪✨

---

Github: https://github.com/Kim-HyounSuk/Programmers-Abandoned_Animal_Search_Service.git