개인 프로젝트 2022. 10. 13.
맛집 지도 만들기(8) - 리뷰 목록 페이징 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 파일 업로드 기능을 구현하였다. 이번 포스팅에선 주니어 개발자의 필수코스... 페이징 및 무한 스크롤을 이해하고 구현해볼 것이다. 사이드 바에 페이징 또는 무한스크롤로 구현된 리뷰 목록을 출력할 것이다. 개선된 코드가 많아 포스팅에서 다소 빠진 부분이 있을 수 있다. 모든 소스코드는 깃헙에서 확인할 수 있다! 🍜 기능 및 코드 보완 본격적인 구현에 앞서, 기존에 구현했던 코드를 살짝 수정했다. 🍥 메소드 명 변경 setInputState 라는 Vuex mutaion 메소드 명을 setIsDisabledInput 으로 수정했다. isDisabledInput 상태를 bool 데이터로 set 해주는 메소드 였는데, InputState 라는 ..
개인 프로젝트 2022. 9. 15.
맛집 지도 만들기(7) - 이미지 파일 업로드 구현
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 CRUD API를 적용하고, 지도에 리뷰를 출력하고 오버레이를 추가해 보았다. 이번 포스팅에선 사진 파일 업로드/다운로드(화면에 출력) 기능을 구현해볼 것이다. 참고로, 디테일한 부분은 포스팅에서 다소 빠졌을 수도 있다... 자세한 건 깃헙코드를 참고! 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 파일 저장 위치 선정 이미지 파일을 저장하는데엔 크게 두가지 방법이 있다. 파일 시스템 스토리지(storage) 에 업로드 하는 방법. DB엔 해당 파일 관련 정보(크기, 이름, 업로드 시간 등)를 저장. DB에 바이너리 형식으로 파일 자체를 저장하는 것. 어떤 방법을 선택해야할까 고민하다가 좋은 레퍼런스를 찾았다. 파일 저장 방식은 그 파..
개인 프로젝트 2022. 6. 19.
맛집 지도 만들기(5) - CRUD API 구현하기 (feat. Axios, 함수형 컴포넌트)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 클릭이벤트로 주소를 입력 받거나 출력하는 기능을 구현하였다. 이번 포스팅에선 본격적으로 백엔드 기능을 구현해볼 것이다. Spring Boot + MyBatis + MySQL을 연동하고 주소, 후기 및 별점을 저장하거나 불러오는 API를 만들어볼 것이다. 사진 파일 업로드까지는 이 포스팅에서 다루지 않는다. 파일을 다루는 방식이나 (ex. blob) Vue 의 slot 기능을 구체적으로 알아보기 위해 다음 포스팅에서 자세히 다뤄볼 예정이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 Spring Boot, Mybatis, MySQL 연동 이 프로젝트의 첫번째 포스팅에서 언급했던 것처럼 MySQL 이 설치된 상태로 가정하고 진행한다. ..
Spring/Spring Boot 2021. 6. 3.
Spring Boot + MyBatis + MySQL 연동 방법
📢 들어가기 전에 이번 포스팅에선 Spring Boot + MyBatis + MySql 연동 방법에 대해 알아본다. Intellij Community 에서 진행했다. 다른 IDE를 써도 상관 없다. Spring Boot 가 설치된 환경에서 진행했다. Spring Boot 설치법은 지난 포스팅을 참조. (Nuxt.js + Spring Boot 연동법 포스팅이지만 Spring Boot 설치에 대해서도 다루고 있다.) 🧱 MySQL, MyBatis Dependency 주입 pom.xml의 dependencies에 아래 코드를 추가하자. mysql mysql-connector-java 8.0.16 org.mybatis.spring.boot mybatis-spring-boot-starter 1.3.2 mysql-..
