이미지는 다음 출처에서 사용했습니다
https://steemkr.com/cryptocurrency/@cryptoearth/hold-your-coins-don-t-sell
클라이언트에서 이 메서드로 서버에 요청 할 경우, 해당 데이터를 얻을 수 있습니다.
//Express를 보면 다음 코드를 자주 보게 됩니다.
다음의 코드가 있다고 가정할 때,
app."get"("경로A", (req,res)=> {
콜백내용
});
여기서 'get"은 "GET 요청"을 받을 경우에 어떻게 하겠다는 표현입니다.
즉, 클라이언트가 "경로A"로 요청하는 경우는 "GET"방식으로 서버에서 "미리" 설정해 두는 겁니다.
"경로A"로 클라이언트가 들어 올 경우, 콜백함수가 시작되고 콜백 내용이 실행됩니다.
즉 콜백함수가 실행되는 의미입니다.
//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);
});
//Express
const express = require("express");
const app = express();
node의 http/s 모듈로도 서버(server)를 만들 수 있지만,
라우터(경로)를 만들기 위해 분기문(if/else)이 필요합니다.
이보다 express 프레임웍을 사용하면 쉽게 서버를 구현 가능합니다.
//PORT 설정
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on PORT ${port}`));
process 모듈을 사용하는 이유는 포트가 환경에 따라 가변적으로 변할 수 있기 때문에 "||"를 사용합니다.
주소창 "localhost:3000" 이후 "/api/guests" 브라우저에 입력하면 "guests"가 출력(send)합니다.
//res는 response 객체를 가리킵니다.
//send()함수는 값을 출력하는 메서드 입니다.
app.get("/", (req, res) => {
res.send("안녕하세요, 포트3000의 서버입니다.");
});
REST_api는 동사인 명사 단어(word)를 기준으로 작성합니다
app.get("/api/guests", (req, res) => {
res.send(guests);
});
주소창 "localhost:3000" 이후 "/api/guests" 브라우저에 입력하면 "guests"가 출력(send)합니다.
//guests는 다음과 같습니다.
const guests = [
{ id: 1, name: "Amy", age: 18 },
{ id: 2, name: "Tom", age: 19 },
{ id: 3, name: "Buck", age: 20 }
];
다음은 브라우저 화면입니다.
(해당코드가 있는 자바스크립트 파일을 실행 후, 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에서 실행해 보세요
"1"은 guests에 있음으로 해당 데이터가 출력됐습니다.
"4"은 guests에 없음으로 "에러"가 출력됐습니다.
에러가 발생할 경우 아래 코드가 작동합니다.
//!guest 이기 때문에 "해당~ 없습니다가 출력(send())됩니다.
if (!guest) return res.status(404).send("해당 아이디의 사람이 없습니다.");
res.send(guest);
시작에 앞서 본 내용은 "생활코딩 oAuth2.0"을 보고 작성한 내용으로, 이미지와 코드는 해당 강좌에서 포함 된 것입니다. 개발공부를 처음 하기 때문에 단어사용와 의미출처에서 오류가 있을 수 있습니다. 수정사항은 댓글로 부탁드립니다. 지난 글에서 지난 글에서 oAuth를 구성하는 이해관계자에 대해서 다뤄봤습니다. 그 중 잠깐 핵심을 정리하면 다음과...
시작에 앞서 본 내용은 "생활코딩 oAuth2.0"을 보고 작성한 내용으로, 이미지와 코드는 해당 강좌에서 포함 된 것입니다. 개발공부를 처음 하기 때문에 단어사용와 의미출처에서 오류가 있을 수 있습니다. 수정사항은 댓글로 부탁드립니다. 여는 글 대부분의 서비스들이 소셜계정(페이스북, 카카오, 네이버)을 통해 로그인 기능을 구성하고 있습니다. 일일...
이미지는 다음 출처에서 사용했습니다 https://steemkr.com/cryptocurrency/@cryptoearth/hold-your-coins-don-t-sell [!] Express를 가지고 REST method(GET,POST,PUT,DELELTE)를 만드는 튜토리얼 입니다. [!] GET- POST- PUT- DELELTE 순...
[코드에서 사용한 이미지는 아래 링크에서 사용했습니다. https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html] Flex로 구현되는 핵심부분만 다룹니다. 그외 세부적인 부분(font,height,color 등등)은 아래 완성된 코드를 확인 부탁드립니다. [목차] 1. [...
잠깐!] 해당글은 “Using Axios to Pull Data from a REST API([https://sabe.io/tutorials/using-axios-pull-data-rest-api)”을 바탕으로 Axios를 공부 및 정리 목적에 내용을 재 구성했습니다. Axios로 HTTP요청하려면 코드를 어떻게 작성해야하는지 확인하려고 합니다. 궁금...