23년 4월 26일
시도 한 것, 알게 된 점
오늘 구현 한것이라면 새로운 API를 추가하는 것은 아니고, 기존에 있었던 API 중에서 그중 피드페이지 관련 쪽에다 해당 피드를 좋아요 누른 isLike, 해당 피드의 코멘트를 총 몇개 썼는지 출력하는 feedCommentCount, 그리고 해당 코멘트 부분들을 가공한 것들을 구현을 하였다.
사실 원래 피드 페이지 관련 부분은 내가 담당한 부분이 아니라 팀원이 이미 구현 했던 코드라 내가 작성한 코드가 아니다 보니 팀원 분의 코드를 분석하고, 그리고 코드를 추가하는 것이였기 때문에 상당히 햇갈린 상태로 시작하였다. 아무래도 사람마다 코드 작성하는 스타일은 모두 제각각이고, 그러기 때문에 팀원 분의 코드를 이해 하는데에서 시간을 많이 썼고, 콘솔로그로 찍어보면서 코드들을 분석 하였다.
계속 다른 팀원 분은 3일전부터 folder와 List를 구현에 힘을 쓰고 계셔가지고, 그외 부가적인 기능 추가는 내가 모두 구현하고 있는 중이다.
본론으로 가서 먼저 피드페이지의 전체 조회 API 부터 구현하였다.
여기서 추가 한 부분은 다음과 같게 추가를 하였다.
// 좋아요 유무 확인
let isLike
if(userId) {
isLike = await Likes.findOne({where : { FeedId : feed.feedId, UserId : userId }})
}
isLike ? (isLike = true) : (isLike = false)
// 해당 피드 좋아요 개수
let likeCount = await Likes.findAll({where : { FeedId : feed.feedId }})
likeCount = likeCount.length
// 해당 피드의 댓글 개수
let feedCommentCount = await FeedComments.findAll({where : { FeedId : feed.feedId }})
feedCommentCount = feedCommentCount.length전체 조회 API와 해당 카페의 피드들만 조회하는 API 둘 다 공통적으로 같은 경우에는 로그인 했을 때는 본인이 좋아요 피드 누른 것만 true, 아닌것은 false로 출력하게 구현 하였다. 비로그인 상태에서는 if문에서 성립 되지 않기 때문에 false로 고정하였다.
해당 피드의 좋아요 개수랑, 해당 피드의 댓글 개수는 어제 했던 것처럼 비슷하게 각각 Like 테이블와 FeedComments 테이블 전체를 조회해서 해당 피드에 대해서 조건을 걸어 주고, 그 배열의 개수만 구하면 끝이였다.
아래의 코드 처럼 이런 식으로 result 안에다 가공을 하면 끝이였다.
return {
...
isLike,
likeCount,
feedCommentCount,
}이렇게 postman에서 잘 뜨는 것을 확인 할 수 있었다.
"isLike": true,
"likeCount": 1,
"feedCommentCount": 2다음은 피드 상세페이지로 해당 피드 딱 하나를 보여 주는 부분인데, 여기서 추가로 구현 한것은 좋아요 우무 체크 하는 것과 그리고 해당 피드들의 댓글들을 상세하게 보여주는 기능이였다. 각각에는 해당 댓글을 작성한 닉네임와 프로필 사진, 해당 유저가 적은 코멘트, 그리고 언제 작성했는지를 추가 하였다.
// 좋아요 유무 체크
let isLike = await Likes.findOne({where : { FeedId : value.feedId }})
isLike ? (isLike = true) : (isLike = false)
// 해당 피드의 코멘트 전체 조회
let feedCommentResult = []
let findAllFeedComment = await FeedComments.findAll({ where : { FeedId : value.feedId }})
for (let i = 0; i < findAllFeedComment.length; i++) {
let findFeedComment = await FeedComments.findAll({ where : { FeedId : value.feedId }})
let result = {
userNickName : value.User.nickname,
userComment : findFeedComment[i].feedComment,
userProfile : value.User.profilePic,
createdAt : findFeedComment[i].createdAt,
}
feedCommentResult.push(result)
}여기서 가장 구현하기 어려웠던 것은 당연히 코멘트 전체 조회 하는 부분이였으면 당연히 가공하는 부분이 어려웠었다 value는 이미 팀원 한분이 데이터 조회를 한 변수로 선언 했기 때문에 나는 이걸 참고하여서 코드를 작성하였다.
그리고 해당 코멘트 하나하나마다 배열로 저장해야 했기 때문에 for문을 사용하여서 구현을 하였다. 그런 다음에 result에다 데이터들을 가공을 하였고, 그리고 나온 배열들을 feedCommentResult로 푸시 함수를 이용하였다.
let result = {
...
isLike,
feedComment : feedCommentResult,
} 이렇게 배열 한 것들을 for 밖에서 다시 재 가공을 해주면 되었다.
"isScrap": true,
"isLike": true,
"likeCount": 1,
"feedComment": [
{
"userNickName": "찬웅팍",
"userComment": "댓글 남겨요.",
"userProfile": "http://k.kakaocdn.net/더미/img_640x640.jpg",
"createdAt": "2023-04-27T04:17:45.000Z"
},
{
"userNickName": "찬웅팍",
"userComment": "댓글 한번 더 남겨요",
"userProfile": "http://k.kakaocdn.net/더미/img_640x640.jpg",
"createdAt": "2023-04-27T07:42:32.000Z"
}
]postman에서도 정상적으로 배열 형식으로 나오고 있는 것을 볼 수 있었다. userProfile는 실제 카톡 사진이 노출되기 때문에 해당 부분은 더미.jpg로 바꿨다.
이렇게 마지막까지 기본적인 구현은 거의 마무리 되었고, 오늘 저녁에 특별 세션 강의로 트러블 슈팅의 강의가 있었는데 간단하게 세션 후기를 말하자면, 우선 어떤 문제가 발생했는지를 빠르게 알고, 그런 다음에 어디에서 코드가 에러가 났는지를 알아야 하는 것이라고 말씀하셨다. 대부분 80퍼 이상의 상황에서는 본인이 작성한 코드에서 에러가 나는 경우가 많고, 그 외에는 서버 과부화이거나 혹은 패키지 라이브러리가 진짜로 오류가 나서 안되는 경우가 있는 경우도 있다.
거의 대부분 상황에서는 문제를 분석하고 그것에 대한 원인을 파악하는 것이 가장 중요한 부분이였다. 그래야 빠르게 코드를 수정 할 수 있다고 말씀해 주셨다.
나중에 수료 후에 그외로 참고하기 좋은 책들로는 자료구조나 알고리즘이나 네트워크, 운영체제 같은 책들도 같이 공부하면 좋다고 말씀하셨다.
오늘은 지금까지는 내가 작성한 코드에서 계속 추가하고 수정하는 것이였는데, 처음으로 이미 다른사람이 코드를 작성한 코드에서 추가를 하는 것이라 팀원분의 코드를 이해하는데 시간이 많이 걸렸고, 그래서 느낀 것은 나중에 시간이 된다면 코드 통일화도 중요해 보이기도 하였다. 서로 작성한 코드들도 리뷰도 하는 것이 좋다고 생각하였다. 이렇게 해서 폴더 부분만 빼면 중간 발표 이후로 추가된 기능들은 모두 구현 마무리 하였다.
앞으로 할 일
내일부터 팀원 한분이 계속 구현하시는 폴더 부분 코드 이해하고, 막히는 부분을 도와줄 것이며, 그 외로 이제 프론트 분들이 구현 중에 API 불러오는 문제가 발생하면 그것들을 같이 분석하고 수정하는 작업을 시작 할것 같다.
