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

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

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

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

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

입력한 순서대로 0, 559, 259 로 나옵니다.

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

const PostCardContent = ({ postData }) => { return ( div> {postData.split(/(#[^\s]+)/g).map((v) => { if(v.match(/#[^\s]+/)) { return ( Link scroll={false} href={{ pathname: '/hashtag', query: { tag: v.slice(1) }}} as={`/hashtag/${v.slice(1)}`} key={v} > a>{v}a> Link> ) } return v; })} div> ) }; 말씀해주신 부분에 scroll={false} 를 추가했는데도 같은 버그가 발생합니다. 혹시나하고 수정한 뒤 서버 재시작도 해봤는데도 그대로입니다ㅠㅠ

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

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

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

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

componentDidCatch에 관련된 질문입니다.

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