NOAH

<p>제가 방금 남긴 질문과 똑같네요. 아마 강의가 좀 오래되서 그러지 않을까 생각되네요. 요즘은 다 훅을 쓰는데요.</p>
<p>저는 그냥 훅으로 진행하려고요.</p>

안녕하십니까 이번에 수강을 하게된 직장인 입니다

프로젝트 프론트엔드 한 분 모십니다. (reactjs)

백엔드 프로젝트 진행하실 한 분 모집합니다. ( Java spring)

<p>혹시 몰라 코드도 남깁니다. 전혀 잘못 된걸 못찾겠는데 이상하네요..</p>
<div style="color: #f6f6f4; background-color: #282a36; font-family: 'operator mono lig', Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #f286c4;">const</span>&nbsp;<span style="color: #62e884;">fetcher</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;(<span style="color: #ffb86c; font-style: italic;">url</span>)&nbsp;<span style="color: #f286c4;">=></span></div>
<div>&nbsp;&nbsp;<span style="color: #bf9eee;">axios</span>.<span style="color: #62e884;">get</span>(<span style="color: #ffb86c; font-style: italic;">url</span>,&nbsp;{&nbsp;withCredentials<span style="color: #f286c4;">:</span>&nbsp;<span style="color: #bf9eee;">true</span>&nbsp;}).<span style="color: #62e884;">then</span>((<span style="color: #ffb86c; font-style: italic;">response</span>)&nbsp;<span style="color: #f286c4;">=></span>&nbsp;<span style="color: #ffb86c; font-style: italic;">response</span>.data);</div>
<br />
<div><span style="color: #f286c4;">function</span>&nbsp;<span style="color: #62e884;">Profile</span>()&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;[<span style="color: #bf9eee;">followersLimit</span>,&nbsp;<span style="color: #62e884;">setFollowersLimit</span>]&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useState</span>(<span style="color: #bf9eee;">3</span>);</div>
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;[<span style="color: #bf9eee;">followingsLimit</span>,&nbsp;<span style="color: #62e884;">setFollowingsLimit</span>]&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useState</span>(<span style="color: #bf9eee;">3</span>);</div>
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;{&nbsp;<span style="color: #bf9eee;">me</span>&nbsp;}&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useSelector</span>((<span style="color: #ffb86c; font-style: italic;">state</span>)&nbsp;<span style="color: #f286c4;">=></span>&nbsp;<span style="color: #ffb86c; font-style: italic;">state</span>.user);</div>
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;{&nbsp;<span style="font-style: italic;">data</span><span style="color: #f286c4;">:</span>&nbsp;<span style="color: #bf9eee;">followersData</span>,&nbsp;<span style="font-style: italic;">error</span><span style="color: #f286c4;">:</span>&nbsp;<span style="color: #bf9eee;">followerError</span>&nbsp;}&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useSWR</span>(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #e7ee98;">`</span><span style="color: #f286c4;">${</span><span style="color: #bf9eee;">backUrl</span><span style="color: #f286c4;">}</span><span style="color: #e7ee98;">/user/followers?limit=</span><span style="color: #f286c4;">${</span><span style="color: #bf9eee;">followersLimit</span><span style="color: #f286c4;">}</span><span style="color: #e7ee98;">`</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884;">fetcher</span></div>
<div>&nbsp;&nbsp;);</div>
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;{&nbsp;<span style="font-style: italic;">data</span><span style="color: #f286c4;">:</span>&nbsp;<span style="color: #bf9eee;">followingsData</span>,&nbsp;<span style="font-style: italic;">error</span><span style="color: #f286c4;">:</span>&nbsp;<span style="color: #bf9eee;">followingError</span>&nbsp;}&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useSWR</span>(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #e7ee98;">`</span><span style="color: #f286c4;">${</span><span style="color: #bf9eee;">backUrl</span><span style="color: #f286c4;">}</span><span style="color: #e7ee98;">/user/followings?limit=</span><span style="color: #f286c4;">${</span><span style="color: #bf9eee;">followingsLimit</span><span style="color: #f286c4;">}</span><span style="color: #e7ee98;">`</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884;">fetcher</span></div>
<div>&nbsp;&nbsp;);</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #62e884;">useEffect</span>(()&nbsp;<span style="color: #f286c4;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">if</span>&nbsp;(<span style="color: #f286c4;">!</span><span style="color: #bf9eee;">me</span>?.id)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">Router</span>.<span style="color: #62e884;">push</span>(<span style="color: #dee492;">'</span><span style="color: #e7ee98;">/</span><span style="color: #dee492;">'</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;},&nbsp;[<span style="color: #bf9eee;">me</span>?.id]);</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;<span style="color: #62e884;">loadMoreFollowings</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useCallback</span>(()&nbsp;<span style="color: #f286c4;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884;">setFollowingsLimit</span>((<span style="color: #ffb86c; font-style: italic;">prev</span>)&nbsp;<span style="color: #f286c4;">=></span>&nbsp;<span style="color: #ffb86c; font-style: italic;">prev</span>&nbsp;<span style="color: #f286c4;">+</span>&nbsp;<span style="color: #bf9eee;">3</span>);</div>
<div>&nbsp;&nbsp;},&nbsp;[]);</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;<span style="color: #62e884;">loadMoreFollowers</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #62e884;">useCallback</span>(()&nbsp;<span style="color: #f286c4;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884;">setFollowersLimit</span>((<span style="color: #ffb86c; font-style: italic;">prev</span>)&nbsp;<span style="color: #f286c4;">=></span>&nbsp;<span style="color: #ffb86c; font-style: italic;">prev</span>&nbsp;<span style="color: #f286c4;">+</span>&nbsp;<span style="color: #bf9eee;">3</span>);</div>
<div>&nbsp;&nbsp;},&nbsp;[]);</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #f286c4;">if</span>&nbsp;(<span style="color: #f286c4;">!</span><span style="color: #bf9eee;">me</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">return</span>&nbsp;<<span style="color: #f286c4;">div</span>>Loading&nbsp;my&nbsp;information</<span style="color: #f286c4;">div</span>>;</div>
<div>&nbsp;&nbsp;}</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #f286c4;">if</span>&nbsp;(<span style="color: #bf9eee;">followerError</span>&nbsp;<span style="color: #f286c4;">||</span>&nbsp;<span style="color: #bf9eee;">followingError</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">console</span>.<span style="color: #62e884;">error</span>(<span style="color: #bf9eee;">followingError</span>&nbsp;<span style="color: #f286c4;">||</span>&nbsp;<span style="color: #bf9eee;">followingError</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">return</span>&nbsp;<<span style="color: #f286c4;">div</span>>Error&nbsp;occurred&nbsp;while&nbsp;loading&nbsp;follow&nbsp;and&nbsp;following&nbsp;data</<span style="color: #f286c4;">div</span>>;</div>
<div>&nbsp;&nbsp;}</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #f286c4;">return</span>&nbsp;(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #97e1f1; font-style: italic;">Head</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #f286c4;">title</span>>My&nbsp;profile&nbsp;|&nbsp;Tweeter</<span style="color: #f286c4;">title</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</<span style="color: #97e1f1; font-style: italic;">Head</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #97e1f1; font-style: italic;">AppLayout</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #97e1f1; font-style: italic;">NicknameEditForm</span>&nbsp;/></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #97e1f1; font-style: italic;">FollowList</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">header</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">Following&nbsp;List</span><span style="color: #dee492;">"</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">data</span><span style="color: #f286c4;">={</span><span style="color: #bf9eee;">followingsData</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">onClickMore</span><span style="color: #f286c4;">={</span><span style="color: #62e884;">loadMoreFollowings</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">loading</span><span style="color: #f286c4;">={!</span><span style="color: #bf9eee;">followingsData</span>&nbsp;<span style="color: #f286c4;">&&</span>&nbsp;<span style="color: #f286c4;">!</span><span style="color: #bf9eee;">followingError</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #97e1f1; font-style: italic;">FollowList</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">header</span><span style="color: #f286c4;">=</span><span style="color: #dee492;">"</span><span style="color: #e7ee98;">Follower&nbsp;List</span><span style="color: #dee492;">"</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">data</span><span style="color: #f286c4;">={</span><span style="color: #bf9eee;">followersData</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">onClickMore</span><span style="color: #f286c4;">={</span><span style="color: #62e884;">loadMoreFollowers</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #62e884; font-style: italic;">loading</span><span style="color: #f286c4;">={!</span><span style="color: #bf9eee;">followersData</span>&nbsp;<span style="color: #f286c4;">&&</span>&nbsp;<span style="color: #f286c4;">!</span><span style="color: #bf9eee;">followerError</span><span style="color: #f286c4;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</<span style="color: #97e1f1; font-style: italic;">AppLayout</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;</></div>
<div>&nbsp;&nbsp;);</div>
<div>}</div>
<br />
<div><span style="color: #f286c4;">export</span>&nbsp;<span style="color: #f286c4;">const</span>&nbsp;<span style="color: #62e884;">getServerSideProps</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #bf9eee;">wrapper</span>.<span style="color: #62e884;">getServerSideProps</span>(</div>
<div>&nbsp;&nbsp;(<span style="color: #ffb86c; font-style: italic;">store</span>)&nbsp;<span style="color: #f286c4;">=></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">async</span>&nbsp;({&nbsp;<span style="color: #ffb86c; font-style: italic;">req</span>&nbsp;})&nbsp;<span style="color: #f286c4;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">console</span>.<span style="color: #62e884;">log</span>(<span style="color: #dee492;">'</span><span style="color: #e7ee98;">Profile:&nbsp;getServerSideProps&nbsp;start</span><span style="color: #dee492;">'</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">const</span>&nbsp;<span style="color: #bf9eee;">cookie</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #ffb86c; font-style: italic;">req</span>?.headers.cookie;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">axios</span>.defaults.headers.Cookie&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #dee492;">''</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">if</span>&nbsp;(<span style="color: #ffb86c; font-style: italic;">req</span>&nbsp;<span style="color: #f286c4;">&&</span>&nbsp;<span style="color: #bf9eee;">cookie</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">axios</span>.defaults.headers.Cookie&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #bf9eee;">cookie</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<br />
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.<span style="color: #62e884;">dispatch</span>(<span style="color: #62e884;">loadMyInfoRequestAction</span>());</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.<span style="color: #62e884;">dispatch</span>(<span style="color: #97e1f1; font-style: italic;">END</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #bf9eee;">console</span>.<span style="color: #62e884;">log</span>(<span style="color: #dee492;">'</span><span style="color: #e7ee98;">Profile:&nbsp;getServerSideProps&nbsp;end</span><span style="color: #dee492;">'</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">await</span>&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.sagaTask.<span style="color: #62e884;">toPromise</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>);</div>
<br />
<div><span style="color: #f286c4;">export</span>&nbsp;<span style="color: #f286c4;">default</span>&nbsp;<span style="color: #62e884;">Profile</span>;</div>
</div>

배포 서버 속도 관련

<p>서버를 걍 켜놨는데 자기 스스로 계속 뭐를 불러들이는거 같은데.. 계속 monit에 로그가 찍히네요 몰랐다가 들어와보니 그러더라고요. 혹시 문제가 있을까요? 패킷이 비정상적으로 높은거 같긴한데요. 프론트서버입니다.</p>
<p><img src="https://cdn.inflearn.com/public/files/posts/127dd71d-2bbf-46df-a79d-c57b7bb7688b/blob" alt="" /></p>

<p><img src="https://cdn.inflearn.com/public/files/posts/70b05c88-9b0b-4666-97af-d15733c7a110/blob" alt="" /></p>
<p>이 에러입니다. 주말에 답변 감사합니다..</p>
<p>서버쪽에는 따로 에러가 없는거보니 .. 프론트 문제겠네요.</p>

className과 SSR

<p>캐싱 기능이란것이 주기적으로 서버에 요청해서 값을 갖고 있는 그 기능을 말씀하시는건가요? 아니면 그냥 url에 대해 요청한 값을 갖고있는걸 말씀하시는걸까요.</p>

더보기 버튼 클릭 시 useSWR이 다시 호출되나요???

<p>다시 다 깔고하니 잘되네요. 무엇인가가 잘못됬었나 봅니다. 로그인 상태에서 signup으로 갈 경우 signup 페이지에서 한 몇초간 있다가 home으로 가지는데 이건 배포하기전에는 속도가 느려보인다고 말씀하셨는데 그 현상이겠죠?</p>
<p>늦은 시간에도 답변주셔서 감사합니다.</p>

새로고침시 적용이 안되는 문제

<p>빌드가 꼬였는지 이상해져서 이번 강의에서 했던 서버사이드 렌더링 파일 .babelrc, _document.js 싹다 지우고 노드모듈, package-lock.json 지우고 다시 깔았는데 SSR 적용 안하고도 CSS가 바로 적용되네요...</p>
<p>이상하지만.. 해결된건지 한 번 강의 코드 다시 넣어봐야겠네요.</p>

<p>문서를 다시 보고 해결하였습니다.. 아에 잘못 설정해놨네요. 혹시 문제 있으신분 참고하세요.</p>
<div style="color: #f6f6f4; background-color: #282a36; font-family: 'operator mono lig', Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #f286c4;">export</span>&nbsp;<span style="color: #f286c4;">const</span>&nbsp;<span style="color: #62e884;">getServerSideProps</span>&nbsp;<span style="color: #f286c4;">=</span>&nbsp;<span style="color: #bf9eee;">wrapper</span>.<span style="color: #62e884;">getServerSideProps</span>(</div>
<div>&nbsp;&nbsp;(<span style="color: #ffb86c; font-style: italic;">store</span>)&nbsp;<span style="color: #f286c4;">=></span>&nbsp;<span style="color: #f286c4;">async</span>&nbsp;()&nbsp;<span style="color: #f286c4;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #7b7f8b;">//&nbsp;새로고침시&nbsp;로그인&nbsp;유지를&nbsp;위한&nbsp;dispatch</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.<span style="color: #62e884;">dispatch</span>(<span style="color: #62e884;">loadMyInfoRequestAction</span>());</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.<span style="color: #62e884;">dispatch</span>(<span style="color: #62e884;">loadPostsRequestAction</span>());</div>
<br />
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.<span style="color: #62e884;">dispatch</span>(<span style="color: #97e1f1; font-style: italic;">END</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f286c4;">await</span>&nbsp;<span style="color: #ffb86c; font-style: italic;">store</span>.sagaTask.<span style="color: #62e884;">toPromise</span>();</div>
<div>&nbsp;&nbsp;}</div>
<div>);</div>
</div>