[리뉴얼] React로 NodeBird SNS 만들기

게시글 불러오기

saga의 loadPostsAPI 함수 실행 질문드립니다.

해결된 질문2022-09-19T05:18:19.726Z

312

hib4888

작성한 질문수 47

안녕하세요 제로초님 강의잘듣고있습니다.

게시글을 불러올 때 saga에서 다음과 같은 에러가 발생하면서 loadPostsAPI 함수가 실행이 안되서 질문드립니다.

콘솔의 오류를 확인해보니 data속성을 읽을 수 없어서 LOAD_POSTS_FAILURE에서 error를 출력합니다.

강의내용의 코드와 다른점이 없는것같은데 혹시 이문제에 대해 알 수 있을까요?

Recipe.io - Chrome 2022-09-19 오후 2_10_26 (2).png post.js - prepare - Visual Studio Code [Administrator] 2022-09-19 오후 2_13_59 (2).png

참코 코드도 같이 첨부하겠습니다.

reducers/post.js

const reducer = (state = initialState, action) => {
  return 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.firstPageLoad = false;
        draft.mainPosts = draft.mainPosts.concat(action.data);
        draft.hasMorePosts = draft.mainPosts.length < 30;
        break;
      case LOAD_POSTS_FAILURE:
        draft.loadPostsLoading = false;
        draft.loadPostsError = action.error;
        break;

sagas/post.js

import { all, fork, delay, put, takeLatest, call } from 'redux-saga/effects';
import shortId from 'shortid';
import axios from 'axios';

import {
  LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, 
} from '../reducers/post';

function loadPostsAPI() {  
  console.log('사가 실행2');
  return axios.get('/posts');
}

function* loadPosts() {   
  try {    
    console.log('사가 실행1');
    const result = yield call(loadPostsAPI, action.data); 
    yield put({
      type: LOAD_POSTS_SUCCESS,
      data: result.data,
    })
  } 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(watchLoadPosts),
  ]);
}

routes/posts.js

const express = require('express');

const { Post, User, Image, Comment } = require('../models');

const router = express.Router();

router.get('/', async (req, res, next) => {
  try {
    const posts = await Post.findAll({
      limit: 10,
      order: [
        ['createdAt', 'DESC'],
        [Comment, 'createdAt', 'DESC'],
      ],
      include: [{
        model: User,
        attributes: ['id', 'nickname'],
      }, {
        model: Image,
      }, {
        model: Comment,
        include: [{
          model: User,
          attributes: ['id', 'nickname'],
        }],
      }],
    });
    console.log(posts);
    res.status(200).json(posts);
  } catch (error) {
    console.error(error);
    next(error);
  }
});

module.exports = router;

nodejs express react redux Next.js

답변 1

제로초(조현영)

2022-09-19T06:06:46.837Z

서버로 요청이 아예 안 간 것 같은데 네트워크 탭 켜놓고 다시 한 번 해보시겠어요?

hib4888

2022-09-19T07:23:04.988Z

서버를 재실행하고 네트워크탭을 확인해보니 말씀대로 요청이 안보입니다.

redux 툴에서는 LOAD_POSTS_REQUEST 가 정상적으로 실행됬는데

터미널이나 콘솔에서도 명확한 이유를 찾기가 힘드네요 ㅜㅜ

제로초(조현영)

2022-09-19T07:29:52.559Z

그 전에 load_my_info_success는 리덕스에 찍히나요?

hib4888

2022-09-19T07:39:30.183Z

첫 빌드시 로그인을 하지 않은 상태에서도 LOAD_MY_INFO_REQUEST를 실행해서

코드를 다음과 같이 수정했습니다.

pages/index.js

import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Button } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import Link from 'next/link';

import { 
  HomeWrapper, HomeLogoHeader, HomeLogoText, PageMainText, PageSubText, HomeInputWrapper
} from '../pagestyles';
import { LOAD_POSTS_REQUEST } from '../reducers/post';
import { LOAD_MY_INFO_REQUEST } from '../reducers/user';
import AppLayout from '../components/AppLayout/';
import PostList from '../components/HomePost/PostList';
import HomeFooter from '../components/HomePost/HomeFooter';

