세션이 만료되었을 때 로그인 페이지로 이동하려면

아직 세션 시간을 따로 설정하지는 않고 코드는 강의에서 작성한 내용을 따라 똑같이 작성한 상태입니다! 서버가 재시작되는것은 코드에 이상이 있어서인가요 아니면 ec2가 주기적으로 서버를 재시작하나요? 사이트를 이용하는 사용자들이 핸드폰에 이전에 켜둔 인터넷 브라우저에서 그대로 사용하는 경우가 있는데.. 로그인한지 하루 이상 시간이 지나 만료되어 그 때에 req.user.id를 가져오지 못하는것 같다고 생각되었습니다 ㅠㅠ 이런 경우도 있을까요...???? 아니면 서버문제일까요...??? req.user.id를 가져오지 못할 경우 바로 로그인 페이지로 돌려보내는 기능을 넣고싶은데 해당 기능은 구현이 어려울까요...?!

배포 후 문제 질문 드립니다 ㅠㅠ (pm2 kill 했는데도 사이트가 계속 동작하는 문제 & 타임존 문제)

앗 그렇군요 감사합니다 moment timezone 참고하여 진행하겠습니다!

배포 후 문제 질문 드립니다 ㅠㅠ (pm2 kill 했는데도 사이트가 계속 동작하는 문제 & 타임존 문제)

