눈으로 개발하는 블로그

Login이 필요로 하는 Vue에 대해 매번 라우트 별(beforeEnter)로 처리하거나 라우트 전역(beforeEach)으로 URL를 비교하여 처리하기에는 번거로울 수 있습니다. 그래서 라우트(route)의 메타(meta) 필드를 이용하여 처리하는 것이 좋습니다. ​ ​ Route Meta Fields (라우트 메타 필드)로 처리 ​ 1. C:\workspaces\nodeserver\testvue\src\router 폴더에 index.js 파일을 오픈합니다. Login이 필요로 하는 라우트에 meta 필드로 { requireLogin: true }를 추가합니다. 게시물 등록(/boardwrite), 수정(/boardedit)과 스코어(/score)에 meta 필드를 추가합니다. { path: '/bo..

로그인 Vue와 로그인 Store를 생성하고 내비게이션 가드(Navigation Guards)로 Login 후 처리되게 합니다. ​ ​ Login Vue 생성하기 ​ 1. C:\workspaces\nodeserver\testvue\src\views 폴더에 Login.vue 파일을 생성합니다. Login.vue 파일을 오픈하여 로그인 컴포넌트로 코딩합니다. This is an Login page 아이디 패스워드 로그인 취소 {{ errorMessage }} @click에 prevent를 추가하면 form의 input에서 엔터키를 누를 때 form이 submit 되는 것을 막을 수 있습니다. ​ form의 submit으로 사용할 경우에는 다음과 같이 하면 됩니다. 2. C:\workspaces\nodeser..

Store를 모듈(module)로 사용하면 계층 구조로 Store를 관리할 수 있습니다. namespaced의 여부에 따라 상위 모듈과 계층 되거나 중첩됩니다. modules: { A: { namespaced: true, state: { stateA: 'A' --> this.$store.state.A.stateA }, getters: { getterA() { ... } --> this.$store.getters['A/getterA'] }, mutations: { mutationA() { ... } --> this.$store.commit('A/mutationA') }, actions: { actionA() { ... } --> this.$store.dispatch('A/actionA') }, module..

Vuex는 Vue.js에서 애플리케이션에 대한 상태 관리 패턴 + 라이브러리입니다. (Vuex is a state management pattern + library for Vue.js applications.) Vuex는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다. (It serves as a centralized store for all the components in an application.) ​ ​ Vuex 설치하기 (Vue 3 기준) ​ Vue 프로젝트에 Vuex를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install vuex@next --save npm install에 옵션으로 --save를 추가하면 자동으로 package.jso..

Vue Axios로 REST API 연동하기 ​ HTTP PUT 메서드로 REST API 서버에서 게시판 내용 수정하기 ​ 1. C:\workspaces\nodeserver\testvue\src\views 폴더에서 BoardEdit.vue 파일을 생성합니다. BoardEdit.vue 파일을 오픈하여 기본적인 Vue 컴포넌트로 코딩합니다. This is an board edit page 2. C:\workspaces\nodeserver\testvue\src\router 폴더에서 index.js 파일을 오픈하여 const routes에 추가합니다. { path: '/boardedit', name: 'BoardEdit', component: () => import('../views/BoardEdit.vue')..

Vue Axios로 REST API 연동하기 ​ HTTP POST 메서드로 REST API 서버에서 새로운 게시판 내용 생성하기 ​ 1. C:\workspaces\nodeserver\testvue\src\views 폴더에서 BoardWrite.vue 파일을 생성합니다. BoardWrite.vue 파일을 오픈하여 기본적인 Vue 컴포넌트로 코딩합니다. This is an board write page 2. C:\workspaces\nodeserver\testvue\src\router 폴더에서 index.js 파일을 오픈하여 const routes에 추가합니다. { path: '/boardwrite', name: 'BoardWrite', component: () => import('../views/Board..

Vue Axios로 REST API 연동하기​HTTP GET 메서드로 REST API 서버에서 게시판 번호로 게시판 내용 가져오기​1. C:\workspaces\nodeserver\testvue\src\views 폴더에서 BoardView.vue 파일을 생성합니다. BoardView.vue 파일을 오픈하여 기본적인 Vue 컴포넌트로 코딩합니다. This is an board view page  2. C:\workspaces\nodeserver\testvue\src\router 폴더에서 index.js 파일을 오픈하여 const routes에 추가합니다.{ path: '/boardview', name: 'BoardView', component: () => import('../views/BoardV..

Vue Axios는 Vue.js에서 Promise 기반 HTTP 비동기 통신 라이브러리로 많이 사용합니다. ​ ​ Vue Axios 설치하기 ​ Vue 프로젝트에 Vue Axios를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save axios npm install에 옵션으로 --save를 추가하면 자동으로 package.json 파일의 "dependencies"에 "axios" 항목이 추가됩니다. 설치가 진행됩니다. 설치가 완료됩니다. Vue 프로젝트의 node_modules 폴더(C:\workspaces\nodeserver\testvue\node_modules)에 axios 폴더가 추가됩니다. 그리고 package.json 파일의 "dependencie..

Vue Router는 Vue.js의 공식 라우터입니다. Vue에서 Router는 Vue 컴포넌트와 웹 경로를 연결해 줍니다. ​ Vue Router(https://router.vuejs.org/)에 대한 자세한 정보를 참고하기 바랍니다. Vue 프로젝트에 Vue Router를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vue-router 그리고 Vue Router를 연동하기 위한 웹 경로와 Vue 컴포넌트를 연결하여 생성(createRouter() 메서드)하고 App.vue에서 사용(use() 메서드)하게 설정해야 합니다. ​ Vue에는 Vue Router에 대해 이런 일련의 작업들을 자동으로 처리해 Plugin을 제공합니다. Plugin을 설치하..

Vue 컴포넌트 export의 data, methods, event, watch, computed과 lifecycle에 대해 설명하겠습니다. ​ data data는 Vue 컴포넌트에서 사용할 변수들을 선언합니다. data는 Key : Value로 구성됩니다. 그리고 변수는 에서 바인딩하여 사용됩니다. 데이터 바인딩은 이중 중괄호(일명 Mustache - 무슈타쉬 - 수염)로 처리됩니다. 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 처리합니다. Hello, Vue! {{userId}}님, 안녕하세요. data에 선언한 변수는 에서 사용하지 않아도 문제는 없습니다. 그리고 data에서 선언되지 않은 변수를 에서 사용하면 빈 공간으로 처리됩니다. data 속성은 함수로 구성되어야 합니다. data :..

Component(컴포넌트)란 프로그램에서 독립적인 프로세스나 기능을 수행하는 Module(모듈)입니다.​Vue 컴포넌트의 파일 확장자는 ".vue"입니다.Vue 컴포넌트는 , 는 Vue 컴포넌트에서 사용할 HTML입니다. 는 반드시 있어야 합니다. "> 그리고 선언된 변수 Vue 컴포넌트에서 사용하지 않으면 "is assigned a value but never used (no-unused-vars) - 할당되었지만 사용되지 않았습니다."라는 에러가 발생합니다.error: 'message' is assigned a value but never used (no-unused-vars) at src\components\TestComponent.vue:6:5: 4 | 5 |  const 변수에 값을 변경하..

Vue CLI(https://cli.vuejs.org/)에 대한 자세한 정보를 참고하기 바랍니다. Vue CLI는 빠른 Vue.js 애플리케이션 개발을 위한 시스템을 제공합니다.​​Vue CLI 설치하기​1. 콘솔을 실행하고 Vue CLI를 설치하기 위해 npm install 명령어를 실행합니다.npm install -g @vue/cli설치가 진행됩니다.설치가 완료됩니다. 2. 설치 후 vue 명령어로 정상적으로 설치되었는지 확인할 수 있습니다.vue --version  Vue 프로젝트 만들기​1. 콘솔을 실행하고 C:\workspaces\nodeserver 폴더로 이동합니다.만약 폴더가 없으면 생성하시기 바랍니다.​2. Vue 프로젝트를 생성하기 위해 vue create 명령어를 실행합니다. Vue 프..