Thumbnail
BEST 개발 · 프로그래밍 웹 개발
[리뉴얼] React로 NodeBird SNS 만들기
(5.0)
82개의 수강평 ∙ 1544명의 수강생
88,000원

월 17,600원

5개월 할부 시
지식공유자 : 조현영
총 93개 수업˙총 22시간 47분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
내 목록 추가 1272 공유
조현영 프로필
Nextjs 11, next-redux-wrapper 호환 관련
조현영 16일 전

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

다른 댓글 보기(3)
조현영 프로필
Intersection Observer 소스 코드 추가했습니다.
조현영 23일 전

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를 전달하시면 됩니다.

다른 댓글 보기(1)
조현영 프로필
개별 포스트를 보는 화면에서 좋아요/좋아요 취소 하트가 안 바뀌는 현상
조현영 2달 전

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

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

조현영 프로필
노드버드 사이트 상단 메뉴에 밑줄이 안 그어져서 고민이셨던 분들께
조현영 6달 전
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에 넣으시면 됩니다.
다른 댓글 보기(1)
조현영 프로필
React로 기반 SSR 오픈소스 소개
조현영 8달 전

리액트를 배우고 나서 웹 서비스를 만들고 싶으신 분들이 많으실 것입니다.

막상 처음부터 만들기에는 폴더 구조 잡기가 어렵다, CRA같은 것은 너무 많은 것을 자동으로 해주어서 원리를 이해하기 어렵고, Next는 뭔가 자유도가 떨어진다고 생각하시는 분들도 많은 것 같습니다.

그래서 오픈 소스로 간단한 웹 서비스 보일러플레이트를 제작했습니다.

https://github.com/reactGo/reactGo

npm으로 전역 설치한 후에 원하는 프론트 기술(redux(saga, thunk, toolkit), mobx)과 원하는 백엔드 기술(mysql, mongo, postgre)을 선택하시면 됩니다.

기본적으로 typescript로 되어있지만 javascript 버전도 개별 브랜치로 존재합니다.

React 강좌 수강생분들께 도움이 되길 바라며, 도움이 되셨다면 star도 한 번 클릭 부탁드립니다!

다른 댓글 보기(3)
조현영 프로필
Next10 버전 호환 관련
조현영 8달 전

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

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

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

https://youtu.be/Gg5vQJ_AOsI

조현영 프로필
ImageZoom 컴포넌트 깨질 때 / 람다 이미지 안 올라가는 몇 가지 이유
조현영 10달 전

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

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

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

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

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

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

다른 댓글 보기(2)
조현영 프로필
[노드버드]추후 영상 제작/편집 안내
조현영 2020.07.09

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

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

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

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

조현영 드림.

88,000원

월 17,600원

5개월 할부 시
내 목록 추가 1272 공유
지식공유자 : 조현영
총 93개 수업˙총 22시간 47분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스