API URL 설계 & 프로젝트 세팅

Interface(API 개념에서)

• Application Programing Interface
• 클라이언트가 어떠한 내부 로직에 대한 요청을 보낼 때, 전체 로직을 알 필요 없이 api를 사용하여 콜을 보내면, 서버가 그 요청을 받아서 처리할 수 있게 해줌.
• 즉 api는 클라이언트 단에서 사용하는 메서드의 interface이다.
• 클라이언트는 복잡한 내부 로직을 이해할 필요 없고, 개발자는 해당 로직에 대한 encapsulation을 할 수 있어 편리하다.

 

Interface 사용 예

• 위 용어들에서 Interface가 들어가는 이유와 해당 복합어들에서 Interface라는 단어가 가지고 있는 의미

CLI(Command Line Interface)

 

명령줄 인터페이스(CLI)는 Command-Line Interface 또는 Character User Interface의 줄임말로 글자를 입력하여 컴퓨터에 명령을 내리는 방식이다. 가장 대표적인 예시로는 DOS, 명령 프롬프트, bash로 대표되는 Unix 셸 환경이 있다. macOS에서는 Terminal, Windows의 Windows Terminal 등이 있다.

• 우리가 커맨드라인에서 명령어를 사용하여 원하는 정보를 얻지만, 그것이 어떻게 동작하는지는 알지 못한다.
• 명령을 받은 운영체제는 해당 interface의 내부 로직을 실행하여, 다시 사용자에게 정보를 반환한다.
• 사용자 <-   interface   -> 운영체제 
• 즉 interface는 사용자와 운영체제간의 소통을 위한 창구. 

 

GUI(Graphiccal User Interface)

Graphical User Interface의 약자. 현대 운영 체제는 물론이고 온갖 게임이나 유틸리티 등에서도 모두 이용되고 있다.

CLI와 GUI의 차이를 알기 쉽게 설명하면, CLI는 음식을 주문할 때 점원에게 말 또는 글로 주문하는 것이고, GUI는 점원에게 음식이 그려진 메뉴판에서 원하는 것을 가리키며 달라고 하는 것과 같다.

장점 역시 이와 같은데, GUI는 일단 눈에 확 띄어서 뭘 하는지 잘 보인다는 점과 쉽고 직관적인 조작 방식이 있다. 따라서 컴퓨터 언어를 몰라도 조작이 가능한데, 비유를 하면 외국 식당에 가서 주문을 넣을 때, 해당 지역의 언어를 구사할 줄 몰라도 단순히 메뉴판의 그림을 가리키는 것만으로도 주문이 가능한 것과 같다. 그밖에 CLI는 추상적인 명령어를 입력해야 했고, 명령을 입력해서 이게 잘 되나 안 되나 직접 눈으로 보는 것도 힘들었지만 GUI는 알기 쉽게 그래픽으로 다 표현해준다. 조작도 명령어 입력 이런 거 없고 그냥 마우스 커서 갖다 대서 클릭만 하면 다 된다.

• 우리가 웹이나 앱 상에서 어떤 버튼(그래픽)을 클릭하면 해당 그래픽과 연동된 명령이 내부 로직에서 실행된다.
• 클릭, 혹은 사용자 요청과 내부 로직 사이의 변경 및 반환이 interface를 통해 이루어진다.

 

UI(User Interface)

일반적으로, 작은 도구들의 사용에 대한 것부터 큰 기계시스템의 제어와 처리를 하는 것까지 다양한 개념들을 포괄한다. 사용자 인터페이스는 사람(사용자)과 컴퓨터시스템 사이의 의사소통 매개를 의미한다. 이 의사소통은 해당 기기에 대해 효율적인 작동과 사용자의 제어를 보장하는 것을 목표로 한다. 주변의 터치스크린, 마우스 등은 UI를 물리적으로 볼 수 있는 좋은 예시이다.

UX와 혼동을 하는 경우가 있는데 UX가 좀더 포괄적인 개념이다.

