React Nodebird

프로젝트 설명

React/Next.js 프론트엔드와 Express 백엔드로 구성된 트위터 유사 SNS 풀스택 클론 프로젝트로, Node.js 기반 풀스택 개발 역량을 체계적으로 학습하기 위해 진행했다. 프론트엔드는 Next.js의 getServerSideProps를 활용한 SSR로 초기 로딩 성능과 SEO를 확보하고, Redux-Saga로 로그인·게시글 CRUD·팔로우 등 복잡한 비동기 플로우를 제너레이터 기반으로 관리하며 Immer를 적용하여 리듀서의 불변 상태 업데이트를 간결하게 처리했다. 백엔드는 Sequelize ORM으로 User·Post·Comment·Hashtag·Image 5개 모델 간 다대다(BelongsToMany) 관계를 설계하고, Passport Local Strategy + bcrypt 해싱 기반 세션 인증을 구축했다. 이미지 업로드는 multer-s3로 S3에 직접 저장하고, S3 업로드 이벤트를 트리거로 AWS Lambda에서 sharp를 사용하여 400×400 썸네일을 자동 생성하는 서버리스 이미지 리사이징 파이프라인을 구현했다.

주요 내용

• Next.js SSR + next-redux-wrapper로 인증 상태 포함 초기 페이지 렌더링
• Redux-Saga 제너레이터 기반 비동기 상태 관리 + Immer 불변 업데이트
• Sequelize 5개 모델 관계형 설계 (자기참조 다대다, 리트윗)
• Lambda + sharp 서버리스 이미지 리사이징 (S3 트리거, 400×400)
• Passport + bcrypt + express-session 세션 인증 및 CORS 처리

담당 기능

• 회원가입·로그인 — Passport Local Strategy + bcrypt 해싱 기반 세션 인증, 쿠키 기반 로그인 유지
• 게시글·댓글 CRUD — 게시글 작성·수정·삭제, 댓글 작성, 좋아요·리트윗 기능 구현
• 인피니트 스크롤링 — 커서 기반 페이지네이션(lastId)으로 게시글 무한 로딩 구현
• 이미지 업로드 및 리사이징 — multer-s3로 S3 직접 업로드, AWS Lambda + sharp로 400×400 썸네일 자동 생성
• 해시태그 — 정규표현식 기반 해시태그 파싱, BelongsToMany 관계로 게시글-해시태그 다대다 매핑, 해시태그별 게시글 조회
• 팔로우·팔로잉 — User 자기참조 다대다 관계(Followings/Followers)로 소셜 그래프 구현
• 이미지 캐루셀 — react-slick 기반 이미지 슬라이더, 1장/2장/다수 이미지 분기 렌더링
• SSR — Next.js getServerSideProps로 서버 사이드 렌더링, next-redux-wrapper로 서버/클라이언트 Redux 스토어 동기화

깨달은 점

• 💡 Redux-Saga의 제너레이터 기반 사이드이펙트 관리가 복잡한 비동기 플로우(로그인→사용자 정보 로드→게시글 로드)를 선언적으로 제어할 수 있게 해주며, takeLatest/throttle 등 이펙트로 중복 요청 방지를 간결하게 처리할 수 있음을 학습
• 💡 Next.js의 getServerSideProps와 next-redux-wrapper를 조합하면 서버에서 Redux 스토어를 hydrate하여 SSR 시점에 인증 상태와 초기 데이터를 포함한 완전한 페이지를 렌더링할 수 있음을 확인
• 💡 Sequelize의 BelongsToMany 관계에서 through 테이블과 as 별칭을 활용하면 User 자기참조(Followers/Followings), Post-Hashtag 다대다, Post 리트윗(Retweet) 등 복잡한 관계를 하나의 모델 파일에서 선언적으로 정의 가능
• 💡 S3 업로드 이벤트를 Lambda 트리거로 연결하면 서버 부하 없이 이미지 후처리를 비동기로 처리할 수 있으며, sharp 라이브러리의 fit: inside 옵션으로 원본 비율을 유지한 리사이징이 가능

기술 스택

관련 링크

• course

프로젝트 이미지