[스파르타 코딩클럽] 8주차 개인프로젝트 후기

Lea·2020년 6월 27일

스파르타코딩클럽

빵빵한 지도 개발일지

목록 보기

7/7

1. 프로젝트 취지

다이어트, 건강, 개인신념 등 다양한 이유로 식단 관리를 하는 사람이 많은데, 이러한 사람들을 위한 식당이나 카페, 베이커리 정보가 한 번에 확인할 수 있는 지도가 없다는 점이 늘 아쉬워서, 우선 작게 베이커리 카테고리를 테마로 프로젝트를 진행
빵을 사랑하지만 비건, 글루텐 알러지, 다이어트 등 다양한 이유로 식단을 조절하느라 빵을 못먹는 빵순이, 빵돌이를 위한 조금은 특별한 베이커리를 쉽게 찾을 수 있는 지도
추후 다양한 카테고리의 식당들도 한 번에 볼 수 있게 구조를 바꿔볼 계획

2. 페이지 구현 모습

동영상 링크 : https://youtu.be/7yj79ihn534

구현 모습 설명

카테고리 미선택 시, 안내 문구
카테고리 선택 후 버튼 클릭하면 해당 카테고리에 해당하는 베이커리들이 지도에 핀으로 표시
핀을 클릭하면 해당 베이커리에 관한 기본 정보를 인포윈도우로 띄움
기본 정보 인포윈도우를 띄운 후, 해당 베이커리 인스타그램 해시태그 인기 이미지를 크롤링해서 인포윈도우에 추가

3. 구현한 방법

1) 베이커리 DB 구축 (수기 작업)
2) HTML, CSS으로 뼈대 작업
3) 필터된 카테고리만 리스트로 불러와 URL 생성한 후 API로 서버에 전달
4) 전달 받은 카테고리에 해당하는 베이커리들만 골라 DB에서 꺼내 프론트로 전달
5) 위치 정보(위도, 경도)를 기반으로 구글맵에 띄움 (구글맵 API 함수 활용)
6) 구글맵 API에서 지원하는 마커 Event를 통해 베이커리별 인포윈도우 생성
7) 마커 Event 발생 시, 서버에 해당 상호명을 전달하여 셀레니움을 통해 인스타그램 이미지 크롤링

4. 어려웠던 점

1) 구글맵 API 활용
지도 API를 활용해보고 싶어서 시작한 프로젝트인데, 구글맵 API 사용법이 친절하게 잘 설명되어 있긴 했지만... 문제는 전부 영어였다는 점이다. 아직 코딩도 익숙하지 않은데 오랜만에 영어 문서를 읽으려니 생각보다 사용 방법 익히는게 오래 걸려서 힘들었다. 게다가, 원래 DB 쌓을 때 구글맵 API를 활용하려 했었는데 무료 버전의 경우 생각했던 것보다 제약 사항이 많아서 기존에 계획했던 것과 달라지는 부분이 당황스러웠다.

→ 구글에서 제공해주는 예제를 하나하나 해보며 감을 익히고, 열심히 구글링해서 나와 비슷한 기능을 구현했던 코드를 찾아 변형하며 응용하니 어느 정도 해결되었다🙂
→ DB는 지도를 크롤링해오는 것으로 계획을 변경해서 시도하다가 프로젝트 기한에 맞추지 못할 것 같아서, 결국 수기로 열심히 데이터를 만들어서 넣어주었다. (나중에는 지도 크롤링도 시간날 때 다시 도전해볼 계획이다!)

2) API, 함수 관계
클릭 하나를 할 때, 여러 가지의 동작이 함께 일어나야 하는 부분이 많았는데 함수끼리의 관계가 어떻게 되어야 맞는지 API가 여기서 동작되면 되는게 맞는지 헷갈렸다. 그리고 시간이 날 때마다 틈틈히 코드를 짜다보니 나중에 다시 보면 분명히 내가 쓴 코드인데도 왜 이렇게 썼는지 헷갈리고 스스로 이해하는데 힘들었다.

→ 튜터님이 조언해주신대로 최대한 함수를 잘게잘게 쪼개는 작업을 진행중이다. 동작 하나하나를 함수로 쪼개서 바꿔주려고 하니 에러가 나는 경우가 많아서, 함수 기초 원리부터 차근차근 공부하며 하며 수정해나갈 계획이다.

3) 인스타그램 이미지 크롤링
셀레니움을 활용해야 인스타그램 이미지를 크롤링할 수 있다는 사실을 모르고 삽질하다가 시간을 꽤나 오래 할애했던 부분이다. 웹페이지 구조를 제대로 알았으면 이 정도로 시간을 쏟지는 않았을텐데, 왜 굳이 셀레니움을 써야하는지 이해를 하지 못해서 원래 알던 방식대로 하려다가 예상보다 시간을 많이 써버렸다.

→ 유튜브에 셀레니움 기초 설명 영상을 보며 차근차근 따라하니 쉽게 해결할 수 있었다.
→ 생각보다 셀레니움으로 크롤링 해올 때는 버퍼링(?)이 길어서 기능이 구현되고도 만족스럽지는 않았다...

5. 느낀점

1) 세상에 간단한 건 없다
8주 동안 느낀 점은 웹상에서 간단해보이는 기능 하나 하나에도 많은 고민과 노력이 깃들어 있다는 점이다. 예전에 회사 개발자분들에게 새로운 기능 부탁할 때 내 딴에는 이 정도는 간단하지 않을까라고 생각해서,, 조금만 더 빨리 해달라고 자주 독촉했었는데, 과거 나의 발언을 많이 반성하게 되었다.

2) 기본기를 탄탄히 하자
몇 주 동안 개인 프로젝트를 하면서 가장 크게 느낀 점은 지난 개발일지에서도 언급했지만, 아주 당연하게도 기본기가 가장 중요하다는 점이다. 프로젝트를 하면서는 데드라인에 맞춰야 한다는 생각에 당장 기능 구현해내는데 급급했다. 그래서 이 기능이 어떻게 동작하는지 완전히 100% 이해하고 코드를 짜고 있지 않으니 응용해야 할 때 시간을 많이 쓰게 된 것 같다. 아무래도 프로젝트 페이지를 완성하고 나면 사용한 코드들 개념을 하나하나 다시 정리하고, 개선할 부분 없는지 곱씹어 보는 시간이 필요할 것 같다.

3) 코딩은 집 짓는 것이랑 비슷하다
무작정 의욕만 앞서서 예쁜 지붕부터 올리다가 뒤늦게 기둥을 끼우려고 안간힘을 써도 그냥 와르르 무너져버리는게... 마치 집 짓는 것이랑 비슷하다는 생각이 자주 들었다. 제대로 된 기획 없이 일을 시작하면 티가 많이 나기도 하고 우선 삽질을 하게 되기에.. 기획을 통해 큰 틀을 잡고 우선순위에 맞게 순차적으로 일을 하는 것이 참 중요한 분야라는 생각을 하게 되었다.