[BitCamp] 2번째 프로젝트 회고록

HTML + CSS + JS를 약 4주간 배우고 3월 15일부터 3월 24일까지 2번째 프로젝트를 진행하였다.

프로젝트 진행 주제는

1 ) HTML + CSS + JS

2) HTML + CSS + JS + JS라이브러리

3) Front + 웹소켓 + DB

라는 3가지의 선택지가 있었는데 우리 조는 3번으로 만들기로 했다.

우리는 유난히 조용한 우리 기수사람들이 서로 친해지기를 바라는 마음에

대학생들이 많이 사용하는 에브리타임 앱을 응용하여 학원에서 사용할 수 있는 웹 사이트를 만들기로 했다.

핵심기능으로는 크게 1) 기수별 회원가입, 2) 자유게시판, 맛집게시판, 3) 학원 근처 맛집 지도, 4) 투두리스트, 5) 1대1 채팅방으로 잡게 되었다. 그 중에서 나는 카카오 지도 api를 이용한 학원 근처 맛집 지도를 하기로 했다.

우리는 매일 학원 시작, 종료 전에 2번의 회의를 진행하였고, 서로의 진행 상황을 지속적으로 체크하며 개발을 진행하였다.

내가 맡은 지도 기능은 크게 5가지의 기능을 구현해야했다.

은근히 할일이 많았기에 아래와 같이 노션에 내가 해야할 일들을 적어가면서 개발을 진행하게 되었다.

밑에 노션링크를 들어가게 되면 내가 프로젝트를 진행을 어떻게 했는지 확인할 수 있다.(정리가 비교적 안됬기 때문에 양해바란다 ㅎㅎ..)

거의 10일동안 프로젝트를 진행하게 되면서 여러모로 힘든일이 많았는데,

우선 지도를 활용할 게시판에 사용자가 게시글에 음식점에 대한 주소를 입력하게 되면 해당 주소를 데이터베이스에 저장하고,

해당 게시글을 읽으려고 할때 DB에 저장된 음식점 주소를 불러와서 게시글 본문내용에 지도를 띄어주려고 했으나

게시판이 구현이 되지않아서 확인이 불가능했었다..

그러므로 게시판이 구현이 될때까지 사용자 위치 근처 맛집 30개에 대한 인포윈도우를 만들게 되었다.

인포윈도우에는 크게 음식점 이름, 음식 종류, 전화번호, 길찾기 등을 구성하게 되었고, 콘솔창에 확인 한 Array방식으로 불러온 값을 인포윈도우에 삽입해주었다. 가끔 근처 음식점의 마커가 다른곳으로 찍힐때도 있었는데 구글링과 카카오 dev사이트에서 찾아본 결과

1) 사용자 위치 기준, 2) 카카오 맵 트래픽, 3) 음식점 종류에 따라 바뀌는것 같았다.

그렇게 위와같은 사이트를 학원 근처 맛집 지도를 만들게 되었다.

이후에는 해당 맛집 지도를 이용하여 게시판에서 주소를 입력받고 해당 주소에 대한 마커를 찍을 수 있게 수정하였고, 해당 주소를 DB에

저장시키고 불러오는 것까지는 확인이 되었지만, 앞 뒤 공백 문제나 해당 주소를 제대로 불러오지 못하여 게시글을 읽을 때 해당 음식점에 대한 주소를 확인할 수 없었다.

또한 조원들과 코드를 합치게 되면서 내 지도가 위의 사진과 같이 게시판의 레이아웃에 가려져서 당황하기도 하였고,

Git도 관리를 철두철미하게 하였지만 충돌이 나게되면서 여러모로 배우지않은 기술을 사용했기 때문에 힘들게 진행했던 것 같다.

그래도 api에 대한 지식이 없는 상태에서 지도 기능을 내가 의도한대로 구현하게 되면서 자신감을 얻을 수 있었다.

아쉬운 부분도 있지만 다음 프로젝트에서는 더 잘하고 싶다는 마음이 생겼던 시간이었다.

GollDong