cksdnr3333

<div style="color: #f6f6f4; background-color: #282a36; font-family: 'D2Coding ligature', Consolas, Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>/Workspace/index.tsx</div>
<div><<span style="color: #97e1f1; font-style: italic;">Switch</span>></div>
<div><<span style="color: #97e1f1; font-style: italic;">Route</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/workspace/channel</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">component</span><span style="color: #f286c4;">=</span>{<span style="color: #97e1f1;">Channel</span>} /></div>
<div><<span style="color: #97e1f1; font-style: italic;">Route</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/workspace/dm</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">component</span><span style="color: #f286c4;">=</span>{<span style="color: #97e1f1;">DirectMessage</span>} /></div>
<div></<span style="color: #97e1f1; font-style: italic;">Switch</span>></div>
<div>&nbsp;</div>
<div>/App/index.tsx</div>
<div>
<div style="line-height: 19px;">
<div>&nbsp; &nbsp; <<span style="color: #97e1f1; font-style: italic;">Switch</span>></div>
<div>&nbsp; &nbsp; &nbsp; <<span style="color: #97e1f1; font-style: italic;">Redirect</span> <span style="color: #62e884; font-style: italic;">exact</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">to</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">login</span><span style="color: #dee492;">"</span> /></div>
<div>&nbsp; &nbsp; &nbsp; <<span style="color: #97e1f1; font-style: italic;">Route</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/login</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">component</span><span style="color: #f286c4;">=</span>{<span style="color: #97e1f1;">Login</span>} /></div>
<div>&nbsp; &nbsp; &nbsp; <<span style="color: #97e1f1; font-style: italic;">Route</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/signup</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">component</span><span style="color: #f286c4;">=</span>{<span style="color: #97e1f1;">Signup</span>} /></div>
<div>&nbsp; &nbsp; &nbsp; <<span style="color: #97e1f1; font-style: italic;">Route</span> <span style="color: #62e884; font-style: italic;">path</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">/workspace</span><span style="color: #dee492;">"</span> <span style="color: #62e884; font-style: italic;">component</span><span style="color: #f286c4;">=</span>{<span style="color: #97e1f1;">Workspace</span>} /></div>
<div>&nbsp; &nbsp; </<span style="color: #97e1f1; font-style: italic;">Switch</span>></div>
<div>&nbsp;</div>
<div>webpack.config.ts</div>
<div>
<div style="line-height: 19px;">
<div>&nbsp; devServer<span style="color: #f286c4;">:</span> {</div>
<div>&nbsp; &nbsp; open<span style="color: #f286c4;">:</span> <span style="color: #bf9eee;">true</span>,</div>
<div>&nbsp; &nbsp; historyApiFallback<span style="color: #f286c4;">:</span> <span style="color: #bf9eee;">true</span>,</div>
<div>&nbsp; &nbsp; devMiddleware<span style="color: #f286c4;">:</span> { publicPath<span style="color: #f286c4;">:</span> <span style="color: #dee492;">'</span><span style="color: #e7ee98;">/dist</span><span style="color: #dee492;">'</span> },</div>
<div>&nbsp; &nbsp; port<span style="color: #f286c4;">:</span> <span style="color: #bf9eee;">3090</span>,</div>
<div>&nbsp; &nbsp; static<span style="color: #f286c4;">:</span> { directory<span style="color: #f286c4;">:</span> <span style="color: #bf9eee;">path</span>.<span style="color: #62e884;">resolve</span>(__dirname, <span style="color: #dee492;">'</span><span style="color: #e7ee98;">src</span><span style="color: #dee492;">'</span>) },</div>
<div>&nbsp; &nbsp; liveReload<span style="color: #f286c4;">:</span> <span style="color: #bf9eee;">false</span>,</div>
<div>},</div>
</div>
</div>
</div>
</div>
</div>

Link가 아닌 브라우저를 통한 직접 접근

