강의와 다르게 성능측정이 발생하는 현상

질문있습니다

<p>제로초님 강의를 다들었지만 질문하나 해도 될까요??</p>
<p>현재 antd를 사용해서 커스텀을 하려고 하는데&nbsp;</p>
<p><a href="https://ant.design/components/form/#components-form-demo-register" target="_blank" rel="noopener noreferrer">https://ant.design/components/form/#components-form-demo-register </a></p>
<p>이 사이트에&nbsp;</p>
<p><img src="https://cdn.inflearn.com/public/comments/3872971d-21c8-43eb-8fb8-80b4f4443f92/이미지 5.png" title="이미지 5.png" width="1348" height="859" alt="" /></p>
<p>이 폼양식을 사용하고 싶은데&nbsp;</p>
<p><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token tag" style="box-sizing: border-box; color: #f81d22; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;"><span class="token tag" style="box-sizing: border-box;"><span class="token punctuation" style="box-sizing: border-box; color: #999999;"><</span>Form.Item</span> <span class="token attr-name" style="box-sizing: border-box; color: #0b8235;">label</span><span class="token attr-value" style="box-sizing: border-box; color: #008dff;"><span class="token punctuation" style="box-sizing: border-box; color: #999999;">=</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">"</span>E-mail<span class="token punctuation" style="box-sizing: border-box; color: #999999;">"</span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">></span></span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">{</span><span class="token function" style="box-sizing: border-box; color: #f81d22; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">getFieldDecorator</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">(</span><span class="token string" style="box-sizing: border-box; color: #0b8235; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">'email'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">{</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> rules</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">:</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">[</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">{</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> type</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">:</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token string" style="box-sizing: border-box; color: #0b8235; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">'email'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> message</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">:</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token string" style="box-sizing: border-box; color: #0b8235; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">'The input is not valid E-mail!'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">{</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> required</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">:</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token boolean" style="box-sizing: border-box; color: #f81d22; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">true</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> message</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">:</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token string" style="box-sizing: border-box; color: #0b8235; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">'Please input your E-mail!'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">]</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">,</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">(</span><span class="token tag" style="box-sizing: border-box; color: #f81d22; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;"><span class="token tag" style="box-sizing: border-box;"><span class="token punctuation" style="box-sizing: border-box; color: #999999;"><</span>Input</span> <span class="token punctuation" style="box-sizing: border-box; color: #999999;">/></span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;">}</span><span style="color: #314659; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre; background-color: #ffffff;"> </span><span class="token tag" style="box-sizing: border-box; color: #f81d22; font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; white-space: pre;"><span class="token tag" style="box-sizing: border-box;"><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></</span>Form.Item</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">></span></span></p>
<p>즉 getFieldDecorator를 문서를 보고도 사용이 안되고 에러가 출력되는데 이 클래스 기반의 폼양식을 훅스로 사용하고 싶은데 잘안되더라고요 조언좀 얻을 수 있을까요?? 감사합니다</p>

질문입니다.

<p>0이 선언이 안되있다고 하는데 DB의 데이터가 없어서 출력되는 오류 같습니다. 어떻게 고쳐야할까요..</p>
<p><img src="https://cdn.inflearn.com/public/comments/68e6d6fe-9c24-4f88-a67c-6ec2e62a896c/ff.png" title="ff.png" width="930" height="238" alt="" /></p>
<p>아 해결했습니다. 언제나 성실한 답변 감사합니다.</p>

에러 질문입니다.

<p>오류의 원인을 찾았습니다&nbsp;</p>
<div style="box-sizing: inherit; color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="box-sizing: inherit;"><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #6a9955;">//언팔로우</span></div>
<div style="box-sizing: inherit;"><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">function</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #dcdcaa;">unfollowAPI</span>(<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #c586c0;">return</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">axios</span>.<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #dcdcaa;">delete</span>(<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #ce9178;">`/user/</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">${</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">userId</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">}</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">true</span>,</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;});</div>
<div style="box-sizing: inherit;">}</div>
</div>
<div style="box-sizing: inherit; color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="box-sizing: inherit;"><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #6a9955;">//팔로우</span></div>
<div style="box-sizing: inherit;"><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">function</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #dcdcaa;">followAPI</span>(<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #c586c0;">return</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">axios</span>.<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #dcdcaa;">post</span>(<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #ce9178;">`/user/</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">${</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">userId</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">}</span><span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="box-sizing: inherit; font-weight: inherit; font-style: inherit; color: #569cd6;">true</span>,</div>
<div style="box-sizing: inherit;">&nbsp;&nbsp;});</div>
<div style="box-sizing: inherit;">}</div>
<p>이 부분에서 unfollowAPI의 axios.delete 부분의 {} 이부분이 문제가 있었네요 데이터 보내는게 없어도 빈 배열로 데이터</p>
<p>보내야 되는줄 알았는데 unfollow쪽에 저렇게 보내면 에러가 출력되더라고요 이유가 뭔가요??</p>
</div>