위의 문제는 aws에서 인스턴스를 종료한 후 다시 시작해보니 제대로 동작하네요!!! 다른 질문 한가지만 더 드리겠습니다 ㅠㅠ 오늘 날짜의 투두리스트만 불러오는 기능이 있는데, 로컬 서버에서는 제대로 동작하는데 ec2로 배포한 환경에서는 미국과 한국의 시간차이때문인지 9시간 차이가 나 제대로 동작하지 않고 9시가 되어서야 하루가 바뀐 것으로 처리됩니다. moment.locale('ko')를 상단에 적어주었는데도 moment의 오늘 날짜 처리가 미국시간 기준으로 처리되네요 (해당 코드 back/routes/todos) moment.locale('ko'); router.get("/", async(req, res, next) => { // 나의 그날의 투두리스트 불러오기 try { console.log('back moment check:', moment()); let today = moment().format('YYYY-MM-DD'); const todos = await db.Todo.findAll({ where: { userId: req.user.id, createdAt: { [sequelize.Op.gte]:today+' 00:00:00', [sequelize.Op.lte]:today+' 23:59:59' } }, order: [['createdAt', 'ASC']] }); return res.json(todos); } catch (e) { console.error(e); return next(e); } }); 일단 위에 적힌 링크대로 ec2의 날짜 설정을 변경해주었는데, pm2 monit으로 백엔드 상태를 보니까 계속 9시간 전으로 기록되네요 ㅠㅠ (사진) 이런 상황일때는 moment()로 구한 현재 시간에 9시간을 더해주는 방법밖에 없을까요? 로컬 서버에선 제대로 동작이 되기 때문에 배포 전 테스트에서 불편할듯 하여 되도록 이런 방법으로는 하고싶지 않은데 다른 방법은 없는지 질문드립니다 ㅠㅠ

함수형 컴포넌트의 클래스화

감사합니다!

함수형 컴포넌트의 클래스화

답변 감사합니다! propTypes도 앞에 static 을 붙여 이런식으로 작성하면 되는걸까요? class DreamWitch extends App{ static propTypes = { Component: propTypes.elementType.isRequired, store: propTypes.object.isRequired, pageProps: propTypes.object.isRequired, }; static async getInitialProps (context){ const {ctx, Component} = context; let pageProps = {}; const state= ctx.store.getState(); const cookie = ctx.isServer ? ctx.req.headers.cookie : ''; if(ctx.isServer){ Axios.defaults.headers.cookie = ''; } if(ctx.isServer && cookie){ Axios.defaults.headers.cookie = cookie; } if(!state.user.me){ ctx.store.dispatch({ type:LOAD_USER_REQUEST }) } if(Component.getInitialProps){ pageProps = await Component.getInitialProps(ctx) || {}; } return {pageProps}; } render(){ const {Component, store, pageProps} = this.props; return( 렌더내용 ) } }

함수형 컴포넌트의 클래스화

클래스로 변환한 코드입니다 import React from "react"; import propTypes from "prop-types"; import withRedux from "next-redux-wrapper"; import withReduxSaga from 'next-redux-saga'; import { createStore, compose, applyMiddleware } from "redux"; import { Provider } from "react-redux"; import reducer from "../reducers"; import createSagaMiddleware from "redux-saga"; import rootsaga from "../sagas"; import {ThemeProvider} from 'styled-components'; import themes from '../components/styledComponents/theme'; import GlobalStyle from '../components/styledComponents/GlobalStyle'; import Axios from "axios"; import { LOAD_USER_REQUEST } from "../reducers/user"; import App from 'next/app'; import {Helmet} from 'react-helmet'; class DreamWitch extends App{ static async getInitialProps (context){ const {ctx, Component} = context; let pageProps = {}; const state= ctx.store.getState(); const cookie = ctx.isServer ? ctx.req.headers.cookie : ''; if(ctx.isServer){ Axios.defaults.headers.cookie = ''; } if(ctx.isServer && cookie){ Axios.defaults.headers.cookie = cookie; } if(!state.user.me){ ctx.store.dispatch({ type:LOAD_USER_REQUEST }) } if(Component.getInitialProps){ pageProps = await Component.getInitialProps(ctx) || {}; } return {pageProps}; } render(){ const {Component, store, pageProps} = this.props; return( Provider store={store}> Helmet title="DREAMWITCH :: 꿈의 마녀" htmlAttributes={{lang:'ko'}} meta={[{ charset: 'UTF-8' }, { name: 'viewport', content: "width=device-width, initial-scale=1", }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge', }, { name: 'og:title', content: 'DREAMWITCH :: 꿈의 마녀', }, { name: 'og:description', content: '꿈을 이루기 위한 할일 관리 프로젝트', }, { property: 'og:type', content: 'website', }, { property: 'og:image', content: '/thumb.jpg' },]} link={[{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' }]} /> ThemeProvider theme={themes}> GlobalStyle/> Component {...pageProps}/> ThemeProvider> Provider> ) } } DreamWitch.propTypes = { Component: propTypes.elementType.isRequired, store: propTypes.object.isRequired, pageProps: propTypes.object.isRequired, }; const middleware = (store) => (next) => (action) => { console.log(action); next(action); }; const configureStore = (initialState, options) => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [ sagaMiddleware, (store)=>(next)=>(action)=>{ next(action); } ]; const enhancer = process.env.NODE_ENV === "production" ? comspose(applyMiddleware(...middlewares)) : compose( applyMiddleware(...middlewares), !options.isServer && window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined" ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f ); const store = createStore(reducer, initialState, enhancer); store.sagaTask = sagaMiddleware.run(rootsaga); return store; }; export default withRedux(configureStore)(withReduxSaga(DreamWitch));

함수형 컴포넌트의 클래스화

바꾸기 전 코드입니다 import React from "react"; import propTypes from "prop-types"; import withRedux from "next-redux-wrapper"; import withReduxSaga from 'next-redux-saga'; import { createStore, compose, applyMiddleware } from "redux"; import { Provider } from "react-redux"; import reducer from "../reducers"; import createSagaMiddleware from "redux-saga"; import rootsaga from "../sagas"; import {ThemeProvider} from 'styled-components'; import themes from '../components/styledComponents/theme'; import GlobalStyle from '../components/styledComponents/GlobalStyle'; import Axios from "axios"; import { LOAD_USER_REQUEST } from "../reducers/user"; import {Helmet} from 'react-helmet'; const DreamWitch = ({ Component, store, pageProps }) => ( Provider store={store}> Helmet title="DREAMWITCH :: 꿈의 마녀" htmlAttributes={{lang:'ko'}} meta={[{ charset: 'UTF-8' }, { name: 'viewport', content: "width=device-width, initial-scale=1", }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge', }, { name: 'og:title', content: 'DREAMWITCH :: 꿈의 마녀', }, { name: 'og:description', content: '꿈을 이루기 위한 할일 관리 프로젝트', }, { property: 'og:type', content: 'website', }, { property: 'og:image', content: '/thumb.jpg' },]} link={[{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' }]} /> ThemeProvider theme={themes}> GlobalStyle/> Component {...pageProps}/> ThemeProvider> Provider> ); DreamWitch.propTypes = { Component: propTypes.elementType.isRequired, store: propTypes.object.isRequired, pageProps: propTypes.object.isRequired, }; const middleware = (store) => (next) => (action) => { console.log(action); next(action); }; DreamWitch.getInitialProps = async (context) => { const {ctx, Component} = context; let pageProps = {}; const state= ctx.store.getState(); const cookie = ctx.isServer ? ctx.req.headers.cookie : ''; if(ctx.isServer){ Axios.defaults.headers.cookie = ''; } if(ctx.isServer && cookie){ Axios.defaults.headers.cookie = cookie; } if(!state.user.me){ ctx.store.dispatch({ type:LOAD_USER_REQUEST }) } if(Component.getInitialProps){ pageProps = await Component.getInitialProps(ctx) || {}; } return {pageProps}; } const configureStore = (initialState, options) => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [ sagaMiddleware, (store)=>(next)=>(action)=>{ next(action); } ]; const enhancer = process.env.NODE_ENV === "production" ? comspose(applyMiddleware(...middlewares)) : compose( applyMiddleware(...middlewares), !options.isServer && window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined" ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f ); const store = createStore(reducer, initialState, enhancer); store.sagaTask = sagaMiddleware.run(rootsaga); return store; }; export default withRedux(configureStore)(withReduxSaga(DreamWitch));

패스워드 input 폼에 한글을 입력해도 영문으로 입력되고자 한다면

ㅠㅠ 첫번째 방법으로 해보니 적용이 안되네요..! 찾아보니 웹표준에 어긋나서 없애기로 했다고 하는데 그래서 이제 지원을 안하는걸까요?! ㅠㅠㅠ 두번째 방법대로 적용하여 진행해보겠습니다 감사합니다!

특정 페이지에서 새로고침 시 LOAD_USER_REQUEST를 실행하지 않는 문제

ㅠㅠㅠㅠ아이고.... 뭐가 잘못됐던건지 찾아냈습니다 제가 load_user_request 부분을 사가에서 takeEvery가 아닌 takeLatest로 해놨었네요ㅠㅠ 아예 뭐가 문젠지를 갈피를 못잡고 있었는데 LOAD_USER_REQUEST 반복 찝어주셔서 저부분 확인할 수 있었습니다 코드 봐주시고 도움 주셔서 감사합니다 !!

특정 페이지에서 새로고침 시 LOAD_USER_REQUEST를 실행하지 않는 문제

네! _app.js에선 모든 페이지에서 공통적으로 사용자 me를 데려오도록 하고 user페이지에서 userInfo를 데려오는데 해당 페이지에서 그 상태로 새로고침 할 시에는 user.me 데이터가 아예 null이 되어버립니다 ㅠㅠ..! userInfo는 새로고침 하더라도 잘 불러오구요..! 해당 페이지에서 덧글을 다는 기능을 위해 me가 그대로 보존되어야 하는데 새로고침 시 사라집니다 ㅜㅜ user페이지의 request_load_user는 제대로 작동되는데 _app.js에서 request_load_user가 제대로 동작 했음에도(user.me에 사용자 본인의 데이터를 가져오도록) 데브툴을 확인해보면 user.me에 아무것도 담기지 않는(null) 문제가 생깁니다..!