프로젝트 진행 중 백엔드 팀원과 요청, 응답을 테스트 하는 과정에서 이슈가 있었다.
GET 요청을 통해 조회를 시도했지만 클라이언트 쪽에서 에러가 발생한 것이다.
POSTMAN으로 요청을 보내는 URL을 타고 들어가면 분명 조회가 잘 되는데..

axios의 형식을 바꿔 보기도하고, fetch로 해보고 할 수 있는 것들을 모두 시도해본 후에야 깨달았다. GET요청을 할 땐 POST나 PUT과 같은 다른 메서드와 달리 클라이언트에서 서버로 데이터를 보낼 수 없는 것이었다. 애초에 백엔드 쪽에서 요청 받을 데이터를 지정하지 않고 params를 사용해야 했었다. 이와 같은 경험을 토대로 미흡했던 HTTP 통신 부분을 제대로 짚고 넘어가고자 마음 먹었다.

HTTP

• 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙)

HTTP 메시지

• 시작줄, 헤더, 본문으로 구성

요청

• 시작줄(HTTP 메서드, 주소, HTTP 버전), 헤더(요청에 대한 정보), 본문(요청할 때 보낼 데이터)

응답

• 시작줄(HTTP 버전, 상태코드, 상태 메시지), 헤더(응답에 대한 정보), 본문(요청한 데이터)

REST

• HTTP 메서드를 동사로 보고 주소를 자원으로 보는 방식

그 밖에

• GET과 DELETE 요청 시에 본문을 어떻게 처리해야 한다는 정의가 없기 때문에 본문을 같이 보내지 않음 → Query String Parameters 사용(예로, /user?id=1&name=solda)
• 서버는 요청 메시지에 담긴 본문을 받아 파싱(해석)한 후 사용

HTTP 헤더

• 종류가 다양하지만 이번 프로젝트를 진행하면서 자주 보았던 헤더만 먼저 정리하고자 한다.

공통

• Content-Type : 클라이언트에서 서버로 데이터를 보낼 때 www-url-form-encoded, multipart/form-data 등이 있음

요청

• Accept : 요청을 보낼 때 서버에 이런 타입(MIME)의 데이터를 보내줬으면 좋곘다고 명시
• Authorization : JWT나 Bearer과 같은 인증 토큰을 서버로 보낼 때, API 요청할 때 사용
• Origin

응답

• Access-Control-Allow-Origin : 서버에서 클라이언트 주소를 적어주어야 에러가 발생하지 않음

AJAX

• 자바스크립트를 사용한 비동기 통신
• 클라이언트와 서버 간에 XML를 주고 받음
• XHR(XMLHttpRequest)객체를 통해 전체 페이지를 리로드 하지 않고 필요한 데이터만 로드

axios

const options = {
        method: "POST",
        url: "http://www.example.com",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        },
        data: {
            key: value
        }
    };

axios(options);

• JSON 데이터로 자동변환
• 응답시간 초과 설정하는 방법이 존재
• 브라우저 호환성 유리
• Promise 객체 반환

fetch

const url = "http://www.example.com";

const options = {
        method: "POST",
        mode: "cors",
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        },
        body: JSON.stringify({
            key: value
        })
    };

fetch(url, options);

• ES6부터 자바스크립트 내장 라이브러리로 들어와 import 하지 않고 사용이 가능
• 지원하지 않는 브라우저가 존재
• Promise 객체 반환

결론

웹 개발을 하기 전에 HTTP의 기본 개념을 어느정도 학습했다면 에러와 맞서기가 훨씬 수월했을 거란 생각이 들었다. 꾸준히 프로젝트를 진행하면서 서버와의 통신에 익숙해지는 수밖에 없다.