동작 오류 질문입니다.

<p>이부분 말씀하시는건가요? 해줬습니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #6a9955;">//언팔로우</span></div>
<div><span style="color: #569cd6;">function</span>&nbsp;<span style="color: #dcdcaa;">unfollowAPI</span>(<span style="color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">delete</span>(<span style="color: #ce9178;">`/user/</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">userId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="color: #569cd6;">true</span>,</div>
<div>&nbsp;&nbsp;});</div>
<div>}</div>
</div>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #6a9955;">//팔로우</span></div>
<div><span style="color: #569cd6;">function</span>&nbsp;<span style="color: #dcdcaa;">followAPI</span>(<span style="color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">`/user/</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">userId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="color: #569cd6;">true</span>,</div>
<div>&nbsp;&nbsp;});</div>
<div>}</div>
</div>
<p></p>

<p>로그인이 되어있는 상태인데 로그인이 필요합니다라고 출력되네요.</p>
<p><img src="https://cdn.inflearn.com/public/comments/adc4b48f-9c9f-49de-bb3c-486013cba497/이미지 5.png" title="이미지 5.png" width="1519" height="717" alt="" /></p>
<p>reducers/user.js 의 소스입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">FOLLOW_USER_REQUEST</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">FOLLOW_USER_SUCCESS</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">me:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">me</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">Followings:</span>&nbsp;[{&nbsp;<span style="color: #9cdcfe;">id:</span>&nbsp;<span style="color: #9cdcfe;">action</span>.<span style="color: #9cdcfe;">data</span>&nbsp;},&nbsp;...<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">me</span>.<span style="color: #9cdcfe;">Followings</span>],</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">FOLLOW_USER_FAILURE</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">UNFOLLOW_USER_REQUEST</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">UNFOLLOW_USER_SUCCESS</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">me:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">me</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;Followings:&nbsp;[...state.me.Followings].filter(v&nbsp;=>&nbsp;v.id&nbsp;!==&nbsp;action.data),</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">Followings:</span>&nbsp;<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">me</span>.<span style="color: #9cdcfe;">Followings</span>.<span style="color: #dcdcaa;">filter</span>(<span style="color: #9cdcfe;">v</span>&nbsp;<span style="color: #569cd6;">=></span>&nbsp;<span style="color: #9cdcfe;">v</span>.<span style="color: #9cdcfe;">id</span>&nbsp;!==&nbsp;<span style="color: #9cdcfe;">action</span>.<span style="color: #9cdcfe;">data</span>),</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">case</span>&nbsp;<span style="color: #9cdcfe;">UNFOLLOW_USER_FAILURE</span>:&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<span style="color: #9cdcfe;">state</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
</div>
<p>sagas/user.js의 소스입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #6a9955;">//=============================================</span></div>
<div><span style="color: #6a9955;">//팔로우</span></div>
<div><span style="color: #569cd6;">function</span>&nbsp;<span style="color: #dcdcaa;">followAPI</span>(<span style="color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">`/user/</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">userId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="color: #569cd6;">true</span>,</div>
<div>&nbsp;&nbsp;});</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">function*</span>&nbsp;<span style="color: #dcdcaa;">follow</span>(<span style="color: #9cdcfe;">action</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;yield&nbsp;call(loadUserAPI);</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #9cdcfe;">result</span>&nbsp;=&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">call</span>(<span style="color: #9cdcfe;">followAPI</span>,&nbsp;<span style="color: #9cdcfe;">action</span>.<span style="color: #9cdcfe;">data</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">put</span>({&nbsp;<span style="color: #6a9955;">//&nbsp;put은&nbsp;dispatch&nbsp;동일</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">type:</span>&nbsp;<span style="color: #9cdcfe;">FOLLOW_USER_SUCCESS</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">data:</span>&nbsp;<span style="color: #9cdcfe;">result</span>.<span style="color: #9cdcfe;">data</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">e</span>)&nbsp;{&nbsp;<span style="color: #6a9955;">//&nbsp;loginAPI&nbsp;실패</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">put</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">type:</span>&nbsp;<span style="color: #9cdcfe;">FOLLOW_USER_FAILURE</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">error:</span>&nbsp;<span style="color: #9cdcfe;">e</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">function*</span>&nbsp;<span style="color: #dcdcaa;">watchFollow</span>()&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">takeEvery</span>(<span style="color: #9cdcfe;">FOLLOW_USER_REQUEST</span>,&nbsp;<span style="color: #9cdcfe;">follow</span>);</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">//=============================================</span></div>
<div><span style="color: #6a9955;">//언팔로우</span></div>
<div><span style="color: #569cd6;">function</span>&nbsp;<span style="color: #dcdcaa;">unfollowAPI</span>(<span style="color: #9cdcfe;">userId</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;서버에&nbsp;요청을&nbsp;보내는&nbsp;부분</span></div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">delete</span>(<span style="color: #ce9178;">`/user/</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">userId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/follow`</span>,&nbsp;{},&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">withCredentials:</span>&nbsp;<span style="color: #569cd6;">true</span>,</div>
<div>&nbsp;&nbsp;});</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">function*</span>&nbsp;<span style="color: #dcdcaa;">unfollow</span>(<span style="color: #9cdcfe;">action</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;yield&nbsp;call(loadUserAPI);</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #9cdcfe;">result</span>&nbsp;=&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">call</span>(<span style="color: #9cdcfe;">unfollowAPI</span>,&nbsp;<span style="color: #9cdcfe;">action</span>.<span style="color: #9cdcfe;">data</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">put</span>({&nbsp;<span style="color: #6a9955;">//&nbsp;put은&nbsp;dispatch&nbsp;동일</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">type:</span>&nbsp;<span style="color: #9cdcfe;">UNFOLLOW_USER_SUCCESS</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">data:</span>&nbsp;<span style="color: #9cdcfe;">result</span>.<span style="color: #9cdcfe;">data</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">e</span>)&nbsp;{&nbsp;<span style="color: #6a9955;">//&nbsp;loginAPI&nbsp;실패</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">put</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">type:</span>&nbsp;<span style="color: #9cdcfe;">UNFOLLOW_USER_FAILURE</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">error:</span>&nbsp;<span style="color: #9cdcfe;">e</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}</div>
<div>}</div>
<br />
<div><span style="color: #569cd6;">function*</span>&nbsp;<span style="color: #dcdcaa;">watchUnfollow</span>()&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">yield</span>&nbsp;<span style="color: #dcdcaa;">takeEvery</span>(<span style="color: #9cdcfe;">UNFOLLOW_USER_REQUEST</span>,&nbsp;<span style="color: #9cdcfe;">unfollow</span>);</div>
<div>}</div>
</div>
<p>back/routes/user.js의 소스입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #9cdcfe;">router</span>.<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">'/:id/follow'</span>,&nbsp;<span style="color: #9cdcfe;">isLoggedIn</span>,&nbsp;<span style="color: #569cd6;">async</span>&nbsp;(<span style="color: #9cdcfe;">req</span>,&nbsp;<span style="color: #9cdcfe;">res</span>,&nbsp;<span style="color: #9cdcfe;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #9cdcfe;">me</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">db</span>.<span style="color: #9cdcfe;">User</span>.<span style="color: #dcdcaa;">findOne</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">where:</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">id:</span>&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">id</span>&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">me</span>.<span style="color: #dcdcaa;">addFollowing</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">params</span>.<span style="color: #9cdcfe;">id</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">send</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">params</span>.<span style="color: #9cdcfe;">id</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">e</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;</div>
<div><span style="color: #9cdcfe;">router</span>.<span style="color: #dcdcaa;">delete</span>(<span style="color: #ce9178;">'/:id/follow'</span>,&nbsp;<span style="color: #9cdcfe;">isLoggedIn</span>,&nbsp;<span style="color: #569cd6;">async</span>&nbsp;(<span style="color: #9cdcfe;">req</span>,&nbsp;<span style="color: #9cdcfe;">res</span>,&nbsp;<span style="color: #9cdcfe;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #9cdcfe;">me</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">db</span>.<span style="color: #9cdcfe;">User</span>.<span style="color: #dcdcaa;">findOne</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">where:</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">id:</span>&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">id</span>&nbsp;},</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">me</span>.<span style="color: #dcdcaa;">removeFollowing</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">params</span>.<span style="color: #9cdcfe;">id</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">send</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">params</span>.<span style="color: #9cdcfe;">id</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">e</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4ec9b0;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;});</div>
</div>

<p>답변감사합니다 갓로초님</p>

s s

Posts