← 포트폴리오 목록
이웃정보나눔터
동네 주민들이 지역 정보를 자유롭게 공유하고 서로의 신뢰도를 확인하며 소통할 수 있는 커뮤니티 게시판을 React와 Node.js 기반으로 구현하는 프로젝트입니다.
AI 신뢰도 API 연동 구조 설계외부 신뢰도 API 응답을 캐싱하고 배지 UI로 매핑하는 어댑터 레이어 구현, 오류 시 폴백 배지 처리 설계
무한스크롤 게시판 피드 구현Intersection Observer와 커서 페이지네이션 API를 결합해 게시글 20개 단위로 점진 로딩하는 구조 설계
이미지 첨부 업로드 파이프라인 구축Multer + AWS S3 Presigned URL 방식으로 게시글 이미지 최대 5장 업로드, 클라이언트 리사이징 적용
Overview
프로젝트 개요
동네 주민들이 지역 정보를 자유롭게 공유하고 서로의 신뢰도를 확인하며 소통할 수 있는 커뮤니티 게시판을 React와 Node.js 기반으로 구현하는 프로젝트입니다. 로그인한 주민이 게시글을 작성·조회하고 댓글을 나누며 외부 AI 신뢰도 점수를 함께 확인할 수 있는 핵심 흐름을 구현하여.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
외부 AI 신뢰도 API의 응답 지연 및 장애 시 게시글 노출을 막지 않는 폴백 UX 설계
이미지 첨부 게시글의 업로드 실패/중단 시 재시도 및 부분 업로드 상태 관리
무한스크롤 환경에서 신규 게시글 반영과 스크롤 위치 유지의 충돌 해결
촉박한 납기 내 인증·게시판·신뢰도 연동 3개 축을 병렬로 진행하는 일정 리스크 관리
핵심 기능 1
동네 게시판 피드
로그인한 주민이 최신 동네 소식을 무한스크롤로 확인하고 필터로 원하는 주제를 좁혀볼 수 있는 게시판 피드입니다
핵심 기능 2
게시글 작성
텍스트와 이미지를 함께 첨부해 동네 소식이나 정보를 등록할 수 있는 게시글 작성 화면입니다
핵심 기능 3
댓글 작성 및 조회
게시글 상세 화면에서 댓글을 작성하고 다른 주민의 댓글을 시간순으로 확인할 수 있는 기능입니다. 게시글-댓글 관계를 정규화된 테이블로 설계하고, 댓글 수 카운트를 게시글 요약 카드에 반영합니다
핵심 기능 4
AI 신뢰도 점수 연동
고객사가 보유한 외부 AI 신뢰도 산출 API 결과를 게시글과 사용자 프로필에 배지 형태로 표시하는 기능입니다
구현 과정
프로젝트 진행 단계
STEP 1
요구사항 분석 및 커뮤니티 DB 설계
게시판/댓글/신뢰도 연동 스코프 정의, PostgreSQL 테이블 10개 설계 및 관계 매핑
STEP 2
인증 및 게시판 API 개발
Express 기반 JWT 인증 미들웨어, 게시글/댓글 CRUD API 18개 엔드포인트 구현
STEP 3
게시판 UI 및 신뢰도 연동 구현
React 기반 무한스크롤 피드, 게시글 상세, 외부 AI 신뢰도 API 연동 및 배지 UI 구현
STEP 4
통합 테스트 및 반응형 최적화
API-프론트엔드 통합 검증, 모바일 웹 반응형 레이아웃 및 크로스 브라우저 점검
프로젝트 성과
AI 신뢰도 API 연동 구조 설계외부 신뢰도 API 응답을 캐싱하고 배지 UI로 매핑하는 어댑터 레이어 구현, 오류 시 폴백 배지 처리 설계
무한스크롤 게시판 피드 구현Intersection Observer와 커서 페이지네이션 API를 결합해 게시글 20개 단위로 점진 로딩하는 구조 설계
이미지 첨부 업로드 파이프라인 구축Multer + AWS S3 Presigned URL 방식으로 게시글 이미지 최대 5장 업로드, 클라이언트 리사이징 적용
JWT 기반 세션 인증 체계 구현Access/Refresh 토큰 이원화 및 회전 전략 설계, 로그인 세션을 Express 미들웨어 다단계로 검증
Review
기술적 주안점
- 커서 기반 페이지네이션과 Intersection Observer를 결합한 무한스크롤 구조를 구현하여 대량 게시글에서도 부드러운 탐색 경험을 설계합니다
- S3 Presigned URL 업로드와 클라이언트 리사이징을 결합해 서버 부하 없이 이미지 첨부 게시글을 안정적으로 등록하는 구조를 구현합니다
- Optimistic UI 패턴으로 댓글 등록 체감 응답을 개선하고, 소프트 삭제 구조로 신고/이력 추적이 가능한 댓글 시스템을 구현합니다
