Sprint 6 - Interaction With Server

dlrbwls0302·2021년 2월 3일
0

Achievement Goals

  • 클라이언트, 서버, API 가 무엇인지 정의 내릴 수 있다.
  • 웹 개발과 관련한 클라이언트-서버 아키텍처를 이해할 수 있다.
    1) 클라이언트와 서버가 서로 통신하기 위해 사용하는 HTTP 프로토콜에 대해 이해할 수 있다.
  • HTTP 메소드의 종류를 이해할 수 있다.
  • HTTP 메시지가 어떤 구성으로 이루어져 있는지 이해할 수 있다.
  • 서버에서 정의한 API 문서를 통해, 서버가 제공하는 리소스를 이용할 수 있다.
    1) API 테스팅 툴 Postman을 이용할 수 있다.
  • API를 활용해서 UI를 만들 수 있다.
  • AJAX가 무엇이고, 왜 필요한지를 이해할 수 있다.
  • AJAX 통신을 가능하게 하는 fetch API를 이용할 수 있다.

클라이언트와 서버

쇼핑몰 앱은 인터넷 어딘가에 존재하는 서버에서 정보를 받아와서 화면에 뿌려주기 때문에 인터넷의 연결 없이는 쇼핑몰 앱을 사용할 수 없다. 만약 판매하는 상품 정보가 앱 안에 전부 들어있다면 상품 하나를 업데이트 할 때마다 앱 자체를 업데이트 해야하는 불편함이 있을 것이다.

보통은 클라이언트를 서버에 저장된 리소스를 사용하는 고객으로 생각하고 서버를 리소스가 존재하는 곳으로 생각하면 된다. 클라이언트는 서버에 요청을 하고, 서버는 그 요청에 알맞은 응답을 다시 보내주면 된다.

이렇게 3-Tier 아키텍처로 존재하는 경우도 있다. 서버와 데이터베이스를 분리해서 클라이언트가 서버에 요청하면 서버는 데이터베이스에서 요청에 알맞은 데이터를 찾은 뒤 다시 클라이언트에게 응답하는 방식이라고 보면 된다.

사용자와 직접적으로 소통(interact)하며 사용자의 요청(예를 들어 로그인이나 결제 등)을 서버에 보내주는 부분을 프론트엔드(클라이언트)라고 하고, 프론트엔드에서 보낸 요청을 토대로 데이터를 찾거나, 삭제하는 등의 요청에 응답하는 작업을 하는 부분을 백엔드(서버)라고 한다.


HTTP

프로토콜(protocol)은 통신 규약, 약속으로 클라이언트가 서버에 뭔가 요청을 할 때 이 규약에 맞게 요청을 해야만 서버가 알아들을 수 있다. 우리가 카페에 가서 주문을 할 수 있는 방법이 여러 가지(직접 카운터에 간다, 모바일 앱을 이용한다, 키오스크를 이용한다)가 있는 것처럼 우리가 서버와 통신할 수 있는 방법도 여러 가지가 있다.

위 사진처럼 우리가 서버와 통신할 수 있는 방법이 다양한데 각 프로토콜 마다 정해진 규칙을 따라야지만 서버와 제대로 된 통신을 할 수 있다.

1. HTTP 메소드

위 사진은 HTTP 메소드로서 HTTP 요청시 이 메소드들을 잘 이용해서 리소스에 접근해야 한다.

2. HTTP 요청 예시


이것이 실제 HTTP 요청과 응답을 보여주는 예시이다. 둘의 구조는 서로 닮았으며 그 구조를 설명해 보면 이렇다.

1) 빨간색 네모칸이 있는 곳이 바로 시작 줄(start-line)이다. 요청 부분에서의 시작 줄에는 실행되어야 할 요청이 있다. 이 줄은 항상 한 줄로 끝난다. 여기서 나오는 POST는 HTTP 메소드이고 HTTP/1.1은 HTTP 버전을 의미한다.

2) 두 번째 줄부터는 헤더이다. User-Agent, Upgrade-Insecure-Requests 등등이 헤더에 속한다. HTTP 헤더의 기본 구조는 대소문자 구분없는 문자열 다음에 콜론(':')이 붙고 그 뒤에 오는 값은 헤더에 따라 달라진다.

3) 본문은 헤더에서 한 줄을 띄고 시작한다. 본문은 요청 시에 함께 보낼 데이터를 담는 부분이다. 모든 요청에는 본문이 필요없고, 일부 요청은 업데이트를 하기 위해 서버에 데이터를 전송하고 이럴 때 본문이 필요하다. 보통 POST 요청일 경우에 그렇다.

3. HTTP 응답 예시

1) 빨간 색 네모칸이 응답의 시작 줄(상태 줄)이다. HTTP/1.1은 프로토콜 버전이고 202, 404, 302같은 숫자를 상태 코드라고 한다. 이 상태 코드는 요청의 성공 여부를 나타낸다. Forbidden이나 Not Found는 상태 텍스트로 상태 코드에 대한 설명을 글로 나타낸 것이다.

2) 두 번째 줄부터는 헤더이다. 기본적인 구조는 요청과 흡사하다.

