미해결
[리뉴얼] React로 NodeBird SNS 만들기
LOAD_POSTS_REQUEST가 무한정 일어나요.,
보시다 시피 GET /posts 304 에러로 인해 정상 작동하지 않습니다.
사진상으로는 멈춰있지만 무시무시하게 많은 에러가 제 신성한 VSC 터미널창을 도배하고 있습니다.
처음엔 REQUEST - SUCCESS를 번갈아 보내는 모습을 보고, 'page/index.js'에서 요청을 보내는 클라이언트의 잘못이라고 생각했습니다.
REQUEST를 무한정 보내고 있으니 보내는 쪽의 문제일 거라고요..
front/page/index.js
...
...
import { LOAD_POSTS_REQUEST } from '../reducerss/post';
import { LOAD_USER_REQUEST } from '../reducers/user';
const Home = () => {
const dispatch = useDispatch();
const { me } = useSelector(state => state.user);
const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector(
state => state.post,
);
useEffect(() =>{
dispatch({
type: LOAD_USER_REQUEST,
});
dispatch({
type: LOAD_POSTS_REQUEST,
})
}, []);
const [ref, inView] = useInView();
// useEffect(() => {}, []) : 뒤에 빈배열을 넣을 경우.componentDidMount()같은 효과를 줄 수 있다.
useEffect(() => {
if (inView && hasMorePosts && !loadPostsLoading) {
const lastId = mainPosts[mainPosts.length - 1]?.id;
dispatch({
type: LOAD_POSTS_REQUEST,
lastId,
});
}
}, [inView, hasMorePosts, loadPostsLoading, mainPosts]);
return (
<AppLayout>
{me && <PostForm />}
{mainPosts.map(post => (
<PostCard key={post.id} post={post} />
))}
.......
.......
</AppLayout>
);
};
export default Home;
그런데 딱히 특이사항이 발견되지 않아서 front/sagas와 front/reducers 쪽을 보았습니다.
front/sagas
import {
all,
delay,
fork,
put,
call,
takeLatest,
throttle,
} from 'redux-saga/effects';
import axios from 'axios';
import {
......
LOAD_POSTS_REQUEST,
LOAD_POSTS_SUCCESS,
LOAD_POSTS_FAILURE,
} from '../reducers/post';
function loadPostsAPI(data) {
//실제로 서버에 요청을 보냄
return axios.get('/posts', data);
}
function* loadPosts(action) {
try {
const result = yield call(loadPostsAPI, action.data);
yield put({
type: LOAD_POSTS_SUCCESS,
data: result.data, // data에 게시글들 배열 -> 이것은 reducer로 간다
});
} catch (err) {
yield put({
type: LOAD_POSTS_FAILURE,
data: err.response.data,
});
}
};
....
function* watchLoadPosts() {
yield takeLatest(LOAD_POSTS_REQUEST, loadPosts);
}
....
export default function* postSaga() {
yield all([
fork(watchAddPost),
fork(watchLoadPosts),
fork(watchRemovePost),
fork(watchAddComment),
]);
}
front/reducers
const reducer = (state = initialState, action) =>
produce(state, draft => {
switch (action.type) {
case LOAD_POSTS_REQUEST:
draft.loadPostsLoading = true;
draft.loadPostsDone = false;
draft.loadPostsError = null;
break;
case LOAD_POSTS_SUCCESS:
draft.loadPostsLoading = false;
draft.loadPostsDone = true;
draft.mainPosts = draft.mainPosts.concat(action.data);
draft.loadPostsError = null;
draft.hasMorePosts = draft.mainPosts.length < 50;
break;
case LOAD_POSTS_FAILURE:
draft.loadPostsLoading = false;
draft.loadPostsError = action.error;
break;
304 에러로 보아 서버 쪽 문제일 수도 있어서 라우터 쪽도보았습니다.
const express = require('express');
const { Post, Image, User, Comment } = require('../models');
const router = express.Router();
router.get('/', async (req, res, next) => { // GET /posts
try {
const posts = await Post.findAll({
limit: 10,
order: [['createdAt', 'DESC']],
include: [{
model: User,
}, {
model: Image,
}, {
model: Comment,
}],
});
res.status(200).json(posts);
} catch (error) {
console.error(error);
next(error);
}
});
module.exports = router;
어느쪽 문제인지 사실 잘 모르겠습니다.저런식으로 무한 로딩 에러가 난다면 어디에서 에러를 찾아야 하나요? 제가 생각하기엔 프론트였는데 예상이 빗나가서 2시간째 헤매고 있습니다
도와주세요
