(7) Sending a request with JavaScript - 웹에서 리퀘스트 확인(Network 기능)

▶ 다음과 같은 openAPI를 사용합니다.

실습용 서버 호스트

실습용 서버 호스트입니다.

learn.codeit.kr

설문 응답

사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.

엔드포인트

  POST /api/color-surveys
   GET /api/color-surveys
   GET /api/color-surveys/:id
DELETE /api/color-surveys/:id
 PATCH /api/color-surveys/:id

설문 응답 객체

속성

id: integer 설문 응답 객체에 대한 고유 식별자

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

createdAt: integer 객체가 생성된 시점에 대한 UNIX 타임스탬프

updatedAt: integer 객체가 수정된 시점에 대한 UNIX 타임스탬프

설문 응답 객체 예시

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "0123",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

설문 응답 생성

엔드포인트

POST /api/color-surveys

파라미터로 넘겨준 값들을 사용해서 새로운 설문 응답 객체를 생성합니다.

바디 파라미터

mbti: string 필수 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 필수 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문 응답을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

리턴 내용

생성에 성공할 시, 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

POST <https://learn.codeit.kr/api/color-surveys>
Content-Type: application/json

{
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "1234"
}

리스폰스 예시

상태 코드: 201

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

여러 설문 응답 조회

엔드포인트

GET /api/color-surveys

설문 응답 객체 전체 목록을 최신 순서로 리턴합니다.

쿼리 스트링 파라미터

mbti: string 제출자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다. 쿼리 스트링 파라미터로 보내면 해당 MBTI에 대한 설문 응답들만 모아서 확인할 수 있습니다.

limit: integer 리턴받기 원하는 설문 응답 객체 수: 값을 전달하지 않으면 10개의 객체가 리턴됩니다. 10~100 사이 정수만 허용됩니다.

offset: integer 가장 앞 객체부터 건너뛰고 싶은 객체 수: 값을 전달하지 않으면 건너뛰지 않습니다.

리턴 내용

유효한 mbti, limit을 제공했을 시, 설문 응답 객체 목록이 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

count: integer 서버에 저장된 총 설문 응답 객체 수

next: string 페이지네이션에서 다음 페이지에 해당하는 주소

previous: string 페이지네이션에서 이전 페이지에 해당하는 주소

results: array of objects 리턴된 설문 응답 객체 목록

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys?offset=10&limit=10&mbti=ISTJ>

리스폰스 예시

상태 코드: 200

{
  "count": 42,
  "next": "<https://learn.codeit.kr/api/color-surveys/?offset=20&limit=10&mbti=ISTJ>",
  "previous": null,
  "results": [
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752533000,
      "updatedAt": 1668752533000,
      "id": 42,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752162000,
      "updatedAt": 1668752162000,
      "id": 41,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#33A560",
      "createdAt": 1668331218000,
      "updatedAt": 1668331218000,
      "id": 40,
      "mbti": "ISTJ"
    },
    ...
  ]
}

설문 응답 조회

엔드포인트

GET /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 조회합니다.

파라미터

없음

리턴 내용

유효한 고유 식별자를 제공했을 시 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys/14>

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 응답 삭제

엔드포인트

DELETE /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 삭제합니다.

바디 파라미터

password: string 필수 설문 응답에 대한 비밀번호: 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 삭제할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 삭제된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

DELETE <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "password": "0123"
}

리스폰스 예시

상태 코드: 204

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 수정

엔드포인트

PATCH /api/color-surveys/:id

파라미터로 넘겨준 값들을 사용해서 URL 파라미터 :id에 해당하는 설문 응답 객체를 수정합니다. 제공되지 않은 선택 필드는 수정되지 않습니다.

바디 파라미터

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 수정할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 수정된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

PATCH <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "password": "0123"
}

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

▶ package.json 파일

{
  "type": "module"
}

▶ 이전 글 살펴보기

(6) Sending a request with JavaScript - 오류 처리

https://seop-e.tistory.com/223

(6) Sending a request with JavaScript - 오류 처리

---

네트워크 리퀘스트를 보내는 코드는 보통 웹 브라우저에서 실행된다.

자바스크립트와 네트워크 리퀘스트에 대해 배우는 입장에서는

그냥 Node,js 환경에서 코드를 실행하든

웹 브라우저 환경에서 코드를 실행하든 큰 상관이 없지만

한 가지 다른 점은 

다음 이미지와 같이 웹 브라우저에서는 개발자 도구로

네트워크 activity를 확인할 수 있다는 것이다. 

개발자 도구의 네트워크 탭

웹 개발을 할 때는 네트워크 리퀘스트를 보내는 부분에서

예상하지 못한 버그가 발생할 수 있는데

이럴 때 개발자 도구가 굉장히 유용하게 쓰인다.

한번 예시를 통해 어떤식으로 확인하는지 살펴보자

---

