눈으로 개발하는 블로그

[7] Frontend 개발 - 읽기 뷰 (ReadView), 수정, 삭제 생성

읽기 뷰 (ReadView) 생성1. src\views\LunchMenu에서 LunchMenuReadView.vue 파일을 생성합니다. 점심 메뉴 보기 2. src\router\index.js에서 LunchMenuReadView.vue를 import하고 children(칠드런)에 추가합니다.:import LunchMenuReadView from '@/views/LunchMenu/LunchMenuReadView.vue'const routes = [ : { path: '/lunchmenu', component: LunchMenuView, children : [ : { path: ':seq', name: 'lunchmenuread', ..

[6] Frontend 개발 - 등록 뷰 (AddView) 생성

등록 뷰 (AddView) 생성1. src\views\LunchMenu에서 LunchMenuAddView.vue 파일을 생성합니다. 점심 메뉴 등록 2. src\router\index.js에서 LunchMenuAddView.vue를 import하고 routes에 route를 추가합니다.:import LunchMenuAddView from '@/views/LunchMenu/LunchMenuAddView.vue'const routes = [ : { path: '/lunchmenu/', name: 'lunchmenulist', component: LunchMenuListView }, { path: '/lunchmenu/add', name: 'lunchmenuadd', ..

[4] Backend 개발 - API Server 개발, Node.JS + Paging

페이징(Paging), 페이지(Page)데이터베이스에서 페이징(Paging) 없이 데이터를 가져오면 전체 데이터를 반환하면 서버 부하(데이터베이스 부하, 네트워크 트래픽 부하)가 발생합니다. 그래서 데이터를 가져오기 전에 한 번에 가져올 데이터의 크기를 정해서 가져오게 해야 합니다.이렇게 일정한 크기로 데이터를 가져오는 것을 페이징(Paging)이라고 하고 일정한 크기를 가진 데이터를 페이지(Page)라고 합니다. Query String(쿼리 스트링)으로 URL 주소 뒤에 붙여서 사용합니다.페이지 크기(countperpage) : 가져올 ROW 수페이지 번호(pageno) : 가져올 페이지 번호 http://127.0.0.1:9000/api/v1/lunchmenus?countperpage=10&pag..

[3] Backend 개발 - API Server 개발, Node.JS + MyBatis3

Node.JS에서 MyBatis3 Mapper XML 파일을 이용하기 1. Mybatis Mapper 설치하기 (터미널에서 실행합니다.)npm install mybatis-mapper --save 2. src\db에 mappers\mariadb\lunchmenu 디렉터리를 생성하고 lunchmenu-sql.xml 파일을 생성합니다. XML은 MyBatis3 구문과 동일합니다. 의 namespace(네임스페이스) 속성은 Mapper XML 파일들을 서로 구분하기 위해서 사용됩니다. 그래서 하나의 Mapper XML 파일만 가리켜야 하기 때문에 중복되지 않아야 합니다.여기서는 namespace(네임스페이스)를 프로젝트 명과 XML 파일이 있는 경로를 조합하여 사용하겠습니다. 프로젝트 명 : apiserv..

[1] Backend 개발 - API Server 개발

APIServer 프로젝트 생성1. toyprojects > apiserver 디렉터리 생성 (터미널에서 실행합니다.)mkdir toyprojects; cd toyprojects; mkdir apiserver; cd apiserver; code . 2. 패키지 초기화 (터미널에서 실행합니다.)npm init -y 3. Express.js 설치하기 (터미널에서 실행합니다.)npm install express --save package.json에서 dependencies 확인 4. Entry Point 파일 생성하기 (index.js 파일 생성, express를 가져와 서버를 생성)const express = require('express');const app = express();const port = 9..

Node.js 기반으로 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다. 그리고 Visual Studio Code로 개발을 하겠습니다. 윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다. Visual Studio Code 다운로드 및 설치에 대한 자세한 설명은 "Visual Studio Code 다운로드 및 설치 - 1.78 Download & Install - April 2023"를 참고하시기 바랍니다. Visual Studio Code에서 Node 패키지 생성에 대한 자세한 설명은 "VSCode Node 개발 - 패키지 생성 및 실행, npm i..

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

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

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

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