jiindev0614

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

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

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

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

<p>위의 문제는 aws에서 인스턴스를 종료한 후 다시 시작해보니 제대로 동작하네요!!! 다른 질문 한가지만 더 드리겠습니다 ㅠㅠ</p>
<p>오늘 날짜의 투두리스트만 불러오는 기능이 있는데, 로컬 서버에서는 제대로 동작하는데 ec2로 배포한 환경에서는 미국과 한국의 시간차이때문인지 9시간 차이가 나 제대로 동작하지 않고 9시가 되어서야 하루가 바뀐 것으로 처리됩니다.</p>
<p>moment.locale('ko')를 상단에 적어주었는데도 moment의 오늘 날짜 처리가 미국시간 기준으로 처리되네요</p>
<p>(해당 코드 back/routes/todos)</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #51b6c4;">moment</span>.<span style="color: #dcdcaa;">locale</span>(<span style="color: #ce9178;">'ko'</span>);</div>
<div><span style="color: #51b6c4;">router</span>.<span style="color: #dcdcaa;">get</span>(<span style="color: #ce9178;">"/"</span>, <span style="color: #569cd6;">async</span>(<span style="color: #9cdcfe;">req</span>, <span style="color: #9cdcfe;">res</span>, <span style="color: #dcdcaa;">next</span>) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #6a9955;">// 나의 그날의 투두리스트 불러오기</span></div>
<div><span style="color: #c586c0;">try</span> {</div>
<div><span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'back moment check:'</span>, <span style="color: #dcdcaa;">moment</span>());</div>
<div><span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">today</span> = <span style="color: #dcdcaa;">moment</span>().<span style="color: #dcdcaa;">format</span>(<span style="color: #ce9178;">'YYYY-MM-DD'</span>);</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #51b6c4;">todos</span> = <span style="color: #c586c0;">await</span> <span style="color: #51b6c4;">db</span>.<span style="color: #9cdcfe;">Todo</span>.<span style="color: #dcdcaa;">findAll</span>({</div>
<div><span style="color: #9cdcfe;">where</span><span style="color: #9cdcfe;">:</span> {</div>
<div><span style="color: #9cdcfe;">userId</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">id</span>,</div>
<div><span style="color: #9cdcfe;">createdAt</span><span style="color: #9cdcfe;">:</span> {</div>
<div><span style="color: #9cdcfe;">[</span><span style="color: #51b6c4;">sequelize</span><span style="color: #9cdcfe;">.</span><span style="color: #51b6c4;">Op</span><span style="color: #9cdcfe;">.</span><span style="color: #51b6c4;">gte</span><span style="color: #9cdcfe;">]:</span><span style="color: #9cdcfe;">today</span>+<span style="color: #ce9178;">' 00:00:00'</span>,</div>
<div><span style="color: #9cdcfe;">[</span><span style="color: #51b6c4;">sequelize</span><span style="color: #9cdcfe;">.</span><span style="color: #51b6c4;">Op</span><span style="color: #9cdcfe;">.</span><span style="color: #51b6c4;">lte</span><span style="color: #9cdcfe;">]:</span><span style="color: #9cdcfe;">today</span>+<span style="color: #ce9178;">' 23:59:59'</span></div>
<div>}</div>
<div>},</div>
<div><span style="color: #9cdcfe;">order</span><span style="color: #9cdcfe;">:</span> [[<span style="color: #ce9178;">'createdAt'</span>, <span style="color: #ce9178;">'ASC'</span>]]</div>
<div>});</div>
<div><span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">json</span>(<span style="color: #51b6c4;">todos</span>);</div>
<div>} <span style="color: #c586c0;">catch</span> (<span style="color: #9cdcfe;">e</span>) {</div>
<div><span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div><span style="color: #c586c0;">return</span> <span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>}</div>
<div>});</div>
</div>
<p>일단 위에 적힌 링크대로 ec2의 날짜 설정을 변경해주었는데, pm2 monit으로 백엔드 상태를 보니까 계속 9시간 전으로 기록되네요 ㅠㅠ</p>
<p><img src="https://cdn.inflearn.com/public/comments/e843ee7c-bf8d-4730-b6e6-fa1566adfcba/스크린샷 2020-05-18 오후 5.11.59.png" title="스크린샷 2020-05-18 오후 5.11.59.png" width="1059" height="80" alt="" /></p>
<p>이런 상황일때는 moment()로 구한 현재 시간에 9시간을 더해주는 방법밖에 없을까요? 로컬 서버에선 제대로 동작이 되기 때문에 배포 전 테스트에서 불편할듯 하여 되도록 이런 방법으로는 하고싶지 않은데 다른 방법은 없는지 질문드립니다 ㅠㅠ&nbsp;</p>

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

