← 포트폴리오 목록
여행 커뮤니티 앱
공지·자유·질문&답변·여행후기 4개 게시판을 하나의 피드로 통합하고, 사진 첨부 작성·댓글·통합 검색까지 지원하는 여행 커뮤니티 모바일 앱 MVP를 React Native와 서버리스 지향 Node.js 백엔드로 설계·구현합니다.
가상 스크롤 피드 렌더링 최적화 설계FlatList windowSize·removeClippedSubviews 옵션 튜닝으로 대량 게시글 목록의 렌더링 부하를 관리하는 구조를 설계합니다.
낙관적 UI 반응 처리 구조 구현좋아요·댓글 액션에 Optimistic Update 패턴을 적용해 서버 왕복 없이 즉시 반영되는 인터랙션을 구현합니다.
다중 게시판 통합 검색 엔진 설계PostgreSQL tsvector 인덱스 기반 전문 검색으로 4개 게시판을 하나의 쿼리로 통합 검색하는 구조를 구현합니다.
Overview
프로젝트 개요
공지·자유·질문&답변·여행후기 4개 게시판을 하나의 피드로 통합하고, 사진 첨부 작성·댓글·통합 검색까지 지원하는 여행 커뮤니티 모바일 앱 MVP를 React Native와 서버리스 지향 Node.js 백엔드로 설계·구현합니다. 착수 즉시 이 데모를 확장해 안드로이드와 iOS 양대 마켓 대응 개발을 진행할 수 있습니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
다중 게시판(공지/자유/QA/여행후기)의 서로 다른 작성 권한과 노출 규칙을 하나의 피드 컴포넌트에 통합하는 설계가 필요합니다
여행 사진 다중 첨부 시 대용량 이미지 업로드로 인한 클라이언트 성능 저하를 방지하는 리사이징 전략이 필요합니다
계층형 댓글 구조에서 대댓글 삭제 시 트리 무결성을 유지하는 소프트 삭제 로직 설계가 필요합니다
Android/iOS 두 플랫폼에서 동일한 피드 스크롤 경험을 유지하기 위한 React Native 플랫폼 분기 처리가 필요합니다
구현 내용
핵심 기능 상세
핵심 기능 1
여행 커뮤니티 피드
여행 후기와 정보를 나누는 커뮤니티 메인 화면으로, 공지·자유·질문&답변·여행후기 게시판의 최신 글을 하나의 피드에서 확인할 수 있도록 구현합니다
핵심 기능 2
게시글 작성 & 사진 첨부
여행 사진과 글을 함께 작성해 게시판에 등록하는 작성 화면을 구현합니다. 이미지 다중 선택, 리사이징, 업로드 진행률 표시를 포함한 작성 플로우를 설계합니다
핵심 기능 3
댓글 & 소셜 반응
게시글 상세에서 댓글을 작성하고 좋아요 등 반응을 남길 수 있는 화면을 구현합니다. 계층형 댓글 트리와 반응 카운트 갱신 로직을 설계합니다
핵심 기능 4
검색 & 마이페이지
게시판 통합 검색과 내 프로필·작성글을 관리하는 마이페이지를 구현합니다. 제목/본문 기반 검색 쿼리와 사용자 프로필 편집 화면을 설계합니다
구현 과정
프로젝트 진행 단계
STEP 1
커뮤니티 도메인 분석 및 DB 스키마 설계
게시판 4종(공지/자유/QA/여행후기)과 댓글·반응 데이터 모델을 설계하고 PostgreSQL 테이블 관계를 정의합니다.
STEP 2
게시판 API 및 인증 구현
JWT 기반 인증과 게시글/댓글 CRUD API를 Express + Prisma로 구현합니다.
STEP 3
피드 & 작성 화면 UI 개발
React Native 기반 피드, 작성, 상세 화면을 구현하고 이미지 업로드 흐름을 연동합니다.
STEP 4
검색 및 마이페이지 통합
전문 검색 인덱스를 적용하고 마이페이지 프로필/작성글 관리 화면을 구현합니다.
프로젝트 성과
주요 성과
가상 스크롤 피드 렌더링 최적화 설계FlatList windowSize·removeClippedSubviews 옵션 튜닝으로 대량 게시글 목록의 렌더링 부하를 관리하는 구조를 설계합니다.
낙관적 UI 반응 처리 구조 구현좋아요·댓글 액션에 Optimistic Update 패턴을 적용해 서버 왕복 없이 즉시 반영되는 인터랙션을 구현합니다.
다중 게시판 통합 검색 엔진 설계PostgreSQL tsvector 인덱스 기반 전문 검색으로 4개 게시판을 하나의 쿼리로 통합 검색하는 구조를 구현합니다.
이미지 업로드 파이프라인 구축클라이언트 리사이징과 S3 Presigned URL 업로드를 결합해 서버 부하 적은 사진 첨부 흐름을 설계합니다.
Review
기술적 주안점
- 공지·자유·질문&답변·여행후기 4개 게시판을 단일 피드 컴포넌트로 통합해 컨텍스트 전환 없이 탐색 가능한 구조를 구현합니다
- 사진 최대 10장 다중 첨부와 항목별 업로드 진행률 표시를 지원하는 작성 컴포넌트를 구현합니다
- 낙관적 UI 업데이트와 계층형 댓글 구조를 결합해 즉각적인 상호작용 체감을 구현합니다
