으 .. 제로초님 막혀서 다시 왔습니다 ㅠㅠ

Question

자꾸 질문드려서 죄송합니다 ㅠㅠ 현재 메인페이지에서 새로고침 하면 로그인 유지가 잘 되지만, 헤더의 다른 링크를 눌러 들어간 후 , 새로고침을 하면 로그인이 다시 풀리게됩니다. console창에 찍어보니 메인페이지에서는 index.js를 타서 getServerSideProrps를 실행해 새로고침을 해도 매 요청을 먼저 실행하지만 다른곳의 코드는 그렇지 않습니다 즉 _app.js와 같은 곳에서 getInitialProps를 선언해 전역적으로 관리를 해줘야한다는 생각이 들었는데 (_app.js에서는 getServerSideProps가 사용이 안되더라구요..) 공식문서에서는 app.js보다는 각 페이지마다 요청을 보내는것을 추천하고 있는데, 어떤 방법이 제일 좋은 방법일까요? 1.메인화면입니다(이곳에서는 새로고침을 해도 로그인 유지가 됩니다 index.js를 타기때문에) 2.index.js의 코드입니다. import axios from 'axios' ; import Head from 'next/head' ; import React , { useEffect } from 'react' ; import { END } from 'redux-saga' ; import MainSection from '../components/MainSection' ; import { LOAD_PRODUCT_TYPE_REQUEST , LOAD_USER_INFO_REQUEST , } from '../reducers/action' ; import wrapper from '../store/configureStore' ; const index = () => { console . log ( 'index 페이지 들어옴' ); // useEffect(() => { // localStorage.getItem('vintage-info-user'); // }, []); return ( <> < Head > < title >폴로딩고 { /* 섹션 */ } < MainSection /> { /* 상품페이지 */ } ); }; export const getServerSideProps = wrapper . getServerSideProps ( async ( context ) => { // index js의 리듀서 구조를 바꿔야함 중첩되게 끔 axios . defaults . headers . Cookie = '' ; // 로그인을 공유하는 상황을 막기 위해서 const cookie = context . req ? context . req . headers . cookie : '' ; // console.log('쿠키 : ', cookie); // defaults 쿠기 설정 (로그인 했을 경우에만) if ( context . req && cookie ) { axios . defaults . headers . Cookie = cookie ; } context . store . dispatch ({ type : LOAD_USER_INFO_REQUEST , }); // 첫 파에지 랜딩에는 최근 등록된 상품 기준으로 보여주거나 업로드 날짜가 가장 최근인 애들을 보여줘야함 context . store . dispatch ({ type : LOAD_PRODUCT_TYPE_REQUEST , data : 'all' , }); // 위에 REQUEST가 SUCCESS로 바뀔 때 까지 기다려주는 장치임 // 공식문서에 나옴 context . store . dispatch ( END ); await context . store . sagaTask . toPromise (); // store.sagatask에서 등록해놓음(index.js에서) /// ///////////////////////////////////////////////// } ); export default index ; 하지만, 헤더쪽 다른 SHOP이런곳을 가서 새로고침을 하면 로그인이 풀리게됩니다 (이유는 index.js를 타지 않기 때문인데 app.js 에 전역으로 관리하게끔 만들어줘야하나요?)

제로초(조현영) · Answer

모든 페이지의 getServerSideProps에서 유저 정보 체크 요청을 호출하세요. 그게 권장되는 방법입니다. app.js에서 getInitialProps로 해도 되는데 getServerSideProps랑 충돌날 수 있습니다.