Arcane 프로젝트 - Axios 비동기 통신

Arcane 프로젝트에서 가장 핵심적인 라이브러리를 꼽으라면 아마 Axios일 것 입니다. Arcane에서 클라이언트와 서버 간 통신은 모두 Axios를 통해서 이루어집니다.
이전에도 Axios 통신 방식에 대해서 간략하게 설명했지만, 이번엔 더 자세하게 알아보도록 하겠습니다.

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다

Axios 공식문서에서 Axios를 소개하는 글입니다. 저번에 비동기 통신을 소개했듯이 클라이언트 측에서 서버에 무언가 요청을 할 때, 응답을 듣지도 않았는데, 계속해서 진행해버린다면, 당연히 오류가 날 것입니다. Axios는 Promise를 활용하는 비동기 통신을 요청하기 때문에, 서버의 응답을 듣고 나서야 다음으로 진행합니다.

Axios 사용을 위해선 우선 클라이언트와 서버 모두에 Install 합니다. 통신은 일방적인게 아니니까요.

$ npm  install axios

설치는 이게 끝입니다. Axios 사용 예시는 커뮤니티 페이지로 할게요.

...
await axios
    .put("/post/read",  {
        _id: data[i]._id,
        view: data[i].view,
})
.then((res)  =>  {
    navigate(`/community/read/${data[i]._id}`,  {
    state: data[i]._id,
    });
})
.catch((error)  =>  {
    console.error(error);
});
...

커뮤니티 페이지에서 어떤 글을 읽었을 때, 해당 글의 데이터베이스에 접근해, 조회수를 증가시키는 기능을 하는 부분입니다. axios는 get, put, delete 등의 요청을 할 수 있는데, put의 경우에는 데이터 수정을 위한 요청을 뜻합니다. 이 때, 클라이언트에선 Data를 담아서 서버에 보낼 수 있습니다. JSON의 Key : Value 형태로 데이터를 전달합니다. 조회수 증가 기능에선 조회수를 증가시킬 글의 id와 현재 조회수 view를 data에 담아 보내요.


서버에서 어떻게 응답하는지도 보겠습니다.
클라이언트에서 "/post/read"로 요청했기 때문에, 서버측 app.js에서는 PostRouter로 요청을 보낼거에요.

// Server의 app.js
app.use("/post", postRouter);
...

위 같이 말이죠.
그럼 postRouter에선 read 리스너를 찾아 다시 컨트롤러로 보낼겁니다.

// Server의 postRouter
router.put("/read", postController.postRead);
...

다음은 라우터에서 "/read"요청을 찾아 보낸 Controller 측의 postRead함수 입니다.

// Server의 Post Controller post.js
export  async  function  postRead(req,  res)  {
    const  {  _id,  view  }  = req.body;
    const  post  =  await postRepository.updatePost(_id, view +  1);
    return res.status(201);
}

req안에는 클라이언트에서 요청을 보낼때 함께 담은 정보들이 담겨있습니다. 그 중 body부분에 아까 클라이언트에서 담았던 데이터들이 들어있기 때문에, req.body 값을 다시 변수에 할당해줍니다.
그리고 데이터베이스와 직접 접근해서 DB상의 값을 바꿔줄 updatePost함수를 호출합니다.

// Server data의 post.js
export  async  function  updatePost(id,  newview)  {
    const  filter  =  { _id: id };
    const  update  =  { view: newview };
    await Post.findOneAndUpdate(filter, update);
}

findOneAndUpdate는 Mongoose의 메소드인데, MongoDB에 filter안의 조건을 만족하는 데이터들의 값을 update안에 있는 값으로 바꾸는 메소드입니다. 즉, 클라이언트에서 처음 보낸 글의 id를 통해서 클라이언트가 읽은 글을 데이터베이스에서 찾아내고, 기존 조회수 + 1의 값으로 데이터베이스의 조회수를 교체하는것입니다.
updatePost함수가 종료되었다면 다시 postRead함수로 돌아갑니다.

    return res.status(201);

조회수 변경이 완료되었음을 클라이언트에게 201코드와 함께 반환합니다. 201 status는 POST 나 PUT 으로 게시물 작성이나 회원 가입 등의 새로운 데이터를 서버에 생성하는(쓰는, 넣는) 작업이 성공했을 때 반환하는 상태입니다.

.then((res)  =>  {
    navigate(`/community/read/${data[i]._id}`,  {
    state: data[i]._id,
    });
})

다시 클라이언트로 돌아와서 요청이 종료되고 응답을 받았으니 비동기로 then 이하의 부분이 실행됩니다. 이 경우엔 단순히 조회수 증가라 then 이후로 딱히 뭘 하진 않는데, 서버에서 응답받은 값으로 다시 무언가 동작을 해야한다면, then 이후로 res를 활용해 작성하면 됩니다. then안의 res는 아까 서버에서 req.body안에 통신에 담은 값이 들었던 것처럼 res.body엔 응답받았을 때 담은 값이 있다면 활용할 수 있습니다.


여기까지가 Arcane에서 Axios 어떻게 사용했는지에 대한 설명이었습니다.