leejg

혹시 윗분들 에러 상황에서 webpack-dev-server를 4버전으로 사용하실 경우 webpack.config.ts 파일 내에&nbsp; 
&nbsp;
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 17px; line-height: 23px; white-space: pre;">import WebpackDevServer from 'webpack-dev-server'; </div>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 17px; line-height: 23px; white-space: pre;">
<div>declare module 'webpack' {</div>
<div>&nbsp; interface Configuration {</div>
<div>&nbsp; &nbsp; devServer?: WebpackDevServer.Configuration;</div>
<div>&nbsp; }</div>
<div>}</div>
</div>
&nbsp;
&nbsp;
이렇게 추가해도 해결되긴 하네요! 참고하셔도 괜찮을듯 싶습니다
참고 : https://githubmate.com/repo/survivejs/webpack-merge/issues/141?page=2

webpack-dev-server 오류 질문있습니다.

질문입니다!

답변 감사드립니다. 말씀대로 Menu.item 말고 그 내부에 Icon 이나 span 에 onClick 이벤트로 Modal 을 호출하니 잘 되네요. 이 방법은 Menu.item 범위 내의 Icon 이나 span 내용 범위만 클릭해야 Modal 을 출력해서 조금 부자연스러운데, 혹시 Menu.item 자체를 클릭했을 때 Modal을 출력할 다른 방안이 있을까요..?

아 네 제가 잘못말씀드렸네요 그럼 혹시 TypeError: "Invalid attempt to spread non-iterable instance" 이 에러는 그 원인에서 비롯된걸까요?:

질문입니다.

죄송합니다 ~ 말씀하신 부분들 수정해서 다시 업로드했습니다. https://github.com/ljg0230/nodebird_ljg/tree/hotfix_1

죄송합니다 ㅠ 말씀해주신 부분들 로그로 확인했는데 데이터는 정상적으로 들어있어네요..

네 401 로그인 에러말고는 정확하게 파악이 안되서요 hashtag로 불러오는건 정상적으로 잘 되고, 방금 쿠키 삭제 후 다시해봐도 그대로네요

네 리덕스툴에는 LOAD_USER_SUCCESS, LOAD_USER_POSTS_SUCCESS 확인했고, 콘솔탭 에러도 확인은 해봤는데... 원인은 못찾았네요 Error: "Request failed with status code 401"
<div class="pane frames">
<div role="list">
<div role="listitem" class="frame" tabindex="0" title="디버거에서 소스 보기 &rarr; webpack:///node_modules/axios/lib/core/createError.js:16">&nbsp;&nbsp;&nbsp;&nbsp;createError createError.js:16</div>
<div role="listitem" class="frame" tabindex="0" title="디버거에서 소스 보기 &rarr; webpack:///node_modules/axios/lib/core/settle.js:17">&nbsp;&nbsp;&nbsp;&nbsp;settle settle.js:17</div>
<div role="listitem" class="frame" tabindex="0" title="디버거에서 소스 보기 &rarr; webpack:///node_modules/axios/lib/adapters/xhr.js:59">&nbsp;&nbsp;&nbsp;&nbsp;handleLoad xhr.js:59</div>
</div>
</div>
 <a class="frame-link-source" href="webpack://www.inflearn.com/node_modules/react-error-overlay/lib/index.js" target="_blank" rel="noopener noreferrer">index.js:1</a>
