23년 3월 25일

배운 것

오늘은 나한테 가장 어려웠었던 게시글 좋아요 API를 작성하였고, 팀원들 모두 작성한 것을 모두 머지를 시킨 후 회원가입 이용자만 기능들을 이용하게 수정하였다. 그리고 첫 API 배포를 마무리 하였다.

시도 한 것

이번에 가장 어려웠던 게시글 좋아요 API를 구현하였다. 해당 기능을 설명하자면 한명의 유저가 어떤 한 게시글에 좋아요를 누를 수 있고, 이미 좋아요 누른 것을 다시 누르면 좋아요가 취소 되는 기능이였다. 그리고 이후 게시글 전체 조회 할때 해당 게시글의 좋아요를 누른 갯수도 나타나게 코드를 짜는 것이였다.
하지만 좋아요 기능은 처음으로 내가 구현 해보는 것이였기에, 상당히 애를 먹었었다. 이전에 LV4 개인과제때 구현 한 흔적은 있었지만 거의 숙련주차때 코드를 거의 복붙해서 가져 온거라 그 당시에는 코드를 이해하지를 못했었기 때문에 처음부터 직접 코드를 작성하면서 이해하는데 노력을 하였다. 그리고 이 당시에는 아직 로그인이 구현을 하지 못했을 때라 토큰이 아예 없었기에 해당 코드 없는 상태로 구현을 했어야 했다.

router.put('/:postId/like', authMiddleware, async (req, res) => {
  try {
    const { postId } = req.params;
    const { userId } = res.locals.user; // 토큰을 검사하여 해당 회원 확인
    const isExistPost = await Posts.findByPk(postId); // 게시글 있는지 확인
    // 게시글 없을 때
    if (!isExistPost) {
      return res.status(404).json({ errorMessage: '게시글이 존재하지 않습니다.' });
    }

    // postId와 userId 검색
    const isLiked = await Likes.findOne({ where: { postId: postId, userId: userId } });
    // 좋아요 유무 따져서 좋아요가 없으면 좋아요 등록, 반대인 경우는 좋아요 취소
    if (!isLiked) {
      const likes = isExistPost.likecount + 1;
      await Likes.create(
        { postId: postId, userId: userId, isLike: true }
      );
      await Posts.update(
        { likecount: likes },
        { where: { postId: postId } }
      )
      return res.status(200).json({ message: '좋아요 등록에 성공하였습니다' });

    } else {
      const likes = isExistPost.likecount - 1;
      await Likes.destroy(
        { where: { postId: postId, userId: userId } }
      );
      await Posts.update(
        { likecount: likes },
        { where: { postId: postId } }
      )
      return res.status(200).json({ message: '좋아요 취소에 성공하였습니다.' });
    }
  } catch (error) {
    console.error(`${req.method} ${req.originalUrl} : ${error.message}`);
    return res.status(400).json({ errorMessage: '예기치 않은 오류가 발생하였습니다.' });
  }
});

처음에는 postId 파람스로 받고 userId 기준으로 인증을 하였다. 그리고 postId 기점으로 게시글이 존재하지 않을 때 존재하지 않는 에러핸들링을 처리 하였다.
그런 다음에 이제 한 유저가, 해당 게시글을 좋아요를 누르는 작업이기에 postId와 userId를 조건을 찾아서 isLiked 변수를 선언하였고, isLiked가 없으면 이것은 해당 게시글에 좋아요를 없는 것이니 좋아요를 누를 수 있게 Likes의 데이터를 추가 하였다. isLike는 불린으로 정의 했고 초기 설정을 false로 지정하였기 때문에 true로 변환하게 하였다.
const likes = isExistPost.likecount + 1 이 부분은 기존 Posts 테이블에도 수정해서 해당 게시글의 누적 좋아요 갯수를 알기 위해서 다음과 같은 likes 변수를 선언하여서 update를 이용해서 수정하였다. Posts 테이블에 likecount 컬럼이 있어서 그 숫자를 1 더하는 로직이다.
이와 반대로 이미 좋아요가 있으면 다시 누를때 좋아요가 취소되게 하면 되었다.
이 경우에는 const likes = isExistPost.likecount - 1 해서 빼면 되고, 기존 likeId를 해당 게시글의 기본값인 postId를 삭제하면 되었다.

이렇게 오후까지 구현을 마무리 하였고, 때마침 팀원 한분이 회원가입 로그인 기능이 마무리 되었다고 해서, 모두 각자 코드를 머지하고 최종적으로 토큰이 있을 때로 각자 코드를 수정하기 위해서 3명 모두 라이브 코딩으로 동시에 수정을 하였고 마지막 postman으로 테스트를 하고 오류가 있는 코드들은 수정하는 작업을 가졌다. 그렇게 2시간정도 고생을 한 다음에 마무리를 했지만 프론트앤드의 부탁으로 Users에 유저 프로필 사진이 필요하다고 해서 profileImg 컬럼을 하나 더 추가하였다. 그래서 이미 기존에 했던 데이터 베이스 다 삭제하고 다시 만들어서 테스트를 한 번더 진행해서 추가 확인 한 후 ec2로 초기 배포까지 마무리를 하였다. 이후에는 각자 코드 복습을 하거나 사진을 어떻게 등록할지 고민하는 시간을 가진 상태로 마무리 하였다. 이날은 토요일이라서 다들 일찍 체크아웃 한것 같고, 나도 이날은 일찍 들어간 것 같다.

해결

오늘은 팀원들이랑 기본적인 API는 구현을 마무리 하였고, 배포까지 마무리 하였다.

알게 된 점

오늘은 뭔가 구현한게 크게 많지는 않았다. 대부분 코드를 합쳐서 최종 점검을 하고, 테이블 컬럼 하나 더 추가한 다음에 다시 한번 더 테스트하고 배포 하는 시간에 거의 다 쓴 것 같다.
그래서 일단 가장 기초적인 API 구현은 모두 마무리 해서 다행이라고 생각하였다. 저번주랑 다르게 이번주는 뭔가 같이 라이브 코딩 하는 방식으로 3명이 동시에 한 화면으로 작업하니까 색다른 경험을 하였고, 코드를 작성해주시는 팀원 한분이 가장 고생을 많이 하셨다. 덕분에 재미있게 코딩을 한것 같았다.

앞으로 할 일

내일은 일요일이라 푹 쉬고, 역시 매주마다 돌아오는 WIL을 작성 할것 같다. 그리고 월요일부터는 진짜로 사진을 어떻게 데이터베이스에 저장할지 팀원들과 함께 고민해볼 것 같다. 이후부터는 우리도 새로운 기능을 처음으로 구현해보는 챌린지 기능들이기에 더더욱 빡세지겠지만 할 수 있는 데 까지 해볼 생각이다.