8주 4일차 - CORS, express

8주 4일차 - CORS, express

1. 배운 것

• CORS, SOP
• CORS 동작 방식
• CORS 설정 방법
• 과제 - Mini Node Server

2. 내용 정리

ch 1-1 CORS, SOP

sop: 동일 출처 정책.
cors: 교차 출처 리소스 공유
cors 요청으로 교차 출처 리소스 사용의 권한을 얻어야 sop원칙에 의해 방해 없이 의도대로 웹앱 구동.

과제 - Mini Node Server

요청은 구현되어 있다. 응답을 구현하면 된다.
OPTIONS 메소드: 서버가 어떤 메서드를 수행할 수 있는지 확인.

• 응답으로 입력값을 대문자 처리, 소문자 처리 각각 다른 경로로 처리.
  • 모든 경로에 따른 분기가 메소드와 url로 이루어지므로 이 둘을 통해 분기시킬수 있다.
  • if (메소드가 OPTIONS) { cors 요청 처리 }
  • if (메소드가 POST고 url이 /upper면 ) { 대문자로 응답을 돌려줘야 한다. }
  • else if (메소드가 POST고 /lower 면) { 소문자로 응답을 돌려줘야 한다 }

const http = require('http');

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  // request 객체 구조 분해 할당으로 요청 메세지에서 원하는 부분 받아오기
  const { method, url, headers } = request;

  // on 메서드는 이벤트 핸들링을 위해 메서드 체이닝하여 사용한다.
  // 요청 메세지(JSON)를 buffer 객체에 합쳐 문자열로 변환.
  let body = [];
  request
    .on('data', chunk => {
      body.push(chunk);
    })
    .on('end', () => {
      body = Buffer.concat(body).toString();

      // request.method === 'POST' && request.url === '/echo'
      // * 1. cors 권한 허가
      if (request.method === 'OPTIONS') {
        response.writeHead(200, defaultCorsHeader);
        response.end();
      }

      // * 2. if (소문자, '/lower')
      if (request.url === '/lower') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toLowerCase());
      }
      // * 3. else if (대문자, '/upper')
      else if (request.url === '/upper') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toUpperCase());
      }

      // * 4. else 에러 404
      else {
        response.writeHead(404, defaultCorsHeader);
        response.end('Bad Request');
      }
    });
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10,
};

딥다이브 17장 1, 2절 정리

## 17.1 `Object` 생성자 함수

`new` 연산자와 함께 `Object` 생성자 함수를 호출하면 **빈 객체**를 생성하여 반환한다. 이후 프로퍼티나 메서드 추가 가능. 처음부터 넣어서는 생성할 수 없다.
따라서 객체는 객체 리터럴로 생성하는 게 훨씬 더 효율적인 방법이다. 특별한 이유가 없다면 `Object` 생성자 함수를 사용해 객체를 생성할 필요가 없다.

```js
new Object(); // {}

// 빈 객체의 생성
const user = new Object(); // const user = {};

// 프로퍼티 추가
user.age = 10;
user.name = 'Ryan';
user.values = function() { console.log(`${this.age}살 ${this.name}이야.`) };

user.values(); // 10살 Ryan이야.

// 프로퍼티를 넣어서 생성할 수 없음!
const user2 = new Object(age : 10, name : 'kim');
user2; // SyntaxError: missing ) after argument list

// Object 생성자 함수로 생성할수 있는 다양한 객체들

// String 생성자 함수에 의한 String 객체 생성
// new Object('1');
const str = new String('1'); // String {'1'}

// Number 생성자 함수에 의한 Number 객체 생성
// new Object(1);
const num = new Number(1); // Number {1}

// Boolean 생성자 함수에 의한 Boolean 객체 생성
// new Object(true);
const bool = new Boolean(true); // Boolean {true}

// Function 생성자 함수에 의한 Function 객체(함수) 생성
// new Object(() => console.log('함수'));
const func = new Function(() => console.log('함수'));
typeof func; // 'function'

// Date 생성자 함수에 의한 Date 객체 생성
const date = new Date();
date; // Thu Jun 16 2022 21:33:13 GMT+0900 (Korean Standard Time)

17.2 생성자 함수

17.2.1 객체 리터럴에 의한 객체 생성 방식의 문제점 + 17.2.2 생성자 함수에 의한 객체 생성 방식의 장점

한번에 하나의 객체만 생성할 수 있다. 따라서 회원정보나 상품정보 같은 동일한 프로퍼티 키를 갖고 프로퍼티 값만 다른 여러 객체를 생성해야 할 때 매우 비효율적이다. 이럴 경우엔 생성자 함수로 인스턴스(생성자 함수로 만든 객체)를 생성하는게 훨씬 더 효율적이다.

// 객체 리터럴로 동일한 프로퍼티 구조의 객체 생성
const user1 = {
  id: 'qwer123',
  username: '광명이케아빵도둑',
  level: 1,
};

const user2 = {
  id: 'qwer235',
  username: '배고파',
  level: 3,
};

console.log(user1); // {id: 'qwer123', username: '광명이케아빵도둑', level: 1}
console.log(user2); // {id: 'qwer235', username: '배고파', level: 3}

// 생성자 함수에 의한 인스턴스 생성
function User(id, username, level) {
  this.id = id;
  this.username = username;
  this.level = level;
}

const user3 = new User('dsaf213', '길동이', 2);
const user4 = new User('ytjrg78', '둘리', 1);

console.log(user3); // User {id: 'dsaf213', username: '길동이', level: 2}
console.log(user4); // User {id: 'ytjrg78', username: '둘리', level: 1}