본문 바로가기
내마음대로만들어보자/나만의 웹 서비스 만들기

개발일지#1 - 나만의 웹 서비스 만들기(나만아는 맛집 리스트)

by 소농민! 2021. 5. 10.
728x90

1. 프로젝트 설명 

나도 오랜 시간 집을 나와 자취를 하고 있고 1인가구가 늘어나면서 만들어 먹기보다는 

시켜먹고 사먹는 경우들이 많아지는 것 같아 이번 프로젝트를 계획하게 되었다.

평소에 점심메뉴를 고르더라도 딱히 먹고 싶은게 없을 정도로 크게 먹는거에 대한 욕심이 없는 편이다.

하지만, 이런 내가 좋아하고 자주가는 식당이 있다면? 내 주변지인들은 그런 식당은 믿고 간다!

이런것처럼 어느 누구한테 믿고 추천할 수 있는 나만 아는 우리동네 맛집들을 추천해주고 공유할 수 있는 사이트를 만들어보고싶다.

현지인이 직접 추천해주는 맛집 리스트!

 

2. 나만아는 맛집 리스트 구상하기 

우선은 웹 개발플러스 강의를 들으면서 여러가지 API를 찾아보고 알아보면서

내가 입력한 맛집에 대한 정보를 검색해서 지도에 보여주면 어떨까 생각을 했다.

(만약 강원도를 놀러 간다면 해당 지도만 확인하면 맛집에 대한 위치를 알고 찾아가기 쉽도록 만드는게 목표)

 

상세화면구성은 간단하게  상단에 맛집 리스트 입력창 → 맛집지도 → 맛집목록이 보여질 수 있도록 구성해보려고 한다. 


내가 생각한 맛집 리스트를 만들기 위해 공부해야 내용은

 

- 입력한 맛집정보 (이름,주소 등등) 를 이용해서 API를 통해  경도, 위도를 찾아서 지도에 표시해주고 나머지 입력한 정보들을 목록화 하여 보여주기 

 

1) 전체적인 HTML 화면 구성 - 맛집정보 입력화면 , 맛집지도, 맛집목록 

  → 입력정보 : 맛집이름, 맛집주소, 메인메뉴, 맛집선정이유 

      (입력받은 정보는 DB에 저장 후 맛집 목록으로 보여지도록 구성) 

2) 입력받은 맛집이름 or 맛집주소를 가지고 경도,위도 계산하여 지도에 표시하기

  → 지도에 표시할 주요 기능 (확대/축소버튼 , 마커띄우기, inforwindow 만들기, 마커 클릭 시 스크롤 움직이기 등 웹개발플러스 3주차 고급기능쓰기 활용)   

3) 완성된 모습은 내가 아는 맛집 정보를 입력 → 입력된 맛집정보를 지도 및 목록화 

 

새로운 API를 활용해서 해보고 다른 부분도 해보고싶었지만 그러기에는 시간이 부족할거란 생각이 들어서 

지금까지 배워온 부분들을 최대한 활용해서 할 수 있도록 해보려고 한다.

 

 

<준비사항 및 개발계획> 

1. 카카오API (키워드로 장소검색하여 좌표로 변환하기)을 통해 맛집이름 검색 

   or 

   네이버API (주소를 좌표로 변환하기)을 통해 맛집 주소로 검색 

  ※ 맛집정보를 입력할때 이름으로 검색을 하여 지도에 보여지도록 구성한다면 사용하기 편리할것 같지만 

     사용해보지않은 API를 사용하려는거라 공부해보고 안된다면 기존 강의에서 배운내용을 토대로 해볼생각이다. 

2. 처음 입력받은 맛집에 대한 정보는 몽고DB에 저장

3. 1번에서 변환한 좌표를 토대로 지도에 마커 띄우기

4. 마지막으로 DB에 저장된 맛집 리스트를 목록으로 불러와 템플릿으로 맨 하단에 보여준다.

5. 최종 클라이언트 서버 연결 및 동작 테스트