본문 바로가기

분류 전체보기

 (204)
[Express] Post로 JSON 데이터 보내기 (미들웨어 설정) express 설치 후 post로 JSON 객체를 보내려는데, undefined 가 뜬다 post 라우터 app.post('/cats', (req: express.Request, res: express.Response) => { try { const data = req.body console.log(data) res.status(200).send({ success: true, data : {} }) } catch(error){ res.status(400).send({ success: false, error: error.message }) } }) 포스트맨에서 테스트한 내용 백엔드 라우터에서 콘솔로그로 받은 req.body -> undefined 이는 아주 간단하게 해결된다 express가 json 데이터..
Restfull 웹 API 디자인(1) 잘 디자인 된 웹 API 라면 1. 플랫폼 독립성 : 내부에서 어떤 방식으로 구현되는지와 관계없이 API를 호출할 수 있어야 한다. 표준 프로토콜을 사용 2. 서비스 진화 : API가 수정되어도(진화) 기존의 어플리케이션은 수정 없이 계속 작동할 수 있어야 한다. 기본 디자인 원칙 1. 리소스 중심 디자인, 클라이언트에서 접근할 수 있는 모든 종류의 개체, 데이터, 서비스가 리소스에 포함된다. https://tacit.com/orders 2. 리소스마다 해당 리소스를 고유하게 식별하는 URI인 식별자가 있다. https://tecit.com/orders/5 3. HTTP 요청은 독립적, 상태를 저장하지 않는다. 4. 표준 HTTP 동사 수행 : GET, POST, PUT, PATCH 5. 리소스 URI는..
[Vue] 하위 input 컴포넌트에 상위 data 연결 (emit & v-model) [TODO] - page/test.vue test 페이지 안에서 form 데이터들(name, phone, email 등등) 을 변수로 관리하고, 그 데이터들을 모아서 백엔드로 전달 input 태그 가 특정 컴포넌트로 쌓여서 template에 바로 쓰이지 않고, 하위 컴포넌트 안에 들어가야함 [SOLUTION#1] - emit으로 하위 컴포넌트 데이터(e.target.value) 를 상위 컴포넌트(page/test.vue) 로 전달 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchInput.vue) search [SOLUTION#2] - v-model 사용 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchI..
[Vue] textarea 조건부 랜더링시 focus 이동 안되는 케이스 해결 -> $ref.focus() & nextTick() 메소드 [TODO] 입력 Form 에서 사용자가 Yes / No 중 Yes 라고 답하면 상세 내역을 적기 위한 textarea 를 보여주어야 한다 [WHAT I DONE] - "YES" 버튼을 클릭시 setAnswerY 메소드를 실행하여 this.answer_y = true 로 세팅 - this.answer_y 값이 true 이면 - textarea 요소가 보이고 focus 도 자동으로 이동 [첫번째 시도] setAnswerY() { this.answer_n = false this.answer_y = true // 마우스 커서 이동 this.setFocus('inputText') }, setFocus(item) { this.$refs[item].focus() }, ✔️ 결과 answer_y=true 로 바꾸는..
Node-Sequelize-Mysql (4) Model 생성 & migrations 파일 생성 1. migrations 파일 & model 생성 sequelize model:generate --name Member --attributes name:string, password:string DBMS에 적용하기 위한 migrations 파일이 만들어지고, ORM에서 객체로 사용할 memer.js 파일이 만들어진다 2. 생성된 migrations 파일에 필요한 컬럼 추가 "use strict"; module.exports = { async up(queryInterface, Sequelize) { await queryInterface.createTable( "members", { id: { allowNull: false, autoIncrement: true, primaryKey: true, type: S..
Node-Sequelize-Mysql (3) Mysql 로컬 db docker 띄우기 1. MYSQL workbench 다운로드 https://dev.mysql.com/downloads/workbench/ MySQL :: Download MySQL Workbench Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M dev.mysql.com 2. docker desktop 설치 docker ..
Node-Sequelize-Mysql (2) Sequelize 설치 1. mysql, sequelize, sequelize-cli 모듈 설치 $ npm i --save sequelize mysql2 // 모듈 설치 $ npm i -g sequelize-cli // 콘솔에서 sequelize 명령 가능하게 하는 모듈 $ sequelize init // 필요한 파일과 디렉토리를 자동 설치 초기 세팅 폴더 및 파일 생성됨 폴더 및 파일들의 간략한 설명만 하고 실제 세팅은 뒤에서 진행 config.json sequelize 모듈을 DB 환경과 연결 시키는 용도 편의상 js로 변경하여 사용한다 export default { development: { username: "root", password: "hello1234!", database: "DEV-HELLO-WEB", host..
Node-Sequelize-Mysql (1) ORM 개념 orm 사용해 봅시다 ORM 개념 ORM 이란 Object Relational Mapping : 객체-관계 매핑 객체와 관계형 데이터베이스(RDB) 데이터를 자동으로 매핑해주는 툴 mysql로 tb_member이라는 테이블을 만들어서 데이터 관리를 한다 orm으로 Member 객체를 만들어서 sql 쿼리 없이 테이블을 객체처럼 관리한다 객체지향 프로그래밍은 클래스(Class) 개념을 사용하는데, 중간중간 RDB의 테이블 개념이 이질적인 현상을 해소할 수 있다. → 전체적으로 객체지향(Class)로 프로그래밍이 가능 장점 객체 지향적인 코드로 전체적으로 직관적이고, 비즈니스 로직에 집중할 수 있게 해준다 재사용 및 유지보수의 편리성이 증가한다 DBMS에 대한 종속성이 줄어든다 (DB 솔루션과 상관없다) 단..
HMAC : API 통신 클라이언트 무결성 검증 방법 HMAC : Hash-based Message Authentication Code 해쉬 기반 메시지 신원확인 코드 클라이언트 👉 API 서버에 보내는 "요청자의 신원과 메시지의 무결성을 검증하기 위한 해쉬 문자열" HMAC 만드는 방법 HMAC는 인증을 위한 Secret Key와 임의의 길이를 가진 Message를 해시함수를 이용해서 생성 해시함수로 MD5, SHA-256등 일반적인 함수 사용가능 각 알고리즘에 따라 다른 고정 길이의 MAC(=해시문자열 = 코드)이 생성된다 만약 중간에 해커가 코드를 가로채서 동일한 요청을 계속 보낸다면 (Reply attack), 이를 방지하기 위해서 MAC을 생성할 때 timestamp를 추가해서 사용하는 방법이 있다 API 서버는 해당 메시지가 생성된 시간을 알 수..
[JS] 비동기 프로그래밍 Callback -> Promise -> Async-await 비동기 프로그래밍에 대해서 정확하게 알지 못하고 늘 주변만 뱅뱅 돌면서 의미도 모르는 채로 기계처럼 사용해왔다. 회사에서 코드리뷰도 하고, 다른사람이 하던 작업을 넘겨 받아 리팩토링도 하면서 내가 그동안 얼마나 빈약한 개념을 가지고 있었는지 새삼 깨닫게 되었다. 당장 움직이지 않는 손가락이 너무 답답해서 이번에야 말로 비동기 프로그래밍을 이해해보자는 생각으로 정리를 해보았다. Sync & Async Sync JS 는 Sync → 동기적으로 작동 hoisting이 된 이후부터 코드가 작성된 순서대로 실행된다 async 비동기, 언제 코드가 끝날 지 모른다 끝날 때까지 기다리지 않음 ex) setTimeout - callback 함수 Callback Sync callback console.log('1') f..

티스토리툴바