▶ index파일

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>네트워크 요청 데모</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 16px;
    }
    div {
      margin: 8px 0;
    }
    span {
      margin-right: 8px;
    }
  </style>
</head>
<body>
  <h2>네트워크 요청 데모</h2>
  <input id="mbti" placeholder="MBTI">
  <input id="colorCode" placeholder="#000000">
  <button>리퀘스트 보내기</button>
  <div class="status"></div>
  <div class="data"></div>
  <script type="module" src="demo.js"></script>
</body>
</html>

▶ demo.js 파일

import { getColorSurvey, createColorSurvey } from './api.js';

const btn = document.querySelector('button');
const statusDiv = document.querySelector('div.status');
const dataDiv = document.querySelector('div.data');
const mbtiInput = document.querySelector('#mbti');
const colorCodeInput = document.querySelector('#colorCode');

btn.addEventListener('click', async function (e) {
  statusDiv.textContent = '로딩 중...';
  dataDiv.innerHTML = '';
  try {
    const survey = await getColorSurvey(3);
    statusDiv.textContent = '완료';
    dataDiv.innerHTML = `<span>${survey.mbti}</span><span>${survey.colorCode}</span>`;
  } catch (e) {
    statusDiv.textContent = '오류';
    dataDiv.innerHTML = `<span>${e.message}</span>`;
  }
});

---

우선 index 파일을 웹 브라우저로 열어보자

그냥 단순 폼 요소랑 버튼, 텍스트가 있는데

html의 body 태그를 보면

<body>
  <h2>네트워크 요청 데모</h2>
  <input id="mbti" placeholder="MBTI">
  <input id="colorCode" placeholder="#000000">
  <button>리퀘스트 보내기</button>
  <div class="status"></div>
  <div class="data"></div>
  <script type="module" src="demo.js"></script>
</body>

여러가지 요소 중

status class는 네트워크 요청 상태를 보여주고

data class는 네트워크 요청 결과를 보여주고

그리고 demo.js파일과 연결되어있다.

demo.js 파일로 넘어가보자면

import { getColorSurvey, createColorSurvey } from './api.js';

const btn = document.querySelector('button');
const statusDiv = document.querySelector('div.status');
const dataDiv = document.querySelector('div.data');
const mbtiInput = document.querySelector('#mbti');
const colorCodeInput = document.querySelector('#colorCode');

btn.addEventListener('click', async function (e) {
  statusDiv.textContent = '로딩 중...';
  dataDiv.innerHTML = '';
  try {
    const survey = await getColorSurvey(3);
    statusDiv.textContent = '완료';
    dataDiv.innerHTML = `<span>${survey.mbti}</span><span>${survey.colorCode}</span>`;
  } catch (e) {
    statusDiv.textContent = '오류';
    dataDiv.innerHTML = `<span>${e.message}</span>`;
  }
});

API 함수들을 임포트하고 

페이지에 있는 각종 요소들을 가져왔다.

그 밑에 이벤트리스너 부분이 핵심인데

btn.addEventListener('click', async function (e) { // 이벤트 핸들러 함수는 async 함수로 작성
  statusDiv.textContent = '로딩 중...'; // 버튼 클릭 시 로딩 중으로 상태 변경
  dataDiv.innerHTML = '';  // 데이터 출력 영역 초기화
  try { // try-catch 문으로 에러 처리
    const survey = await getColorSurvey(3); // getColorSurvey 함수 호출
    statusDiv.textContent = '완료'; // 완료로 상태 변경
    dataDiv.innerHTML = `<span>${survey.mbti}</span><span>${survey.colorCode}</span>`; // 데이터 출력
  } catch (e) { // 에러 발생 시
    statusDiv.textContent = '오류'; // 오류로 상태 변경
    dataDiv.innerHTML = `<span>${e.message}</span>`; // 에러 메시지 출력
  }
});

버튼을 클릭하면 함수가 실행되는 이벤트 핸들러 함수이다.

코드를 빠르게 해석해보자면..

함수는 우선 status를 로딩 중으로 설정해주고

getColorSurvey 함수를 실행하고 있으며 await으로 리퀘스트를 보낸다.

그리고 리스폰스가 돌아오면 status를 완료로 바꾸고

dataDiv 안에 설문 객체의 mbti 필드와 colorCode 필드를 보여준다.

만약 리퀘스트를 보내는 부분에서 에러가 나면

status를 오류로 바꾸고 에러 메시지를 dataDiv 안에서 보여준다.

 

코드를 해석하는것보다 개발자 도구의 네트워크 기능을 알아보는 것이 목적이기에 

해석은 여기까지.

---

Network 기능 알아보기 - GET 리퀘스트

이제 index 파일 내에서 개발자 도구를 켜고 Network 탭으로 들어가보자.

 

개발자 도구가 열려 있는 상태라면 네트워크 요청이 기록되는데,

새로고침을 해보면 다음과 같이 어떠한 기록들이 생기는 것을 확인할 수 있다.

이 기록들 하나하나가 리퀘스트이다.

 

