인프런 커뮤니티 질문&답변

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시간째 헤매고 있습니다

도와주세요