[Javascript] 자바스크립트 웹 Request(요청)과 Response(응답)

URL(Uniform Resource Locator)

• 웹에 존재하는 수많은 데이터 중에서 원하는 데이터를 특정하기 위해 URL을 사용한다.
• URL은 크게 호스트(host) + 패스(path) + 쿼리(query)로 이루어져 있다.

https://www.codeit.kr/learn/4338

• URL을 입력하고 엔터를 치면,
  1. 웹 브라우저는 URL에서 호스트(host) 부분을 보고, 전 세계의 수많은 서버들 중에서 정확히 어느 서버와 통신을 해야 하는지를 찾는다.
  2. 어떤 서버와 통신해야 하는지를 식별했다면 웹 브라우저는 해당 서버로 Request를 보낸다. 이때 URL에서 패쓰(path) 이후의 부분들을 리퀘스트에 담아서 보낸다.
  3. 리퀘스트를 받은 서버는 리퀘스트에 담긴 패쓰(path) 이후의 부분들을 보고, 그것이 의미하는 데이터를 찾은 결과를 Response에 담아서 보내주면, 웹 브라우저는 받은 리스폰스의 내용을 갖고 사용자에게 보여준다.

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

 

Request와 Response

Request(요청)

• 웹 브라우저가 서버로 보내는 요청(Request)의 종류에는 크게 다음과 같은 4종류가 있다. 그리고 각 리퀘스트의 종류에 따라 리퀘스트의 헤드에 아래 메소드(Method)를 설정해주어야 한다.
  • 데이터 조회(Read): GET Method
  • 데이터 추가(Create): POST Method
  • 데이터 수정(Update): PUT Method
  • 데이터 삭제(Delete): DELETE Method

// 새 직원 정보
const newMember = {
  name: 'Michael',
  email: 'michael@codeitmall.kr',
	department: 'engineering',
};

// stringify: 자바스크립트 객체 newMember를 string 타입의 JSON 데이터로 변환
fetch('https://learn.codeit.kr/api/members', {
  method: 'POST',
  body: JSON.stringify(newMember),
})

// 리스폰스 내용에 있는 JSON 데이터가 result 파라미터에 string 타입의 값으로 넘어옴
// parse: string 타입의 JSON 데이터를 자바스크립트 객체로 변환 
  .then(() => {
    fetch('https://learn.codeit.kr/api/members')
      .then((response) => response.text())
      .then((result) => {
        const members = JSON.parse(result);
        console.log(members[members.length - 1]);
      });
  });

Response(응답)

