REST API 만들어보기(데이터 베이스 X)

라우터가 위치할 곳에 객체를 만들어 놓기

 

api/goods.js

//goods.js
const goods = [
    {
        goodsId: 1,
        name: '상품 1',
        thumbnailUrl:
            'https://cdn.pixabay.com/photo/2016/09/07/19/54/wines-1652455_1280.jpg',
        category: 'drink',
        price: 6.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: 3,
        name: '상품 3',
        thumbnailUrl:
            'https://cdn.pixabay.com/photo/2016/09/07/02/12/frogs-1650658_1280.jpg',
        category: 'drink',
        price: 2.2,
    },
    {
        goodsId: 4,
        name: '상품 4',
        thumbnailUrl:
            'https://cdn.pixabay.com/photo/2016/09/07/02/11/frogs-1650657_1280.jpg',
        category: 'drink',
        price: 0.1,
    },
];

이제 url로 호출하면서 조회, 특정 조회, 삽입을 합니다.

여기서 미리 생각할 http 메서드는 조회 = get,  삽입 = post로 생각하면 편합니다.

파일은 app.js 파일과 ./route/goods.js로 2개 사용합니다.

 

app.js 정의

app.js의 역할

• 어플리케이션의 핵심 로직을 담당합니다.

• 사용자 인터페이스와 상호작용하고 데이터를 관리하는 코드가 포함될 수 있습니다.

• 서버의 설정, 라우팅, 미들웨어 등을 정의하여 사용합니다.

• 여러 모듈이나 라이브러리를 로딩하고 의존성을 관리하는 역할을 합니다.

//app.js
import express from 'express'
const app = express();
const PORT = 3000;

// Express에서 req.body에 접근하여, body 데이터를 사용할 수 있도록 설정하는 미들웨어
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

import goodsRouter from './routes/goods.js';

app.use('/api',[goodsRouter])

app.listen(PORT, ()=>{
    console.log(PORT,'포트열림');
})

먼저 express애플리케이션을 생성해준 다음 포트번호를 정해줍니다.

포트번호는 url에 입력하여 진입하는 서버 번호가 됩니다.

json을 객체로 변환하고자 하면 app.use(express.json())을 사용하여 본문을 파싱하는 미들웨어를 설정해줄수 있으며

위 코드에서는 goodsRouter를 해당 경로에 연결하는 미들웨어를 등록하였습니다.

만약 ' /api '경로로 요청이 들어온다면 해당 js파일로 연결을 해줄수 있게 됩니다.

미들 웨어란(Middleware)?

■ 요청과 응답 처리를 좀 더 모듈화 하고, 코드의 재사용성을 높이며, 코드를 구조화하는데 도움을 줍니다. 

■ Express.js에서 HTTP요청과 응답의 중간에 위치한 함수로,
   어플리케이션의 요청-응답 사이클을 조작하거나 변형하는 역할을 합니다.
   미들웨어 함수는 일련의 작업을 수행하고,
   다음 미들웨어 함수로 제어를 전달하거나 요청-응답 사이클을 종료할 수 있습니다.
   즉, 클라이언트의 요청이 서버에 도착한 후, 실제로 응답을 보내기전에 여러 작업을 수행할수 있습니다.
   요청객체와 응답객체를 받아서 수정하거나 정보를 추가 할수 있으며,
   next라는 콜백함수를 호출하여 다음에 실행할 미들웨어를 실행하도록 전달 할수 있고,
   필요에 따라 응답을 보내고 더이상의 미들웨어를 실행하지 않고 요청-응답사이클을 종료할 수 있습니다.

 

 

 

라우팅 파일의 역할 - goods.js

• Express.js 애플리케이션에서 특정 URL 경로에 대한 요청을 어떻게 처리할지 정의한 부분입니다.

• 라우팅은 URL에 따라 다양한 동작이 이뤄질 수 있도록 웹 애플리케이션의 네비게이션을 제어하는 역할을 합니다.

• Express에서 라우팅을 정의하는 파일을 일반적으로 routes디렉토리에 저장하고,

  각 파일은 특정 경로에 대한 라우트를 정의 합니다.

• 특정 URL에 대한 요청이 들어왔을 때 요청을 처리하고 응답을 생성하는 라우트 핸들러함수들을 정의합니다.

