지도페이지를 호출해서 이동하면 사용자의 화면의 범위(위경도의 범위)에 따른 게시글이 왼쪽에 조회가 되어지고,
지도에서는 게시글이 있는 장소들만 표기가 되도록 만들었다.
분명 어제까지만해도 잘 되던 것이 갑작스럽게 화면을 이동하면 데이터가 늦게 불러와지거나, 아예 안불러와지거나, 스케일을 변경했을 때 나타난다거나 안나타난다거나하는 잇슈가 생겼다. 무엇이 문제인가.
https://tonadus.shop/api/locations?latitude=37.6242176&longitude=127.0710272&categoryName=&qa=37.52402628703906&pa=37.562930430164975&ha=126.93057465307278&oa=127.0283301245213확인 1. 프론트 -> 백 요청이 잘 보내는가?
요청은 잘 들어오는 곳으로 보였다.
확인 2. 프론트 -> 백 요청을 잘 받는가?
...백에서 뭔가를 잘 못 받는 것 같았다.
그런데 또 뜨는 게시글들이 있어서 대체 무엇이 문제인지 살펴보았다. 우선 서버에서 오류가 났다는 url의 query값을 하나씩 없애 조회해봤다.
1) latitude 삭제
2) longitude 삭제
3) qa, pa, ha, oa 삭제
qa 삭제만 첨부했는데 다른 것들(pa, ha, oa)도 동일했다.
4) categoryName을 삭제
categoryName을 삭제하니 데이터가 조회가 되었다.
=만 제거해봐도 조회가 되지 않았다.
그럼 categoryName의 문제인가?!
사실 categoryName은 3가지로 구성되어있다. 음식점, 카페, 기타. 이 세가지가 아닌 경우 전체를 불러오기 위해서 프론트쪽에서 빈 문자열을 보내게 되면 백에서는 필터를 적용하지 않은 데이터를 보내주기로 했었다.
...(category?.categoryId && { CategoryId: category.categoryId })위의 코드는 백쪽에서 필터링을 위해서 where절에 넣은 기준이었다.
category는 categoryName으로 찾은 catagory내용이고, category의 categoryId를 통해서 location을 찾는 방식이었다. 간단하게 그냥 프론트에서 categoryId를 받아서 하면 간단하지 않냐고 생각할 수 도 있지만, DB의 내용을 삭제하는 일이 일어날 것을 대비해서 (categoryId(PK)를 autoincrement로 설정해놔서 변경되어버림) 그냥 고유값을 가진 categoryName으로 요청을 보내고 받기로했던 것이었다.
다른 categoryName을 넣어봤다. 그랬더니 잘 돌아갔다.
빈 문자열로 보내게 되면 뭔가 안되나보다. 싶어서 프론트에게 이야기해서 빈 문자열 대신 '전체'라는 쿼리를 보내달라고 요청을 했다.
확인 3. 백의 코드가 이상이 있는가?
localhost 테스트
서버 테스트
categoryName을 아예 없애면 에러가 안생기고, 값을 안넣으면 에러가 떴다. 코드에 이상이 있다고 판단되었다.
코드를 우선 해당 카테고리가 아닌 경우 걸러내고, 전체로 받는 건 null값으로 처리했다.
const { categoryName } = req.query;
const { latitude, longitude, qa, pa, ha, oa } = req.query;
if (!categoryName || !['음식점', '카페', '기타', '전체'].includes(categoryName)) {
return res.status(400).json({ message: "올바른 카테고리를 입력하세요." });
}
let category;
if (categoryName !== '전체') {
category = await prisma.categories.findFirst({
where: { categoryName },
});
} else {
category = { categoryId: null };
}코드를 수정 후 로컬에서는 잘 돌아갔고,
< 로컬 >
< 서버 >
- categoryName : '카페','음식점' 은 오류 없이 데이터 조회
- categoryName : '기타','전체' 오류 발생
아니 대체 뭐가 문제인거지?
그러다가 문득 생각이 났다. 지난 과제를 하면서 발생했던 문제.
A의 이름을 가진 router.get의 url주소가 '/locations/myself'이고,
B의 이름을 가진 router.get의 url의 주소가 '/locations/:locationId'였었다.
자꾸 A를 호출할 때 B가 호출되어 에러가 발생했던 적이 있었다. 그때 myself가 locaionId인 params로 들어가서 발생한 문제였다. 이때 중요한 건 라우터의 호출되는 순서였다. 아래는 chatGPT의 대답.
그걸 생각해보고 현재 문제가 발생한 코드를 확인해봤는데 순서는 적절히 잘 되어 있었다. 그럼 혹시나 프론트에서도 이런 일이 발생할 수가 있나? 싶어서 알아보니 react router를 사용하게되면 동일하게 라우터 순서가 중요하다고 했다.
-> 프론트에서는 해당이 없었다.
이것도 아니라면 프론트에서 백으로 요청은 잘보내는데 백에서 받은 요청으로 데이터를 보내줄때 병목현상이 생기는건가? 아니 만약 그렇다면 처리 도중 서버가 꺼지거나 하지않을까?
지금은 그냥 서버에서 에러가 나는거니까 애초에 보내기도 전에 생긴 에러같다.
확인 4. DB에 이상한 게시글이 저장이 된건가?
혹시 몰라서 DB를 다시 싹 다 지워버리고, 다시 시도했다. 그랬더니 조회 성공.
예상컨데 게시물 중 에러를 발생시키는 무엇인가 들어갔던거 같다. 그걸 지워버리고 게시글 작성 후 조회하니 성공..!
초기화시키고 생각해보니까 지난번 사진없이 게시글을 올린 적이 있었다. 그때 서버를 조회했을때 일부 api가 먹통이 된적이 있는데 문제로 예상되는 데이터를 지우고 나서도 약간 이상했던 적이 있었다. 그때도 초기화를 시키고 진행했던게 생각이 주마등처럼 스치고 지나갔다.
만약 사용자가 잘못된 데이터를 넣어버리면 이런 상황이 발생할텐데 유효성 검사를 빡시게 해놔야겠다.
