개인 프로젝트 2022. 10. 13.
맛집 지도 만들기(8) - 리뷰 목록 페이징 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 파일 업로드 기능을 구현하였다. 이번 포스팅에선 주니어 개발자의 필수코스... 페이징 및 무한 스크롤을 이해하고 구현해볼 것이다. 사이드 바에 페이징 또는 무한스크롤로 구현된 리뷰 목록을 출력할 것이다. 개선된 코드가 많아 포스팅에서 다소 빠진 부분이 있을 수 있다. 모든 소스코드는 깃헙에서 확인할 수 있다! 🍜 기능 및 코드 보완 본격적인 구현에 앞서, 기존에 구현했던 코드를 살짝 수정했다. 🍥 메소드 명 변경 setInputState 라는 Vuex mutaion 메소드 명을 setIsDisabledInput 으로 수정했다. isDisabledInput 상태를 bool 데이터로 set 해주는 메소드 였는데, InputState 라는 ..
개인 프로젝트 2022. 9. 15.
맛집 지도 만들기(7) - 이미지 파일 업로드 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 적용하고, 지도에 리뷰를 출력하고 오버레이를 추가해 보았다. 이번 포스팅에선 사진 파일 업로드/다운로드(화면에 출력) 기능을 구현해볼 것이다. 참고로, 디테일한 부분은 포스팅에서 다소 빠졌을 수도 있다... 자세한 건 깃헙코드를 참고! 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 파일 저장 위치 선정 이미지 파일을 저장하는데엔 크게 두가지 방법이 있다. 파일 시스템 스토리지(storage) 에 업로드 하는 방법. DB엔 해당 파일 관련 정보(크기, 이름, 업로드 시간 등)를 저장. DB에 바이너리 형식으로 파일 자체를 저장하는 것. 어떤 방법을 선택해야할까 고민하다가 좋은 레퍼런스를 찾았다. 파일 저장 방식은 그 파..
개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..
