카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

Posts 데이터가 안불러집니다 흑

21.04.24 00:39 작성 조회수 251

전에는 me.nickname 에 nickname이 안불러져 와서 제로초님이 알려주신 방식대로 ?. 옵셔널 체이닝(?) 방식으로 처리했는데 이번에는 me.Posts, me.Followings, me.Followers 하니까 이런 에러들이 나와서 이번에도

이런식으로 처리를 했는데요 ㅠㅠ

이렇게 없는 걸로 간주되어 프로필이랑 작성글, 팔로잉, 팔로워에 아무것도 안나옵니다...

👇🏻 제가 작성한 리듀서 내용 입니다 ! 늘 답변 감사드립니다 ㅜ!

export const initialState = {
logInLoading: false, // 로그인 시도중 => ture가 되면 로딩창을 띄운다.
logInDone: false,
logInError: null,
logOutLoading: false, // 로그아웃 시도중
logOutDone: false,
logOutError: null,
signUpLoading: false, // 로그아웃 시도중
signUpDone: false,
signUpError: null,
me: null,
signUpData: {},
loginData: {},
};

// 액션 선언
export const LOG_IN_REQUEST = "LOG_IN_REQUEST";
export const LOG_IN_SUCCESS = "LOG_IN_SUCCESS";
export const LOG_IN_FAILURE = "LOG_IN_FAILURE";

export const LOG_OUT_REQUEST = "LOG_OUT_REQUEST";
export const LOG_OUT_SUCCESS = "LOG_OUT_SUCCESS";
export const LOG_OUT_FAILURE = "LOG_OUT_FAILURE";

export const SIGN_UP_REQUEST = "SIGN_UP_REQUEST";
export const SIGN_UP_SUCCESS = "SIGN_UP_SUCCESS";
export const SIGN_UP_FAILURE = "SIGN_UP_FAILURE";

export const FOLLOW_REQUEST = "FOLLOW_REQUEST";
export const FOLLOW_SUCCESS = "FOLLOW_SUCCESS";
export const FOLLOW_FAILURE = "FOLLOW_FAILURE";

export const UNFOLLOW_REQUEST = "UNFOLLOW_REQUEST";
export const UNFOLLOW_SUCCESS = "UNFOLLOW_SUCCESS";
export const UNFOLLOW_FAILURE = "UNFOLLOW_FAILURE";

const dummyUser = (data) => ({
...data,
nickname: "hyunju",
id: 1,
Posts: [{ id: 1 }],
Followings: [],
Follwers: [],
});
// 시퀄라이즈에서 합쳐주기때문에 대문자

export const loginRequestAction = (data) => ({
type: LOG_IN_REQUEST,
data,
});

export const logoutRequestAction = () => ({
type: LOG_OUT_REQUEST,
});

// 리듀서 상태 선언
const reducer = (state = initialState, action) => {
switch (action.type) {
case LOG_IN_REQUEST:
console.log("리듀서 로그인");
return {
...state,
logInLoading: true,
logInDone: false,
logInError: null,
};
case LOG_IN_SUCCESS:
return {
...state,
logInLoading: false,
logInDone: true,
me: dummyUser(action.data),
};
case LOG_IN_FAILURE:
return {
...state,
logInLoading: false,
logInError: action.error,
};
// --------------------------------------------
case LOG_OUT_REQUEST:
return {
...state,
logOutLoading: true,
logOutDone: false,
logOutError: null,
};
case LOG_OUT_SUCCESS:
return {
...state,
logOutLoading: false,
logOutDone: true,
me: null,
};
case LOG_OUT_FAILURE:
return {
...state,
logOutLoading: false,
logOutError: action.error,
};
// --------------------------------------------
case SIGN_UP_REQUEST:
return {
...state,
signUpLoading: true,
signUpDone: false,
signUpError: null,
};
case SIGN_UP_SUCCESS:
return {
...state,
signUpLoading: false,
signUpDone: true,
};
case SIGN_UP_FAILURE:
return {
...state,
signUpLoading: false,
signUpError: action.error,
};
default:
return state;
}
};

export default reducer;

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

바뀐 상태 적용하고 eslint 점검하기

강의실 바로가기

답변 3

좋아요순

최신순

답변을 작성해보세요.

조현영

지식공유자

2021.04.28

지금 보시면 서버쪽에서 LOG_IN_REQUEST와 ADD_POST_REQUEST가 있는데요. 매번 페이지 로딩 시마다 ADD_POST_REQUEST를 하실 건가요? LOAD_POSTS_REQUEST로 포스트를 가져와야하지 않나요?

leehyunju

질문자

2021.04.24

안녕하세요! 몇시간 내내 데이터 분석도 해보고, 리듀서 분석도 해보면서 붙잡고 있다가

계속 똑같은 이유로 해결이 안되서 마지막으로 질문드립니다 죄송합니다 ㅠ-ㅠ

