Vue.js
1.[Vue 3] Vite를 이용하여 Vue.js 프로젝트 생성하기
Vue.js MVC 패턴에서 View(사용자에게 보이는 화면)를 중심으로 만든 라이브러리 및 프레임워크 MVC 패턴 디자인 패턴 중 하나 Model은 데이터를 관리하고, View는 사용자에게 보이는 화면을 관리하며, Controller는 이 둘을 연결해준
2.Spring Boot와 Vue.js(Vite) 연동하기
프로젝트 동작 과정 Spring Boot 프로젝트의 static 디렉토리에 Vue.js 프로젝트를 빌드한 결과물 생성 Spring Boot 프로젝트 실행 웹 페이지 접속 - Spring Boot 프로젝트 내의 Vue.js 결과물 실행 1. Spring Boot 프로젝
3.[Vue 3] ref와 reactive의 차이
Vue 2에서 객체의 값을 수정할 때 바뀐 값에 반응하지 않는 문제점이 있었다고 한다. 이를 해결하기 위해 Vue 3에서 reactive를 추가한 것 ref 객체를 가리키고 있어 객체 자체가 바뀌어야 반응 내부 필드가 바뀌어도 가리키고 있는 객체가 그대로인 경우 바뀐 것을 인식하지 못해 반응하지 않는다. 따라서 내부 필드가 바뀌지 않는 객...
4.[Vue 3] Quasar CLI(with Vite)를 이용하여 Vue.js 프로젝트 생성하기
1. Quasar 프로젝트 생성 VSCode 터미널에서 yarn/npm/pnpm을 이용하여 Quasar 프로젝트를 생성한다. (여기서는 npm을 이용) 터미널에 npm init quasar를 입력하면 프로젝트 생성이 시작된다. 프로젝트 생성 옵션 i18n
5.[Vue 3] Router 사용하기
- 환경: Quasar CLI + Vite /와 /login 경로로 이동할 수 있도록 router를 설정하고자 한다. 1. 프로젝트 구조 2. routes.js 파일 수정 기존 코드 quasar dev를 실행했을 때 default 화면 MainLayout.vue에 IndexPage.vue가 component로 들어간 결과이다. 수정한 코드 ...
6.[Vue 3] Store(Pinia) 사용하기
- [Vue 3] Router 사용하기에 store를 추가하여 navigation guard를 구현하고자 한다. userStore에 user 정보가 있으면 로그인한 사용자로 판단하여 /로, user 정보가 없으면 로그인하지 않은 사용자이므로 /login으로 이동하도록 구현한다. 1. user-store.js 파일 생성 📎 src/stores/user-s...