1. 기간
2021.08.24 - 2021.12.27
2. 프로젝트 명
RMH, 내손맛 (내 손안에 맛집)
3. 설명
사용자의 현 위치를 중심으로 입력한 메뉴의 추천 음식점을 알려주는 웹 페이지
뭘 먹을지를 결정하는데 오랜 시간이 걸리는 사람들을 위해 랜덤으로 사용자 주변의 맛집들을 선정해주는 웹 페이지가 있으면 좋을 것 같다고 생각하여 개발하게 되었다.
4. 기술 스택
1) 상세 정보 제공
음식점 리스트를 더블 클릭하면 카카오 지도의 상세 정보 페이지로 이동한다. 웹 페이지에서는 제공하지 않는 지도, 길찾기, 로드뷰 등의 기능과 영업 시간, SNS 주소 등 추가적인 정보를 얻을 수 있다.
2) 거리 계산
사용자의 현 위치를 중심으로 추천 음식점까지의 대략적인 거리를 계산하여 알려준다.
5. 역할
화면 구성 및 전반적인 CSS
화면 상에 보이는 여러 항목이 가독성과 깔끔함을 함께 가질 수 있도록 여러 요소에 변화를 줌.
6. 이슈
가장 큰 이슈라면 CSS 화면 구성인 것 같다. API의 원조인 카카오지도의 구성을 최대한 따라해보았고 해상도에 따라 화면 구성이 변하면서 어려움을 겪었다. 카카오지도의 CSS를 참고하고 구글링을 해가면서 최대한 비슷하게 맞춰갔다. 확실히 개발을 그래도 오래 하니까 어떻게 하면 좋을지 전처럼 막막하지는 않은 것 같다. 많이 발전했어 ㅠㅠ. 구성 이슈는 웹사이트가 처음 로드될 때마다 정해지는 viewport height 를 통해 해상도가 달라져도 구성을 유지하도록 노력하였다.
7. 느낀점
지금까지는 레이아웃 구성이 정말 헷갈렸다. 내 깃허브 블로그를 살짝만 살펴봐도 알겠지만, 나는 웹 개발만 2년을 했다. 거의 모든 프로젝트에서 웹 개발을 했고 대부분 CSS를 맡았는데 전부 쉽진 않지만 그 중에서도 화면 구성이 가장 어려웠다. 이번 프로젝트에서 가장 많이 얻어가고 발전한 부분은 flex 에 대해 완벽하게 이해를 했다는 것이다. 꽤 장족의 발전이다. 물론 질문이 들어왔을 때 코드를 확인하고 F12를 누르지 않고 설명할 수 있는 정도는 아니지만 내가 개발하고 있는 웹 페이지의 구성 정도는 이제 쉽게 할 수 있게 되었다 히히. 사실 우리 셋의 조합에서 과연 완성도 높은 웹 페이지가 나올 수 있을지 의문이였다. 동건이랑 나랑 둘이 팀이였으면 굴러가지 않았을 프로젝트를 경록이가 열심히 굴려줬고 덕분에 잘 마무리할 수 있었던 것 같다. 꼭 이렇게 셋이서 프로젝트를 진행해보고 싶었는데 너무 좋았다. 경록이한테 js 를 배우고 싶다. 다른 것도 …
8. 보완하고 싶은 점
모바일 버전 개발 (원래 리액트 하려고 했는데 어쩌다보니 …), 별점 구현