이미지는 다음 출처에서 사용했습니다
https://steemkr.com/cryptocurrency/@cryptoearth/hold-your-coins-don-t-sell
[!] Express를 가지고 REST method(GET,POST,PUT,DELELTE)를 만드는 튜토리얼 입니다.
[!] GET-> POST-> PUT-> DELELTE 순으로 작성하려고 합니다.
[!] 이번 블로그에서는 [GET]을 설명합니다.
1.GET 메서드 정의
클라이언트에서 이 메서드로 서버에 요청 할 경우, 해당 데이터를 얻을 수 있습니다.
2.GET 요청방식
- root (/)에 요청할 경우
- 특정경로("/api/guests") 로 요청한 경우
2-1. 특정 아이디(id)로 요청한 경우
3.GET 메서드 적용
//Express를 보면 다음 코드를 자주 보게 됩니다.
다음의 코드가 있다고 가정할 때,
app."get"("경로A", (req,res)=> {
콜백내용
});
여기서 'get"은 "GET 요청"을 받을 경우에 어떻게 하겠다는 표현입니다.
즉, 클라이언트가 "경로A"로 요청하는 경우는 "GET"방식으로 서버에서 "미리" 설정해 두는 겁니다.
"경로A"로 클라이언트가 들어 올 경우, 콜백함수가 시작되고 콜백 내용이 실행됩니다.
즉 콜백함수가 실행되는 의미입니다.
[목차]
1. 코드
2. 서버 만들기
3. 특정경로로 요청한 경우
4. 특정 아이디(id)로 요청한 경우
1. 코드
//Express 호출
const express = require("express");
const app = express();
//데모 데이터
const guests = [
{ id: 1, name: "Amy", age: 18 },
{ id: 2, name: "Tom", age: 19 },
{ id: 3, name: "Buck", age: 20 }
];
//PORT 설정
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on PORT ${port}`));
//GET요청
//root (/)에 요청할 경우
app.get("/", (req, res) => {
res.send("안녕하세요, 포트3000의 서버입니다.");
});
//특정경로("/api/guests") 로 요청한 경우
app.get("/api/guests", (req, res) => {
res.send(guests);
});
//특정 아이디(id)로 요청한 경우
app.get("/api/guests/:id", (req, res) => {
const guest = guests.find(person => person.id === parseInt(req.params.id));
if (!guest) return res.status(404).send("해당 아이디의 사람이 없습니다.");
res.send(guest);
});
2. 서버 만들기
2.1 express를 불러옵니다.
//Express
const express = require("express");
const app = express();node의 http/s 모듈로도 서버(server)를 만들 수 있지만,
라우터(경로)를 만들기 위해 분기문(if/else)이 필요합니다.
이보다 express 프레임웍을 사용하면 쉽게 서버를 구현 가능합니다.
2.2 Port를 설정합니다.
//PORT 설정
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on PORT ${port}`));process 모듈을 사용하는 이유는 포트가 환경에 따라 가변적으로 변할 수 있기 때문에 "||"를 사용합니다.
2.3 화면에 출력합니다.
주소창 "localhost:3000" 이후 "/api/guests" 브라우저에 입력하면 "guests"가 출력(send)합니다.
//res는 response 객체를 가리킵니다.
//send()함수는 값을 출력하는 메서드 입니다.
app.get("/", (req, res) => {
res.send("안녕하세요, 포트3000의 서버입니다.");
});
3.특정경로로 요청한 경우
REST_api는 동사인 명사 단어(word)를 기준으로 작성합니다
"/"를 기준으로 경로를 지정합니다.
app.get("/api/guests", (req, res) => {
res.send(guests);
});주소창 "localhost:3000" 이후 "/api/guests" 브라우저에 입력하면 "guests"가 출력(send)합니다.
즉, 노드 서버서버에 "/api/guests"를 요청하면 guests 값을 응답받습니다.
//guests는 다음과 같습니다.
const guests = [
{ id: 1, name: "Amy", age: 18 },
{ id: 2, name: "Tom", age: 19 },
{ id: 3, name: "Buck", age: 20 }
];
다음은 브라우저 화면입니다.
Postman으로 요청한 경우
(해당코드가 있는 자바스크립트 파일을 실행 후, Postman을 실행합니다.)
1. GET으로 설정합니다.
2. 설정한 서버주소를 입력합니다.
(이미 코드에서 "/api/guests"했다)
3. body로 설정합니다.
4. raw를 클릭합니다.
5. JSON으로 설정합니다.
6. "SEND"버튼을 클릭합니다.
7. 결과값이 출력됩니다.
## 4. 특정 아이디(id)로 요청한 경우// :id
// id 부분은 특정 대상의 id 값이 온다는 의미입니다.
// Express는 여기에(:id)에 id값이 연결된다고 생각합니다
app.get("/api/guests/:id", (req, res) => {
const guest = guests.find(person => person.id === parseInt(req.params.id));
if (!guest) return res.status(404).send("해당 아이디의 사람이 없습니다.");
res.send(guest);
});":id"값이 붙인 경로를 요청(req)할 경우, 다음의 내용을 응답(res, send())합니다.
guests 객체의 id가 있을 경우,
응답(send())하고 그렇지 않을 경우 , 404 상태와 "해당 아이디의 사람이 없다는" 문구를 body(브라우저 하얀부분)에 출력합니다.
데이터(guest에는 id가 1,2,3이 있습니다.)
파일을 실행하고 Postman에서 실행해 보세요
A. guests에 "있"는 "id"값을 요청 할 경우
"1"은 guests에 있음으로 해당 데이터가 출력됐습니다.
B. guests에 "없"는 "id"값을 요청 할 경우
"4"은 guests에 없음으로 "에러"가 출력됐습니다.
에러가 발생할 경우 아래 코드가 작동합니다.
//!guest 이기 때문에 "해당~ 없습니다가 출력(send())됩니다.
if (!guest) return res.status(404).send("해당 아이디의 사람이 없습니다.");
res.send(guest);다음편에서는 "POST"에 대해서 다루겠습니다.
