[리뉴얼] React로 NodeBird SNS 만들기 대시보드

react-slick 버전이 올라감에 따라 기본적으로 css가 포함되지 않게 되었습니다. 다음 링크의 방법을 수행하시면 됩니다.

https://www.inflearn.com/questions/465319

안녕하세요. 제로초입니다.

강좌에서 faker 관련 질문이 자주 나와 공지로 알려드립니다.

faker는 매우 유명하고 유용한 라이브러리이나 제작자에게 문제가 있어, 제작자가 6버전에서 라이브러리를 망쳐버렸습니다. 궁금하신 분들은 faker.js, color.js 사태 로 검색해보시면 될 것 같습니다. 오픈소스 생태계에는 별의별 일이 다 일어납니다.

npm i -D faker@5
또는

npm i -D @faker-js/faker

로 설치하시면 문제 없이 돌아갑니다. 다만 가짜 이미지 서버인 http://lorempixel.com/ 이 서비스를 닫아서 가짜 이미지가 안 뜨는 것 같습니다. 다른 패키지가 없나 찾아보도록 하겠습니다.

안녕하세요. 제로초입니다.

Next와 Redux는 사실 연동이 매끄럽지가 않습니다.

그래서 강좌 막바지에 SWR을 소개해드렸는데, SWR도 1버전이 나온지 얼마 안 돼서 기능이 많지는 않습니다.

그래서 react-query로 redux를 걷어내고 서비스를 재구성해보았습니다. 아마 리뉴얼을 한다면 react-query로 하지 않을까싶네요(조만간 리뉴얼한다는 소리는 아닙니다).

인터섹션옵저버 + 인피니트스크롤링 모두 적용했습니다. 또한 사용자 정보를 SSR 할 필요는 없으므로 그 부분을 걷어냈습니다.

https://github.com/ZeroCho/react-nodebird/tree/master/react-query

여기서 소스 보시면 됩니다. 백엔드도 살짝 바뀌어서 react-query의 back을 사용하셔야 합니다.

감사합니다.

제로초 드림.

Nextjs 11이 나와서 테스트해본 결과 문제 없이 잘 돌아갑니다. 그냥 올리셔도 됩니다.

Next-redux-wrapper 7버전이 나와서 사용 방법에 조금 차이가 생겼습니다. 그 부분만 바꾸면 돼서 큰 차이는 없습니다.

깃헙 레포지토리에 소스코드 만들어두었으니 확인해보세요.

https://github.com/ZeroCho/react-nodebird/blob/master/intersection/front/pages/index.js

이미지 S3 업로드 후 리사이징 전까지 잠깐 이미지가 깨지는(때로는 오랫동안 깨지는) 현상이 있는데 이 부분은 다음 코드로 해결하시면 됩니다.

https://github.com/ZeroCho/react-nodebird/blob/master/intersection/front/components/PostImages.js

https://github.com/ZeroCho/react-nodebird/tree/master/intersection

문의하시는 분들(인피니트 스크롤링에서 height 소수점 발생 문제나 쓰로틀링 적용 안 됨 등의 문제가 발생하시는 분)이 많아서 인터섹션옵저버 적용한 소스코드 공유합니다.

훨씬 더 인피니트 스크롤링을 간단하게 적용하실 수 있습니다. 간단히 설명드리자면,

먼저 react-intersection-observer 패키지를 설치하고(react에서는 dom에 접근하려면 ref를 사용해야하는데 패키지를 안 쓰고도 할 수 있으나  조금 귀찮습니다)

다음 코드를 window.addEventListener('scroll')이 있는 useEffect 대신 넣으시면 됩니다.

const [ref, inView] = useInView();

useEffect(
  () => {
    if (inView && hasMorePosts && !loadPostsLoading) {
      const lastId = mainPosts[mainPosts.length - 1]?.id;
      dispatch({
        type: LOAD_POSTS_REQUEST,
        lastId,
      });
    }
  },
  [inView, hasMorePosts, loadPostsLoading, mainPosts, id],
);

JSX단에서는 다음과 같이 넣어주세요.

{mainPosts.map((post) => <PostCard key={post.id} post={post} />)}
<div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} />

PostCard들 아래에 위치한 div가 화면에 보이는 순간(즉, 마지막 게시글을 봤다는 소리겠죠) inView가  true가 되면서 useEffect가 작동합니다. inView가 true고, 게시글이 더 있고, 로딩중이 아니라면 새 게시글을 가져오는 액션이 dispatch 됩니다.

ref props를 보시면 hasMorePosts && !loadPostsLoading ? ref : undefined로 되어있는데 게시글이 더 있고, 로딩중이 아닐 때에만 ref가 연결되기 때문에 이 상황이 아니면 intersectionObserver가 해제됩니다.

현재는 가장 마지막 게시글보다 더 아래로 내려야만 인피니트 스크롤링이 작동하지만, 만약 아래에서 두번째, 아래에서 세 번째 등의 기준을 두고 싶으시다면 mainPosts.map 사이에 div를 끼어넣거나, 특정 인덱스의 PostCard의 ref로 인터섹션옵저버의 ref를 전달하시면 됩니다.

https://github.com/ZeroCho/react-nodebird/commit/41233cc3e9903d4ee5957558ab9a9ba34ad13187

여기에서처럼 singlePost가 있는 경우 따로 코딩해서 추가하시면 됩니다. 또 버그 발견한 경우 제보해주세요.

const router = useRouter();

return (
  <div>
    <Menu mode="horizontal" selectedKeys={[router.pathname]}>
      <Menu.Item key="/">
        <Link href="/"><a>노드버드</a></Link>
      </Menu.Item>
      <Menu.Item key="/profile">
        <Link href="/profile"><a>프로필</a></Link>
      </Menu.Item>

Menu.Item의 key는 편의를 위해 href랑 일치시켜놨습니다.
useRouter에서 router.pathname 받아서 selectedKeys에 넣으시면 됩니다.

Next 10 버전 사용해본 결과, 아무 문제 없이 잘 돌아갑니다!

안심하고 Next 10 버전으로 올리셔도 될 것 같습니다.

관련 유튜브 방송은 다음과 같습니다.

https://youtu.be/Gg5vQJ_AOsI

css transform이 적용된 태그 안에 position: fixed가 있을 때 position: fixed가 적용되지 않는 치명적인 버그가 있습니다.

하필 antd 최신 버전에서 Card 컴포넌트의 cover 부분에 transform 속성을 넣어서 position: fixed가 적용되지 않게 되었습니다. 해결 방법은 다음 질문에서 답변달아두었습니다.

https://www.inflearn.com/questions/72113

또한 실제 서비스 nodebird.com에서 이미지가 안 올라가는 경우를 몇 가지 발견했는데요.

일단 이미지 확장자가 PNG 처럼 대문자일 때, 그리고 이미지 이름에 한글이 들어갈 때 이미지 리사이징이 동작하지 않습니다.

이 부분 동영상 재촬영해서 고쳐두겠습니다. 감사합니다.

안녕하세요. 제로초입니다.

먼저 강좌를 구매해주신 수강생분들께 감사드립니다.

강좌 내용 중에 틀린 내용이 있거나, 서비스에 버그가 있거나, 자주 물어보시는 질문이 있다면 영상을 수정하거나 추가 제작해서 업로드하도록 하겠습니다. 인프런 질문으로 그 부분 남겨주세요. 또한 편집이 미흡해서 너무 보기 힘든 강좌가 있으면 그것도 알려주시면 편집 수정하도록 하겠습니다.

지금 예정되어 있는 추가 제작 영상은 '게시글 수정하기'입니다.

조현영 드림.