📖CH1. CORS

📌CORS, SOP

SOP (Same-Origin Policy, 동일 출처 정책)

🔸 같은 출처(origin)의 리소스만 공유가 가능.

🔸 출처는 프로토콜, 호스트, 포트의 조합으로, 이 중 하나라도 다르면 동일한 출처로 보지 않음.

🔸 SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줌. 즉, 해킹 등의 위협으로부터 보다 안전.

🔸 이러한 보안상 이점 때문에 SOP은 모든 브라우저에서 기본적으로 사용하고 있는 정책.

• 예를 들어, 네이버 같은 웹 페이지에 로그인해서 서비스를 이용할 때 서비스 이용 중이 아니더라도 로그아웃을 깜빡했거나 자동 로그인 기능으로 인해 브라우저에 로그인 정보가 남아있을 수도 있을 것.
• 그 상태에서 로그인 정보를 노리는 코드가 있는 다른 사이트에 방문하면, 해커는 로그인 정보를 이용해서 네이버에서 사용할 수 있는 모든 기능을 이용할 수 있게 됨.
• 그러나 SOP가 존재할 경우 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있음.

🔸 하지만, 다른 출처의 리소스를 사용하게 될 일이 많음.

🔸 개발할 때 클라이언트와 서버를 따로 개발하게 된다면 둘은 출처가 달라지고, API를 사용하고 싶을때, github 정보를 받아와서 사용하고 싶을 때, 모두 다른 출처의 리소스를 사용해야 하는 일이 생김.

🔸 이와 같은 일을 해결하기 위해 CORS 사용.

CORS (Cross-Origin-Resource Sharing, 교차 출처 리소스 공유)

🔸 추가 HTTP 헤더를 사용해, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제.

🔸 CORS 에러

🔸 즉, CORS 설정을 통해 서버의 응답 헤더에 Access-Control-Allow-Origin을 작성하면 접근 권한을 얻을 수 있음.

📌 CORS 동작 방식

1. 프리플라이트 요청 (Preflight Request)

🔸 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권환이 있는지 확인하는 것.

🔸 브라우저는 서버에 실제 요청을 보내기 전에 프리플라이트 요청을 보내고, 응답 헤더에 Access-Control-Allow-Origin: 해당 출처라고 오면 실제 요청을 보냄.

🔸 만약 요청을 보낸 출처가 접근 권환이 없다면, 브라우저에서 CORS 에러를 띄우게 되고, 실제 요청은 전달되지 않음.

💡 프리플라이트 요청의 필요성

• 실제 요청을 보내기 전에 권한 확인을 미리 확인함으로써, 실제 요청을 처음부터 통째로 보내는 것보다 리소스 측면에서 효율적.

• CORS에 대비가 되어있지 않은 서버를 보호할 수 있음.
  CORS 이전에 만들어진 서버들은 SOP 요청만 들어오는 상황을 고려하고 만들어졌기 때문에 다른 출처에서 들어오는 요청에 대한 대비가 되어있지 않음.

• 이런 서버에 바로 요청을 보내면, 응답을 보내기 전에 우선 요청을 처리하게 됨. 브라우저는 응답을 받은 후에 CORS 권환이 없다는 것을 인지하지만, 브라우저가 에러를 띄운 후에는 이미 요청이 수행된 상태.

• CORS에 대비가 되어있지 않은 서버라도 프리플라이트 요청을 먼저 보내게 되면, 프리플라이트 요청에서 CORS 에러를 띄움. 실행돼선 안 되는 Cross-Origin 요청이 실행되는 것을 방지할 수 있음. 이런 이유로 프리플라이트 요청이 CORS의 기본 사양으로 들어가게 됨.

2. 단순 요청 (Simple Request)

🔸 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것.

🔸 조건은 다음과 같음. (그러나 이 조건들을 모두 만족시키는 것은 어려움)

• GET, HEAD, POST 요청 중 하나여야 함.
• 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정할 수 있음
• Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, ext/plain 값만 허용

🔸 대부분 HTTP API 요청은 ext/xml 이나 application/json 으로 통신하기 때문에 3번째 Content-Type이 위반됨.

3. 인증정보를 포함한 요청 (Credentialed Request)

