API와 REST API
◆ API(Application Programming Interface) :
서로 다른 소프트웨어나 어플리케이션 간을 연결해주는 매개체이자 약속입니다.
◆ API를 작성한다 = 웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공합니다.
API는 웹 애플리케이션(프론트엔드)에서 원하는 기능을 수행하기 위해 URL과 인터페이스를 제공합니다.
필요한 데이터를 받아 데이터베이스에 저장하고, 저장된 데이터를 읽어 웹 애플리케이션에 제공하여 사용자가 원하는 목적을 이룰 수 있도록 해야 합니다.
◆ REST API (Representational State Transfer)
HTTP를 통해 웹 서비스의 자원에 접근하는 방식을 “REST 아키텍쳐”의 규칙을 따라 구현된 API 입니다.
월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위해 네트워크 상에서 자원을 쉽고 명확하게 식별하고 조작할 수 있게 도와주는 소프트웨어 아키텍처의 한 형식입니다.
“REST 아키텍쳐”는 사람이 봐도 쉽게 이해할 수 있도록 “자원(Resource)”을 정의하고 이 “자원”을 중심으로 표현을 구성하는 원칙을 제시합니다.
◆REST API의 구성
1. 자원(Resource) - URL
우리가 만들 소프트웨어가 관리하는 모든 것을 자원(Resource)으로 표현(URL로 사용)할 수 있습니다.
ex) 상품(Goods)는 /goods, 장바구니(Carts)는 /carts
2. 행위 - HTTP method
CRUD : 자원에 대한 생성/조회/수정/삭제를 각각의 method 로 나누어놓은 것. 일반적인 method 사용 방식 입니다.
Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT),(PATCH)
Delete : 삭제(DELETE)
3. 표현
해당 자원을 어떻게 표현할지에 대한 방법입니다. 보통 JSON, XML 같은 형식을 이용해서 자원을 표현합니다.
HTTP에서는 Content-Type 이라는 헤더를 통해 표현 방법을 서술합니다.
◆ REST API 예시
Http 메서드인 GET은 리소스를 조회하는 역할을 담당하므로, 이 코드는 전체 책 목록을 조회(Read)하고, 그 결과를 JSON 형식으로 반환합니다. 이렇게 API가 “REST 원칙”에 따라 구현되었으므로, 이 API는 RESTful 하다 볼 수 있습니다.
/* '/books'라는 URL을 통해 전체 책 목록을 불러와 응답해 주는 역할을 하는 API입니다*/
router.get('/books', (req, res) => {
res.json({ success: true, data: getAllBooks() });
});
위의 예시 코드는 /books 라는 URL을 통해 전체 책 목록을 불러와 응답해 주는 역할을 하는 API입니다.
Http 메서드인 GET은 리소스를 조회하는 역할을 담당하므로, 이 코드는 전체 책 목록을 조회(Read)하고, 그 결과를 JSON 형식으로 반환합니다. 이렇게 API가 “REST 원칙”에 따라 구현되었으므로, 이 API는 RESTful 하다 볼 수 있습니다.
Routing개념 및 Router학습
◆ Routing : 클라이언트의 요청 조건(Http 메서드, 주소 등)에 대응해 응답(Response)하는 방식을 말합니다.
◆ Router : 클라이언트의 요청을 쉽게 처리 할 수 있게 도와주는 Express.js의 기본 기능중 하나입니다.
일반적으로 Router는 아래와 같은 구조를 가집니다.
router.METHOD(PATH, HANDLER); router: Express.js의 라우터를 정의하기 위해 사용합니다. 실제 api를 router로 묶어서 관리할 수 있습니다.
METHOD: HTTP Method를 나타냅니다. (ex: get, post, put, patch, delete …)
PATH: 실제 서버에서 API를 사용하기 위한 경로를 나타냅니다. (ex: users, posts …)
특정한 API를 사용하기 위한 URL 입니다.
HANDLER: 라우트가 일치할 때 실행되는 함수입니다.
◆ Router 구현
예시 - Express.js의 Router를 이용합니다.
'yarn add express' 했던 폴더를 VS Code에서 열어주세요.
routes 폴더를 생성해 goods.js라는 파일을 생성합니다.
// routes/goods.js
import express from 'express';
// Express.js의 라우터를 생성합니다.
const router = express.Router();
//예시로 엔드포인트를 작성(localhost:3000/api/ GET)
router.get('/', (req, res) => { // localhost:3000/api/
res.json('default url for goods.js GET Method');
});
// localhost:3000/api/about GET
router.get('/about', (req, res) => {
res.json('goods.js about PATH');
});
//작성한 Router를 app.js에서 사용하기 위해 하단에 내보내주는 코드를 추가
export default router;
goods.js 파일에서 노출된 Router를 미들웨어에 사용하겠다고 작성합니다.
// app.js
import goodsRouter from './routes/goods.js';
// localhost:3000/api -> goodsRouter
app.use('/api', [goodsRouter]);
app.js 전문
// app.js
import express from 'express';
import goodsRouter from './routes/goods.js';
const app = express();
const PORT = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
// 2. localhost:3000/api로 요청이 들어옵니다. ->
// '/api'로 들어온 요청은 goodsRouter로 전달 합니다.
app.use('/api', [goodsRouter]);
// 1. 사용자가 서버를 엽니다.
app.listen(PORT, () => {
console.log(PORT, '포트로 서버가 열렸어요!');
});이렇게 하면, routes/goods.js파일은 app.js 파일에서 라우트(Route)로 사용될 수 있습니다.
이제부터 http://localhost:3000/ 뒤에 /api 로 시작되는 주소는 routes/goods.js 에 있는 Router 미들웨어를 통해 처리됩니다.
◆ 미들웨어(Middleware) :
서버에서 요청을 받을때 모든 요청에 대해 공통적인 처리를 하는 경우 미들웨어를 이용하여 서버의 요청/응답에 대해 공통적으로 관리가 가능합니다.
API Client
◆ API Client : 개발 단계에서 API 요청을 확인하고 테스트하는 데 도움을 주는 도구입니다.
개발 속도를 높이고 오류를 예방할 수 있습니다.
대표적인 API Client로는 Postman과 Insomnia가 있으며, 요청을 쉽게 구성하고 응답을 직관적으로 확인할 수 있습니다.
이 두 API Client 는 API 요청(Request)을 손쉽게 구성할 수 있고, 응답(Response)을 직관적으로 확인할 수 있게 도와줍니다
- 필요한 상황:
서버의 데이터를 조회하기 위해선 생성, 수정, 삭제와 같은 작업을 수행하기 위해서는 POST, PATCH, PUT, DELETE 등의 Http Method를 사용하는 API를 개발하고 테스트 해야합니다.
Terminal에서 명령어를 입력하거나, Html 파일을 생성하여, 각각의 API를 테스트하기보다는 편리하게 서버에 보낼 데이터와 주소를 한번에 관리할 수 있는 API Client를 사용할 예정입니다.
◆ Insomnia 사용하기
1. Insomnia 설치하기
https://app.insomnia.rest/app/dashboard/organizations
2. 새 프로젝트 만들기
3. Insomnia에서 API 요청을 테스트할 환경을 구성합니다.
Vscode에서 서버를 열어줍니다(위에서 한 거 처럼)
4. Collection을 생성
생성한 프로젝트를 선택 > Create 탭 > Request Collection을 클릭 > 새로운 Collection을 생성해주세요.
※ Collection은 테스트하려는 프로젝트의 단위라고 생각하면 됩니다.
5. Request를 생성
좌측에 있는 HTTP Request를 클릭해, 테스트하려는 Request를 생성해주세요!
생성한 Request를 GET localhost:3000/api/about 로 작성해주세요
Send 버튼을 클릭해, 서버의 Response가 정상적으로 전달되는지 확인하세요
서버에서 어떤 Header를 통해서 전달했는 지도 Headers에 명확하게 설정되어 있어 이해하기 쉽습니다.
◆ Insomnia활용하기
1. Collections
하나의 Collections에 하나의 프로젝트 만드는게 관리하기 쉽습니다.
각각의 프로젝트마다 API 목록을 정리해서 사용할 수 있습니다.
Collections는 여러가지의 API의 요청(Request)을 그룹화 시킬 수 있습니다.
2. Environment
여러번 사용되는 값들을 환경변수(Environment)로 설정할 때 사용합니다.
Token, URL, 개인 키 등 다양한 자격증명을 저장 및 사용할 수 있습니다.
※Tip
◆ 안쓰는 포트 닫기
https://seomile.tistory.com/91
1. "netstat -a -o" 를 입력하고 엔터 누릅니다.
2. "taskkill /f /pid PID번호" 를 입력하고 엔터 누릅니다.
