[TIL] Day36- Web Server

공부중인 개발자·2021년 5월 27일
CODESTATESNodeserver
0

TIL

목록 보기
36/64
post-thumbnail

Achievement Goals

  • HTTP
    • HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다.
    • HTTP 다양한 요청 방식과, 응답 코드에 대해 이해할 수 있다.
    • CORS의 개념
  • node.js modules의 사용
    • node.js의 내장 http 모듈을 사용할 수 있다.
    • http 모듈 사용시에 서버에 CORS 설정을 할 수 있다.
    • CommonJS를 이용한 모듈 내보내기/불러오기를 할 수 있다.
  • 라우팅과 API
    • 라우팅(조건에 따른 분기)을 이해하고, 이를 서버 코드에서 구현할 수 있다.
    • 클라이언트가 사용할 수 있도록, 서버 API 문서를 직접 작성할 수 있다.
  • Express 라이브러리
    • express 라이브러리가 어떤 작업을 단순하게 만드는지 이해할 수 있다.
    • 미들웨어의 개념을 이해할 수 있다.
  • 서버 개발과 디버깅
    • CRUD 를 수행하는 웹 서버 개발 방법을 익힐 수 있다.
    • 서버 개발을 돕는 다양한 툴들을 익힐 수 있다.

HTTP

  • HTTP 요청/응답을 브라우저를 통해 확인할 수 있고, 해당 내용을 읽을 수 있다.

크롬의 개발자도구를 들어가서 네트워크 탭을 누르면 다음과 같은 화면이 나오게 된다.
이것은 HTTP 요청을 브라우저를 통해 확인 하는 방법이며 그중 POST 메소드를 사용한 upper 를 클릭하면

다음과 같이 Request URL, Method, Status Code등을 알 수 있다. 또한 Headers 탭이 아닌 Response 탭을 확인하면 받게 되는 내용 역시 확인 가능하다.

HTTP 요청/응답을 브라우저를 통해 확인하는 방법은 이렇게 개발자 도구를 이용해야한다고 알고 있으며 안에 있는 내용 역시 읽을 수 있다.

  • GET: GET 메서드는 특정 리소스의 표시를 요청. GET을 사용하는 요청은 오직 데이터를 받기만 함.
  • HEAD: HEAD 메서드는 GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함X
    HTTP 헤더(문서 정보)를 가져올 때 사용
  • POST : POST 메서드는 특정 리소스에 엔티티를 제출할 때 쓰입니다. 이는 종종 서버의 상태의 변화나 부작용을 일으킵니다.
    데이터를 서버에 제출할 때 사용, POST 요청이 성공적으로 처리되면 서버의 내용이 변경
    Payload(body)와 같이 보냄
  • PUT : PUT 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꿉니다.
  • PATCH : PATCH 메서드는 리소스의 부분만을 수정하는 데 쓰입니다.
  • DELETE : DELETE 메서드는 특정 리소스를 삭제합니다.
  • CONNECT : CONNECT 메서드는 목적 리소스로 식별되는 서버로의 터널을 맺습니다.
    양방향 통신을 할 때 이용
  • OPTIONS : OPTIONS 메서드는 목적 리소스의 통신을 설정하는 데 쓰입니다.
    서버가 어떤 메서드를 지원하는지 알아볼 때 사용
  • TRACE : TRACE 메서드는 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 합니다.

응답코드에 관해서는
https://developer.mozilla.org/ko/docs/Web/HTTP/Status
MDN HTTP 상태 코드를 확인

번호 대역별
100번대 - 정보 확인
200번대 - 통신 성공
300번대 - 리다이렉트
400번대 - 클라이언트 오류
500번대 - 서버오류

자주 사용되는 상태 코드

  • 200 OK

요청이 성공적으로 되었습니다. 성공의 의미는 HTTP 메소드에 따라 달라집니다:
GET: 리소스를 불러와서 메시지 바디에 전송되었습니다.
HEAD: 개체 해더가 메시지 바디에 있습니다.
PUT 또는 POST: 수행 결과에 대한 리소스가 메시지 바디에 전송되었습니다.
TRACE: 메시지 바디는 서버에서 수신한 요청 메시지를 포함하고 있습니다.

  • 300 Multiple Choice

요청에 대해서 하나 이상의 응답이 가능합니다. 사용자 에이전트 또는 사용자는 그중에 하나를 반드시 선택해야 합니다. 응답 중 하나를 선택하는 방법에 대한 표준화 된 방법은 존재하지 않습니다.

  • 403 Forbidden

클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 예를들어 그들은 미승인이어서 서버는 거절을 위한 적절한 응답을 보냅니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다.

  • 404 Not Found