🔸 요청 헤더에 인증 정보를 담아 보내는 요청.

🔸 출처가 다를 경우에, 별도의 설정을 하지 않으면 민감한 정보이기 때문에 쿠키를 보낼 수 없음. 이 경우 클라이언트, 서버 양측 모두 CORS 설정이 필요.

• 클라이언트 : 요청 헤더에 withCredentials : true를 넣어줘야 함.
• 서버 : 응답 헤더에 Access-Control-Allow-Credentials : true를 넣어줘야 함.
• 서버 측에서 Access-Control-Allow-Origin을 설정할 때, 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 발생. 인증 정보를 다루는 만큼 출처를 정확하게 설정해줘야 함.

📌CORS 설정 방법

1. Node.js 서버

🔸 Node.js로 간단한 HTTP 서버를 만들 경우, 다음과 같이 응답 헤더 설정.

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://codestates.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

2. Express 서버

🔸 Express 프레임워크를 사용해서 서버를 만들 경우, cors 미들웨어를 사용해서 간단하게 CORS 설정.

const cors = require("cors");
const app = express();

//모든 도메인
app.use(cors());

//특정 도메인
const options = {
  origin: "https://codestates.com", // 접근 권한을 부여하는 도메인
  credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
  optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};

app.use(cors(options));

//특정 요청
app.get("/example/:id", cors(), function (req, res, next) {
  res.json({ msg: "example" });
});

---

📖CH2. Refactor Express

MERN stack : 웹 개발을 위한 기술 스택으로 MongoDB, Express, React, Node.js로 이루어짐.

Express

🔸 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위한 강력한 기능을 제공하는 웹 애플리케이션 프레임워크.

🔸 Node.js HTTP 모듈로 작성한 서버와 달리 Express로 구현한 서버는 미들웨어 추가 및 라우터 기능을 제공

📌Express 시작하기

1. Express 설치하기

시작하기 - 설치

npm install express

2. 간단한 웹 서버 만들기

시작하기 - Hello world 예제

const express = require('express')
const app = express()
const port = 3000

// 루트 URL(/) 또는 라우트에 대한 요청에 “Hello World!”로 응답
app.get('/', (req, res) => { 
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

3. 라우팅: 메서드와 url에 따라 분기(Routing)하기

시작하기 - 기본 라우팅

라우팅 (Routing)

🔸 메서드와 url(/lower, /upper 등)로 분기점을 만드는 것 (분기점 : 클라이언트의 요청 URL을 기반으로 서버에서 다양한 동작 또는 핸들러 함수로 분기하는 지점)

🔸 클라이언트는 특정한 HTTP 요청 메서드(GET, POST 등)와 함께 서버의 특정 URI(또는 경로)로 HTTP 요청을 보내고, 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것.

🔸 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행됨

🔸 app.METHOD(path, handler)

• app : express의 인스턴스
• METHOD : HTTP 요청 메소드
• path : 서버에서의 경로
• handler : 라우트가 일치할 때 실행되는 함수

예시 코드

• 순수한 Node.js 코드로 작성시

const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something
      })}}}

• Express의 라우터를 활용

const router = express.Router()
router.get('/lower', (req, res) => {
  res.send(data);
})
router.post('/lower', (req, res) => {
  // do something
})

📌Middleware 1

🔸 웹 애플리케이션에서 클라이언트의 요청과 서버의 응답 사이에서 동작하는 중간 소프트웨어 컴포넌트.

🔸 클라이언트의 요청을 처리하기 전에 중간 단계에서 추가적인 동작을 수행하거나, 서버의 응답을 처리하기 전에 후속 동작을 수행할 수 있음.

🔸 각각의 미들웨어는 next() 메서드를 호출해 그 다음 미들웨어가 작업을 처리할 수 있도록 순서를 넘길 수 있음.

🔸 미들웨어를 사용하는 상황

• POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)
• 모든 요청/응답에 CORS 헤더를 붙여야 할 때
• 모든 요청에 대해 url이나 메서드를 확인할 때
• 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

🔸 미들웨어의 구성

• 위의 그림은 endpoint가 /이면서, 클라이언트로부터 GET 요청을 받았을 때 적용되는 미들웨어
• 파라미터의 순서에 유의

