UI

User Interface의 약자

유저가 소프트웨어가 만나는 경계다.
입력, 출력, 삭제와 같은 수단을 이용해 사용자가 컴퓨터와 상호작용(의사소통)을 하는 시스템이다.

GUI : 사용자가 편리하게 사용하기 위해 기능들을 그래픽으로 나타냄
CLI : 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식

API

Application Programming Interface

API 설명
RESTful API 설명

UI와 API를 같이 설명하는 이유는 뭘까

API의 역할은 DB와 server의 통신구 역할이고 application과 기기가 데이터를 원활히 통신이 가능하게 해준다.

즉 API의 아키텍처의 수준에 따라 UI와 UX의 수준도 달라진다고 생각한다.

---

Server

API들을 만들어주고 사용할 수 있게 해주는 server를 이용해야한다.

node의 내장 모듈을 사용하거나 express라는 framework를 이용한다.

---

1. node.js의 내장 모듈 http를 사용해서 만드는 server

const http = require("http");
const { something } = require("./something");

const server = http.createServer((req, res) => {
  const { url, method } = req;
  if (url === "/") return res.end(<h1>You're at Home</h1>);
  if (url === "/some" && method === "GET") return something(res);
});

server.listen(port, () => {
  console.log(`server is running on PORT ${port}`);
});

위와 같이 url과 method를 if문을 통해 한땀한땀 작성해야한다.
만약 routing 해야하는 url들이 엄청 커진다면 RESTful API를 작성하는데 많은 시간이 들고 유지보수가 겉잡을 수 없게될 것이다.
따라서 express를 사용한다.

---

2. expree를 이용해 만드는 server

const http = require("http");
const express = require("express");
const { something } = require("./something");

const app = express();
app.use(express.json());

app.get("/", (req, res) => <h1>You're at Home</h1>);
app.get("/some", (req, res) => something);

const server = http.createServer(app);

server.listen(port, () => {
  console.log(`server is running on PORT ${port}`);
});

if문으로 routing처리를 하지 않고 method도 app뒤에 method처럼 붙이고 사용해 직관적이고 쉽게 사용가능하게 되었다.

middleware도 쉽게 만들 수 있다.

const middleWare = (req, res, next) => {
  res.send("I'm middleware");
  next(); // next가 없는 return은 미들웨어를 중단 시킴
};

const handleHome = (req, res) => {
  return res.end("I'm home");
};

app.get("/", middleWare, handleHome);

---

response

일단 api를 만들어서 routing하게 만드는 법은 알게되었지만 app뒤에 붙는res.send, res.end.. 는 뭘까

app.method((req,res,next)=>res.end(내용));

1. res.send
   JSON 이외의 형식으로 문자열 응답을 보낸다.
   res.send([body])의 body에는 Buffer, String, Object, Array가 올 수 있다.
   그리고 response Header에는 Body의 Content-Type이 자동으로 정의된다.

💻 JSON 형식으로 데이터를 보냄

app.get('/potal/seoul', (req, res) => {
 res.send({ region: 'seoul' });
});

2. res.json

   res.json은 JSON을 응답으로 보낸다.
   res.json은 JSON 정보를 전달하는데 더 특화된 기능을 가지고 있다.
   Content-Type을 자동으로 JSON으로 고정한다

3. res.end

데이터를 제공하지 않고 응답을 끝내려면 res.end()를 사용

res.send() , res.json() 같은 형태는 데이터를 보낸 뒤에 자동으로 응답 종료처리를 하기 떄문에 res.end() 굳이 사용할 필요가 없다.

404와 같은 status가 오류를 내거나 응답후 종료를 하고 싶을때 사용한다.

---

status code

status code란 브라우저가 서버와의 소통이 되는 상태다.
상태코드에 따라 url history를 남기데 error 상태를 보낸다면 기록을 하지 않는다.

일반적인 소통이 된 상태는 200번대 (OK)를 사용하고 대부분 에러를 낼때는 400번대를 사용한다.

app.get((req,res)=>
res.status(404).end('errorPage'););