23년 4월 29일
시도 한 것, 알게 된 점
어제 약간 욱했지만, 오늘 아침에 일어나서 가장 먼저 한 것은 어제 추가 구현 중 두번째인 댓글 작성하면 나오는 메세지에다 유저의 정보와 댓글 내용, 작성 날짜를 구현을 하는 것이였다.
그동안 작성을 했다면 단순하게 JSON에서 {msg: "댓글 작성 완료했습니다."} 이런식으로 단순히 메시지만 보내는게 전부였지만 작성한 부분을 모두 기록하는 것이 필요했었다.
하지만 문뜩 생각하면 이전에 메인페이지 구현할때도 위도, 경도, 반경거리를 받아서 모든 데이터를 조회 했던 것처럼 이것도 비슷하게 하면 되지 않을까 해서 방식을 비슷하게 접근을 하였다.
const comment = await FeedComments.findOne({
attributes: [
"UserId",
"feedCommentId",
"feedComment",
"createdAt",
],
include : [
{
model: Users,
attributes: ["nickname", "profilePic"],
},
],
where : [{ FeedId: feedId }],
order: [['createdAt', 'DESC']],
})먼저 FeedComments 테이블에서 필요한 데이터들 모두 가져오면 되었다. 지금 보니 어쩌피 하나만 조회하는 것이라 order는 필요 없었는데 그때 당시에는 모르고 추가를 했던것 같다. 저거 넣어도 결과는 같아서 그냥 넘어가긴 했다.
let result = {
nickname : comment.User.nickname,
profilePic : comment.User.profilePic,
feedComment : comment.feedComment,
feedCommentId: comment.feedCommentId,
createdAt : comment.createdAt,
}
res.status(201).json({ msg : "댓글 작성에 성공했습니다.", comment : result })그리고 늘 있었던 데이터 가공 작업, 역시 어려운 건 없었고, 마지막 json에다 보낼때 result를 값을 받으면 마무리 되었다.
{
"msg": "댓글 작성에 성공했습니다.",
"comment": {
"nickname": "박찬웅",
"profilePic": "http://k.kakaocdn.net/샘플.jpg",
"feedComment": "댓글 또 남깁니다",
"feedCommentId": 23,
"createdAt": "2023-04-29T06:28:53.000Z"
}
}이렇게 postman으로도 정상적으로 잘 출력 된 것을 볼 수 있었다.
이 뒤로 오후 3시쯤에 멘토링 시간이 있어서, 여러가지 현재 상황을 말했고, 앞으로 계획을 한다면 사실 백앤드에서는 구현된 기능은 거의 끝 마무리 되가지고, 코드 리펙토링이나 크롤링, 테스트 코드라도 한번 해볼까 의논을 하였다. 해당 부분은 해도 괜찮을 것 같다고 말씀해 주셨다.
그리고 현재 기능 구현하고 있는 스크랩 많은 순으로 카페 10개만 조회하는 것을 추가 하기로 했었는데, 멘토님은 전반적으로 기능을 봤을때 중요한 기능은 아닌것 같다고 하셔서 빼도 될것 같다고 말씀해 주었다. 그래서 이대로 기능을 뺄까 했지만, 프론트분과 상의를 한 결과 무작위 10개 조회로 변경을 하였다. 그래서 약간 구현해야하는 로직이 간소화 되었다.
이제 마지막으로 무작위로 카페 10개 정보 출력하는 기능을 구현하였다.
처음에는 어려울 것 같지는 않았는데 계속 구현해보니까 스크랩 유무가 들어가서 유저 토큰이 필요했었고, 또한 거리도 나타나는데 무슨 기준으로 거리를 계산해야하는지 성립이 되지 않았었다. 그래서 주기적으로 몇번 말을 나누는 끝에 최종적으로는 get에서 post문으로 바뀌었고, 위도, 경도도 request로 받는 것으로 변경하였다.
그래서 최종적으로는 다음과 같이 구현하였다.
for (let i = 0; i < 10; i++) {
const userLocate = { latitude: lng, longitude: lat };
const shopLocate = {
latitude: shops[i].lng,
longitude: shops[i].lat,
};
const totalDistance = haversine(userLocate, shopLocate, {
unit: "meter",
});
let isScrap = await Scrap.findOne({
where: { ShopId: shops[i].shopId, UserId: userId },
});
let findFeedAll = await Feeds.findAll({
where: { ShopId : shops[i].shopId }
})
let findScrapAll = await Scrap.findAll({
where: { ShopId : shops[i].shopId }
})
let feedCount = findFeedAll.length
let scrapCount = findScrapAll.length
let result = {
shopId: shops[i].shopId,
address: shops[i].address,
lng: Number(shops[i].lng),
lat: Number(shops[i].lat),
shopName: shops[i].shopName,
thumbnail: shops[i].thumbnail,
menuName: shops[i].menuName,
maxPrice: Number(shops[i].maxPrice),
minPrice: Number(shops[i].minPrice),
distance: Number(totalDistance.toFixed(0)),
category: shops[i].category,
feedCount : feedCount,
isScrap: isScrap ? true : false,
scrapCount : scrapCount,
}
best10Shop.push(result)
}
res.status(200).json({ shops : best10Shop });뭔가 보면 거의 이전 코드랑 큰 차이는 없지만 가장 큰 차이점이라면 바로 저 for문을 0부터 9까지 출력하게만 했으면 되었다. 원래는 이렇게 하려고 하진 않았고, sequelize에서도 limit 기능이 있었는데 이걸 10으로 지정하면 10개만 나타나게 할 수 있는 기능였다. 하지만 무슨 문제인지 계속 결과는 카페는 단 1개만 조회하였고, 결국에는 안되다가 다른 우회방법으로 생각해보니 데이터를 가공 할때 for문을 전체 길이를 구하지 말고 그냥 0부터 9까지만 출력하게 i < 10까지만 반영하는 것으로 구현하였다. 이렇게 하니까 10개만 딱 등장하게 구현 할 수 있었다. 그 외에는 이전에 메인페이지에서 구현 했던것이랑 비슷했다.
마찬가지로 비로그인상태는 isScrap 변수만 빼고 가공 할때는 false로 고정하면 끝이였다.
이렇게 해서 추가적으로 요청한 API는 모두 마무리 되었고, 그와 동시에 팀원 한분도 마침내 즐겨찾기 폴더 생성 기능도 마무리 되었다고 해서, 원래 구현 하려고 했던 API는 모두 다 마무리 되었다. 일요일 되기 전에 구현 되서 기뻤고, 이제 남은건 프론트 분들의 기능 구현만 남았다.
앞으로 할 일
내일은 일요일이라 푹 쉬고, 5주차에는 아마 프론트분들도 남는 버그들도 다 고치고 배포 한 후 테스트를 해서, 여전히 안되는 부분들은 협업하면서 수정할 부분을 하는 마무리 작업을 할 계획이다.