POST 요청 등에 포함된 body(payload)를 구조화할 때

🔸 Node.js

• HTTP body(payload)를 받을 때 Buffer를 조합해서 body를 얻을 수 있음. 이때 네트워크상의 chunk를 합치고, Buffer를 문자열로 변환하는 작업이 필요.
• Buffer : 일련의 데이터를 임시로 저장하는데 사용되는 메모리 영역

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // body 변수에는 문자열 형태로 payload가 담겨져 있음.
});

🔸 body-parser 미들웨어를 이용해 간단하게 처리 가능.

• body-parser : 서버로 들어오는 요청이 라우트 핸들러에 도달하기 전에 request body를 파싱해주는 기능을 가진 패키지.

// 설치 
npm install body-parser

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

// 생략
app.post('/users', jsonParser, function (req, res) {
})

🔸 Express v4.16.0부터 body-parser 설치 대신, Express 내장 미들웨어인 express.json()을 사용

const express = require('express')
const app = express()

app.use(express.json())

• express() : Express application를 생성. express 모듈에서 최상위 함수를 내보냄.
• express.json([options]) : 들어오는 JSON 형식의 요청을 (body-parser를 통해) JavaScript 객체로 변환하여 사용하게 해줌.
  • options - strict : 들어오는 JSON body를 파싱할 때 엄격한 모드를 사용할지 여부를 결정. 기본값은 true이며, false로 설정할 경우 JSON.parse가 처리할 수 있는 모든 형태의 JSON을 허용함. (객체나 배열 뿐만 아니라 문자열, 숫자 등도 될 수 있음)
• express.urlencoded([options]) : HTML Form을 통해서 전송된 데이터를 파싱함.

모든 요청/응답에 CORS 헤더를 붙일 때

🔸 Node.js

• CORS 헤더를 붙이려면 응답 객체의 response.writeHead(statusCode, {headers}) 메서드를 이용.
• 라우팅마다 헤더를 매번 넣고 OPTIONS 메서드에 대한 라우팅도 따로 구현해야하는 번거로움이 있음.

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
};

// 생략
if (req.method === 'OPTIONS') {
  res.writeHead(200, defaultCorsHeader);
  res.end()
}

🔸 cors 미들웨어

// 📍 1. cors 미들웨어 설치
npm install cors

// 📍 2. 모든 요청에 대해 CORS 허용
const cors = require('cors');
app.use(cors());

// 📍 3.특정 요청에 대해 CORS 허용
const cors = require('cors')
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

💡 app.use는 express 앱에서 실행하는 미들웨어 역할. 첫 번째 인수로 주소를 넣어주지 않으면 모든 요청에서 미들웨어가 실행됨.

모든 요청에 대해 url이나 메서드를 확인할 때

🔸 로거(logger) : 디버깅이나, 서버 관리에 도움이 되기 위해 console.log로 적절한 데이터나 정보를 출력하는 것.

🔸 데이터가 여러 미들웨어를 거치는 동안 응답할 결과를 만들어야 한다면, 미들웨어 사이사이에 로거를 삽입하여 현재 데이터를 확인하거나, 디버깅에 사용할 수 있음.

const express = require('express');
const app = express();

// 📍 1. 모든 요청에 mount 되는 미들웨어
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 📍 2. 모든 요청에 mount 되는 미들웨어
const myLogger = function (req, res, next) {
  console.log('LOGGED'); // 모든 요청에 대해 LOGGED가 출력됨.
  next();
};

app.use(myLogger);

// 📍 3. 특정 경로에 mount되는 미들웨어
app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

🔸 HTTP 요청에서 토큰이 있는지를 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러를 보내는 미들웨어 예제

app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user')
  }
})

---

과제 Mini Node Server

🔸 브라우저에는 서버에 요청을 보내기 위해 fetch 같은 HTTP 요청을 보내는 도구가 기본적으로 내장되어 있음.

🔸 Node.js는 HTTP 요청을 보내거나, 응답을 받을 수 있는 도구들을 제공.

🔸 HTTP 요청을 처리하고 응답을 보내 주는 프로그램을 웹 서버(Web Server)라고 함.

