개인 프로젝트 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 이 설치된 상태로 가정하고 진행한다. ..
개인 프로젝트 2022. 2. 13.
맛집 지도 만들기(3) - 사이드바 UI 구현 (Font Awesome Icon, 글꼴 적용)
📢 들어가며 그동안 게을러져서 포스팅이 살짝 늦었다... 다시 화이팅해보자! 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 화면에 지도를 띄우고 대략적인 UI 틀을 잡았었다. 이번 포스팅에선 구체적인 UI 를 구현해볼 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 UI 설계 이번에도 대충 그려 설계를 해보았다. 지도에서 특정 위치를 선택하고 나면 좌측 사이드바가 활성화되고 위 이미지와 같은 정보를 입력할 수 있게 된다. 사이드 바에선 음식점의 이름, 이미지, 위치정보, 별점, 평가를 보여준다. 🍜 Bootstrap 설치 본격적인 UI 구현을 위해서 Bootstrap을 사용할 것이다. Bootstrap 을 설치해보자. vue add bootstrap-vue Vue CLI3로 설치를 했기..
개인 프로젝트 2021. 12. 5.
맛집 지도 만들기(2) - OpenLayers 지도 띄우기
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 개발 환경 설정을 했었다. 이번 포스팅에선 UI 틀을 잡고 OpenLayers를 활용해 지도를 띄워 볼 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 UI 구성 대략적인 UI를 설계해보았다. 전체 화면에 꽉 차는 느낌으로 지도를 띄운다. 좌측엔 맛집에 대한 정보를 기록/출력하는 사이드 바가 있다. 사이드 바는 드래그로 크기를 늘렸다 키울 수 있다. 사이드 바는 버튼으로 최소/최대화가 가능하다. 사이드 바는 지도 위에 띄우고 Opacity(투명도)를 두어 지도 위에 띄운다는 느낌으로 구현한다. 사이드 바 안에 들어갈 구체적인 내용은 추후 생각해볼 예정이다. 원하는 대로 가능할지는 모르겠지만 대략적인 UI 틀은 이렇다. 🍜 Ope..
Spring/Spring Security 2021. 6. 8.
[Spring Security] Spring Security의 개념과 동작 과정
📢 들어가기 전에 이번 포스팅에선 Spring Security가 무엇인지, 그리고 어떻게 동작하는 지에대해 알아본다. 인증, 인가, 보안 주체 Spring Security를 공부하기에 앞서 보안 용어에 대해 숙지해야한다. 인증(Authentication) 입증, 증명이라고도 한다. 암호화 같은 자격 증명을 검증하여 사용자 ID를 확인하는 것이다. 보통 이 인증은 사용자 이름(ID)와 암호(PW)로 수행된다. 인증은 단일부터 2단계, 다중 인증까지 거칠 수 있다. 인가(Authorization) 허가, 권한 부여라고도 한다. 인증(Authentication) 이후에 발생하는 과정으로, 인증된 사용자에게 시스템 액세스 권한을 부여하는 과정이다. 보안 주체(Principal) Principal은 직역하면 '주..
Spring/Spring Boot 2021. 4. 2.
Spring Boot Maven + Nuxt.js 연동하는 법 (CORS, Proxy)
📢 들어가기 전에 Intellij IDEA Community Edition 2019.3.2 에서 진행했다. 버전이 달라도 상관 없음. Spring Boot Maven 프로젝트와 Nuxt.js 를 연동하는 방법을 알아본다. Vue.js도 거의 동일한 방법으로 진행할 수 있다. 🍃 Spring Boot (Maven) File - New - Project 로 새 프로젝트를 생성한다. 초기 화면의 Create New Project 로 생성할 수도 있다. 클릭하고나면 위와 같이 New Project 라는 창이 뜰텐데, 여기서 좌측의 Maven 을 클릭한다. (Gradle 프로젝트를 생성하고자 할땐, Gradle 을 선택해주면 된다.) 위쪽의 Project SDK 도 선택해준 뒤 다음으로 넘어간다. (아마 각자의 ..