• 서버는 각각의 메소드에 대해서 그에 맞는 데이터 관련 조작을 하고 웹 브라우저에 표시해주는데 이를 응답(Response)라고 한다.
• 각각의 응답 상태마다 아래와 같은 상태 코드와 상태 메세지가 있다.
  1. 100번대: 서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되는 상태 코드들
     
     • 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드다.
     • 101 Switching Protocols : 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 그 프로토콜로 전환하겠습니다라는 뜻을 나타낼 때 쓰이는 상태 코드다.
  2. 200번대: 클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드들
     
     • 200 OK : 리퀘스트가 성공적으로 처리되었음을 포괄적으로 의미하는 상태 코드다. 이때 성공의 의미는 리퀘스트에 있던 메소드의 종류에 따라 다르다.
     • 201 Created : 리퀘스트의 내용대로 리소스가 잘 생성되었다는 뜻이다. POST 리퀘스트가 성공한 경우에 200번 대신 201번이 올 수도 있다.
     • 202 Accepted : 리퀘스트의 내용이 일단은 잘 접수되었다는 뜻이다. 즉, 당장 리퀘스트의 내용이 처리된 것은 아니지만 언젠가 처리할 것이라는 뜻인데요. 리퀘스트를 어느 정도 모아서 한번에 실행하는 서버인 경우 등에 이런 응답을 줄 수도 있다.
  3. 300번대: 클라이언트의 리퀘스트가 아직 처리되지 않았고, 리퀘스트 처리를 원하면 클라이언트 측의 추가적인 작업이 필요함을 의미하는 상태 코드들
     
     • 301 Moved Permanently : 리소스의 위치가 바뀌었음을 나타낸다. 보통 이런 리스폰스의 헤드 값으로 리소스에 접근할 수 있는 새 URL이 담겨있어서, 헤드에 포함된 Location 헤더의 값을 읽고 자동으로 그 새 URL에 다시 리퀘스트를 보내는 동작(리다이렉션, redirection)을 수행한다.
     • 302 Found : 리소스의 위치가 일시적으로 바뀌었음을 나타낸다. 이 경우에도 대부분의 브라우저들은 임시 URL로 리다이렉션한다.
     • 304 Not Modified : 브라우저들은 보통 한번 리스폰스로 받았던 이미지 같은 리소스들을 그대로 내부에 저장한다. 그리고 서버는 해당 리소스가 바뀌지 않았다면, 리스폰스에 그 리소스를 보내지 않고 304번 상태 코드만 헤드에 담아서 보냄으로써 '네트워크 비용'을 절약하고 브라우저가 저장된 리소스를 재활용하도록 한다.
  4. 400번대: 리퀘스트를 보내는 클라이언트 쪽에 문제가 있음을 의미하는 상태 코드들
     
     • 400 Bad Request : 말그대로 리퀘스트에 문제가 있음을 나타내며, 리퀘스트 내부 내용의 문법에 오류가 존재하는 등의 이유로 인해 발생한다.
     • 401 Unauthorized : 아직 신원이 확인되지 않은 사용자로부터 온 리퀘스트를 처리할 수 없다는 뜻이다.
     • 403 Forbidden : 사용자의 신원은 확인되었지만 해당 리소스에 대한 접근 권한이 없는 사용자라서 리퀘스트를 처리할 수 없다는 뜻이다.
     • 404 Not Found : 해당 URL이 나타내는 리소스를 찾을 수 없다는 뜻이다.
     • 405 Method Not Allowed : 해당 리소스에 대해서 요구한 처리는 허용되지 않는다는 뜻이다. 만약 어떤 서버의 이미지 파일을 누구나 조회할 수는 있지만 아무나 삭제할 수는 없을 때 GET 리퀘스트는 허용되지만, DELETE 메소드는 허용되지 않는 상황으로 DELETE 리퀘스트를 보낸다면 이런 상태 코드를 보게될 수도 있다.
     • 413 Payload Too Large : 현재 리퀘스트의 바디에 들어있는 데이터의 용량이 지나치게 커서 서버가 거부한다는 뜻이다.
     • 429 Too Many Requests : 일정 시간 동안 클라이언트가 지나치게 많은 리퀘스트를 보냈다는 뜻이다. 서버는 수많은 클라이언트들의 리퀘스트를 정상적으로 처리해야 하기 때문에 특정 클라이언트에게만 특혜를 줄 수는 없다. 따라서 지나치게 리퀘스트를 많이 보내는 클라이언트에게는 이런 상태 코드를 담은 리스폰스를 보낼 수도 있다.
  5. 500번대: 서버 쪽의 문제로 인해 리퀘스트를 정상적으로 처리할 수 없음을 의미하는 상태 코드들
     • 500 Internal Server Error : 현재 알 수 없는 서버 내의 에러로 인해 리퀘스트를 처리할 수 없다는 뜻이다.
     • 503 Service Unavailable : 현재 서버 점검 중이거나, 트래픽 폭주 등으로 인해 서비스를 제공할 수 없다는 뜻이다.

// 리스폰스의 상태 코드(status code)를 출력하는 코드
fetch('https://www.google.com')
  .then((response) => {
    console.log(response.status);
  });

 

Reference

• https://www.codeit.kr/