눈으로 개발하는 블로그

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/BoardVi..

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 컴포넌트는 , import로 가져온 TestComponent2 컴포넌트를 components에 등록하고 에서 로 사용합니다. components에서 가져온 Vue 컴포넌트를 components에 등록하지 않으면 "is defined but never used (no-unused-vars) - 정의되었지만 사용되지 않았습니다."라는 에러가 발생합니다. error: 'TestComponent2' is defined but never used (no-unused-vars) at src\components\TestComponent.vue:6:8:..

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 명령어를..