<p>강의가 아직 남아있기는 한데 현재 진행상황에서는&nbsp;<span style="background-color: #ffffff; color: #24292e; font-family: 'Noto Sans KR'; font-size: 16px;">/workspace/channel 로 접근하고 있습니다. historyApiFallback: true 로 설정되어 있으면 에러 발생 시 index.html 을 반환하고 index.html이 로드한 js파일에 있는 라우터 로직에 따라 페이지를 렌더링하는 것으로 동작 방식을 이해하고 있습니다. 따라서 브라우저로 직접 접근할 때 처럼 history 객체를 읽을 수 없는 경우 </span><span style="background-color: #ffffff; color: #24292e; font-family: 'Noto Sans KR'; font-size: 16px;">에러가 발생하는 대신 index.html을 반환해야 하는데 404페이지가 반환됩니다.</span></p>
<p><span style="color: #24292e; font-family: Noto Sans KR;"><span style="background-color: #ffffff;">historyApiFallback: false인 경우엔 루트 페이지를 제외하고 어떤 페이지도 브라우저로 직접 접근이 안됩니다...</span></span></p>
<p>&nbsp;</p>
<p><span style="color: #24292e; font-family: Noto Sans KR;"><span style="background-color: #ffffff;">"/workspace/channel"</span></span></p>
<p><img src="https://cdn.inflearn.com/public/comments/d39987d0-4096-4e1e-8317-f5d53c829458/blob" alt="" /></p>
<p><span style="color: #24292e; font-family: Noto Sans KR;">"/"</span></p>
<p><img src="https://cdn.inflearn.com/public/comments/17d9f06b-5a72-4f42-b8d8-1d19bf3dbb09/blob" alt="" /></p>

<p>현재 preset-env 버전에서는 async / await 함수를 Promise를 사용한 코드로 변환해준다고 하네요.</p>
<p>Promise를 사용한 코드는 corejs를 통해서 변환할 수 있으니 가능한 듯 하네요.</p>

[추가 질문] 저는 regenerator-runtime없이 잘 번들링 됩니다.

서버 접근

<p>보안 그룹 문제였네요. 감사합니다!!</p>

프론트 서버 주소

<p>네 오타도 확인했는데 이상없습니다.</p>

<p>api.nodebird.com 로 접속이 가능한지 물어보시는 거면 가능합니다. 프론트 서버에서 url 맞춰도 backend 서버로 접근이 안돼요 요청이 가긴 가는데 어디로 가는 건지 알 수 가 없네요...</p>

<p>네 소스코드는 같아요. 올바른 요청이든 아니든 일단 요청이 가긴해야할 텐데 백엔드 서버에 아예 요청이 안가는 걸로 보아서는 프론트 쪽 코드에 문제가 있는 걸로 생각이 드는데요. 어느쪽을 봐야 알 수 있을까요?</p>
<p></p>

<p>네트워크에는 Error response가 잡히지는 않는데 백엔드 에서 500 code를 응답합니다. loadMyInfoError에도 에러 메시지가 담기구요...</p>
<p>한 번의 요청에 두 개의 라우터로 가는 경우가 발생할 수 있나요?? 아니면 실제로 액션은 한 번 디스패치되긴 했는데, 어떤 내부동작에 의해 두 번의 요청이 발생한 건가요?? userInfo 액션은 디스패치 된적 없습니다.</p>
<p><img src="https://cdn.inflearn.com/public/comments/1583dfab-310c-4220-ac19-09fe3a47afa5/blob" alt="" /></p>
<p><img src="https://cdn.inflearn.com/public/comments/9ae196b4-c67d-427c-a360-8a87c9cdf6b8/blob" alt="" /></p>

요청 오류 질문

<p>넣어도 똑같습니다.</p>
<p>어떤 소스코드를 보여줘야 하는 지 감이 안잡히네요...</p>
<p><img src="https://cdn.inflearn.com/public/comments/df0fb686-2b10-4b31-8377-cb2f221e1075/blob" alt="" /><img src="https://cdn.inflearn.com/public/comments/4eb7ed2f-593e-48da-a866-263c8d8b857c/blob" alt="" /></p>

cksdnr3333

Bài viết