개발일지#6 - 나만의 웹 서비스 만들기(완성)

처음으로 나만의 웹 서비스 만들기를 해보면서 느낀부분은 기획하는것도 어려웠지만 

아직은 익숙하지않은 코드들을 내가 원하는대로 활용하는 부분이 가장 어려웠던 것 같다!!

 

화면은 최대한 깔끔하고 심플하게 만들어 보았다!

* 메인화면 

메인화면

원래는 메인화면을 만들지 않으려고 했지만, 어느사이트를 만들던지 회원가입/로그인 부분은 필수이므로

예전에 배웠던 강의를 복습하는 차원에서 만들어 보았다! 

 

회원가입/로그인 부분은 중요한 부분들은 따로 정리해두는게 좋을 것 같다.

 

* 맛집 추천

맛집 추천화면

두번째로, 맛집 정보를 입력하는 화면을 간단히 만들어봤다!

이번 프로젝트를 만들게된 이유중 하나가 세상에 맛있는것만 많고 맛집은 많지만 안타깝지만 내 머리가 그걸 다 기억하지 못한다.

 

여기에서 시간이 부족해서 만들어 보지 못한 부분은 바로 주소검색 기능이다ㅠㅠ

이번 프로젝트 이후에 혼자 스스로 한번 만들어 볼 생각이다! 

 

위 화면에 보여지는 정보를 입력하게되면은 몽고DB에 저장되게 된다!

저장 데이터

DB에 저장하는 클라이언트,서버 코드는 나중에 활용할 수 있도록 정리해보자!

 

* 맛집 찾기

맛집 찾기화면

이제 네이버지도API를 통해 위 화면과 같이 맛집지도를 완성했다.

 

맛집지도를 이런식으로 표현하고자했던 이유는! 내가 알고있는 맛집들을 보기편하게 지도에 표현을 하기위함이다!

1. DB에 저장된 주소를 토대로 x좌표,y좌표로 변환을 한다.

2. x좌표,y좌표 값을 지도에 마커로 표시해준다.

3. DB에 저장된 나머지 정보들로 카드목록으로 보여준다.

4. 마커를 클릭하면 infowindow를 생성한다.

5. infowindow를 생성하면 목록에서도 클릭한 맛집정보를 스크롤 하여 보여준다.

6. 카드목록에서 맛집이름을 클릭하면 지도에서 해당 infowindow를 찾아서 보여준다.

7. 지역별로 버튼을 만들어 해당 지역으로 이동 기능을 만들었다.

 

이번 프로젝트를 하면서 여러 도움을 받으면서 코드를 작성하고 만들었다!

물론 아직은 좀 부족한 모습일 수 있지만 이렇게해보면서 조금더 웹 동작원리를 이해할 수 있는 시간이 되었다.

 

이번에 작성한 코드들은 따로 정리를 해서 다음번에도 활용할 수 있도록 해볼 생각이다.