🔸 서버는 클라이언트(브라우저)의 HTTP 요청에 맞게 응답을 보낼 수 있도록 코드를 작성해야 함.

HTTP 모듈

App.js

class App {
  init() {
    document
      .querySelector('#to-upper-case')
      .addEventListener('click', this.toUpperCase.bind(this));
    document
      .querySelector('#to-lower-case')
      .addEventListener('click', this.toLowerCase.bind(this));
  }
  post(path, body) {
    fetch(`http://localhost:5001/${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => res.json())
      .then(res => {
        this.render(res);
      });

  }
  toLowerCase() {
    const text = document.querySelector('.input-text').value;
    this.post('lower', text);
  }
  toUpperCase() {
    const text = document.querySelector('.input-text').value;
    this.post('upper', text);
  }
  render(response) {
    const resultWrapper = document.querySelector('#response-wrapper');
    document.querySelector('.input-text').value = '';
    resultWrapper.innerHTML = response;
  }
}

const app = new App();
app.init();

node.js로 구성한 서버

const http = require('http'); // 서버를 node.js에서 작동을 시켜야 하므로 http 모듈 사용

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => { // http.createServer 메서드를 사용하여 웹서버 객체 생성. 요청이 들어올 때마다 해당 콜백함수가 호출
  // 요청 메서드와 경로에 따라 분기 처리를 수행.
  // TODO:
  if(request.method === 'OPTIONS') { // preflight; 요청이 OPTIONS 메서드인 경우 CORS 설정을 위한 응답을 보내고 종료
    response.writeHead(200, defaultCorsHeader);
    response.end();
  }
  if(request.method === "POST" && request.url === "/upper") {  // POST 메서드이고, 경로가 /upper인 경우 
    let body = [];
    request.on('data', (chunk) => { // 클라이언트로부터 요청 데이터가 도착할 때마다 호출되는 이벤트 리스너. chunk 매개변수에는 도착한 데이터 청크(chunk)가 전달되며, chunk는 buffer형태로 제공됨
      body.push(chunk); // body 배열에 청크 추가 
    }).on('end', () => { // 요청 데이터의 수신이 완료됐을 때 호출되는 이벤트 리스너. 요청 데이터의 모든 청크가 수신되었음을 나타냄.
      body = Buffer.concat(body).toString().toUpperCase(); // body 배열에 저장된 모든 청크를 하나의 버퍼로 합침.
      response.writeHead(200, defaultCorsHeader); // 상태코드 200과 CORS 헤더를 응답으로 설정
      response.end(body) // 응답을 클라이언트로 보냄. 변환된 결과를 응답으로 전송
    });
  }
  else if(request.method === "POST" && request.url === "/lower") {  
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString().toLowerCase();
      response.writeHead(200, defaultCorsHeader);
      response.end(body)
    });
  }
  else if(request.method === "GET" && request.url === "/") {
    response.writeHead(200, defaultCorsHeader);
    response.end("! localhost:4999")
  }
  else { 
    // 나머지는 에러처리 bad request
    response.statusCode = 404;
    response.end();
  }
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
});

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
};

🔸 http.createServer([requestListener]) : HTTP server를 생성하기 위해 사용하며, http.Server의 새로운 인스턴스를 반환.

• requestListener : 요청 이벤트가 발생했을 때, 자동으로 호출될 콜백 함수

🔸 listen() : Server 접속 대기 시작. 비동기적.

🔸 response.writeHead(statusCode, headers) : http response의 header를 설정하기 위한 http 모듈의 메서드

🔸 .on(eventName, eventHandler) : 이벤트 리스너를 등록하는 메서드. 이벤트가 발생할 때마다 등록된 이벤트 핸들러(eventHandler) 함수가 호출.

🔸 .end([data], [encoding]) : 응답을 종료하고 클라이언트로 보냄. data는 응답 본문에 포함될 데이터를 나타내며, 선택적으로 전달할 수 있음. encoding은 데이터의 인코딩 방식을 나타내며, 선택적으로 지정 가능.

💡 chunk, fetch는 실무에서는 사용을 잘 안하며, 주로 Axios를 가장 많이 사용

Express로 구현한 서버

const express = require('express')
const app = express(); // app 객체 생성
const PORT = 5001;
const ip = 'localhost';

const jsonParser = express.json({strict: false}); // req.body의 JSON 데이터를 파싱하여 JS 객체로 변환; strict: false = 잘못된 JSON 형식이 들어와도 파싱시도
app.use(jsonParser) // 
const cors = require('cors'); 
app.use(cors()); // 모든 요청에 대해 CORS 허용


app.get('/', (req, res) => {
    res.send("Hello !"); // res.send() : 어떤 데이터를 보내는지 파악을 해서 이에 알맞게 Contnet-Type을 지정하고 res를 보냄.
})

app.post('/upper', (req, res) => {
    let data = req.body.toUpperCase() // req.body = express.json() 미들웨어를 사용하여 파싱된 JSON데이터를 req.body에 저장
    res.json(data) // res.json() = JSON 데이터를 받아 JSON 문자열 형식으로 응답. 서버에서 클라이언트로 데이터를 전송할 때 주로 사용
    console.log(data)
})

app.post('/lower', (req, res) => {
    let data = req.body.toLowerCase()
    res.json(data)
    console.log(data)
})

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

과제 StatesAirline Server

uuid()

🔸 Universally Unique Identifier(범용 고유 식별자)를 생성하는 함수.
🔸 128bit 숫자로 이루어진 식별자로서, 일반적으로 고유성을 보장하기 위해 사용.

//  📍 1. 설치하기
npm install uuid

// 📍 2. 'v4' 함수를 uuid라는 이름으로 가져옴.
const { v4: uuidv4 } = require('uuid');

🔸 UUID에는 여러 버전이 있으며, 각 버전마다 고유한 특징과 생성 방법이 존재. 버전 4는 랜덤하게 생성되는 UUID로, 보통 일반적인 용도에서 많이 사용.

추가 공부

Content-Type

🔸 HTTP 통신에서 전송되는 데이터의 타입을 명시하기 위해 header에 실리는 정보로, request/response body에 실어 보내는 데이터 타입의 정보.
🔸 Text 타입, Message 타입, Image 타입, Audio 타입, Video 타입, file 타입, Application 타입, Multipart 타입

application/x-www-form-urlencoded

🔸 Content-Type을 따로 설정하지 않으면 기본적으로 설정되는 Default 값.
🔸 보통 Web Page를 개발할 때, JavaScript/JQuery를 사용해서 Ajax로 서버에 데이터를 요청하는 경우 혹은 html form을 사용해서 요청하는 경우 사용.
🔸 key=value&key2=value2의 형태

application/json

🔸 Android나 iOS앱을 위한 RestFul API를 개발할 경우.
🔸 {key: value}의 형태

request

req.body

🔸 JSON 등의 body 데이터를 담을 때 사용하며, 주로 POST로 유저의 정보 또는 파일 업로드(formdata)를 보냈을 때 사용. 요청 본문에 제출된 키-값 데이터 쌍을 포함함.

req.query

Query
🔸 endpoint 주소 이후에 ?를 쓰는 것으로 query string이 시작함을 알림.
🔸 parameter=value 형태로 파라미터의 값을 적음
🔸 파라미터가 여러개일 경우, &를 붙여 여러개의 파라미터를 넘길 수 있음.
🔸 endpoint주소/?parameter=value&value

🔸 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함된 개체 (주로 GET 요청에 대한 처리).

• 예를 들어 uri가 www.example.com/post/1/jun?title=hello! 이면, title=hello! 부분을 객체로 매개변수의 값을 가져옴.

// 클라이언트 단에서, 자바스크립트로 get요청을 보냄
// 📍 방식 1
await axios.get(`www.example.com/post/1/jun?title=hello!`)

// 📍 방식 2
await axios({
  method: "get",
  url: `www.example.com/post/1/jun`,
  params: { title: 'hello!' },
})

// 요청온 uri : www.example.com/public/100/jun?title=hello!
app.use(express.urlencoded({ extended: false })); // uri 방식 폼 요청 들어오면 파싱

router.get('/:id/:name', (req, res, next) => {
  
  // title=hello! 부분이 담기게 된다.
  console.log(req.query) // { title : 'hello!' }
});

req.params

🔸 라우터의 매개변수.

• 예를 들어, /:id/:name 경로가 있으면, :id 속성과 :name 속성을 req.params.id, req.params.name으로 사용가능

// 요청온 url : www.example.com/public/100/jun

router.get('/:id/:name', (req, res, next) => {
  console.log(req.params)}); 
  // { id: '100', name: 'jun' }; ../100/jun 부분이 담기게 됨.

response

res.send([body])

🔸 response를 보냄. 기본적으로 서버에서 response를 처리할 때 Content-type를 지정해주어야 하는데, 해당 메서드는 우리가 어떤 데이터를 보내는지 파악해서 알맞게 지정해줌. 이는 Buffer, String, Object, Array일 수 있음.

res.json([body])

🔸 JSON.stringify()를 사용하여 JSON 문자열로 변환된 응답을 보냄. body에는 개체, 배열, 문자열, boolean, 숫자 또는 Null을 포함한 모든 JSON 유형일 수 있으며, 이를 사용하여 다른 값을 JSON으로 변환할 수도 있음.

res.end([data[, encoding]][, callback])

🔸 모든 응답 헤더와 body가 서버에 전송됐음을 알려주며, 보내줄 데이터가 없을 때 사용함. 예를 들어, 404 에러처리를 리턴해줘야 할 때. 하지만, res.json이나 res.send를 쓰면 응답을 종료해주기 때문에 굳이 명시적으로 표시해줄 필요는 없음.

res.render()

🔸 서버에서 HTML을 생성하고 클라이언트에게 전달하는데 사용. 클라이언트 측에서 페이지의 콘텐츠를 변경하는 것이 아니라 서버 측에서 페이지를 구성한 후 전송.

next()

🔸 다음 미들웨어, 라우터를 호출하며, 작성하지 않을 시 호출되지 않음.
🔸 next를 호출하지 않는 미들웨어는 res.send나 res.sendFile 등의 메서드로 응답을 보내야 함.

HTTP 상태 코드

🔸 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려줌. 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1~5로 제공됨.

종류

🔸 1xx(정보) : 요청을 받았으며 프로세스를 계속 처리중

🔸2xx(성공) : 요청을 성공적으로 받았으며 정상 처리

🔸3xx(리다이렉션) : 요청 완료를 위해 추가 행동이 필요

🔸4xx(클라이언트 오류) : 잘못된 문법으로 인해 서버가 요청을 수행할 수 없음

🔸5xx(서버 오류) : 서버가 정상 요청을 처리하지 못함

2xx 상태코드(Successful)

🔸 요청을 성공적으로 받았으며 정상 처리
🔸 200 : 단순 get
🔸 201 : post 성공. 새로운 리소스가 생성됨.
🔸 202 : 요청이 접수되었지만 처리가 완료되지 않음.
🔸 204 : 서버가 요청을 성공적으로 수행했지만, 응답 페이로드에 보낼 데이터가 없음.

4xx 상태코드(Client Error)

🔸 클라이언트가 잘못된 문법으로 요청하면서 발생하는 오류
🔸 400 Bad Request : 클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음
🔸 401 Unauthorized : 클라이언트가 해당 리소스에 대한 인증 필요

• 인증(Authentication, 본인확인), 인가(Authorization, 권한 부여)

🔸 403 Forbidden : 인증 자격 증명은 있지만, 권한이 충분하지 않은 경우.
🔸 404 Not Found : 요청 리소스가 서버에 없는 경우. 클라이언트가 권한이 부족한 리소스에 접근했는데, 해당 리소스를 숨기고 싶을 때.
🔸 415 Unsupported Media Type : 데이터의 매개변수 설정이 잘못 되었을 경우 발생. 예를 들어, Content-Type이 잘못 설정되어 있을 경우.

5xx 상태코드(Server Error)

🔸 서버문제로 오류가 발생하는 경우
🔸 500 Internal Server Error : 서버 문제로 오류 발생.
🔸 503 Service Unavailable : 서버가 일시적인 과부하나 예정된 작업으로 잠시 요청을 처리할 수 없음