묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit, saga으로 하는중에 devtool에서 액션 명칭이 undefined로 나옵니다
안녕하세요 제로초님여쭤보고 싶은게 있습니다.강의를 따라가다가 데브툴에서 액션, 데이터들을 확인하시는 모습을 봤는데,저도 따라해보니 액션명칭도, state tree의 데이터들도 제대로 안나오는것 같더라구요.그래서 좀 테스트해보니까아래의 로직처럼put에 액션 함수를 실행하면 데브툴에서 액션 명칭니 나오고예시: put(액션명(데이터)),기존처럼put({type: 액션명, payload: 데이터}) 호출하게되면undefined로 나오는것 같습니다.function* addPost(action) { try { yield delay(1000); const id = shortid.generate(); yield put(addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } }아무래도 toolkit과 saga를 사용할때 저렇게 사용하는게 아닌가 싶은데undefined로 나오는 부분은 개선했다고 하더라도action 부분이 제로초님과 다르게 나오더라구요.액션명만 나오는게 아니라 reducer의 위치도 함께나온느데이렇게 나와도 괜찮은건지 여쭙고 싶습니다.다른 부분은 잘 작동하는것 같습니다. import { HYDRATE } from "next-redux-wrapper"; import { createSlice } from "@reduxjs/toolkit"; import shortId from "shortid"; export const initialState = { mainPosts: [ { id: "1", User: { id: "1", nickname: "zzimzzim", }, content: "첫 번째 게시글 #해시태그, #익스프레스", Images: [ { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_53669042936_630c778818_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52982053835_12fc661207_320_240_nofilter.jpg", }, { id: shortId.generate(), src: "https://loremflickr.com/cache/resized/65535_52905479084_303bf25ec0_320_240_nofilter.jpg", }, ], Comments: [ { id: shortId.generate(), User: { nickname: "찜찜", }, content: "얼른 사고싶어요~", }, { id: shortId.generate(), User: { nickname: "hero", }, content: "리액트 넥스트 고수가 될테다~", }, ], createdAt: {}, }, ], imagePaths: [], addPostLoading: false, addPostDone: false, addPostError: null, addCommentLoading: false, addCommentDone: false, addCommentError: null, }; const dummyPost = ({ id, content }) => { return { id, content, User: { id: "1", nickname: "WlaWla", }, Images: [], Comments: [], }; }; const dummyComment = (content) => ({ id: shortId.generate(), content: content, User: { id: "1", nickname: "WlaWla", }, }); const postSlice = createSlice({ name: "post", initialState, reducers: { addPostRequestAction: (state, action) => { state.addPostLoading = true; state.addPostDone = false; state.addPostError = null; }, addPostSuccessAction: (state, action) => { state.addPostLoading = false; state.addPostDone = true; state.mainPosts.unshift(dummyPost(action.payload)); }, addPostFailureAction: (state, action) => { state.addPostLoading = false; state.addPostError = action.error; }, addCommentRequestAction: (state, action) => { state.addCommentLoading = true; state.addCommentDone = false; state.addCommentError = null; }, addCommentSuccessAction: (state, action) => { const { content, userId, postId } = action.payload; const post = state.mainPosts.find((d) => d.id === postId); post.Comments.unshift(dummyComment(content)); state.addCommentLoading = false; state.addCommentDone = true; }, addCommentFailureAction: (state, action) => { state.addCommentLoading = false; state.addCommentError = action.error; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.post, })) .addDefaultCase((state) => state), }); export const { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } = postSlice.actions; export default postSlice.reducer; 사가 코드입니다.import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { addPostRequestAction, addPostSuccessAction, addPostFailureAction, addCommentRequestAction, addCommentSuccessAction, addCommentFailureAction } from "../reducers/post"; import { addPostToMe, removePostOfMe } from "../reducers/user"; import shortid from "shortid"; function addPostAPI(data) { return axios.post("/api/post/", data); } function* addPost(action) { try { // const result = yield call(addPostAPI, action.data); console.log("addPost saga", action); yield delay(1000); const id = shortid.generate(); yield put( addPostSuccessAction({ id, content: action.payload.text, }) ); yield put({ type: addPostToMe, payload: id }); } catch (err) { yield put({ type: addPostFailureAction, error: err.response.data }); } } function addCommentApi(data) { return axios.post(`/api/post/${data.postId}/comment`); } function* addComment(action) { try { // const result = yield call(addPostAPI, action.data); console.log("addComment saga", action); yield delay(1000); yield put({ type: addCommentSuccessAction, payload: action.payload, }); } catch (err) { console.log(err); yield put({ type: addCommentFailureAction, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(addPostRequestAction, addPost); } function* watchAddComment() { yield takeLatest(addCommentRequestAction, addComment); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로쵸 선생님 ㅜ 리액트 문제는 아닌데 질문드려도 될까요?ㅜ
제로쵸 님의 강의를 여러개 듣고 있는 코딩 입문자입니다 ㅜ간단한 사진첩 클릭 사이트를 만들었는데요.스샷처럼 한쪽 사진만 계속 선택 했을 때는 함수가 한번만 실행되며 제가 원하는 아웃풋이 나오는데,다른 사진을 선택하면 함수가 여러번 실행이 되네요... 왜이러는걸까요? ㅜㅜ소스는 html+js+부트스트랩 로 짰습니다. 원본소스의 링크는 아래 올려놨습니다.https://drive.google.com/file/d/1Ov0Qik9ofDHli-TsblLw5OkUz7uCXTDo/view?usp=drive_link
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.
안녕하세요 제로초님toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다. saga에서 이런식으로 호출을 해주면action 데이터도 잘 찍힙니다.function* login(action) { try { console.log("saga login"); console.log(action); // const result = yield call(loginAPI, action.data); yield delay(1000); yield put({ type: loginSuccessAction, payload: action.payload, }); } catch (err) { yield put({ type: loginFailureAction, // data: err.response.data, }); } }그다음 리듀서에서const userSlice = createSlice({ name: "user", initialState, reducers: { logIn: (state, action) => { state.isLoggedIn = true; state.me = action.payload; }, logOut: (state) => { state.isLoggedIn = false; state.me = null; }, loginRequestAction: (state) => { console.log("state", state); state.isLoggingIn = true; }, loginSuccessAction: (state, action) => { console.log("reducer login"); console.log("state", state); state.isLoggingIn = false; state.isLoggedIn = false; state.me = action.payload; state.me.nickname = "zzimzzim"; }, loginFailureAction: (state) => { state.isLoggingIn = false; state.isLoggedIn = false; }, logoutRequestAction: (state) => { state.isLoggingOut = true; }, logoutSuccessAction: (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.me = null; }, logoutFailureAction: (state) => { state.isLoggingOut = false; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.user, })) .addDefaultCase((state) => state), }); 위와같이 코드를 만들고 로그인을 해보면action으로 로그인 정보를 잘 내려줍니다.원래는 이전의 state (현 store데이터)를 받아오고거기서 action데이터를 넣어서 업데이트해줘야하는데,state에서 proxy데이터가 내려와서 업데이트가 안되고 있습니다. ㅠ 리듀서에서 action 데이터 받고, state호출했을때,Proxy(Object) {type_: 0, scope_: {…}, modified_: false, finalized_: false, assigned_: {…}, …}[[Handler]]: null[[Target]]: null[[IsRevoked]]: true이러한 경우에 reducer에서 state를 받아오는 방법이 있을까요? 혹시 코드가 이상하거나 틀렸다면 지적해주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit을 사용하시면서 redux saga를 사용하시다가 애먹으시는 분들은 참고해주세요
https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서제로초님 강의 보면서 툴킷으로만 작업하거나,thunk로 하지 않아도,toolkit + saga로 작업할 수 있습니다.참고 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.
안녕하세요 제로초님깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다.깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다.감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.
안녕하세요 제로초님antd 라이브러리를 사용하니까Server ErrorSyntaxError: Cannot use import statement outside a moduleThis error happened while generating the page. Any console logs will be displayed in the terminal window.Call Stack<unknown>file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/node_modules/rc-util/es/hooks/useMemo.js (1)Next.jsrc-util/es/hooks/useMemofile:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/pages/index.js (8862:18)Next.jseval/node_modules/antd/es/config-provider/index.js./node_modules/antd/es/config-provider/index.jsfile:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/vendor-chunks/antd.js (570:1)Next.jseval/node_modules/antd/es/grid/col.js 이러한 에러들이 나왔고 검색해보니next.config.js 파일에const nextConfig = { /* config options here */ // reactStrictMode: true, swcMinify: true, transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", ], compiler: { styledComponents: true, }, }; module.exports = nextConfig;이런식으로 넣어주면 괜찮다는 것을 보고실행해보니 정상적으로 나오는것을 확인했습니다.그런데 이제는 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:이런 에러가 나오고 있는데요..원래 antd최신버전을 쓰고 있다가깃헙의 제로초님과 동일하게 ^5.8.3" 버전으로 수정해봤는데도 동일한 이슈가 발생하더라구요혹시 다른 부분을 수정해야할지 알 수 있을까해서차장보다 문의 드립니다.참고로 현재 package.json은{ "name": "react-nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "author": "", "license": "MIT", "dependencies": { "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", "antd": "^5.8.3", "next": "^14.2.3", "next-redux-wrapper": "^8.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.3", "react-redux": "^9.1.1", "react-slick": "^0.30.2", "redux": "^5.0.1", "styled-components": "^6.1.8" }, "devDependencies": { "eslint": "^8.57.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2" } } 이렇습니다.감사합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.
안녕하세요 제로초님어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다.새로고침해도 수정한 로직이 적용되지 않은채여서,처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
jwt의 payload에 넣는 정보
안녕하세요 강사님 좋은 강의를 제공해주셔서 감사합니다.JWT는 header, payload는 base64 방식으로 인코딩 되는데 이 방식은 쉽게 복호화가 가능한 것으로 알고 있습니다.그렇기 때문에 JWT를 클라이언트로 보내줄 때 payload에 mongodb의 _id, rdb의 primary key를 넣어주는 것은 좋지 않다고 생각합니다. 물론 강의는 학습을 위한 프로젝트이기 때문에 payload에 그런 것들을 노출 시킨 것은 알고있습니다.그렇다면 실무에서는 payload에 어떤 값을 넣어주는 것이 적절한지 궁금해서 질문을 남깁니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Encountered two children with the same key
Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[오류] Each child in a list should have a unique
Multer 이용하여 파일 업로드할떄Each child in a list should have a unique 오류가자꾸 뜹니다.. import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> <div className='flex-grow h-[300px] border flex items-center justify-center overflow-x-scroll overflow-y-hidden'> {images.map(image => ( <div key={image}> <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
-
미해결처음 만난 리덕스(Redux)
counter 애플리케이션에서 toString 질문입니다
counter 애플리케이션의 코드 중 render함수에서store에서 getState를 사용해 state 값을 가져오는데 이 때 toString()을 해주는 이유가 궁금합니다. function render() { console.log(typeof store.getState()); valueElem.innerHTML = store.getState().toString(); }
-
미해결프로젝트로 배우는 React.js
설명이 부족 한 듯..
router 영상을 보고 있는데..browserRouter 가 뭔지.. router가 뭔지..이런 기초적인 개념 설명도 없고..그냥 불러다 쓰라고 하면..이건 좀 아니지 않나?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다.이런경우는 도대체 뭐때문에 그럴까요? 용량이 커서 그럴까요?백 서버 도메인은 접속이 잘됩니다..vscode에서도 front터미널만 자꾸 렉걸리는 현상이 생겨요 ㅠㅠ
-
미해결따라하며 배우는 리액트 A-Z
Banner.css에 대해서
강사님은 내부적으로 Banner.css에 대한 내용을 복붙하셨는데,강의 영상에서 Banner.css 내에 소스가 다표기가 되지 않아서동일하게 진행하기 어려운 것 같습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer설정 중 user 초기값이 undefined로 나오는 에러
안녕하십니까 형님진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } }default: state vs default: { return {...state}}문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[ 오류 NotAuthRoutes ] error 'isAuth' is missing in props validation react/prop-types
ProtectedRoutes & NotAuthRoutes 에서 지속적으로 해당 에러가 뜹니다error 'isAuth' is missing in props validation react/prop-types구글링해서 여러 방법들을 동원햇지만 어떻게 해야될지 모르겟습니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
Failed to parse source map from 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\boilerplate-mern-stack-master\client\node_modules\mutationobserver-shim\dist\mutationobserver.map' [1][1] ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)이런 에러가 뜨는데 어떻게 해결하나요...도와주세요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 동작 에러
ERROR in ./node_modules/antd/es/version/index.js 2:15-22[1] Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon) 이런 에러가 뜨는데 어떻게 해결하나요...
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
첫 로그인 후 req.user.id 사용이 어텋게 가능한지 궁금합니다.
..// user.js router.post("/login", isNotLoggedIn, (req, res, next) => { passport.authenticate("local", (err, user, info) => { // ... return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: req.user.id }, // ... }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // index.jsconst passport = require("passport"); const local = require("./local"); const { User } = require("../models"); module.exports = () => { passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { console.log(`deserializeUser`) try { const user = await User.findOne({ where: { id } }); done(null, user); // req.user안에 넣어줌 } catch (error) { console.error(error); done(error); } }); local(); };첫 로그인 할 때는serializeUser만 실행되고,그 이후 요청 부터 deserialzeUser가 실행되어req.user에 db 테이블에 user객체가 저장되는 걸로 이해했습니다.첫 로그인 할 때는 deserializeUser가 실행이 안되어서 req.user가 저장이 안된 상태일텐데 어텋게req.user.id로 fullUserWithoutPassword 에 값을 할당할 수 있는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
[도메인 연결하기] 로그인 완료 후에 getServerSideProps 실행되지만,회원정보가 null 이 표시 되는 이유를 몰라서 질문드립니다.
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 인지 ? 무엇이 문제인지 모르겠어서 질문드립니다. 진행 순서[로그인 화면]: 아이디와 비밀번호 를 입력하고 확인 버튼을 누른다. 메인화면에서 서버사이드 렌더링 코드부분 실행하여 회원정보를 불러온다. (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 여서 버튼이 변경되지 않습니다.) 쿠기는 유지되어서 로그인 화면으로 가서 로그인 할시 "로그인하지 않은 사용자만 접근 가능합니다" 안내창이 나옵니다.