개발환경 : Spring Boot 3.2.1, JDK17  1. Spring Boot Project 생성 New > Other > Spring Boot > Spring Starter Project 를 통해 프로젝트를 생성한다.  2. Node.js 설치 및 vue cli 설치https://nodejs.org/ko/download/Node.js 홈페이지에서 Windows Installer 를 통해 다운받는다. 설치한 후 시작프로그램에서 Node를 검색하면 이러한 커맨드가 나오는데 실행한다. 실행한 후 커맨드 창에 아래와 같은 키워드로 Vue Cli 를 설치해준다." npm install -g @vue/cli " * vue-cli란​vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cl..

$emit emit은 하위 컴포넌트에서 상위 컴포넌트에게 이벤트를 전달하기 위해 사용한다. * 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달 this.$emit('이벤트 명', 값); * 상위 컴포넌트에서는 하위컴포넌트에서 넘어온 이벤트와 값을 처리 v-on:'이벤트 명'="methods 명" 예) modal.vue 삭제 날짜 ParendModal.vue

Dynamic Import 정적 import를 통해 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어진다. 이러한 문제점을 보완하기 위해 ES6에서 필요한 스크립트를 필요한 시점에 가져와서 사용하도록 Dynamic Import를 정의했다. () => import('./components'); 예) vue router 설정할때의 예 import SearchLayout from '@/layout/search_index.vue' const SearchRouter = { path: '/search', name: 'Search', hidden: true, redirect: '/search/searchList', component: SearchLayout, meta: { title: '통합 검색', icon: '..

동적 컴포넌팅을 위해선 태그를 사용한다. comp라는 변수명을 이용해 특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고 새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸 방지해야 할때가 있다. 이때 사용하는게 이다. 태그를 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다. keep-alive keep-alive는 컴포넌트의 상태를 보존할때 사용한다. include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다. 아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다. 컴포넌트 전환 할때마다 페이지의..

Vue 라이프사이클이란 Vue 인스턴스가 생성된 후 화면에 보여지고 사라지기까지의 단계 ​ - 종류 1. beforeCreate 2. created 3. beforeMount 4. mounted 5. beforeUpdate 6. updated 7. beforeDestroy 8. destroyed ​ * beforeCreate : 가장먼저 실행되는 beforeCreate, Vue 인스턴스가 초기화 된 직후에 발생한다. : 컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없다. : data, event, watcher에도 접근하기 전이라 data(), method: {} 에도 접근할 수 없다. ​ ex) ​ * created : data를 반응형으로 추적가능, computed, metho..

Actions : Mutations에는 동기적, 순차적 로직들만 선언하고 Actions에는 비동기 로직들을 선언 ​ - Actions 등록 Vuex에 Actions를 등록하는 방법은 다른 속성과 유사하다. // src/store/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ​ export const store = new Vuex.Store({ mutations: { addCounter: function(state, payload){ return state.counter++; } }, ​ actions: { addCounter: function(context) { // commit은 mutations 를 호출할때 사용하는 키워드..