20220208 TIL

jathazp·2022년 2월 8일

15

목록 보기

14/14

1. Mongoose virtuals

실제로 db에 저장되는 속성은 아니지만 기존의 존재하는 속성값들의 연산을 통해 만든 새로운 속성을 마치 db에 존재하는것처럼 사용할 수 있는 기능

const userSchema = mongoose.Schema({
  firstName: String,
  lastName: String
});
// Create a virtual property `fullName` with a getter and setter.
userSchema.virtual('fullName').
  get(function() { return `${this.firstName} ${this.lastName}`; }).
  set(function(v) {
    // `v` is the value being set, so use the value to set
    // `firstName` and `lastName`.
    const firstName = v.substring(0, v.indexOf(' '));
    const lastName = v.substring(v.indexOf(' ') + 1);
    this.set({ firstName, lastName });
  });
const User = mongoose.model('User', userSchema);

const doc = new User();
// Vanilla JavaScript assignment triggers the setter
doc.fullName = 'Jean-Luc Picard';

doc.fullName; // 'Jean-Luc Picard'
doc.firstName; // 'Jean-Luc'
doc.lastName; // 'Picard'

https://mongoosejs.com/docs/tutorials/virtuals.html

2. Mongoose Cascade

...
ArticleSchema.pre(
    "deleteOne", { document: false, query: true },
    async function (next) {
        // post id
        const { _id } = this.getFilter();

        // 관련 댓글 삭제
        await Comment.deleteMany({ articleId: _id });
        next();
    }
);
...

3. 자바스크립트 생성 배열 초기화

1차원 배열

let answer = Array.from({length:5}, ()=>1);
console.log(answer); // 결과 : [1, 1, 1, 1, 1]

answer = Array.from({length:5}, (v, i)=> i);
console.log(answer); // 결과 : [0, 1, 2, 3, 4]

let answer = Array.(5).fill(0);
console.log(answer); // 결과 : [1, 1, 1, 1, 1]

2차원 배열

function create2DArray(rows, columns) {
    var arr = new Array(rows);
    for (var i = 0; i < rows; i++) {
        arr[i] = new Array(columns);
    }
    return arr;
}

3차원 배열

function makeArray() {
    for (let i = 0; i < 21; i++) {
        vi.push([]);
        for (let j = 0; j < 21; j++) {
            vi[i].push([]);
            for (let k = 0; k < 21; k++) {
                vi[i][j].push(null);
            }
        }
    }
}

4. 딕셔너리 동적 키 생성

let keyname = 'Name';
let something = {
    [keyname + 'postfix'] : 'value'
};

let keyname = 'Name';
let something = { };
 
something[keyname + 'postfix'] = 'value';

5. express js 데이터 파싱

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

urlencoded: form-urlencoded 라는 규격의 body 데이터를 파싱해서 서버 코드에서 쉽게 사용할 수 있게 해주는 미들웨어
json: JSON 규격의 body 데이터를 파싱해서 서버 코드에서 사용할 수 있게 도와주는 미들웨어

6. 미들웨어

app.use((req, res, next) => {
  // 필요한 코드
});

req: 요청에 대한 정보가 담겨있는 객체
- HTTP Headers, Query Parameters, URL 등 브라우저가 서버로 보내는 정보들이 담겨있다.
res: 응답을 위한 기능이 제공
- 어떤 HTTP Status Code로 응답 할지, 어떤 데이터 형식으로 응답 할지, 헤더는 어떤 값을 넣어 응답 할지 다양한 기능을 제공
  
  mdn 참고:
  https://expressjs.com/ko/guide/writing-middleware.html

API를 작성한다는 의미는?
- 웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미
- 우리가 작성 할 API에서 원하는 데이터를 받아 데이터베이스에 데이터를 저장하고, 저장되어 있는 데이터를 읽어서 웹 어플리케이션(프론트엔드)에 데이터를 제공하는 행위를 통해 사용자가 원하는 목적을 이룰 수 있게 해야 함
7. CORS란
1) CORS란?
- 현재 브라우저로 접속중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소로 요청을 하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높이는 동작
2) CORS 문제는 왜 발생할까?
- 브라우저는 주소(도메인, 포트 중 하나라도)가 다른 경우 리소스의 출처가 다르다고 판단
- 브라우저에서 출처가 다르다고 판단하면 어떻게 동작할까?
  1. 브라우저가 요청하려고 시도했던 주소에 “OPTIONS” 메서드를 이용해 요청을 의도적으로 허용하고 있는게 맞는지 확인.
    이것을 CORS preflight 라고 부른다.
  2. 요청을 받은 서버는 평소와 똑같이 응답
  3. 응답을 받은 브라우저는 요청에 대한 허가를 받지 못했다고 판단하고 CORS 에러를 발생
- 이것은 브라우저에 구현된 비동기 요청 API에서만 동작하는 규칙으로, Thunder Client 같은 API Client를 이용해 요청하는 경우에는 절대 발생하지 않는다.
실습

// app.js
const express = require("express");
const app = express();
const port = 3000;

app.get("/cors-test", (req, res) => {
  res.send('hi');
});

app.listen(port, () => {
  console.log("서버가 켜졌어요!");
});

https://test-cors.org 에서 remote server의 url을 localhost로 요청하면 cors 에러발생 (네트워크 탭 확인)

해결하려면?=> 서버에 Access-Control-Allow-Origin 응답 헤더를 추가
=> cors 모듈 사용해 간단히 해결 가능

//내 서버로 오는 모든 요청 허용
const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;

app.use(cors());

app.get("/cors-test", (req, res) => {
  res.send("hi");
});

app.listen(port, () => {
  console.log("서버가 켜졌어요!");
});

jathazp

이전 포스트