3) 본문은 응답의 마지막 부분에 들어간다. 모든 응답에 본문이 들어갈 필요는 없고, 201, 204와 같은 상태 코드를 가진 응답에는 보통 본문이 없다.

4. HTTP 특징

1) Connectionless: HTTP의 클라이언트가 요청을 보내면 서버는 응답을 해준다. 응답을 보냄과 동시에 서버와 클라이언트의 연결이 끊기게 되고 따라서 서버와 클라이언트는 서로 요청과 응답을 주고받을 때를 제외하고는 서로가 누구인지 모른다. 다음에 할 요청과 응답은 새로운 연결 상태에서 진행되면 마치 서버와 클라이언트는 처음 만난 사이처럼 행동한다.

2) Media independent: 어떤 종류의 데이터(이미지 등)든 HTTP를 통해 전달될 수 있다.

3) Stateless: 위에서 언급한 것 처럼 서버와 클라이언트는 현재의 요청을 보냈을 때만 잠시 연결되고 그 후에는 연결이 끊기게 되어 서로에 대해 모르는 상태가 된다.


API (Application Programming Interface)

클라이언트는 서버에 여러가지 요청을 할 수 있다. 예를 들어 "로그인 시켜줘.", "회원 정보 가져와줘.", "이 메세지를 삭제해줘." 등의 요청을 서버에 보낼 수 있다. 그런데 서버는 우리가 보낸 요청을 이해할 수 가 없다. 우리가 "로그인 시켜줘."라는 요청을 보냈는데 컴퓨터는 한글을 모르기 때문에 이 말이 무슨 뜻인지 이해할 수 없고, 따라서 우리의 요청에 제대로 된 응답을 할 수가 없게 된다.

그렇다면 클라이언트와 서버에 뭔가 중간 다리같은 역할이 있어, 클라이언트의 요청을 서버가 알아들을 수 있게 바꿔줘야 할 뭔가가 필요한데 그 역할을 하는 것이 바로 API이다. API는 마치 식당의 메뉴판 같아서 우리가 어떤 음식을 주문할 수 있는지 (고깃집에 가서 회를 주문할 수 없듯이) 상세히 알려준다. API가 없다면 우리는 서버에 어떻게 요청할 수 있는지 알 방법이 없다.

API가 진행하는 형태는 다음과 같다. 클라이언트는 요청을 보내는데 그 요청의 형식은 보통 '서버주소/A'의 형태로 온다. 여기서 서버주소는 서버(컴퓨터)의 IP 주소를 의미한다. A는 요청의 종류인데 예를 들어 A가 로그인을 요청하는 문자일 경우, '서버주소/A'는 "xx IP 주소에 있는 서버(컴퓨터)야 로그인을 진행해줘"라고 이해하면 될 것 같다.


AJAX (Asynchronous JavaScript and XML)

AJAX는 자바스크립트를 이용하여 비동기적으로 브라우저(클라이언트)와 서버가 데이터를 주고 받는 방식을 뜻한다. 사실 XML(HTML과 같은 마크업 언어)이라고 했지만 실제로는 XML 형식보다는 JSON(JavaScript Object Notation) 형식의 데이터를 더 많이 주고 받으며 받은 JSON 형식의 데이터를 가지고 우리는 DOM을 제어하여 원하는 정보를 프론트 엔드에 적용하여 사용자가 그 정보를 시각적으로 볼 수 있게 해준다.

XML을 이용한 XMLHttpRequest는 불필요한 태그가 붙어서 주고받는 파일의 크기가 커지기 때문에 JSON 형식의 데이터에 비하면 비효율적이다.

1) 객체를 JSON으로 만드는 방법: JSON.stringify()


위의 예시처럼 객체의 원하는 프로퍼티만 JSON으로 바꿀 수도 있다.

2) JSON을 객체로 만드는 방법: JSON.parse()
JSON.stringify(객체)를 하게 되면 객체안의 프로퍼티는 전달이 되지만, 객체안의 메소드는 사라지게 된다.
따라서 JSON.stringify(객체) -> JSON.parse(객체)를 하게되면 객체안의 메소드는 없다.

3) JSON으로 받아온 객체와 기존의 객체가 어떻게 다른지 알 수 있는 사이트: jsondiff.com

1. AJAX를 사용하는 이유

기본적으로 HTTP프로토콜은 클라이언트쪽에서 request를 보내고 Server쪽에서 response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원 낭비와 시간 낭비를 초래하고 말 것이다. 하지만 AJAX는 html 페이지 전체가 아닌 일부분만 갱신할수 있도록 XML HttpRequest 객체를 통해 서버에 request를 한다. 이 경우 JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

비동기적으로 데이터를 주고 받는다고 했는데 이런 비동기 통신은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 AJAX를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다. 만약 웹페이지를 리로드하는 경우에는 전체 리소스를 다시 불러와서 화면에 뿌려주기 때문에 화면의 깜빡임 현상이 발생하지만 비동기적인 방식일 경우 필요한 부분만 렌더링하기 때문에 깜빡임 없이 작동하게 된다.

현재는 XMLHttpRequest -> jQuery -> fetch API 라는 것을 이용하고 있다.

profile
오늘의 공부가 쌓여서 내일의 나를 만들어낸다.

0개의 댓글