[스프링부트, 리액트] 웹개발 배경지식(1) HTTP 메서드와 응답코드, 직렬화/역직렬화

*김다정 저, React 스프링 부트 AWS로 배우는 웹 개발 101을 학습하며 작성한 포스팅입니다

 

HTTP 메서드와 기능

브라우저의 주소창에 URL을 치고 엔터를 누르면 브라우저는 HTTP GET 요청을 해당 URL 서버로 전송한다. 그리고 그 결과인 HTTP 응답을 브라우저에 렌더링(화면에 디스플레이)하는 것이다. HTTP 요청에는 GET, POST, PUT, DELETR와 같은 메서드를 지정할 수 있다. 이러한 메서드는 호스트에게 지정한 리소스에 어떤 작업을 하고 싶은지 알려주는 역할을 한다. 

 

아래는 주로 사용하고 개발할 HTTP 메서드를 간략히 요약한 것이다.

메서드	기능
GET	리소스를 가져올 때 사용
POST	리소스에 대해 임의의 작업(예, 생성, 수정)을 할 때 사용
PUT	리소스를 대체할 때 사용
DELETE	리소스를 삭제할 때 사용

응답 코드

HTTP 응답코드

200은 성공적으로 요청을 처리했다는 뜻이다. 404는 해당 리소스는 존재하지 않는다는 뜻이다. 403은 송신자에게 해당 리소스에 접근할 권한이 없다는 뜻이다. 500은 서버의 에러로 인해 요청을 처리할 수 없다는 뜻이다. 이렇게 HTTP 응답코드를 통해 사용자는 요청이 어떻게 처리되었는지 확인할 수 있다.

member/login을 처리하는 메소드가 없을 때 404가 뜬다.

회원가입 html submit을 눌러서 post를 했으나, 스프링부트단에서 get 메서드만 있을 경우에도 405가 뜬다. 즉, 주소는 있으나 방식이 달라서 뜨는 에러이다.

405를 해결하기 위해 아래와 같이 post에 대응하는 메소드를 작성해보도록 한다.

인텔리제이 콘솔은 찍히지만 브라우저는 500이다. 아직 return null이기 때문이다.

스프링 부트 폴더 구조 예시

Content-Type

응답의 미디어 타입을 의미한다. 미디어 타입은 예를 들어 text/html, text/css, application/json, video/mpeg 등이 있다. 또 Keep-Alive, Cache-control, Connection등 통신에 관련된 정보를 확인할 수 있다.

응답 바디

서버 애플리케이션은 보통 HTTP 응답 바디에 요청 처리 결과를 보낸다. 예를 들면 www.google.com'에 GET 요청을 보내면 구글은 응답 바디에 Google의 랜딩페이지 HTML을 넣어 반환한다. 

 

직렬화, 역직렬화

인터넷을 통해 애플리케이션 1은 애플리케이션2에 TodoItem(자바로 작성된 스트링 타입의 제목과 done 여부를 담는 불린타입을 변수로 갖는 클래스)을 전송하려 한다. 애플리케이션 1과 2는 서로 언어도 다르고 아키텍처도 다르다고 한다면, 둘 다 이해할 수 있는 형태로 오브젝트를 변환해야 한다. 이렇게 저장 또는 전송하기 위해 메모리상의 오브젝트를 다른 형태로 변환하는 작업을 직렬화라고 하며 그 반대 작업을 역직렬화라고 한다. 오브젝트를 JSON 형태로 직렬화해야 한다.

{
    "title":"mytitle",
    "done":false
}

위를 보면 자바의 인스턴스 변수의 이름은 키가 되고, 변수에 들어간 값은 값이 되는 것을 확인할 수 있다.

{
 "myString":"hello", //문자열
 "number":10, //숫자
 "myStringArray":[ //문자열 배열
 "adb",
 "asd"
 ],
 "myObject":{ //오브젝트
  "name":"obj1"
 }
}

오브젝트를 JSON 형태의 문자열로 변환한 후, HTTP 요청의 바디 부분에 변환한 JSON을 넣어 요청을 전송한다. 그러면 요청을 받은 애플리케이션2는 HTTP 요청의 바디부분에서 JSON을 꺼내 TodoItem 오브젝트로 변환해 사용할 수 있다. 

브라우저 상에서 실행될 리액트 애플리케이션은 JSON을 요청 바디에 넣어 보낸다. 자바 백엔드 애플리케이션은 이 JSON을 바디에서 꺼내 TodoItem으로 변환한다. 물론 이런 변환 과정은 라이브러리와 프레임워크가 대신 해주므로 크게 신경쓸 일이 없다. 하지만 프로젝트가 JSON을 이용해 자료를 교환한다는 사실을 알아야 한다.