[AI스쿨] express js RESTful API 설계하기 (GET)
[AI스쿨] express js RESTful API 설계하기 (GET) — #AI스쿨 #expressjs #expressapi #RESTfulapi AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용...
#AI스쿨 #expressjs #expressapi #RESTfulapi
AI스쿨 msa기반 java 백엔드 코스 중에 공부한 내용을 작성하였습니다
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 넣을땐 뇌를 비우자
Express RESTful API 설계하기
Express JS
node js의 express모듈을 활용하여 누구나 간편하게 서버를 만들 수 있습니다. 이전글에서 MySQL을 express와 연동시키는 방법에 대해 다뤄보았는데요. 디테일한 설명없이 간략하게만 다뤘기에 이번글에 좀 더 내용을 정리해 보겠습니다.
Express 실행해보기
node JS를 다운받으신분들은 npm을 활용하여 express를 다운받아주세요.
| npm install express |
|---|
이제 모듈을 불러오고 실행하여 보겠습니다.
| const express = require("express"); // express 모듈을 불러온다.const app = express(); //express 실행을 app으로 받아온다(중요)const port = 4000; //사용할 port를 정한다. (localhost:4000)app.listen(port); //listen매서드를 활용하여 port를 연결 후 실행한다. |
|---|
| node app.js |
|---|
localhost:4000
위 주소로 들어가면 Cannot Get / 이라는 메세지가 뜹니다.
이는 GET router로 설정된 / 주소에 아무 데이터도 넘기지 않았기 때문인데요.
'/' 주소로 문자열 데이터를 넘겨보겠습니다.
Express 데이터 넘기기
app.get은 REST에서 HTTP GET 매서드를 담당합니다. 지정된 경로를 설정합니다. req는클라이언트 파라미터, res는 파라미터로 이해하면 될 것 같습니다.
| app.get("/", (req, res) => { res.send("hello"); }); |
|---|
res.send를 통해 문자열을 보낼 수 있습니다.
| const fruits = \["banana", "apple"\];app.get("/", (req, res) => { res.send(fruits); }); |
|---|
res.send를 통해 배열도 보낼 수 있습니다.
| const product = { name: "pencil", price: 500,};app.get("/", (req, res) => { res.send(product); }); |
|---|
res.send를 통해 객체도 보낼 수 있습니다.
Express req 살펴보기
req와 res를 클라이언트/ 서버가 받는 파라미터로 이해하면 된다고 했지만 이해가잘 되지 않습니다.
활용사례는 서버에 저장된 데이터는 res를 통해서 출력이 가능하고 req는 클라이언트측에서 변수로 보낼 수 있습니다.
req를 console로 찍어보면 객체형태임을 알 수 있고 수많은 key:value값이 들어가있습니다. 여기서 주의깊게 볼것은 params와 query입니다. 사용자가 서버로 부터 요청을 보낼때 parms와 query안으로 데이터를 넣어 서버로 api요청을 보낼 수 있습니다.
GET요청 이해하기
GET
REST에서 Read에 해당하는 http 매서드는 GET이라고 언급한바 있습니다. express에서는 app.get을 활용하여 http GET매서드를 사용할 수 있습니다.
API가 정상적으로 작동하는지 확인하는 방법중에 GET은 url을 통해서도 가능합니다. 나머지 요청은 postman과 같은 툴을 활용하여 손쉽게 작동여부 판별을 할 수 있습니다.
| app.get("/", (req, res) => { res.send("hello"); }); |
|---|
위의 예제에서 다룬 이부분도 GET요청을 구현해 놓은 것입니다. 클라이언트는 localhost:4000url을 입력하는 것만으로도 서버에서 보내는 "hello" 문자열 데이터를 받아볼 수 있습니다.
GET + URI parameter
GET요청을 통해 서버에 저장된 데이터를 Read할 수 있다고 말씀드렸습니다.클라이언트가 서버에 API를 호출할때 어떤규칙을 통해서 호출할 수 있도록 만들때 URI parameter를 사용하면됩니다.
| const products = \[ { id: 1, name: "pencil", price: 500 }, { id: 2, name: "book", price: 15000 },\];app.get("/products/:id", (req, res) => { // 경로: /products/:id let { id } = req.params; //req.params의 key 값을 변수로 지정 if (id == 1) { res.send(products\[0\]); } else if (id == 2) { res.send(products\[1\]); } else { res.send("데이터가 없습니다"); }}); |
|---|
여러 상품에 관한 정보가 담긴 products 데이터가 있다고 가정하고 products데이터의 id 값에따라 데이터를 추출하고 싶다면 위와 같은 방법을 사용할 수 있습니다.
경로에 /:id는 id를 변수로 사용하겠다는 의미입니다.
let {id} = req.params의 의미는 let id = req.params.id와 동일힙니다. 아까위에서 req를 console로 출력했을대 params에는 아무값도 들어있지 않은 객체 데이터였습니다. 이 객체데이터에 id를 추가함과 동시에 id를 변수로 바로 받아버린 부분입니다. (Ecm6 구조화할당)
이제 경로에 id값을 입력하면 서버로 지정된 데이터가 출력됩니다.
아직 개념이 잘 안잡힐 수 있으나, 중요한점은 client가 입력하는 값을 변수로 지정해 서버와 연동할 수 있다는 부분과, API서버를 구축할 때 클라이언트 변수를 어떻게 처리할지 고민해야하는 부분입니다.
GET + query parameter
Query Parameter
query parameter는 URI parameter와 유사한 점이 많습니다. URI parameter형식을 query형식으로만 변경하여 표현했다고 생각해도 괜찮을 것 같습니다.
위와 동일한 product 데이터의 예시로 설명을 하겠습니다.
| const products = \[ { id: 1, name: "pencil", price: 500 }, { id: 2, name: "book", price: 15000 },\];app.get("/products", (req, res) => { const { name } = req.query; //const name = req.query.name if (name == "pencil") { res.send(products\[0\]); } else if (name == "book") { res.send(products\[1\]); } else { res.send("존재하지 않는 제품입니다."); }}); |
|---|
name을 req.query객체의 key로 저장하고 데이터를 호출합니다. 이걸 URI 파라미터로 표현했다면 아래와 같이 표현할 수 있습니다.
| app.get("/products/:name", (req, res) => { let { name } = req.params;}); |
|---|
query 파라미터는 url에 ?key=value&key=value&...형태로 데이터를 전송할 수 있습니다.
url에 ?key=value형태로 데이터를 전송하면 서버에서 설계한 대로 해당데이터가 출력되는것을 볼 수 있습니다.