← 포트폴리오 목록
관심사 큐레이션 커뮤니티
타겟 사이트에서 1시간 주기로 크롤링을 통해 자동 수집되는 콘텐츠와 회원이 직접 작성하는 게시글을 하나의 피드로 통합하는 라이프스타일 큐레이션 커뮤니티를 구현합니다.
피드-크롤러 데이터 정규화 계층 구현Python 크롤러 원문과 회원 게시글을 단일 피드 스키마로 통합하는 매핑 계층 설계
URL 해시 기반 중복 게시글 필터링 구현SHA-256 원문 URL 해시로 동일 콘텐츠 중복 적재를 차단하는 유니크 인덱스와 필터링 로직 설계
낙관적 UI 좋아요·댓글 구조 설계클릭 즉시 반영 후 서버 응답과 동기화하는 Optimistic Update 패턴 적용, 실패 시 롤백 처리 구현
Overview
프로젝트 개요
타겟 사이트에서 1시간 주기로 크롤링을 통해 자동 수집되는 콘텐츠와 회원이 직접 작성하는 게시글을 하나의 피드로 통합하는 라이프스타일 큐레이션 커뮤니티를 구현합니다. React 기반 큐레이션 피드, 게시글 작성/상세, 댓글·좋아요 인터랙션을 반응형 웹으로 설계하며, Python 크롤러와 Node.js 백엔드를 연동해 중복 방지가 적용된 콘텐츠 파이프라인을 구축합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
크롤링 콘텐츠가 관리자 검수 없이 자동 게시될 경우 부적절 콘텐츠가 노출될 리스크
신고 기반 사후 처리와 자동 필터링을 병행하는 체계를 설계합니다
다양한 원문 구조(텍스트/이미지 링크)를 하나의 게시글 카드 UI로 일관되게 렌더링하는 파싱-표시 매핑 로직 설계가 필요합니다
1시간 주기 자동 수집과 회원 실시간 게시글 작성이 동시에 발생할 때 피드 정렬 순서의 일관성을 유지하는 캐시 무효화 전략이 필요합니다
타겟 사이트 원문을 요약/링크 아웃바운드 형태로만 노출해 저작권·법적 리스크를 최소화하는 콘텐츠 표시 정책 설계가 필요합니다
핵심 기능 1
큐레이션 피드
여러 타겟 사이트에서 크롤링으로 자동 수집된 콘텐츠와 회원이 직접 작성한 게시글이 하나의 피드에서 시간순으로 노출됩니다
핵심 기능 2
게시글 작성
회원이 제목·본문·이미지를 입력해 직접 게시글을 작성하고 피드에 등록할 수 있습니다. react-hook-form 기반 폼 검증과 이미지 업로드 후 썸네일 리사이징을 처리합니다
핵심 기능 3
게시글 상세
게시글 본문과 함께 댓글을 작성하고 좋아요로 반응할 수 있는 상세 화면을 제공합니다. 낙관적 UI로 좋아요 클릭을 즉시 반영하고, 댓글 목록은 최신순으로 정렬합니다
핵심 기능 4
마이페이지
이메일 회원가입/로그인과 함께 본인이 작성한 게시글, 좋아요한 게시글을 조회할 수 있는 마이페이지를 제공합니다. JWT 기반 인증과 반응형 레이아웃으로 PC/모바일 모두 대응합니다
구현 과정
프로젝트 진행 단계
STEP 1
커뮤니티 DB 스키마 설계 및 크롤링 파이프라인 연동
게시글·댓글·좋아요 테이블 관계 매핑, Python 크롤러 적재 데이터를 커뮤니티 스키마로 정규화하는 변환 계층 설계
STEP 2
인증 및 피드 API 개발
Express 기반 JWT 인증 API, 무한 스크롤 피드 조회 API 구현, 중복 방지 해시 필터링 로직 적용
STEP 3
피드/게시글 프론트엔드 UI 개발
React 기반 큐레이션 피드·게시글 작성·상세 화면 구현, Tailwind CSS 반응형 레이아웃 적용
STEP 4
댓글·좋아요 인터랙션 및 통합 테스트
낙관적 UI 기반 좋아요·댓글 기능 구현, PC/모바일 크로스 브라우저 검증 및 API 통합 테스트 수행
프로젝트 성과
피드-크롤러 데이터 정규화 계층 구현Python 크롤러 원문과 회원 게시글을 단일 피드 스키마로 통합하는 매핑 계층 설계
URL 해시 기반 중복 게시글 필터링 구현SHA-256 원문 URL 해시로 동일 콘텐츠 중복 적재를 차단하는 유니크 인덱스와 필터링 로직 설계
낙관적 UI 좋아요·댓글 구조 설계클릭 즉시 반영 후 서버 응답과 동기화하는 Optimistic Update 패턴 적용, 실패 시 롤백 처리 구현
Review
기술적 주안점
- Python 크롤러가 적재한 원문 데이터와 회원 게시글을 단일 피드 스키마로 정규화하여 자연스럽게 혼합 노출하는 구조를 설계합니다
- 회원이 직접 작성한 게시글과 크롤링 콘텐츠가 동일한 검수·노출 파이프라인을 공유하도록 설계합니다
- 좋아요·댓글 상호작용을 낙관적 UI와 서버 검증 이중 구조로 구현하여 체감 반응 속도를 확보합니다
