2023_11_03 TIL

Node 주특기 입문 [4일차]

 

이상하게도, 어제와 마찬가지로 전날 이해가 안갔던 부분들이 어느정도 이해가 되기 시작했다.

내가 이해한 부분이 확실하지는 않지만 아예 아무것도 모르겠던 어제와는 달리 정확하진 않지만 코드의 순서나 데이터가 어떻게 움직이는지에 대해 조금은 감을 잡은 것 같다.

전체적인 흐름을 파악하기 위해 조금 길더라도 내가 이해한 방식으로 글을 적어보려고 한다.

 

 

 

MongoDB를 이용한 데이터 GET 하기

 

우선, 어제까지는 mongoDB를 연결하고 Thunder Client를 사용함에 있어 데이터를 어디에서 가져오는지, 가져온 데이터를 가공해서 어디로 주는지, Thunder Client는 무엇인지에 대해 전혀 감을 잡지 못하고 그저 코드만 따라 칠 뿐이었다.

(그 뿐 아니라 스키마는 무엇이고 왜 만드는 것이며, request와 response가 누가 요청하고 누가 응답하는지 감을 못잡았다. 어제 TIL 참조)

 

(가장먼저 mongoDB를 설치 / 연결해 준 후 모든 작업이 실행된다)

기본적인 실행파일인 app.js(서버 연결) 가 전부 작성되어 있다고 가정한다.
실행 순서나 자세한 코드 설명은 아래에서 다루도록 하겠다.

 

데이터를 GET하는 순서는 간단하게 아래와 같다.

 

스키마 만들기 ➤ Router 만들기 ➤ 반환할 API만들기 ➤ Router 연결하기 ➤ Thunder Client로 테스트 하기

 

그리고 출력해야 하는 결과물은 다음과 같다.

 

{
	"carts": [
		{
			"quantity": 10,
			"goods": {
		    "goodsId": 3,
		    "name": "시원한 콜라3333",
		    "thumbnailUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk7JqMw7ZYZP4ZW136wcoMTmLzbrMIJzUWb1Dhu9cHwCPp0gA&usqp=CAc",
		    "category": "drink",
		    "price": 3000
		  }
		},
		{
			"quantity": 3,
			"goods": {
		    "goodsId": 1,
		    "name": "시원한 콜라1",
		    "thumbnailUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk7JqMw7ZYZP4ZW136wcoMTmLzbrMIJzUWb1Dhu9cHwCPp0gA&usqp=CAc",
		    "category": "drink",
		    "price": 3000
		  }
		}
	]
}

 

 

Schema 만들기

 

내가 이해한 바로는 mongoDB로 보내거나 가져올 데이터의 형태나 특징을 Schema로 정의해준다고 생각했다. 

따라서 데이터를 사용하기 위해서는 가장 먼저 데이터의 형태를 잡아주는 과정이 Schema를 만드는 과정이라고 생각했고 Schema를 가장 먼저 만들어주었다.

(잘은 모르겠는데 데이터가 이동할 때(클라이언트-> 서버, 서버-> 클라이언트, request, response) Schema와 DB는 연결되어 있고 DB의 데이터가 Schema의 형태 조건에 맞는 경우에만 DB의 데이터를 사용할 수 있다고 생각했다.)

 

Schema를 만드는 형태는 다음과 같다.

 

[스키마 폴더 안 cart.js 파일]

const mongoose = require("mongoose");

const cartSchema = new mongoose.Schema({
  goodsId: {
    type: Number,
    required: true,
    unique: true
  },
  quantity: {
    type: Number,
    required: true,
  }
});

module.exports = mongoose.model("Cart", cartSchema);

 

mongoose 라이브 러리를 가져와 mongoose 의 Schema함수를 사용해 데이터의 형태를 정의하는 Schema를 만들어준다.

그리고 다른 파일에서 Schema를 이용해 작업하기 때문에 export 해주었다.

 

 

 

Router 만들기 + 반환할 API 만들기

 

다음으로 출력해야하는 결과물에 맞게 가공하기 위해 생성한 Schema를 새로 만든 router 폴더의 carts.js 파일에 가져와 작업해주었다. Schema를 Router파일에서 작업한 이유는 router의 정의를 보면 알 수 있다. 

 

 

routing이란?

 