• 라우터 객체를 생성하고, 라우트들을 모듈화하고, 애플리케이션코드를 구조화 할수 있는 Express.Router를 사용합니다.

//routes/goods.js
import express from 'express'
const router = express.Router();


// localhost:3000/api/goods GET
router.get('/goods', (req, res) => {
    return res.json({goods:goods});
});

// localhost:3000/api/goods/:goodsId GET
router.get('/goods/:goodsId', (req, res) => {
    let goodsId = req.params.goodsId;
    let goodsItem = goods.find(item=>item.goodsId === +goodsId)
    res.json({goods:goodsItem});
});

// localhost:3000/api/goods POST
// router.post('/goods', (req, res) => {
//     const name = req.body.name;
//     const thumbnailUrl = req.body.thumbnailUrl;
//     const category = req.body.category;
//     const price = req.body.price;
//     const goodsId = goods[goods.length - 1].goodsId + 1;

//     const goodsItem = {
//         goodsId: goodsId,
//         name: name,
//         thumbnailUrl: thumbnailUrl,
//         category: category,
//         price: price,
//     };
//     goods.push(goodsItem);
//     return res.status(201).json({ goods: goodsItem });
// });

// POST 방식 리팩토링
router.post('/goods', (req, res) => {
    const {name,thumbnailUrl,category,price} = req.body; // 객체 구조분해할당
    const goodsId = goods[goods.length - 1].goodsId + 1;

    const goodsItem = {
        goodsId,
        name,
        thumbnailUrl,
        category,
        price,
    };
    goods.push(goodsItem);
    return res.status(201).json({ goods: goodsItem });
});


export default router;

Express.Router를 사용하여 라우터 객체를 생성하였고

해당 객체를 이용하여 경로에 대한 HTTP 메서드에 대한 라우터 핸들러를 정의 하였습니다.

 

 

서버 실행

터미널 창에 node app.js를 적어주면 서버가 실행되게 되고

해당하는 URL을 입력하여 요청하게 되면

http://localhost:3000/api/goods GET

위 라우터에 정의 한것처처럼 goods라는이름으로 객체가 나오는것을 확인 할수 있습니다.

경로 : URL 요청 → app.js진입 → 설정된 라우팅파일에 맞는 경로 진입  → goods.js진입 →

          해당 경로에 맞는 라우터 진입후 작업시작 → 응답

 

 

http://localhost:3000/api /goods/:goodsId

:goodsId를 하면 이 부분이 값이 들어가는 곳입니다.

http://localhost:3000/api/goods/1 이렇게 요청을 했다면 goodsId는 키값으로 1은 value값으로 들어가게 되는것입니다.

라우터에서 활용하기 위해서 값을 가져오는 법은 req.params입니다.

확인을 해보면 

Key : Value 값으로 나오는걸 확인 할수 있습니다.

라우팅 파일에서 주의 해야 할점은 파일의 수정이 있으면 서버를 재시작 해야 합니다.

params에서 id값을 찾았으니 해당 id에 맞는 객체를 찾기 위해서 코드를 작성및 저장한뒤 URL로 요청하면 아무 변화가 없는걸 볼수 있습니다.

하지만 서버 자체를 재시작하면

해당 정보가 나오는걸 확인 할수 있습니다.

goodsId가 2인것을 요청하고 싶다면 

http://localhost:3000/api/goods/2

localhost:3000/api/goods POST

데이터를 추가 하기 위해서는 요청시 전달하는 정보를 서버로 전달받아야 합니다.

Express에서 req.body로 접근하여 데이터를 사용하기 위한 설정을 app.js에서 해주어야합니다.

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

urlencoded는 URL-encoded형식으로 전송된 데이터를 파싱합니다.

폼데이터를 전송할 때 주로 사용하며

POST요청이나 PUT요청과 같은 경우에 사용자 입력이나 폼 데이터를 서버로 전송할 때 유용합니다.

 

이런 설정을 해주고 나면 해당 라우팅 파일로가서 작업을 진행할 라우터에서 [req.body.받아올 데이터]로 데이터를 가져올 수가 있습니다.

데이터가 들어가는걸 확인할 수가 있습니다.