<p>답변 감사합니다! propTypes도 앞에 static 을 붙여 이런식으로 작성하면 되는걸까요?</p>
<div style="background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div style="color: #d4d4d4;"><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">DreamWitch</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">App</span>{</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">static</span> <span style="color: #9cdcfe;">propTypes</span> = {</div>
<div style="color: #d4d4d4;"><span style="color: #9cdcfe;">Component</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">propTypes</span>.<span style="color: #51b6c4;">elementType</span>.<span style="color: #9cdcfe;">isRequired</span>,</div>
<div style="color: #d4d4d4;"><span style="color: #9cdcfe;">store</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">propTypes</span>.<span style="color: #51b6c4;">object</span>.<span style="color: #9cdcfe;">isRequired</span>,</div>
<div style="color: #d4d4d4;"><span style="color: #9cdcfe;">pageProps</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">propTypes</span>.<span style="color: #51b6c4;">object</span>.<span style="color: #9cdcfe;">isRequired</span>,</div>
<div style="color: #d4d4d4;">};</div>
<div style="color: #d4d4d4;"></div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">static</span> <span style="color: #569cd6;">async</span> <span style="color: #dcdcaa;">getInitialProps</span> (<span style="color: #9cdcfe;">context</span>){</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> {<span style="color: #51b6c4;">ctx</span>, <span style="color: #51b6c4;">Component</span>} = <span style="color: #9cdcfe;">context</span>;</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">pageProps</span> = {};</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #51b6c4;">state</span>= <span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">store</span>.<span style="color: #dcdcaa;">getState</span>();</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #51b6c4;">cookie</span> = <span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">isServer</span> ? <span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">headers</span>.<span style="color: #9cdcfe;">cookie</span> : <span style="color: #ce9178;">''</span>;</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">if</span>(<span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">isServer</span>){</div>
<div style="color: #d4d4d4;"><span style="color: #51b6c4;">Axios</span>.<span style="color: #9cdcfe;">defaults</span>.<span style="color: #9cdcfe;">headers</span>.<span style="color: #9cdcfe;">cookie</span> = <span style="color: #ce9178;">''</span>;</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">if</span>(<span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">isServer</span> && <span style="color: #51b6c4;">cookie</span>){</div>
<div style="color: #d4d4d4;"><span style="color: #51b6c4;">Axios</span>.<span style="color: #9cdcfe;">defaults</span>.<span style="color: #9cdcfe;">headers</span>.<span style="color: #9cdcfe;">cookie</span> = <span style="color: #51b6c4;">cookie</span>;</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">if</span>(!<span style="color: #51b6c4;">state</span>.<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">me</span>){</div>
<div style="color: #d4d4d4;"><span style="color: #51b6c4;">ctx</span>.<span style="color: #9cdcfe;">store</span>.<span style="color: #dcdcaa;">dispatch</span>({</div>
<div style="color: #d4d4d4;"><span style="color: #9cdcfe;">type</span><span style="color: #9cdcfe;">:</span><span style="color: #51b6c4;">LOAD_USER_REQUEST</span></div>
<div style="color: #d4d4d4;">})</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">if</span>(<span style="color: #51b6c4;">Component</span>.<span style="color: #9cdcfe;">getInitialProps</span>){</div>
<div style="color: #d4d4d4;"><span style="color: #9cdcfe;">pageProps</span> = <span style="color: #c586c0;">await</span> <span style="color: #51b6c4;">Component</span>.<span style="color: #dcdcaa;">getInitialProps</span>(<span style="color: #51b6c4;">ctx</span>) || {};</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">return</span> {<span style="color: #9cdcfe;">pageProps</span>};</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;"><span style="color: #dcdcaa;">render</span>(){</div>
<div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> {<span style="color: #51b6c4;">Component</span>, <span style="color: #51b6c4;">store</span>, <span style="color: #51b6c4;">pageProps</span>} = <span style="color: #569cd6;">this</span>.<span style="color: #51b6c4;">props</span>;</div>
<div style="color: #d4d4d4;"><span style="color: #c586c0;">return</span>(</div>
<div><span style="color: #d4d4d4;"> 렌더내용</span></div>
<div style="color: #d4d4d4;">)</div>
<div style="color: #d4d4d4;">}</div>
<div style="color: #d4d4d4;">}</div>
</div>

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

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

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

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

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

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

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

jiindev0614

Bài viết