눈으로 개발하는 블로그

Bootstrap(부트스크랩)은 웹 사이트를 빠르고 쉽게 반응형으로 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. ​ 자세한 내용은 Bootstrap 사이트(https://getbootstrap.com)에서 확인하세요. Bootstrap 5 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 Bootstrap를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save bootstrap 또는 버전 적용 npm install --save bootstrap@5.1.3 npm install에 옵션으로 --save를 추가하면 자동으로 package.json..

세 번째로 Vuex PersistedState를 사용하는 방법을 알아보도록 하겠습니다. ​ Vuex PersistedState는 Local Storage(로컬 스토리지)를 사용하여 state를 저장하고 유지합니다. ​ ​ Vuex PersistedState 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vuex-persistedstate를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vuex-persistedstate 또는 버전 적용 npm install --save vuex-persistedstate@4.1.0 npm install에 옵션으로 --..

두 번째로 Cookie(쿠키)를 사용하는 방법을 알아보도록 하겠습니다. ​ Cookie(쿠키)는 웹 브라우저에 데이터가 저장됩니다. ​ Vue 3에서 Cookie(쿠키)를 사용하기 위해서는 vue3-cookies 라이브러리를 설치해야 합니다. ​ ​ Vue Cookies 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vue3-cookies를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vue3-cookies 또는 버전 적용 npm install --save vue3-cookies@1.0.6 npm install에 옵션으로 --save를 추가하면 자동..

웹 브라우저에서 새로고침(F5)을 하면 Vue가 초기화되면서 Vuex store의 state가 초기화됩니다. ​ ​ 페이지 새로고침 후 Vuex store의 state 초기화 ​ 1. Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start 2. Vue를 실행시킵니다. 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다. npm run serve 그리고 로그인을 합니다. 3...

이번에는 axios(액시오스)의 인터셉터(interceptor) 중 응답(response)으로 처리해 보겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start axios(액시오스)의 인터셉터(interceptor) 응답(response) 추가하기 ​ 1. C:\workspaces\nodeserver\testvue\src\axios\index.js 파일에서 기존 axios.interceptors의 request로 처리한 부분을 주석 처리하거나 삭제합니다. 그리고 axios.i..

레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되면 재발급되도록 처리가 되었습니다. 그런데 모든 Vue의 메서드에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인해야 할까요? 그렇지 않습니다. ​ axios(액시오스)의 인터셉터(interceptor)를 이용하면 레스트 API 서버로 요청(request)을 보내기 전과 응답(response) 받고 처리 전에 공통으로 처리할 수 있습니다. ​ 다음은 axios(액시오스)의 인터셉터(interceptor) 기본 구조입니다. // Add a request interceptor // 요청 인터셉터 추가 axios.interceptors.request.use(function (config) { // Do..

이전 Node.js 레스트 API 서버에서 Refresh-Token으로 Access-Token이 재발급되게 처리하였습니다. ​ 이번에는 Vue에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인을 하여 Access-Token이 만료되었다면 레스트 API 서버로 "/refresh"를 요청하여 Access-Token이 재발급되도록 처리하겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start Login Store 모듈에 토큰 재발급 추가하기 ​..

Access-Token이 만료되면 로그인과 같은 인증을 하지 않고 재발급이 되도록 하기 위해서는 Refresh-Token를 생성해야 합니다. ​ ​ Refresh-Token 생성하기 ​ 1. memberapi.js 파일을 오픈하여 사용자 객체를 가지고 있는 배열에 refreshToken를 추가합니다. refreshToken는 사용자가 Access-Token를 재발급하려고 할 때 인증 확인과 검증하기 위해서 사용됩니다. let memberList = [ {id:"testid1", password:"testpwd1", name:"홍길동", refreshToken:""}, {id:"testid2", password:"testpwd2", name:"김철수", refreshToken:""}, {id:"testid..

Login을 하면 인증처리를 위해 레스트 API에서 JWT(JSON Web Token)를 이용한 Access-Token를 생성하여 처리하였습니다. 그러나 네트워크 해킹을 통해 Access-Token를 탈취하거나 브라우저의 쿠키(cookie)를 통해 쉽게 Access-Token를 탈취할 수 있어 보안에 취약합니다. ​ ​ 브라우저를 통한 Access-Token 탈취 ​ 브라우저에서 개발도구(F12)를 이용하여 Network로 Response(응답) 되는 정보를 확인할 수 있습니다. login의 Response 내용을 통해 accessToken을 확인할 수 있습니다. {"success":true,"accessToken":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZW1iZXJ..

전역 엑시오시 기본값(Global Axios Defaults)에 공통(Commone) 헤더(Header) 추가 ​ C:\workspaces\nodeserver\testvue\src\store\modules 폴더에서 login.js 파일을 오픈합니다. ​actions의 doLogin() 메서드에서 axios의 모든 요청에 적용되게 전역 기본값으로 헤더를 추가합니다. 헤더의 키는 "Access-Token"이고 값은 Login 후 응답받은 "accessToken"입니다. // 로그인합니다. async doLogin({ commit }, memberInfo) { let result = false; let resultErr = null; try { let res = await axios.post("http://l..

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

JWT(JSON Web Token - JSON 웹 토큰)은 두 집단(개체) 사이에서 안전하게 클레임(정보)을 표현(전달)해주는 산업 표준 RFC 7519 방법입니다. (JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.)​JWT는 header.payload.signature로 구성되어 있습니다. 도트(.)로 구분되어 있습니다.​header는 ALGORITHM & TOKEN TYPE으로 JWT 생성할 때 사용된 정보들로 검증할 때 사용됩니다. JSON을 base64UrlEncode() 메서드로 인코딩한 문자열입니다.​payload는 DATA로 JWT에..

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

REST API(RESTful API - 레스트 풀 API)는 Distributed Hypermedia Systems(디스트리뷰트드 하이퍼미디어 시스템 - 분산 하이퍼미디어 시스템)을 위한 REST(REpresentational State Transfer - 레프리젠테이셔널 스테이트 트렌스펄) 아키텍처의 제약 조건을 준수하는 API(Application Programming Interface - 애플리케이션 프로그래밍 인터페이스)를 뜻합니다. Guiding Principles of REST 1. Client–server(클라이언트-서버) : 사용자 인터페이스 관련 프로세스(클라이언트)를 데이터 스토리지 관련 프로세스(서버)로 부터 분리하여 여러 플랫폼에서 사용자 인터페이스(클라이언트)가 사용(이식성 - ..

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 프..

Node.js의 패키지 만들기 ​ 1. C:\workspaces\nodeserver\test1 폴더를 생성합니다. 2. 콘솔을 실행하고 C:\workspaces\nodeserver\test1 폴더로 이동합니다. 패키지를 생성하기 위해 npm init 명령어를 실행합니다. npm init npm(Node Package Manager)는 Node.js로 만들어진 모듈을 설치하고 관리해 주는 프로그램입니다. ​ npm int는 패키지(애플리케이션)를 생성(초기화) 해주는 명령어입니다. ​ 패키지(애플리케이션)의 이름과 버전 같은 몇 가지 정보에 대해 prompt(프롬프트) 합니다. ​ 기본 설정으로 처리하겠습니다. 변경하려면 입력하고 엔터키를 누릅니다. 기본 값을 사용하려면 그냥 엔터키를 누릅니다. ​ pac..

1. Node.js 사이트(https://nodejs.org/ko/)를 접속합니다. 2023년 4월 12일 버전은 "20.1.0, 18.16.0 LTS"입니다. 안정적이고 신뢰도가 높은 버전(18.16.0 LTS)을 다운로드하시면 됩니다. 작성 당시 버전은 "14.17.4 LTS"입니다. "14.17.4 LTS"를 클릭합니다. 현재 사이트에서 안정적이고 신뢰도가 높다고 인정한 버전입니다. 웹브라우저에서 다운로드가 진행됩니다. 또는 상단의 "다운로드"를 클릭하고 다운로드 페이지에서 Windows Installer (.msi)의 64-Bit를 클릭합니다. (사용하시는 윈도우가 32-Bit인지 64-Bit인지 확인하신 후 다운로드를 진행하시기 바랍니다.) 2. "다운로드"폴더에서 다운로드한 "node-v14...