const Home = () => {
  const dispatch = useDispatch();
  const { me, logInDone } = useSelector((state) => state.user);
  const { mainPosts, firstPageLoad, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);
  
  const onSearch = useCallback((value) => {
    console.log(value);
  }, []);

  // 로그인한상태에서만 실행하게 수정
  useEffect(() => {
    if (logInDone) {
      dispatch({
        type: LOAD_MY_INFO_REQUEST
      });
    }
  }, [logInDone]);

  useEffect(() => {
    if (firstPageLoad) {
      dispatch({
        type: LOAD_POSTS_REQUEST
      });
    }
  }, []);

  useEffect(() => {
    function onScroll() {
      if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
        if (hasMorePosts && !loadPostsLoading) {
          dispatch({
            type: LOAD_POSTS_REQUEST
          });    
        }
      }
    };    

    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, [hasMorePosts, loadPostsLoading]);
  
  return (    
    <AppLayout>
      <HomeWrapper>
        <HomeLogoHeader>
          <HomeLogoText>
            <PageMainText>Recipe.io</PageMainText>
            <PageSubText>Have a delicious meal today</PageSubText>
          </HomeLogoText>
          {me && <Link href='/posting'><a><Button type='primary' size='large' icon={<PlusCircleOutlined />} >Create Recipe</Button></a></Link>}
        </HomeLogoHeader>
        
        <HomeInputWrapper 
          placeholder="Search for Recipe" 
          size='large' 
          allowClear="true" 
          enterButton 
          onSearch={onSearch}
        />
        
        <PostList mainPosts={mainPosts} />
      </HomeWrapper>

      <HomeFooter />
    </AppLayout>
  )
};

export default Home;

이후 콘솔이랑 redux툴을 확인해도 이전과는 동일하네요 ㅜㅜ

제로초(조현영)

2022-09-19T07:56:39.000Z

찾았습니다. action.data 넣으셔서 그렇습니다. *loadPosts 매개변수에 action이 없거든요

hib4888

2022-09-19T09:51:14.532Z

하루종일 계속 찾고 있었는데 드디어 답을 알았네요 감사합니다 ㅜㅜ

넥스트 버젼 질문

2026-01-07T06:31:22.141Z

로그인시 401 Unauthorized 오류가 뜹니다

2025-12-29T09:30:35.438Z

104

무한 스크롤 중 스크롤 튐 현상

2025-07-06T02:43:07.608Z

198

특정 페이지 접근을 막고 싶을 때

2025-07-06T02:20:46.587Z

117

createGlobalStyle의 위치와 영향범위

2025-07-05T15:54:04.209Z

103

인라인 스타일 리렌더링 관련

2025-07-05T14:00:04.676Z

vsc 에서 npm init 설치시 오류

2025-05-12T08:46:42.592Z

159

nextjs 15버전 사용 가능할까요?

2025-04-04T06:26:24.063Z

166

화면 새로고침 문의

2025-04-03T02:53:27.651Z

129

RTK에서 draft, state 차이가 있나요?

2025-02-17T06:47:55.275Z

164

Next 14 사용해도 될까요?

2024-07-28T10:05:29.120Z

455

next, node 버전 / 폴더 구조 질문 드립니다.

2024-06-05T11:36:38.842Z

359

url 오류 질문있습니다

2024-06-05T06:17:30.590Z

218

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

2024-05-11T05:39:14.724Z

391

sudo certbot --nginx 에러

2024-05-11T05:34:38.202Z

1295

Minified React error 콘솔에러 (hydrate)

2024-05-10T22:59:04.027Z

481

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

2024-05-10T22:44:43.107Z

257

프론트서버 배포 후 EADDRINUSE에러 발생

2024-05-09T21:37:15.721Z

341

npm run build 에러

2024-05-09T14:19:16.056Z

526

front 서버 npm run build 중에 발생한 에러들

2024-05-09T03:09:20.494Z

399

서버 실행하고 브라우저로 들어갔을때 404에러

2024-05-08T17:15:48.222Z

351

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

2024-05-07T23:41:29.498Z

291

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

2024-05-07T20:28:11.236Z

251

해시태그 검색에서 throttle에 관해 질문있습니다.

2024-05-07T10:14:51.155Z

207