ktw23786330

<p>끝까지 다시 듣다보니 unsplash가 Image CDN의 역할을 해주셨다고 하여 첫 번째 질문에는 굳이 답해주지 않으셔도 될 것 같습니다 ㅎㅎ.. 죄송합니다!</p>
<p>&nbsp;</p>
<p>두 번째 질문에만 답변 주시면 감사하겠습니다. 강사님 좋은 강의 제공해주셔서 감사합니다 :)</p>

Image CDN 개념 관련 질문

<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 12.6px; line-height: 17px; white-space: pre;">
<div>
<div style="line-height: 17px;">
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">createWrapper</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'next-redux-wrapper'</span>;&nbsp;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">applyMiddleware</span>,&nbsp;<span style="color: #9cdcfe;">compose</span>,&nbsp;<span style="color: #9cdcfe;">createStore</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">composeWithDevTools</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux-devtools-extension'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">createSagaMiddleware</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux-saga'</span>;</div>
<br />
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">reducer</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'../reducers'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">rootSaga</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'../sagas/index'</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">loggerMiddleware</span>&nbsp;=&nbsp;({&nbsp;<span style="color: #9cdcfe;">dispatch</span>,&nbsp;<span style="color: #9cdcfe;">getState</span>&nbsp;})&nbsp;<span style="color: #569cd6;">=></span>&nbsp;(<span style="color: #9cdcfe;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;(<span style="color: #9cdcfe;">action</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">action</span>);</div>
<div>};</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">configureStore</span>&nbsp;=&nbsp;()&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">sagaMiddleware</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createSagaMiddleware</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">enhancer</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">NODE_ENV</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'production'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;<span style="color: #dcdcaa;">compose</span>(<span style="color: #dcdcaa;">applyMiddleware</span>(<span style="color: #4fc1ff;">sagaMiddleware</span>))</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<span style="color: #dcdcaa;">composeWithDevTools</span>(<span style="color: #dcdcaa;">applyMiddleware</span>(<span style="color: #4fc1ff;">sagaMiddleware</span>,&nbsp;<span style="color: #dcdcaa;">loggerMiddleware</span>));</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;배포용일&nbsp;때는&nbsp;devTools를&nbsp;연결하지&nbsp;않고&nbsp;개발용일&nbsp;때만&nbsp;devTools를&nbsp;연결</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">store</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createStore</span>(<span style="color: #dcdcaa;">reducer</span>,&nbsp;<span style="color: #dcdcaa;">enhancer</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4fc1ff;">store</span>.<span style="color: #9cdcfe;">sagaTask</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">sagaMiddleware</span>.<span style="color: #dcdcaa;">run</span>(<span style="color: #dcdcaa;">rootSaga</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #4fc1ff;">store</span>;</div>
<div>};</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">wrapper</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createWrapper</span>(<span style="color: #dcdcaa;">configureStore</span>,&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">debug</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">NODE_ENV</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'development'</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;이후에&nbsp;배포할&nbsp;때&nbsp;production으로&nbsp;바꿔주기</span></div>
<div>});</div>
<br />
<div><span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;<span style="color: #4fc1ff;">wrapper</span>;</div>
</div>
</div>
</div>
<p></p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 12.6px; line-height: 17px; white-space: pre;">
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">createWrapper</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'next-redux-wrapper'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">applyMiddleware</span>,&nbsp;<span style="color: #9cdcfe;">createStore</span>,&nbsp;<span style="color: #9cdcfe;">compose</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">composeWithDevTools</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux-devtools-extension'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">createSagaMiddleware</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'redux-saga'</span>;</div>
<br />
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">reducer</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'../reducers'</span>;</div>
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">rootSaga</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'../sagas'</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">loggerMiddleware</span>&nbsp;=&nbsp;({&nbsp;<span style="color: #9cdcfe;">dispatch</span>,&nbsp;<span style="color: #9cdcfe;">getState</span>&nbsp;})&nbsp;<span style="color: #569cd6;">=></span>&nbsp;(<span style="color: #9cdcfe;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;(<span style="color: #9cdcfe;">action</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">action</span>);</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">action</span>);</div>
<div>};</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">configureStore</span>&nbsp;=&nbsp;()&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">sagaMiddleware</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createSagaMiddleware</span>();</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">middlewares</span>&nbsp;=&nbsp;[<span style="color: #4fc1ff;">sagaMiddleware</span>,&nbsp;<span style="color: #dcdcaa;">loggerMiddleware</span>];</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">enhancer</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">NODE_ENV</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'production'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;?&nbsp;<span style="color: #dcdcaa;">compose</span>(<span style="color: #dcdcaa;">applyMiddleware</span>(...<span style="color: #4fc1ff;">middlewares</span>))</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;<span style="color: #dcdcaa;">composeWithDevTools</span>(<span style="color: #dcdcaa;">applyMiddleware</span>(...<span style="color: #4fc1ff;">middlewares</span>));</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">store</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createStore</span>(<span style="color: #dcdcaa;">reducer</span>,&nbsp;<span style="color: #dcdcaa;">enhancer</span>);</div>
<div>&nbsp;&nbsp;<span style="color: #4fc1ff;">store</span>.<span style="color: #9cdcfe;">sagaTask</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">sagaMiddleware</span>.<span style="color: #dcdcaa;">run</span>(<span style="color: #dcdcaa;">rootSaga</span>);</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #4fc1ff;">store</span>;</div>
<div>};</div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">wrapper</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">createWrapper</span>(<span style="color: #dcdcaa;">configureStore</span>,&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">debug</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">NODE_ENV</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'development'</span>,</div>
<div>});</div>
<br />
<div><span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;<span style="color: #4fc1ff;">wrapper</span>;</div>
</div>
<p></p>
<p>위와 같았던 store/configureStore.js를 아래의 제로초 선생님 코드를 복사하고 나니 로그인 문제가 해결됐습니다. 음 무엇이 문제였을까요</p>

