[JavaScript] : TypeError: Converting circular structure to JSON 오류해결

 

 

동기(synchronous)와 비동기(asynchronous)

// 동기와 비동기

동기 : 현재의 순서가 실행되고 종료된 후에 다음 실행이 이뤄진다.

예시 놀이기구 : 열차 하나에 승객을 태우고 출발하면
다음 승객은 앞의 열차가 운행을 마치고 들어와서 승객들이 내려야만 탑승이 가능하다.
그래서 동기적이다.

비동기 : 실행되는 순서와 상관없이 먼저 처리된 순서대로 결과값이 출력된다.

예시 맛집 : 들어가는 순서는 선착순인 순서대로 들어가지만
나오는 순서는 식사를 빨리 마친 순서대로 나오기 때문에
비동기 적이다.

실현 시키고자 하는 기능

 

• API를 통해서 해당 URI로 접근하여 DB에 저장되어 있는 데이터를 조회하는 Read의 기능을 구현시키고자 한다.

오류 발견

router.get('/posts', (req, res) => {
    const posts = Posts.find().sort({ createdAt: -1 });
    res.status(200).json({ data: posts });
});

GET메서드를 통해서 localhost:3050 포트의 /posts 주소로 접근하며,

Posts라는 모델에서 find 메서드를 사용하고, 찾은 모든 데이터를 json 형태로 받을것이다.

위 코드에서 오류 발생.

Status: 500 Internal Server Error

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'MongoClient'
    |     property 's' -> object with constructor 'Object'
    |     property 'sessionPool' -> object with constructor 'ServerSessionPool'
    --- property 'client' closes the circle

status 500 이라는 오류 메시지는 보통 종속성이나 리소스 부족으로 인해서 발생하는 오류라고 한다.

이 같은 오류 메시지는 JavaScript에서 발생하는 일반적인 오류이며,
주로 JSON.stringify()와 같은 함수를 사용할 때 발생하고,
오류의 원인은 JSON으로 변환할 수 없는 '순환참조'가 있을 때 발생할 수 있다.

이런 오류를 해결하기 위해서는 순환참조를 제거하면 쉽게 해결이 가능하다.

위 코드의 데이터 흐름

1. 클라이언트에서 api를 통해 서버에게 db에서 posts의 데이터 조회를 요청했고,
2. 서버는 db에서 posts의 데이터를 조회한다.
3. 조회한 데이터가 있다면 그걸 db로부터 서버는 받아오고,
4. 받아온 데이터를 우리에게 보내준다.

이 과정에서 오류가 나지않고, 우리가 원하는 데이터를 받아오기 위해서,
꼭 필요한 과정은 서버가 db로부터 전체 데이터를 받아오기 전까지는 다른 로직이 실행이 되어서는 안된다는 것이다.

말인 즉슨, 동기적인 처리가 필요한 부분이라는 뜻.

클라이언트가 서버에 요청하는 부분중에 db에서 데이터를 가져와 로직을 실행시켜야 하는 부분에서는 항상 다음과 같은 코드를 염두에 두어야겠다.

오류 해결

router.get('/posts', async (req, res) => {
    const posts = await Posts.find().sort({ createdAt: -1 });
    res.status(200).json({ data: posts });
});

함수 시작앞에 async를 사용함으로써 동기적으로 변환해주고, 우리가 데이터가 처리되기까지 기다려야 하는 부분인 find메서드 앞에 await을 붙임으로써 이 코드를 동기적으로 만들었다.

결과

Status: 200 OK

{
  "data": [
    {
      "_id": "648b46da41f1e2639933139e",
      "user": "유사장",
      "password": 4,
      "title": " 추가",
      "content": "가?",
      "createdAt": "2023-06-15T17:14:02.746Z",
      "__v": 0
    },
    {
      "_id": "648b469f41537a61e0b930d9",
      "user": "장사장",
      "password": 3,
      "title": "작성날짜 추가",
      "content": " 아닌가?",
      "createdAt": "2023-06-15T17:13:03.663Z",
      "__v": 0
    },
    {
      "_id": "648b36b85b1ee47badb69cf7",
      "user": "정사장",
      "password": 2,
      "title": "작성날짜 추가",
      "content": "내림차순 설정중",
      "createdAt": "2023-06-15T16:05:12.788Z",
      "__v": 0
    },
    {
      "_id": "648b245829023c114601f315",
      "user": "박거성",
      "password": 1,
      "title": "작성날짜 추가",
      "content": "결과는?",
      "createdAt": "2023-06-15T14:46:48.146Z",
      "__v": 0
    }
  ]
}

 

위와같이 동기적으로 처리를 함으로써 우리가 원하는 데이터를 잘 가져왔고, 코드에 맞게 출력이 된것을 볼 수 있다.

 

#javascript #오류 #오류해결

#동기_비동기

#async_await

#get요청

#Read_구현

#mongoose #mongodb