그리고 리퀘스트 보내기를 누르면

위와 같이 새로운 리퀘스트가 기록되는데

각 리퀘스트의 상태코드, 유형(타입),

어디서 리퀘스트를 보냈는지의 시작점, 크기와

걸린 시간 등을 볼 수 있으며

중간에 있는 ms로 주기되어있는 부분은 전체적인 Waterfall을 보여준다.

 

waterfall를 좀 더 자세히 보자면

위와 같이 마지막 리퀘스트의 타입이 fetch이기 때문에

이게 방금 보낸 fetch 리퀘스트 이다.

그리고 컬럼 헤더에 마우스를 올리고 우클릭을 하면 아래와 같이 다른 정보도 볼 수 있다.

이중에서 한번 메소드를 클릭해서 보자면

모두 get 메소드를 사용하는 것으로 확인할 수 있다.

그럼 이제 리퀘스트를 클릭해보자.

---

다음과 같이 헤더, 미리보기, 응답, 시작점, 타이밍등 여러 탭들이 있는데

우선 헤더 탭을 먼저 살펴보자.

Header에서는 리퀘스트와 리스폰스의 헤더를 확인할 수 있고

응답(Response) 리스폰스의 바디를 확인할 수 있다.

 

그리고 미리보기(Preview) 탭은 리스폰스 내용의 미리보기를 보여주며

지금처럼 JSON의 경우 큰 차이가 없지만

리스폰스 내용이 HTML 인 경우

아래와 같이 HTML에 대한 화면을 보여준다.

 

디버깅을 하다 보면 헤더가 제대로 설정되고 있는지,

예상된 리스폰스가 돌아오고 있는지

이런 걸 확인해야 하는 경우가 많은데

그럴 때 Newwork 탭으로 리퀘스트, 리스폰스의 모든 정보를 볼 수 있기에 매우 유용하다.

 

---

Newtork 기능 알아보기 - POST 리퀘스트

그렇다면 이번엔 POST 리퀘스트를 보내보자.

// demo.js

import { getColorSurvey, createColorSurvey } from './api.js';

const btn = document.querySelector('button');
const statusDiv = document.querySelector('div.status');
const dataDiv = document.querySelector('div.data');
const mbtiInput = document.querySelector('#mbti');
const colorCodeInput = document.querySelector('#colorCode');

btn.addEventListener('click', async function (e) { 
  statusDiv.textContent = '로딩 중...'; 
  dataDiv.innerHTML = '';  
  try {
    const surveyData = { // 새로운 설문 데이터
      mbti: mbtiInput.value,
      colorCode: colorCodeInput.value,
      password: '0000',
    };
    const survey = await createColorSurvey(surveyData); // createColorSurvey 함수 호출
    statusDiv.textContent = '완료'; 
    dataDiv.innerHTML = `<span>${survey.mbti}</span><span>${survey.colorCode}</span>`; 
  } catch (e) { 
    statusDiv.textContent = '오류';
    dataDiv.innerHTML = `<span>${e.message}</span>`; 
  }
});

 

input 필드의 값을 받아서 surveyData 객체를 만들고

createColorSurvey 함수의 아규먼트로 surveyData를 전달하였다.

 

폼에 잘못된 mbti 정보를 입력하고 리퀘스트를 보내보자.

유형에 파란색으로 표시되어있는 preflight(프리플라이트)라는 리퀘스트는 브라우저가 자동으로 보내는 건데 일단 무시해도된다

 

오류가 발생한 POST 리퀘스트를 클릭해보면

다음과 같이 400 상태 코드가 돌아온 것을 확인할 수 있고

 

페이로드 탭에서는 리퀘스트 바디를 확인할 수 있다.

 

그럼, 제대로 된 mbti를 입력하고 다시 리퀘스트를 보내면 결과는 다음과 같다.

리퀘스트가 성공적으로 처리되었음을 확인할 수 있다.

---

자주 사용하는 기능

Network 기능에서 개발자가 자주 사용하는 기능 두 가지를 알아보자

 

1. 상단에 필터를 이용해서 원하는 리퀘스트 타입만 볼 수 있다.

 

예를들어 Fetch를 클릭하면

다음과 같이 원하는 리퀘스트를 찾을 때 유용하게 사용할 수 있다.

 

2. 조절(throttling) 기능도 많이 사용하며

이걸 클릭하면 3G처럼 느린 인터넷 속도,

아니면 아예 오프라인 상태를 흉내낼 수 있다.

 

---

이렇게 크롬 개발자 도구의 Network 탭에 대해 알아봤는데

네트워크와 관련된 버그가 있을 때

이 기능을 적극적으로 활용해 보는 것이 좋다.

 

그리고 Network 탭의 모든 기능을 소개해 주는 문서를 참고해도 좋다.

https://developer.chrome.com/docs/devtools/network/reference?hl=ko

네트워크 기능 참조  |  Chrome DevTools  |  Chrome for Developers