beautifuldev

<p>알려주신대로 하니 이제 잘 돼요! :D 친절하게 알려주시고 같이 해결해주셔서 정말 감사합니다!&nbsp;</p>
<p>선생님 덕분에 행복한 금요일 저녁을 보낼 것 같아요 :)&nbsp;</p>
<p>선생님도 즐거운 금요일 저녁, 주말이 되길 바라겠습니다! 다시 한 번 감사합니다 :D</p>

인피니트 스크롤링에 관한 질문입니다.

<p>알려주신대로 if(window.scrollY)를 추가하여 중복으로 데이터를 불러오는 현상은 해결이 되었는데 인피니트 스크롤링이 되지 않습니다.</p>
<p>로그를 통해 확인해보니 !countRef.current.includes(lastId) 가 false여서 실행이 되지 않았는데,&nbsp;해시태그를 통해 이동했을 때 countRef가 빈 배열이여야 하는데 lastId가 이미 채워져 있었습니다.</p>
<p>이 버그가 메인페이지(홈)에서 해시태그를 눌러서 이동하면 발생하지 않는데, 해시태그 페이지 내에서 해시태그를 다시 누르면 발생합니다.</p>

<div style="color: #f8f8f2; background-color: #272822; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #66d9ef; font-style: italic;">const</span>&nbsp;PostCardContent&nbsp;<span style="color: #f92672;">=</span>&nbsp;({&nbsp;<span style="color: #fd971f; font-style: italic;">postData</span>&nbsp;})&nbsp;<span style="color: #66d9ef; font-style: italic;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f92672;">return</span>&nbsp;(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #f92672;">div</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f92672;">{</span><span style="color: #fd971f; font-style: italic;">postData</span>.<span style="color: #a6e22e;">split</span>(<span style="color: #e6db74;">/(#</span><span style="color: #ae81ff;">[</span><span style="color: #f92672;">^</span><span style="color: #ae81ff;">\s]</span><span style="color: #f92672;">+</span><span style="color: #e6db74;">)/</span><span style="color: #f92672;">g</span>).<span style="color: #a6e22e;">map</span>((<span style="color: #fd971f; font-style: italic;">v</span>)&nbsp;<span style="color: #66d9ef; font-style: italic;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f92672;">if</span>(<span style="color: #fd971f; font-style: italic;">v</span>.<span style="color: #a6e22e;">match</span>(<span style="color: #e6db74;">/#</span><span style="color: #ae81ff;">[</span><span style="color: #f92672;">^</span><span style="color: #ae81ff;">\s]</span><span style="color: #f92672;">+</span><span style="color: #e6db74;">/</span>))&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f92672;">return</span>&nbsp;(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #66d9ef; font-style: italic;">Link</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #a6e22e;">scroll</span><span style="color: #f92672;">={</span><span style="color: #ae81ff;">false</span><span style="color: #f92672;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #a6e22e;">href</span><span style="color: #f92672;">={</span>{&nbsp;pathname:&nbsp;<span style="color: #e6db74;">'/hashtag'</span>,&nbsp;query:&nbsp;{&nbsp;tag:&nbsp;<span style="color: #fd971f; font-style: italic;">v</span>.<span style="color: #a6e22e;">slice</span>(<span style="color: #ae81ff;">1</span>)&nbsp;}}<span style="color: #f92672;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #a6e22e;">as</span><span style="color: #f92672;">={</span><span style="color: #e6db74;">`/hashtag/</span><span style="color: #f92672;">${</span><span style="color: #fd971f; font-style: italic;">v</span>.<span style="color: #a6e22e;">slice</span>(<span style="color: #ae81ff;">1</span>)<span style="color: #f92672;">}</span><span style="color: #e6db74;">`</span><span style="color: #f92672;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #a6e22e;">key</span><span style="color: #f92672;">={</span><span style="color: #fd971f; font-style: italic;">v</span><span style="color: #f92672;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<span style="color: #f92672;">a</span>><span style="color: #f92672;">{</span><span style="color: #fd971f; font-style: italic;">v</span><span style="color: #f92672;">}</span></<span style="color: #f92672;">a</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</<span style="color: #66d9ef; font-style: italic;">Link</span>></div>
<div>&nbsp;&nbsp;&nbsp;&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;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #f92672;">return</span>&nbsp;<span style="color: #fd971f; font-style: italic;">v</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<span style="color: #f92672;">}</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</<span style="color: #f92672;">div</span>></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;)</div>
<div>};</div>
</div>
<p>말씀해주신 부분에 scroll={false} 를 추가했는데도 같은 버그가 발생합니다. 혹시나하고 수정한 뒤 서버 재시작도 해봤는데도 그대로입니다ㅠㅠ</p>

<p>리액트는 클라이언트 사이드에서 실행되는 소스코드라서 백엔드의 경우에는 node.js와 같은 걸 이용해서 따로 서버를 실행시켜야 합니다. 그래서 많은 백엔드와 연동된다고 할겁니다.</p>
<p>저같은 경우에는 node.js를 사용했는데 아래의 링크를 통해 차근차근 따라하시면서 이렇게 연동하는 구나 하고 감 잡으시면 좋을 것 같습니다.</p>
<p><a href="https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/" target="_blank" rel="noopener noreferrer">https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/</a></p>
<p>저는 첨에 잘 몰라서 리액트 포트와 서버 포트를 같이 해서 실행시켰었는데 이렇게 하시면 안되고,</p>
<p>리액트에 proxy 설정을 따로 해주신 뒤에 서버는 서버 포트(ex.4000번)대로 리액트는 리액트대로 포트(ex.3000번)를 따로 실행하면 됩니다.</p>
<p>도움이 되기를 바랍니다 :)</p>

혹시 리액트 빌드되는 홈페이지를 바꾸고싶은데 아시나요?

<p>'제어판 > 프로그램 > 기본 프로그램 > 기본 프로그램 설정' 에 들어가셔서 Chrome 선택 후 '이 프로그램을 기본 프로그램으로 설정' 하시면 리액트가 빌드 될 때 크롬창으로 열리게 됩니다 :)</p>

<p>안녕하세요 :) 질문하신지도 오래 지났고, 제 방법이 맞는지도 모르겠지만 저도 질문자님과 같은 상황을 겪었던 터라 제가 해결했던 방법을 공유해서 이와 같은 문제를 겪는 분들에게 도움이 되었으면 하는 마음에 답변글을 답니다.</p><p>저는 componentDidCatch() 메서드가 component에서 발생한 에러를 해결해주는 것이라고 생각하여 자바스크립트 에러인 cannot read property 'getBoundingClientRect' of undefined 를 해결해주지 못하고 자바스크립트 에러때문에 componentDidCatch()도 호출이 되지 않은 것이라고 생각했습니다.</p><p>그래서 저는 구글링하여 다음과 같은 소스코드로 에러를 해결했습니다.</p><p><pre><code>componentDidMount() {</p><p>    console.log('componentDidMount');</p><p>    function getSafe(fn) {</p><p>      try {</p><p>        return fn();</p><p>      } catch (e) {</p><p>        return undefined;</p><p>      }</p><p>    }</p><p>    console.log(getSafe(() => this.myDiv.getBoundingClientRect().height));</p><p>  }</code></pre></p><p>try-catch문을 사용했는데 그럼 cannot read...관련 에러도 해결이 되고, componentDidCatch메서드도 호출이 되어서 화면에 '오류 났어요!'문구도 나타나게 됩니다.</p>

beautifuldev

Posts