라우팅은 네트워크에서 경로를 선택하는 프로세스입니다. 컴퓨터 네트워크는 노드라고 하는 여러 시스템과 이러한 노드를 연결하는 경로 또는 링크로 구성됩니다. 상호 연결된 네트워크에서 두 노드 간의 통신은 여러 경로를 통해 이루어질 수 있습니다. 라우팅은 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스입니다.

 

 

위에서 설명된 것과 같이 원하는 결과물에 맞게 가공된 데이터를 만들게 되면 특정 도메인으로 이 데이터를 보내야 하는데 기본 도메인 아래에 경로를 만들어 데이터를 위치시킬 수 있도록 돕는 것이 router이기 때문에 router 파일에서 작업을 했다.

 

출력해야 하는 결과물이 goods 스키마와 cart 스키마의 정보를 필요로 했기에 carts.js라는 route 파일로 가져와 데이터를 출력해야 하는 결과물에 맞춰 가공해 API를 만들고 results 라는 변수에 담아줬다.

 

연결할 경로는 기존 페이지 아래 carts 라는 페이지에  연결해주도록 코드를 작성했다.

그 후 가장 기본이 되는 app.js 파일에서 router를 연결해주기 위해 router를 export 해주었다.

 

[router 폴더 안 carts.js]

const express = require("express");
const router = express.Router();

const Cart = require("../schemas/cart.js");
const Goods = require("../schemas/goods.js");

//localhost:3000/api/carts GET Method
router.get("/carts",async(req, res)=>{
    const carts = await Cart.find({})

    const goodsIds = carts.map((cart)=>{
        return cart.goodsId;
    })

    const goods = await Goods.find({goodsId : goodsIds});

    const results = carts.map((cart)=>{
        return {
            "quantity" : carts.quantity,
            "goods" : goods.find((item)=>item.goodsId === cart.goodsId),
        }
    })

    res.json({
        "carts" : results,
    })

});

module.exports = router;

 

 

 

Router 연결하기

 

router의 경로에(/carts) 반환할 API를 만들었기 때문에 이 경로를 상위 경로와 연결해주어야 했다.

따라서 app.js에서 사용하는 경로인 /api 경로 아래에 붙여주는 작업을 했다.

 

전 단계에서 router를 export했기 때문에 만든 router를 가져와주었고 하위 경로로 추가해 주었다.

 

[app.js]

const cartsRouter = require("./routes/carts.js")

app.use("/api",[goodsRouter, cartsRouter])

 

 

 

Thunder Client로 테스트하기

 

서버를 열고 Thunder Client에 [GET] localhost:3000/api/carts 로 호출하게 되면 결과값이 잘 출력되는 것을 확인할 수 있다. (데이터를 현재 넣어주지 않았기 때문에 결과값은 빈 배열로 뜨는 것을 확인할 수 있다.)

 

 

 

 

정리

 

위의 과정을 통해 클라이언트와 서버가 어떤 식으로 관계되어있는지 알 수 있었다.

 

[Schema]

 

Schema를 통해 데이터의 형태에 대해 정의해 주고 이를 가공해 반환할 API로 만들어 줄 수 있다는 것을 알게되었다.

정확한 바는 아니지만 mongoose 라이브러리를 통해 Schema에서 정한 형태에 맞는 데이터를 DB에서 가져와 변수로 담아 사용할 수 있는 것 같다.

 

[router]

 

router를 통해 데이터를 불러올(GET메서드를 사용했기 때문) 경로를 지정해 줄 수 있다는 것을 알게되었다.

 

[Thunder Client]

 

Thunder Client를 통해 GET한 API를 볼 수 있었다. 처음에는 Thunder Client의 설명을 아무리 들어도 이해가 안갔는데 

간단하게 설명해서 프론트 부분없이 Thunder Client를 통해 서버를 호출하고 호출한 결과값을 테스트 할 수 있다는 것을 알게 되었다. 

 

[request, response]

 

request와 response는 내가 이해한 부분이 맞았던 것 같다. 코드 중간에  req. res. 을 사용하는데 req. 를 쓰게 되면 클라이언트가 DB서버로 데이터를 요청하는 것이고 res. 를 쓰게되면 DB서버에서 클라이언트로 데이터를 보내준다는 의미이다.

 

[GET]

 

데이터를 조회하기 위해서 쓰는 메서드. 데이터를 저장하거나 삭제하려면 POST, DELETE를 사용하면 된다.

 

 

 

 

조금 길게 적게 되었지만 정리하며 써보니 머릿속에 조금 더 잘 정리할 수 있었던 것 같다.