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

React로 Nodebird sns를 시청하고 나서 개인 프로젝트를 만들고 나서 배포하는 과정에서 막히는 부분이 있어서 질문드립니다.

기존에 localhost:3060 에서 로그인 완료후 메인화면으로 이동시 메인화면 서버사이드 렌더링이 실행됩니다.

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  })

  context.store.dispatch(END);
  await context.store.sagaTask.toPromise();
})

그래서,

const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user);

me에 데이터가 들어있습니다.

[도메인 연결하기] 영상 시청후

Route 53, 가비아 주소, 탄력적 ip 주소를 사용하여 백엔드/ 프론트 서버를 실행하였습니다.

회원가입 후 로그인하고 나서 메인 화면으로 이동되면 쿠키가 저장되는 것을 확인했습니다

하지만

로그인 후 메인 화면으로 이동하면, 메인page에 서버사이드 렌더링 코드(getServerSideProps)가 실행하고,

export const getServerSideProps = wrapper.getServerSideProps(
  async (context) => {
    const cookie = context.req ? context.req.headers.cookie : "";
    axios.defaults.headers.Cookie = "";
    if (context.req && cookie) {
      axios.defaults.headers.Cookie = cookie;
    }
    context.store.dispatch({
      type: LOAD_MY_INFO_REQUEST,
    });

    context.store.dispatch(END);
    await context.store.sagaTask.toPromise();
  }
);

const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user);

이때 로그인한 사용자의 데이터 정보가 null로 표시됩니다.

[back logs]

왜 me가 null 인지 ? 무엇이 문제인지 모르겠어서 질문드립니다.

진행 순서

1. [로그인 화면]

: 아이디와 비밀번호 를 입력하고 확인 버튼을 누른다.

2. 메인화면에서 서버사이드 렌더링 코드부분 실행하여 회원정보를 불러온다. (LOAD_MY_INFO_REQUEST)

    

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_MY_INFO_REQUEST,
  })

  context.store.dispatch(END);
  await context.store.sagaTask.toPromise();
})

export default Blog;

const dispatch = useDispatch();
  const { me } = useSelector((state) => state.user);

3. [메인화면] 회원정보를 불러와 회원정보가 null 이여서 로그아웃 버튼으로 변경되지 않습니다. (me 정보가 null 여서 버튼이 변경되지 않습니다.)

4. 쿠기는 유지되어서 로그인 화면으로 가서 로그인 할시
   "로그인하지 않은 사용자만 접근 가능합니다" 안내창이 나옵니다.