• 우리가 컴퓨터를 동작시킬 때는 그저 전원 버튼 하나만 누르면 된다.
• => 컴퓨터의 동작이라는 내부 로직에 대해 전혀 알 필요가 없다. 
• 이처럼 어떤 동작과, 그 동작이 실행되는 내부 과정 사이의 매개체 역할을 해주는 것이 interface.

 

REST API

• Representational State Transfer API
• HTTP method를 기반으로 작성된 api를 의미한다.

 

프로토콜

• 네트워크 상에서 데이터를 주고받는 규약. HTTP도 프로토콜의 일종이다.

HTTP

• 웹 상에서 클라이언트와 서버간의 request와 response를 주고 받을 때 사용된다.
• Start line, Header, Body로 구성되어 있다.

 

HTTP Start Line(request, response 둘 다 조사)

• 무조건 한 줄로만 구성됨.

Start line - Request

• Method + Path or Query + HTTP version

• Method : 수신 서버에서 어떤 작업을 해야 하는지 알려준다. (GET, POST, .... )
• Path or Query : 해당 작업이 위치한 경로, URL

Ex ) POST /users/login HTTP/1.1

 

Start line - Response

• HTTP version + Response message

• Response message : 서버에서 해당 요청이 잘 처리 되었는지에 대한 응답
• => 100 ~ 500 사이의 여러 응답 메세지 존재, ex) 200 OK, 400 Bad requset

Ex) HTTP/1.1 200 OK

 

 

HTTP Header

• HTTP 메세지에 대한 정보를 담음 ( key  : value )
• Ex) Content-Type, Authrization ... 
• 종류가 굉장히 많다.

 

HTTP Body(request, response 둘 다 조사)

• 실제로 보낼 메세지.
• 메서드에 따라 필요하지 않을 수도 있다.

 

Body - Request

 

{
	"id" : "hi"
	"password" : "1234"
}

• 클라이언트가 이런 식으로 요청을 넣는다

 

Body - Response

{
	"username" : "haha"
	"content" : "hihi"
}

• 서버가 해당 요청에 대한 로직에 맞게 처리를 하고, 반환값을 돌려준다.

 

HTTP Status Code

• 요청의 처리에 대한 상태 값을 나타냄

출처 : https://hongong.hanbit.co.kr/http-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-%ED%91%9C-1xx-5xx-%EC%A0%84%EC%B2%B4-%EC%9A%94%EC%95%BD-%EC%A0%95%EB%A6%AC/

 

 

 

 

HTTP Method

• 다음 HTTP Message 구조 분석

request

 

GET / HTTP/1.1
Host: ryanclaire.blogspot.com
Connection: keep-alive
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

 

Start Line

• GET / HTTP/1.1
• => resource를 가져오는 GET 메서드와, HTTP 버전

Header

• Host: ryanclaire.blogspot.com

=> 요청하는 서버의 호스트명. 하나의 IP 주소가 여러 도메인이을 호스팅 할 수 있으므로 필요하다.

• Connection: keep-alive

=> 연결을 유지하여 동일한 연결을 통해 여러 요청과 응답을 주고 받을 수 있게 함

 

• DNT: 1

=> Do Not track, 사용자가 추적을 원하지 않을 때 사용

 

• Upgrade-Insecure-Requests: 1

=> 클라이언트가 가능한 경우 보안 연결(HTTPS) 로 업그레이드 하는 것을 서버에 요청

=> HTTP => HTTPS 로 업그레이드 하는 것

 

• User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36

=> 클라이언트의 소프트웨어와 버전을 명시.

=> 서버가 이 정보를 기반으로 최적화된 콘텐츠를 제공

 

• Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

=> 클라이언트가 이해할 수 있는 콘텐츠 유형 (html, xhtml, xml..)

 

• Accept-Encoding: gzip, deflate

=> 클라이언트가 지원하는 콘텐츠 인코딩 방식 

=> 서버가 gzip이나 deflate로 압축하여 전송 가능

 

• Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

