Vue.js/ESLint & Prettier 2022. 9. 27.
Vue CLI 프로젝트 ESLint, Prettier 적용 방법
📢 들어가며 이번 포스팅에선 "Vue CLI"로 설치한 프로젝트에 ESLint와 Prettier를 적용하는 방법에 대해 다룬다. 맛집 지도 토이 프로젝트를 진행하며 겪었던 삽질을 정리하고자 글을 작성해본다. 👑 ESLint란? ECMAScript/JavaScript 코드 버그를 식별/회피하기 위한 도구. 버그를 잡음과 동시에 포맷 기능도 지원하고 있다. 코드 품질 에러를 잡는 데 도움을 준다. (ex. no-unused-vars , no-extra-bind , no-implicit-globals , prefer-promise-reject-errors...) Vue-cli v3 이상에서는 자동으로 eslint 가 추가된다. 또는 vue create 시에 ESLint 옵션 선택으로 자동으로 설치가 가능하다...
개인 프로젝트 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 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 도 선택해준 뒤 다음으로 넘어간다. (아마 각자의 ..