TIL - 22.02.07

 

개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

2월 7일(월)

---

UI & API & HTTP Flow

1. UI

 

1. UI(User Interface)는 유저가 소프트웨어와 만나는 경계면, 즉 유저가 소프트웨어에 접근하고 명령을 내릴 수 있는 부분을 일컫는 말이다. 
2. 또한 스크린, 키보드, 마우스, 웹 브라우저 등이 UI에 해당되며 사람이 소프트웨어나 시스템에 접촉할 수 있는 것을 의미한다.
3. 웹 서비스에서 "UI를 만든다"라는 표현은 사용자가 직접 사용하고, 정보를 알아들을 수 있는 "웹 페이지 화면을 만든다" 라는 의미로 사용되기도 한다.

 

 

2. API

 

1. API(Application Programming Interface)는 어플리케이션과 어플리케이션이 서로 의사소통을 하고 데이터를 교환할 수 있도록 매개체가 되어주는 대상이다.
2. 우리가 스마트폰으로 어플리케이션을 사용하면, 어플리케이션은 인터넷을 연결하고, 서버로 데이터를 전달한다. 그 후에 서버는 데이터를 전달받아 해석하고 적절한 기능을 수행한 뒤, 다시 우리 스마트폰 어플리케이션으로 필요한 정보를 전송해준다. 스마트폰 어플리케이션은 받은 데이터를 다시 해석해서 우리가 읽을 수 있는 방법으로 표현해주며 이 모든 과정을 API라고 한다.
3. 즉, 우리는 API를 통해 일련의 통신과정을 거쳐 연결된 두 어플리케이션을 모두 사용할 수 있으며 오직 필요한 정보만을 교환하기 때문에 보안 측면에서도 안전하다.

 

 

3. HTTP Flow

 

(UI : HTTP request)

fetch("/order", {
	body: JSON.stringfy({ order: ["bigmac set", "cheese stick"] })
})

 

(API : request confirm)

app.get("/order", (req, res) => {
  console.log(req.body.order);
  // ["bigmac set", "cheese stick"]

	...logic
})

 

 

(...)

 

(API : ready to response)

app.get("/order", (req, res) => {
  ...logic

	res.json([
    { name: "bigmac", quantity: 1 },
    { name: "french fries", quantity: 1 },
    { name: "coke", quantity: 1},
    { name: "cheese stick", quantity: 1}
  ]);
})

 

(UI : HTTP response)

fetch("/order", {
	body: JSON.stringfy({ order: ["bigmac set", "cheese stick"] })
})
.then((res) => res.json())
.then((jsonData) => {
	console.log(jsonData);
	// [
  //   { name: "bigmac", quantity: 1 },
  //   { name: "french fries", quantity: 1 },
  //   { name: "coke", quantity: 1},
  //   { name: "cheese stick", quantity: 1}
  // ]
})

 

위의 예시처럼 UI와 API가 통신하는 과정이 HTTP Flow이며, 요청과 응답은 한 세트이다.