제가 현재 한 레이아웃에 로그인, 로그아웃 기능을 모아둔게 아닌 이렇게 로그인 페이지를 따로 만들어서 작업중인데요..! 로그인 버튼을 눌렀을 때, 로그인 로딩 요청을 하고 아래 페이지로 넘어가게끔 구조를 짜봤습니다.

그렇게 로그인 버튼을 누르면 로그인 성공이 뜨면서, me에 제가 입력해둔 데이터들이 잘 담긴게 확인 되었고 콘솔 창으로 2차 확인까지 완료된 상태인데요!

이게 콘솔창으로 확인해본 me에 dummyUser 데이터입니다. 그리고 저 페이지는

[useProfile.js]

import React, { useCallback } from "react";
import { Card, Avatar, Button } from "antd";
import Link from "next/link";
import { useDispatch, useSelector } from "react-redux";
import { logoutRequestAction } from "../reducers/user";

const UserProfile = () => {
const dispatch = useDispatch();
const { me, logOutLoading } = useSelector((state) => state.user);
const onLogOut = useCallback(() => {
dispatch(logoutRequestAction());
}, []);

return (
<>
<Card
actions={[
<div key="twit">
나의 작성 글<br />
{/* {me.Posts.length} */}
</div>,
<div key="followings">
팔로잉
{/* <br /> {me.Followings.length} */}
</div>,
<div key="follower">
팔로워
{/* <br /> {me.Followers.length} */}
</div>,
]}
>
{/* {me.nickname[0]} */}
<Card.Meta avatar={<Avatar>HJ</Avatar>} title="HJ" />
<Link href="/login">
<Button onClick={onLogOut} loading={logOutLoading}>
로그아웃
</Button>
</Link>
</Card>
</>
);
};

export default UserProfile;

이렇게 me부분을 주석처리해서 성공적으로 페이지가 뜬 모습인데요.. 주석을 풀면

계속 이렇게 똑같은 에러가 뜹니다. 리듀서도 잘 불러와진거 같은데 왜 데이터를 못불러오는 것인지 의문이에요 ㅜㅜ,, 그리고 VS 코드 에디터상으로는 밑에와 같은 에러문장들도 동시에 발생 됩니다 😭😭😭

---------------------------------------------

