스위프 6기 프로젝트 빈더

이번에 좋은 기회로 스위프라는 곳에서 프로젝트를 하게 되었다

주제로 쓰레기통 공공데이터를 활용해 내 주변 쓰레기통을 찾는 서비스를 개발하기로 했다.

무려 이 서비스로 스위프 6기중 1등을 했다!

 

배포된 주소

https://www.bin-finder.net/

 

https://yunsusu.notion.site/binder-11e10563802480c6b924cd53cb7a5fb1

노션으로 정리해둔 것도 있다.

 

6주동안 기획부터 개발완료 후 발표까지 준비해야 하는 프로젝트였다.

프론트엔드 개발자로 참여하여 검색페이지와 마이페이지를 맡아서 작업을 하게 되었다.

물론 지도도 몇개 개발하고 수정한 부분이 있지만 담당하여 작업하지는 않았다.

 

Next.js로 개발을 하였으며 TS, jotai, scss, RHF 등을 활용하여 제작을 하게 되었다.

이번 개발을 하면서 생각에 남았던 트러블슈팅이 하나 있다.

1. 문제 정의

• 검색하려 타이핑 할때마다 통신이 가는 문제: ㄱ, 거, 검, 검ㅅ, 검새, 검색 이런 식으로 한 글자 입력할 때마다 통신이 발생함. 사용자가 한 번의 검색 요청만 보내야 하는데, 불필요하게 많은 요청이 보내짐.

2. 문제 진단

• 검색어 입력란에 타이핑할 때마다 onChange 이벤트가 발생하면서 바로 API 요청이 실행됨.
• 사용자가 단어 하나를 완성할 때까지 여러 글자를 입력하는 동안, 글자 하나마다 API 요청이 발생하여 서버에 불필요한 부하를 줌.

3. 문제 분석

• 사용자가 입력을 완료할 때까지 기다리지 않고, 입력할 때마다 요청이 발생하는 구조임.
• 이로 인해 한 번의 검색 요청만으로도 충분한 상황에서, 사용자가 타이핑하는 동안 수많은 불필요한 API 호출이 발생함.‘검색’하나 입력하는데 이렇게 많은 통신이 감

4. 해결 과정

• 디바운스(Debounce) 기법을 적용하여 사용자가 타이핑을 멈춘 후 일정 시간(예: 300ms) 동안 추가 입력이 없으면 그때만 API 요청이 가도록 설정.

검색할때 디바운싱 문제에 대해 고민하고 해결해 적용한 부분이다.

디바운싱을 자주 사용할 일이 없었는데 이번 기회로 확실하게 알고 넘어갈 수 있게 된 것 같다.

다른 부분에서는 IntersectionObserver 부분도 있었다.

그리고 카카오api를 맵에서도 사용하고 검색에서도 사용하게 되다보니 의존도가 너무 높은것 같다는 의견도 있었다.

하지만 맵을 직접 구현할 수 있다해도 6주안에 하기에는 너무 시간이 없다 생각해서 그냥 사용하는 방향으로 가게 되었다.

검색에서도 사용자가 검색 키워드를 입력하면 카카오 주소 api 에서 자동완성을 받아와 보여주었는데 우리가 직접 모든 주소를 파악하고 하기에는 힘들다 판단했다.

확실히 매번 프로젝트를 하면서 많이 발전하는 것 같다고 느꼈다.

까먹고 있던 부분이나 알던 부분도 다시 보게되어 더욱 단단해진 것 같다는 생각이 든다.

 

다음 7기도 참여해서 또 좋은 사람들과 좋은 프로젝트를 만들어보려고 한다.

이번에 너무 좋았던만큼 또 좋은 프로젝트 만들 수 있길..