티스토리 뷰
반응형
API와 REST API의 개념
1) API(Application(관점에 따라 다름) Programming Interface(프로그래밍으로써 논리적으로 만들 수 있는 인터페이스))란? 내가 작성한 코드를 너가 사용하기 편하게 인터페이스를 제공해줄게 라고 통용되는 것
-
- API는 애플리케이션끼리 연결해주는 매개체이자 약속이라고 볼 수 있습니다.
2) 그럼 현실에서는 어떤것을 API로 비유할 수 있을까?
-
- 키보드로 글자를 입력하면 키보드는 우리가 작성한 글자를 컴퓨터에 전달해주는 역할을 합니다. 우리가 키보드의 키를 누르는것이 API를 호출하는것으로 볼 수 있습니다.
- 어떤 연인은 서로 기분이 상할것 같으면 미리 “윙크”를 하기로 약속(약속으로 데이터전달)했습니다. 대화하다 갑자기 “윙크”를 본 상대방은 기분이 나쁜것을 알아채고 은근히 기분을 풀어주려 노력합니다. 이러한 약속 또한 API라고 볼 수 있습니다.
3) 우리가 API를 작성한다는 의미는?
-
- 웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미입니다.
- 우리가 작성 할 API에서 원하는 데이터를 받아 데이터베이스에 데이터를 저장하고, 저장되어 있는 데이터를 읽어서 웹 어플리케이션(프론트엔드)에 데이터를 제공하는 행위를 통해 사용자가 원하는 목적을 이룰 수 있게 해야 합니다.
4) 그럼 REST API는 어떤 의미를 갖는 API인가?
-
- REST API, RESTful API 라고 들어보셨나요? 여기서 REST란 무슨 의미일까요?
- REST는 “Representational State Transfer”의 줄임 말로, 위키를 따르면 다음과 같습니다.
더보기
REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다.
- 최대한 간단하게 설명하자면 URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉬운 표현으로 정의한다고 이해하면 됩니다. 또한 이 “REST 아키텍쳐”는 사람이 봐도 쉽게 이해할 수 있도록 “자원”을 정의하고 이 “자원”을 중심으로 표현을 구성하는 원칙을 제시합니다. - 자기 서술적 메세지
- REST API는 “REST 아키텍쳐”라는 규칙을 따르는 API라고 생각하시면 됩니다.
- REST API의 구성은 크게 세 가지로 이루어 집니다
- 자원(Resource) - URL
- 우리가 만들 소프트웨어가 관리하는 모든 것을 자원으로 표현할 수 있습니다. 쇼핑몰이라면 상품(Goods)에 대해서 정보를 관리할것이고 또는 장바구니(Carts)에 담긴 상품들도 관리해야겠죠. - 이것도 관점에 따라 다름(만든 사람 마음)
- 행위 - HTTP method
- 이전에 배웠던 HTTP method 기억나시나요? GET, POST 등등이 있다고 했었는데요. 이것으로 해당 자원에 대한 행위를 표현할 수 있습니다. 예를 들어 GET 메소드는 해당 자원의 조회, POST 메소드는 해당 자원의 생성 이런 식으로요.
- 이렇게 나누어진 것을 보통 CRUD 라고 합니다. 자원에 대한 생성/조회/수정/삭제를 각각의 method 로 나누어놓은 것이지요.
더보기
Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT) , (Patch) put은 리소스를 통째로 바꿔낀다. patch는 일부 데이터만 바꿔낀다.(게임 패치)
Delete : 삭제(DELETE)
-
- 위 이미지의 예시처럼 쓰이는 것이 일반적인 method 사용방식입니다. 하지만 이것은 필수인 부분이 아니고 모든 곳에서 다 이렇게 지켜서 사용하지는 않습니다. 상황에 따라 저것을 완벽하게 지키기 어려운 부분들도 있으니 이 부분 참고 해주세요.
- 표현
- 해당 자원을 어떻게 표현할지에 대한 설명입니다. 보통 JSON, XML 같은 형식을 이용해서 자원을 표현합니다.
- HTTP에서는 Content-Type 이라는 헤더를 통해 표현 방법을 서술합니다.
- REST API 예시
-
router.get('/books', (req, res) => { res.json({ success: true, data: getAllBooks() }); });- 위의 예시 코드는 /books 라는 URL을 통해 전체 책 목록을 불러와 응답해 주는 역할을 하는 API입니다.
- 위의 API는 REST API의 관점에서 보았을때 URL로 리소스를 구분할 수 있고 다른 표현이 없으므로 전체 리스트를 불러오는것을 짐작 할 수 있습니다.
- 또한 CRUD 중 Create를 담당하는 HTTP 메소드로 표현하여 REST한 API라고 볼 수 있습니다.
REST API 개발
-
- 상품 목록 조회 API 구현하기
- 구현하려면 어떻게 해야 할까요?
- 상품 목록 조회 API에서는 모든 상품이 한번에 다 나올수 있어야 합니다.
- 예를들어 get 메소드를 이용해서 /goods 라는 주소로 들어갔을때 모든 상품 목록이 response로 응답해서 json 포맷으로 상품 목록이 보여야 합니다.
- 이번 주차에서는 데이터베이스를 사용하지 않기때문에 router폴더에 goods.js 파일을 생성한 뒤 아래의 json 데이터를 저장해주도록 합니다.
- 예시 데이터를 활용해 응답할 수 있도록 만들어보세요!
- 응답 값 예시
- http://localhost:3000/api/goods 에 접속했을때 아래와 같이 보이면 제대로 작동한것입니다.
{ "goods": [ { "goodsId": 4, "name": "상품 4", "thumbnailUrl": "<https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg>", "category": "drink", "price": 0.1 }, { "goodsId": 3, "name": "상품 3", "thumbnailUrl": "<https://cdn.pixabay.com/photo/2016/09/07/02/12/frogs-1650658_1280.jpg>", "category": "drink", "price": 2.2 }, { "goodsId": 2, "name": "상품 2", "thumbnailUrl": "<https://cdn.pixabay.com/photo/2014/08/26/19/19/wine-428316_1280.jpg>", "category": "drink", "price": 0.11 }, { "goodsId": 1, "name": "상품 1", "thumbnailUrl": "<https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg>", "category": "drink", "price": 6.2 } ] }
-
- 상품 상세 조회 API 구현하기
- 구현하려면 어떻게 해야 할까요?
- 이번 API에서는 특정 상품의 상세 조회를 위해서 기존 상품 목록 주소 이후에 URL Parameters로 상품 id로 특정 상품 상세 조회를 해야합니다.
- URL Parameters?
- router 주소에 쓰이는 특수한 패턴중 하나인데 예를 들어 상품 목록 조회 API의 주소가 /goods 였다면 그뒤에 /:goodsId 라는 값을 추가해서 요청시 id값을 받아올 수 있습니다.
- 이 값은 API 내에서 req.params 객체 안에 들어있는것을 확인할 수 있습니다.
- 응답 값 예시 (http://localhost:3000/api/goods/1 요청 예시)
더보기
{
"detail": {
"goodsId": 1,
"name": "상품 4",
"thumbnailUrl": "<https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg>",
"category": "drink",
"price": 0.1
}
}
-
- app.js 예시
더보기
//상품 상세 조회
API router.get("/goods/:goodsId", (req, res) => {
const { goodsId } = req.params;
const [detail] = goods.filter((goods) => goods.goodsId === Number(goodsId));
res.json({ detail });
});
app.js
const express = require('express');
const { nextTick } = require('process');
const app = express();
const port = 3000;
const goodsRouter = require('./routes/goods')
const requstMiddleware = (req,res,next)=>{
// originalUrl은 보낸 Url 그대로 나오는 값
console.log('Request URL:', req.originalUrl, " - ", new Date());
// res이 없이 next()를 안쓰면 문제가 커짐
next();
};
app.use(requstMiddleware);
app.use("/api",[goodsRouter]);
app.get('/',(req,res)=>{
res.send("Hello world");
});
app.listen(port, ()=>{
console.log(port, "포트로 서버 연결!")
});
goods.js
const express = require('express')
const router = express.Router();
router.get("/", (req,res)=>{
res.send('this is root page')
});
// 8) 데이터 가져오기
const goods = [
{
goodsId: 4,
name: "상품 4",
thumbnailUrl:
category: "drink",
price: 0.1,
},
{
goodsId: 3,
name: "상품 3",
thumbnailUrl:
category: "drink",
price: 2.2,
},
{
goodsId: 2,
name: "상품 2",
thumbnailUrl:
category: "drink",
price: 0.11,
},
{
goodsId: 1,
name: "상품 1",
thumbnailUrl:
category: "drink",
price: 6.2,
},
];
router.get("/goods", (req,res)=>{
// res.send('this is goods page')
// 9) 위에 있는 데이터를 그래도 응답해줌
res.json({
// 10) goods라는 키에 goods배열 값을 넣어준것
// 키 값이 똑같으면 goods:goods, -> goods, 약식임
goods,
});
});
// 상세 페이지 만들기(한 배열만 조회), 고유한 goodsId이용
// :의 의미는 아무값이나 입력받겠다는 뜻
router.get("/goods/:goodsId",(req,res)=>{
// 11) goodsId에 접근하는 방법
const goodsId = req.params.goodsId;
// console.log(goodsId);
// // 서버는 응답을 줘야함, 무한 로딩을 피하기 위해 그래서 send를 넣음
// res.send("goods id 확인용!")
// 13) 정리
// const filteredItems = goods.filter((item)=> item.goodsId === Number(goodsId));
const [detail] = goods.filter((item)=> item.goodsId === Number(goodsId));
// 12) 상품데이터를 가져와야함 goods.filter()사용, goods는 배열
res.json({
// detail: filteredItems[0]
detail,
});
});
module.exports = router;
반응형
'항해 > 주특기 1주차' 카테고리의 다른 글
| [node js] 3주차 -1 (0) | 2022.01.23 |
|---|---|
| [node js] 2주차 -4 (0) | 2022.01.23 |
| [node js] 2주차 - 2 (0) | 2022.01.23 |
| [node js] 2주차 - 1 (0) | 2022.01.22 |
| [node js] 1주차 - 마음가짐 (0) | 2022.01.22 |