<div class="cm-s-mozilla message console-api error error open" data-message-id="627" aria-live="polite"></div>
<div class="cm-s-mozilla message console-api error error open" data-message-id="627" aria-live="polite">The above error occurred in one of your React components: in div (created by User) in span (created by Context.Consumer) in li (created by Context.Consumer) in ul (created by Context.Consumer) in div (created by Context.Consumer) in Card (created by User) in div (created by User) in User (created by NodeBird) in div (created by Context.Consumer) in Col (created by AppLayout) in div (created by Context.Consumer) in Row (created by AppLayout) in div (created by AppLayout) in AppLayout (created by NodeBird) in Provider (created by NodeBird) in NodeBird (created by withRedux(NodeBird)) in withRedux(NodeBird) in Suspense (created by AppContainer) in Container (created by AppContainer) in AppContainer React will try to recreate this component tree from scratch using the error boundary you provided, Container. <a class="frame-link-source" href="webpack://www.inflearn.com/node_modules/react-error-overlay/lib/index.js" target="_blank" rel="noopener noreferrer">index.js:1</a>
<div class="stacktrace devtools-monospace">
<div class="pane frames">
<div role="list">
<div role="listitem" class="frame" tabindex="0" title="디버거에서 소스 보기 &rarr; webpack:///node_modules/react-error-overlay/lib/index.js:1">&nbsp;&nbsp;&nbsp;&nbsp;e index.js:1</div>
<div class="frames-group">
<div role="listitem" class="group" tabindex="0" title="NextJS 프레임 열기">&nbsp;&nbsp;&nbsp;&nbsp;NextJS 22</div>
</div>
<div class="frames-group">
<div role="listitem" class="group" tabindex="0" title="Redux 프레임 열기">&nbsp;&nbsp;&nbsp;&nbsp;Redux 5</div>
</div>
<div role="listitem" class="frame" tabindex="0" title="디버거에서 소스 보기 &rarr; http://localhost:3060/user/2:1">&nbsp;&nbsp;&nbsp;&nbsp;e 2:1</div>
<div class="frames-group">
<div role="listitem" class="group" tabindex="0" title="Redux 프레임 열기">&nbsp;&nbsp;&nbsp;&nbsp;Redux 12</div>
</div>
</div>
</div>
</div>
</div>
<div class="cm-s-mozilla message console-api error error" data-message-id="628" aria-live="polite"></div>
<div class="cm-s-mozilla message console-api error error" data-message-id="628" aria-live="polite">Warning: Container: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI. <a class="frame-link-source" href="webpack://www.inflearn.com/node_modules/react-error-overlay/lib/index.js" target="_blank" rel="noopener noreferrer">index.js:1</a></div>
<div class="message javascript log error open" data-message-id="629" aria-live="polite"></div>
Error: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead. in div (created by User) in span (created by Context.Consumer) in li (created by Context.Consumer) in ul (created by Context.Consumer) in div (created by Context.Consumer) in Card (created by User) in div (created by User) in User (created by NodeBird) in div (created by Context.Consumer) in Col (created by AppLayout) in div (created by Context.Consumer) in Row (created by AppLayout) in div (created by AppLayout) in AppLayout (created by NodeBird) in Provider (created by NodeBird) in NodeBird (created by withRedux(NodeBird)) in withRedux(NodeBird) in Suspense (created by AppContainer) in Container (created by AppContainer) in AppContainer

여기저기 로그를 찍어보고 있지만 아직 못찾았네요ㅠ...
포스트 추가 (입력값 123)부터의 console.log를 순차적으로 확인해보면
 in post sagas: {"content":"123"} <a class="frame-link-source" href="webpack://www.inflearn.com/sagas/post.js" target="_blank" rel="noopener noreferrer">post.js:60</a>

<div class="cm-s-mozilla message console-api log log" data-message-id="317" aria-live="polite">in index.js(pages): [null,{"id":1,"User":{"id":1,"nickname":"이정걸"},"content":"첫 번째 게시글","img":"","Comments":[]}] <a class="frame-link-source" href="webpack://www.inflearn.com/pages/index.js" target="_blank" rel="noopener noreferrer">index.js:19</a></div>
<div class="cm-s-mozilla message console-api log log" data-message-id="317" aria-live="polite"></div>
<div class="cm-s-mozilla message console-api log log" data-message-id="317" aria-live="polite"></div>
<div class="cm-s-mozilla message console-api log log" data-message-id="318" aria-live="polite">in PostCard.js / post: undefined 2 <a class="frame-link-source" href="webpack://www.inflearn.com/components/PostCard.js" target="_blank" rel="noopener noreferrer">PostCard.js:42</a></div>
<div class="cm-s-mozilla message console-api log log" data-message-id="318" aria-live="polite"></div>
<div class="cm-s-mozilla message console-api log log" data-message-id="318" aria-live="polite">이렇게 undefined가 되는걸 확인은 했으나 어디서 문제가 된 건지... 근데 이게 backend 에서 문제가 될 수 있는건가요???</div>

질문입니다

답변 감사드립니다~ reducer ADD_POST_SUCCESS에서 console.log(action.data)라는 말씀은 reduce 함수 내에 switch 문 안에서 로그를 찍어보라는 말씀인가요?
우선 sagas 에서
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div>function*&nbsp;addPost(action)&nbsp;{</div>
<div>&nbsp;&nbsp;try&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;result&nbsp;=&nbsp;yield&nbsp;call(addPostAPI,&nbsp;action.data)</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;yield&nbsp;put({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;ADD_POST_SUCCESS,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;result.data,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;console.log(action.data);</div>
<div>&nbsp;&nbsp;}&nbsp;catch&nbsp;(e)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;yield&nbsp;put({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;ADD_POST_FAILURE,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error:&nbsp;e,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}</div>
<div>}</div>
</div>
 이렇게 로그를 찍으면 object { content: "#test" } 이런 식으로 입력값이 로그에&nbsp; 잘 나오긴 합니다

leejg

Posts