로그인 관련 문제

<p>혹시 이미지 리사이징 안되시는 분들은 파일 이름이 '한글'이라서 인코딩 문제로 되지 않으실 확률이 높습니다! encodeURIComponent로 파일 이름을 감싸주면 정상적으로 인코딩되는데, 한글을 인코딩하면 초기에 설정했던 image 테이블의 src 컬럼 200글자를 넘어가는 경우가 많아 drop table 해주시고 3~400자 정도로 컬럼 설정 변경해주시면 모든 사진이 잘 업로드될 겁니다...!!&nbsp;</p>

이미지 리사이징 403 forbidden

github으로 clone 해온 후 npx webpack 오류

<p>아 helmet 설정이 true로 되어있었네요. 감사합니다!!!</p>

aws 배포시 에러

<p><img src="https://cdn.inflearn.com/public/files/posts/0c4d3310-8877-45a0-bc43-6bed9f351989/blob" alt="" /></p>
<p>터미널 늘리니깐 다시 제대로 나오네요! 감사합니다!</p>

테스트 커버리지 파일 이름

<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 9.8px; line-height: 13px; white-space: pre;"></div>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 9.8px; line-height: 13px; white-space: pre;">
<div><span style="color: #4fc1ff;">router</span>.<span style="color: #dcdcaa;">get</span>(<span style="color: #ce9178;">'/hashtag'</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: #dcdcaa;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">query</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">query</span>.<span style="color: #9cdcfe;">hashtag</span>;</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(!<span style="color: #4fc1ff;">query</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">redirect</span>(<span style="color: #ce9178;">'/'</span>);</div>
<div>&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">hashtag</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">Hashtag</span>.<span style="color: #dcdcaa;">findOne</span>({&nbsp;<span style="color: #9cdcfe;">where</span><span style="color: #9cdcfe;">:</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #4fc1ff;">query</span>&nbsp;}&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">let</span>&nbsp;<span style="color: #9cdcfe;">posts</span>&nbsp;=&nbsp;[];</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #4fc1ff;">hashtag</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">posts</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #4fc1ff;">hashtag</span>.<span style="color: #dcdcaa;">getPosts</span>({&nbsp;<span style="color: #9cdcfe;">include</span><span style="color: #9cdcfe;">:</span>&nbsp;[{&nbsp;<span style="color: #4ec9b0;">model</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">User</span>,&nbsp;<span style="color: #9cdcfe;">attributes</span><span style="color: #9cdcfe;">:</span>&nbsp;[<span style="color: #ce9178;">'id'</span>,&nbsp;<span style="color: #ce9178;">'nick'</span>]&nbsp;}]&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<br />
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">render</span>(<span style="color: #ce9178;">'main'</span>,&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">`</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">query</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">&nbsp;검색&nbsp;결과&nbsp;|&nbsp;NodeBird`</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">twits</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">posts</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">likes</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">twits</span>.<span style="color: #dcdcaa;">map</span>((<span style="color: #9cdcfe;">v</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;<span style="color: #9cdcfe;">v</span>.<span style="color: #9cdcfe;">Liker</span>.<span style="color: #dcdcaa;">map</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>)).<span style="color: #dcdcaa;">includes</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">id</span>),</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">error</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">error</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">error</span>);</div>
<div>&nbsp;&nbsp;}</div>
<div>});</div>
</div>
<p>위와 같이 res.render를 통해 likes 배열을 받아왔고, 이를 이용해</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 9.8px; line-height: 13px; white-space: pre;">
<div>{%&nbsp;if&nbsp;user&nbsp;and&nbsp;not&nbsp;(twit&nbsp;and&nbsp;likes)&nbsp;%}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"><</span><span style="color: #569cd6;">button</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'like'</span><span style="color: #808080;">></span>좋아요<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{%&nbsp;elif&nbsp;user&nbsp;and&nbsp;(twit&nbsp;and&nbsp;likes)&nbsp;%}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;"><</span><span style="color: #569cd6;">button</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">'unlike'</span><span style="color: #808080;">></span>&nbsp;좋아요&nbsp;취소<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{%&nbsp;endif&nbsp;%}</div>
</div>
<p>위와 같이 넌적스 파일을 만들었습니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 9.8px; line-height: 13px; white-space: pre;">
<div>&nbsp;&nbsp;<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelectorAll</span>(<span style="color: #ce9178;">'.like'</span>).<span style="color: #dcdcaa;">forEach</span>(<span style="color: #569cd6;">function</span>(<span style="color: #9cdcfe;">tag</span>){</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">tag</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">'click'</span>,<span style="color: #569cd6;">function</span>(){&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">isLoggedIn</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'#my-id'</span>);&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">twitId</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">tag</span>.<span style="color: #4fc1ff;">parentNode</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'.twit-id'</span>).<span style="color: #9cdcfe;">value</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #4fc1ff;">isLoggedIn</span>){&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">post</span>(<span style="color: #ce9178;">`/post/</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">twitId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/like`</span>)&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.<span style="color: #dcdcaa;">then</span>(()<span style="color: #569cd6;">=></span>{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">location</span>.<span style="color: #dcdcaa;">reload</span>();&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.<span style="color: #dcdcaa;">catch</span>((<span style="color: #9cdcfe;">error</span>)<span style="color: #569cd6;">=></span>{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">error</span>);&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<br />
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelectorAll</span>(<span style="color: #ce9178;">'.unlike'</span>).<span style="color: #dcdcaa;">forEach</span>(<span style="color: #569cd6;">function</span>(<span style="color: #9cdcfe;">tag</span>){</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">tag</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">'click'</span>,<span style="color: #569cd6;">function</span>(){&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">isLoggedIn</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'#my-id'</span>);&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">twitId</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">tag</span>.<span style="color: #4fc1ff;">parentNode</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'.twit-id'</span>).<span style="color: #9cdcfe;">value</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #4fc1ff;">isLoggedIn</span>){&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">axios</span>.<span style="color: #dcdcaa;">delete</span>(<span style="color: #ce9178;">`/post/</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">twitId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">/like`</span>)&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.<span style="color: #dcdcaa;">then</span>(()<span style="color: #569cd6;">=></span>{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">location</span>.<span style="color: #dcdcaa;">reload</span>();&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.<span style="color: #dcdcaa;">catch</span>((<span style="color: #9cdcfe;">error</span>)<span style="color: #569cd6;">=></span>{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">error</span>(<span style="color: #9cdcfe;">error</span>);&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;});&nbsp;</div>
</div>
<p>like 버튼과 unlike 버튼의 이벤트 리스너는 위와 깉이 만들었습니다.</p>
<p></p>
<p>그리고 실제로 Like 테이블을 조회해보니 아래와 같이 좋아요 버튼을 누른 사람들이 조회가 됩니다.&nbsp;</p>
<p><img src="https://cdn.inflearn.com/public/comments/ee5e8226-2930-4342-a226-ab5bdb53663d/blob" alt="" /></p>
<p>그런데 문제는 좋아요 버튼을 눌러도 좋아요 취소 버튼으로 바뀌지 않습니다. 넌적스 파일에서 if와 elif 문을 잘못 작성한 것인지 이벤트 리스너를 잘못 구성한 것인지 오류가 뜨는 것도 아니다보니 정확한 이유를 찾지 못하겠습니다...</p>

좋아요 기능 구현 문제

<h1 style="box-sizing: border-box; font-family: 'Noto Serif KR', serif;">[Line 53, Column 80] parseSignature: expected comma after expression</h1>
<h2 style="box-sizing: border-box; font-family: 'Noto Serif KR', serif;"></h2>
<pre style="box-sizing: border-box;">Template render error: (C:\Users\USER\git\Node.js\nodejsStudy\lecture\nodebird\views\main.html) [Line 53, Column 80]
  parseSignature: expected comma after expression<br /><br /><br />라고 오류가 발생하고 오류가 발생한 줄의 코드는</pre>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 9.8px; line-height: 13px;">{% set like = user and twit and twit['Liker'].map(function(value){ return value.id }).includes(user.id) %}</div>
<pre style="box-sizing: border-box;"><br />입니다! 혹시 res.render를 이용한 해결방안에 대해 조금만 더 설명해주실 수 있을까요?<br /><br /></pre>