서버는 요청받은 리소스를 찾을 수 없습니다. 브라우저에서는 알려지지 않은 URL을 의미합니다. 이것은 API에서 종점은 적절하지만 리소스 자체는 존재하지 않음을 의미할 수도 있습니다. 서버들은 인증받지 않은 클라이언트로부터 리소스를 숨기기 위하여 이 응답을 403 대신에 전송할 수도 있습니다. 이 응답 코드는 웹에서 반복적으로 발생하기 때문에 가장 유명할지도 모릅니다.

  • 500 Internal Server Error

서버가 처리 방법을 모르는 상황이 발생했습니다. 서버는 아직 처리 방법을 알 수 없습니다.

등이 있다.

CORS <- 중요

  • CORS : 브라우저에 두개 이상에 서버와 연결 되는 것을 예외적으로 허용하는 정책

Same-origin policy(브라우저가 만듬)
브라우저 기본설정은 하나의 서버만 연결한 허용
-> 문제가 생김

고객들의 니즈 서버 한개말고 다른 서버도 연결하고 싶음
공인된 서버에서 예외적으로 CORS를 허용한다면 한개의 브라우저에서 2개의 서버까지 연결
공인된 서버만 허용하기 때문에 서버에서 CORS를 허용함 (브라우저에서 하면 다른 서버를 요청할 때 공인된것인지 악성인지 파악이 어렵기 때문에)
서버에서 하는 보안정책

요즘은 서버가 프론트 백으로 나뉘어져 있어서 과거와 다르게 하나만의 서버에 요청 응답말고 2개의 서버에 요청을 해야 응답을 각각 받을 수 있다.

접근 제어 시나리오
교차 출처 리소스 공유(CORS MDN 살펴보기)
단순 요청 simple requests -> 장점 빠르다. 단점 안전성이 떨어진다

Preflighted requests -> 느리지만 안정성이 있다.

requests with credentials 인증 정보를 포합한 요청 두가지 장점을 섞음

프로토콜 도메인 포트번호
같은 서버로 판단하는 세가지 기준
https://developer.mozilla.org:8080/ko/docs/Web/HTTP/CORS
https 프로토콜
developer.mozilla.org 도메인
:8080 포트번호(8080은 도메인에 연결된 pc에서 허용하는 포트의 번호)

origin (하나의 서버를 뜻한다고 보면 됨)(오리진이 같다면 프로토콜 도메인 포트번호 다 같다)

node.js modules의 사용

  • node.js의 내장 http 모듈을 사용할 수 있다.

Node.js가 내장하고 있는 http 모듈을 사용하면 HTTP 서버를 만들어 node.js 파일을 웹서버로 활용할 수 있다. node.js 파일 상단에서 require() 전역함수를 사용하여 http 모듈을 로드
const http = require('http');

node.js를 웹서버로 사용하려면 우선 웹서버 객체를 만들어야함
웹서버 객체, 즉 HTTP 서버 인스턴스 생성은 http 모듈의 createServer() 함수를 사용
또한, 웹서버 인스턴스의 listen() 함수는 인자로 받아오는 특정 포트에서 HTTP 서버를 시작하게 하고 사용자의 요청을 기다림

const http = require('http');

const server = http.createServer();
server.listen(5000);
  • http 모듈 사용시에 서버에 CORS 설정을 할 수 있다.
    CORS 설정값을 만든 뒤
const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*", // 1 or All
  //내가 어떤것을 허용하는 지(*는 모든것을 허용한다는 뜻)
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  //어떠한 메소드를 받을 수 있는지
  "Access-Control-Allow-Headers": "Content-Type, Accept",
  // 어떠한 헤더 속성을 허용하는지
  "Access-Control-Max-Age": 10,
  //통신 가능 시간
};

reponse.를 이용하여 넣어줄 수 있다.
response.writeHead(200, defaultCorsHeader);

  • CommonJS를 이용한 모듈 내보내기/불러오기를 할 수 있다.
    아직 배우지 못해서 추후 작성 예정
  • 오늘 수업외로 배운 것

서버 만들기 5단계 방법론

1단계 요청 메소드 정리(메소드를 얼마나 어떤것을 받을것을 정리)

2단계 라우터 정의(라우터란 도메인 다음에 들어온 /는 요청했을 경우를 라우팅했다고한다)

3단계 요청 데이터 받기
request.on() => 이벤트를 줄경우 콜백 함수를 그에 맞춰서 행동

4단계 동작 구현(기능을 구현)

5단계 데이터 + 상태 응답

서버에 대해 배워보고 나니 아직 많이 부족하고 모르는게 많다. 당연한거니까 열심히 배우고 열심히 익히자

profile
공부중인 개발자
열심히 공부하자
이전 포스트

[TIL] Day35- 데이터 흐름의 이해와 비동기 요청 처리(2)

다음 포스트

[TIL] Day36- Web Server(2)

0개의 댓글