=> 클라이언트가 선호하는 언어 

 

 

Body

X

GET 메서드는 보통 바디가 없다.

 

 

response

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Expires: Fri, 16 Oct 2020 03:24:32 GMT
Date: Fri, 16 Oct 2020 03:24:32 GMT
Cache-Control: private, max-age=0
Last-Modified: Thu, 15 Oct 2020 14:47:59 GMT
ETag: W/"5ff21f5b961238a44cb1cd27f6e753ccd873730fc8c28050213852c3fa960c18"
Content-Encoding: gzip
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Server: GSE
Alt-Svc: h3-Q050=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
Transfer-Encoding: chunked --중략--

 

Start line

• HTTP/1.1 200 OK

=> 요청이 성공적으로 반환 됨

 

Header

• Content-Type: text/html; charset=UTF-8

=> 응답 콘텐츠 유형, html 문서와 UTF-8로 인코딩 됨

 

• Expires: Fri, 16 Oct 2020 03:24:32 GMT

=> 응답의 유효 기간, 이 시점 이후로 응답이 더이상 캐시되지 않아야 함

 

• Date: Fri, 16 Oct 2020 03:24:32 GMT

=> 응답이 생성된 날짜와 시간

 

• Cache-Control: private, max-age=0

=> 캐싱 정책

=> private :  응답이 특정 사용자 환경에 저장 될 수 있

=> max-age = 0 : 캐시 유효시간, 0은 응답 즉시 만료

• Last-Modified: Thu, 15 Oct 2020 14:47:59 GMT

=> resource의 마지막 수정 시간

 

• ETag: W/"5ff21f5b961238a44cb1cd27f6e753ccd873730fc8c28050213852c3fa960c18"

=> resource의 특정 버전을 식별함.

=> 최신 resource인지 확인 => 변경되었나 확인 가능

 

• Content-Encoding: gzip

=> gzip으로 압축되었음

 

• X-Content-Type-Options: nosniff

=> 브라우저가 MIME 타입을 추측하여 실행시키는 것을 방지

 

• X-XSS-Protection: 1; mode=block

=> 브라우저의 XSS 필터를 활성화, 공격이 탐지되면 페이지 로드를 차단

 

• Server: GSE

=> 응답을 생성한 서버 소프트웨어

=> GSE : Google Server Engine

 

• Alt-Svc: h3-Q050=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"

=> 여러 프로토콜 버전과, 그 만료 기간을 명시

 

• Transfer-Encoding: chunked --중략--

=> 응답 본문이 chunk로 나뉘어 전송 

 

 

API endpoint

• 해당 API를 호출하기 위한 HTTP 메서드와 URL

 

json

• Java Script Object Notation

{
	name : value
}

 

• 데이터를 쉽게 교환하고 저장하기 위한 텍스트 기반 데이터 포맷

 

multipart

• 클라이언트가 전송할 때, body 부분에 데이터를 여러 부분으로 나눠서 보내는 방식
• 파일을 보낼 때 이런식으로 쪼개서 보내기 때문에 많이 사용.
• 파일을 포함한 텍스트, 음악 등 여러 타입을 같이 전송할 때 사용한다

MultiPartFile

• 텍스트 외의 파일 정보 등을 전송할 때 사용하는 데이터 포맷

 

path variable

• request시 특정 resource를 집어서 해당 작업을 처리하고 싶을 때 사용
• GET /issues/{issueId}
• path variable까지만, API endpoint에 포함된다. 

 

query string

• request시 특정한 조건을 가지고, 해당하는 작업을 모두 처리하고 싶을 때 사용.
• GET /users/issues?userId=hi

 

request body

• 클라이언트가 json 형태의 파일을 request body에 담아서 전송함.
• 전송하고자 하는 내용을 URL에 그대로 노출하는 것은 위험하기 때문에 하는 방식.

 

request header

• 전송되는 내용에 관련된 기타 정보들이 담기는 부분
• Content-Type 혹은 Authorization 같은 정보