[개념] 백엔드와 프론트엔드의 통신

개요

• http란?
• rest API의 사용
• URL 구조(API 디자인)
• URL PARAMS 매개변수 사용하기

HTTP란?

사용자(프론트엔드)와 백엔드간 일련의 요청과 응답으로 이루어진 인터넷 통신 프로토콜입니다.

단순히 페이지에 접속할때도 이와같은 요청-응답이 이루어지며, 예를들어 www.google.com 이라는 주소에 접속한다면 서버에 구글 페이지를 보여달라고 요청하고, 페이지를 응답받는 통신을 하게되죠.

페이지에 접속할때 가끔 나타나는 '서버가 응답하지 않습니다'같은 오류도 페이지를 보여달라고 요청했으나 여러 문제로 인해 응답이 오지 않는다는 의미입니다.

 

페이지 뿐 아니라 서버도 http 프로토콜로 통신하고 있습니다.

예를들어 '유저 정보 페이지'를 사용자가 요청하면, 프론트엔드 서버에서는 백엔드 서버에 '유저 정보'를 요청하고, 백엔드 서버가 유저 정보를 프론트엔드 페이지에 응답하는 식이죠.

rest API의 사용

rest API는 간단하게 http 프로토콜에 몇 가지 규칙을 추가한 것이라고 볼 수 있습니다.

일반적인 브라우저에서는 페이지를 보여달라는 요청밖에 보내지 못하지만, 서버 내부에서나 개발 목적으로 사용되는 프로그램에서는 특정한 데이터를 저장하라는 요청이나, 데이터를 교체하라는 요청도 보낼 수 있습니다.

이때, www.google.com 에 접속하는 행위는 내부적으론 GET http://www.google.com 으로 취급되어 구글이라는 페이지를 보여달라는 요청으로 간주하게 됩니다.

앞에 붙는 GET은 http 메소드라고 하며, 다음과 같은 메소드를 사용할 수 있습니다.

• GET
  • 특정 리소스의 표시를 요청한다.
  • 페이지를 불러올 때, 페이지에서 쓸 데이터를 요청할때
• POST
  • 특정 리소스에 엔티티를 제출한다(주로 데이터를 생성할때 사용됨).
  • 회원가입 후 회원 정보를 서버로 제출할때
• DELETE
  • 특정 리소스를 삭제한다.
  • 회원 정보를 삭제할때
• PATCH
  • 리소스의 부분을 수정한다.
  • 회원 정보의 일부를 수정할때

네 가지만 소개했는데, 이외에도 CONNECT나 OPTIONS등 여러 메소드를 사용할 수 있습니다.

URL 구조(API 디자인)

백엔드와 프론트엔드도 http 프로토콜로 통신하기 때문에 서버도 일정한 url을 갖고있습니다.

http://api.com 이라는 url을 예시로 설명하겠습니다.

이 서버는 사용자의 정보를 관리하는 url인 http://api.com/user 라는 url을 갖고있고, 다음과 같은 메소드를 지원합니다.

이때, 아무 사용자의 정보를 요청할 수 없도록 url에 매개변수를 담아서 보낼 수 있습니다.

 

URL PARAMS 매개변수 사용하기

params는 parameter의 줄임말이며, url에서 사용하는 매개변수입니다.

이 글에는 https://flreauniverse.tistory.com/19라는 url이 할당되어 있습니다. 제 블로그의 19번 글을 불러온다는 요청이고, 19번 글은 바로 이 글을 말합니다.

서버 내부적으로도 프론트엔드 서버에서는 url의 19라는 id를 읽고, 백엔드 서버에 19번 글의 정보 요청하게 되죠.

url 뒤에 붙는 매개변수를 params라고 하며, 다음과 같이 사용할 수 있습니다.

위와같이 매개변수는 주로 콜론을 사용하여 나타내고 사용합니다.

단, URL에서 매개변수를 입력할 경우, POST 메서드는 사용하지 않습니다. 그 이유가 왜라고 생각하시나요?

정답은 "id가 존재한다면 이미 생성된 데이터이기 때문"입니다.

데이터가 생성될 때, 데이터의 고유 id는 사용자가 임의로 설정할 수 없습니다.

따라서 POST http://api.com/user/20230101 의 경우 고유 id가 20230101인 유저를 생성하라는 요청으로 본다면 그럴듯 하지만, 사실은 POST http://api.com/user 에 요청을 보내 랜덤한 고유 id를 배정받도록 하는게 바람직합니다.