HYDRATE {

type: '__NEXT_REDUX_WRAPPER_HYDRATE__',

payload: {

index: {},

user: {

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

me: null,

signUpData: {},

loginData: {}

post: {

mainPosts: [Array],

imagePaths: [],

addPostLoading: false,

addPostDone: false,

addPostError: null

}

1. getProps created store with state {

index: {},

user: {

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

me: null,

signUpData: {},

loginData: {}

post: {

mainPosts: [ [Object] ],

imagePaths: [],

addPostLoading: false,

addPostDone: false,

addPostError: null

}

3. getProps after dispatches has store state {

index: {},

user: {

logInLoading: false,

logInDone: false,

logInError: null,

logOutLoading: false,

logOutDone: false,

logOutError: null,

signUpLoading: false,

signUpDone: false,

signUpError: null,

me: null,

signUpData: {},

loginData: {}

post: {

mainPosts: [ [Object] ],

imagePaths: [],

addPostLoading: false,

addPostDone: false,

addPostError: null

}

TypeError: Cannot read property 'Posts' of null

at UserProfile (webpack-internal:///./components/UserProfile.js:38:27)

at processChild (/Users/leehyunju/Documents/React/nicebook/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)

at resolve (/Users/leehyunju/Documents/React/nicebook/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)

at ReactDOMServerRenderer.render (/Users/leehyunju/Documents/React/nicebook/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)

at ReactDOMServerRenderer.read (/Users/leehyunju/Documents/React/nicebook/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)

at renderToString (/Users/leehyunju/Documents/React/nicebook/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)

at Object.renderPage (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/render.js:54:851)

at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)

at loadGetInitialProps (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/lib/utils.js:5:101)

at renderToHTML (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/render.js:54:1142)

at async /Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/next-server.js:109:97

at async /Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/next-server.js:102:142

at async DevServer.renderToHTMLWithComponents (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/next-server.js:134:387)

at async DevServer.renderToHTML (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/next-server.js:135:522)

at async DevServer.renderToHTML (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/server/next-dev-server.js:34:578)

at async DevServer.render (/Users/leehyunju/Documents/React/nicebook/node_modules/next/dist/next-server/server/next-server.js:72:236)

---------------------------------------------

그리고 postCard에는 데이터들이 잘 불러와집니다. user와 post 비교도 해봤는데 어떤게 문제인지 잘 모르겠어요.. ㅠ-ㅠ

조현영

지식공유자

2021.04.24

next_redux_wrapper_hydrate 액션이 ssr 시 데이터입니다. 보시면 me가 null입니다. 즉 ssr 시 로그인한 것으로 인식 못하는 현상인 것입니다.

leehyunju

질문자

2021.04.24

감사합니다!! 혹시.. SSR시 로그인 된 걸로 인식 시키려면 어떻게 해야되나요 ..? 😔

조현영

지식공유자

2021.04.24

getServerSideProps에서도 액션 호출하시면 됩니다.

leehyunju

질문자

2021.04.24

진짜 감사합니다 🤩 남은 주말도 잘 보내세용

leehyunju

질문자

2021.04.28

안녕하세요 제로초님 ! 알려주신 방법대로 getServerSideProps 해줬는데 이와같은 에러가 발생합니다.

Server Error

Error: Error serializing `.initialState.post.mainPosts[0].content` returned from `getServerSideProps` in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value all together.

또 데이터가 없다는 것 같은데요 ㅠ 리듀서도 잘 불러왔는데 이런 에러가 발생합니다..

getServerSideProps 어떻게 하는지 몰라서 서버사이드렌더링 목차에 강의 보면서 아래와 같은 코드로 getServerSideProps 해주었어요.

import React, { useCallback } from 'react';
import { Input, Form, Button } from 'antd';
import Head from 'next/head';
import Link from 'next/link';
import { VscGithubInverted } from 'react-icons/vsc';
import useInput from '../hooks/useInput';
import { useDispatch, useSelector } from 'react-redux';
import { loginRequestAction, LOG_IN_REQUEST } from '../reducers/user';
import { ADD_POST_REQUEST } from '../reducers/post';
import wrapper from '../store/configureStore';
import { END } from 'redux-saga';

const Login = () => {
  const dispatch = useDispatch();
  const { logInLoading } = useSelector((state) => state.user);
  const [email, onChangeEmail] = useInput('');
  const [password, onChangePassword] = useInput('');

  const onSubmitForm = useCallback(() => {
    console.log(email, password);
    dispatch(loginRequestAction({ email, password }));
  }, [email, password]);

  const onLogIn = useCallback(() => {
    dispatch(loginRequestAction());
  }, []);

  return (
    <div className="login">
      <Head>
        <meta charSet="utf-8" />
        <title>Nicebook | 로그인 페이지</title>
      </Head>

      <div className="loginPage">
        <div className="loginPage__left">
          <div className="loginPage__left--text">
            <h1>Nicebook</h1>
            <p>Nicebook에서 전세계에 있는 친구, 가족, 지인들과 함께 이야기를 나눠보세요.</p>
          </div>
        </div>

        <div className="loginPage__right">
          {/* onFinish는 이미 preventDefault가 적용되어있다. */}
          <Form onFinish={onSubmitForm}>
            <Input placeholder="이메일을 입력해주세요" name="user-email" value={email} onChange={onChangeEmail} type="email" required />

            <Input placeholder="비밀번호 입력해주세요" type="password" value={password} onChange={onChangePassword} />

            <Link href="/home" className="loginPage__join">
              <a>
                <Button type="primary" loading={logInLoading} onClick={onLogIn}>
                  로그인
                </Button>
              </a>
            </Link>

            <hr />
            <Link href="/signup" className="loginPage__join">
              <a>
                <Button>새 계정 만들기</Button>
              </a>
            </Link>
          </Form>
        </div>
      </div>
      <footer>
        <div className="login__footer">
          <p>Nicebook ⓒ 2021</p>
          <Link href="https://github.com/leemember">
            <a target="_blank">
              <VscGithubInverted /> Leehyunju github
            </a>
          </Link>
        </div>
      </footer>
    </div>
  );
};

// 이 부분이 가장 먼저 실행된다.
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  console.log('getServerSideProps start');
  console.log(context);

  context.store.dispatch({
    type: LOG_IN_REQUEST,
  });
  context.store.dispatch({
    type: ADD_POST_REQUEST,
  });
  context.store.dispatch(END);
  console.log('getServerSideProps END');
  await context.store.sagaTask.toPromise();
});

export default Login;

조현영

지식공유자

2021.04.24

저는 지금 이해가 안 되는데 me가 없는데 어떻게 로그인창이 아니라 로그인 이후의 창이 뜨는지 모르겠습니다. 리덕스 데브툴즈에 me가 없는게 맞나요? 또는 me가 {} 이렇게 빈 객체인것 아닌가요? 데브툴에서 액션별로 me가 어떻게 바뀌는지 나옵니다. 그걸로 me를 분석해보세요.

leehyunju

질문자

2021.04.24

아 ㅜㅜ 디자인랑 로그인 페이지를 제멋대로 구성해서 그렇습니다! 이번 기회에 데이터 분석 해보겠숩니다 감사합니당!!

leehyunju

Posts 데이터가 안불러집니다 흑

Server Error

이 글과 비슷한 Q&A

settings.jason 3가지

toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.

redux toolkit을 사용하시면서 redux saga를 사용하시다가 애먹으시는 분들은 참고해주세요

깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.