NeighborHub: 실시간 커뮤니티 연결, 지역 이웃을 위한

발행: 1일 전 (2026년 3월 2일 오후 06:05 GMT+9)

7 분 소요

Source: Dev.to

NeighborHub 커버 이미지: 지역 이웃을 위한 실시간 커뮤니티 연결

DEV 주말 챌린지: 커뮤니티

이것은 DEV Weekend Challenge: Community에 대한 제출물입니다.

커뮤니티

NeighborHub는 지역 이웃 커뮤니티—거주자, 블록 협회, 그리고 중앙화된 디지털 공간을 원하고 연결을 유지하고자 하는 이웃 그룹을 위해 구축되었습니다. 블록 파티를 조직하든, 안전 공지를 올리든, 장보기 도움을 요청하든, 지역 공원에 대한 토론을 시작하든, NeighborHub는 이웃들을 의미 있게 모읍니다. 이 플랫폼은 목적에 맞게 설계된 카테고리 기반 커뮤니티 피드를 제공함으로써 그룹 채팅과 소셜 미디어의 파편화를 없애줍니다.

내가 만든 것

NeighborHub는 이웃들이 다음을 할 수 있는 실시간 커뮤니티 연결 플랫폼입니다:

📢 공지 게시 – 중요한 동네 소식을 공유
🎉 이벤트 조직 – 날짜, 시간, 장소가 포함된 이벤트 생성
🤝 도움 요청 – 이웃에게 도움을 청함
💬 토론 시작 – 커뮤니티 대화 열기
❤️ 좋아요 및 댓글 – Supabase Realtime (WebSocket 구독)를 통해 실시간으로 게시물에 참여
👤 프로필 보기 – 아바타/사용자명을 클릭하면 공개 프로필을 방문하고 해당 사용자의 게시물을 확인

주요 하이라이트

Optimistic UI – 동작이 즉시 느껴지고, 좋아요 토글 및 댓글이 바로 표시된 뒤 서버와 동기화됩니다.
카테고리 필터링 – 피드를 이벤트, 공지, 도움 요청, 토론별로 필터링.
스켈레톤 로더 – 모든 라우트에 부드러운 인식 성능을 위한 쉐이머 로딩 상태 제공.
전역 네비게이션 진행 바 – 페이지 전환 시 상단에 애니메이션 그라디언트 바 표시.
완전 반응형 – 모바일, 태블릿, 데스크톱에서 아름답게 작동.

데모

🔗 실시간 데모:

Code

이 프로젝트는 Next.js 로 구축되었으며, create-next-app 을 사용하여 부트스트랩되었습니다.

시작하기

먼저 개발 서버를 실행하세요:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

브라우저에서 열어 결과를 확인하세요.

app/page.tsx 파일을 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 수정하면 페이지가 자동으로 업데이트됩니다.

이 프로젝트는 next/font 를 사용하여 자동으로 최적화하고 Geist 를 로드합니다. Vercel용 새로운 폰트 패밀리입니다.

자세히 알아보기

Explore these resources to deepen your knowledge of Next.js:

Next.js Documentation – Next.js 기능 및 API에 대한 자세한 가이드.
Learn Next.js – 실습 학습을 위한 인터랙티브 튜토리얼.
Next.js GitHub Repository – 소스 코드를 확인하고, 피드백을 제출하며, 기여할 수 있습니다.

Deploy on Vercel

Next.js 앱을 배포하는 가장 쉬운 방법은 Vercel Platform – Next.js 제작자를 이용하는 것입니다.

자세한 내용은 공식 Next.js 배포 문서 를 확인하세요.

어떻게 만들었는지

기술 스택

계층	기술
Framework	Next.js 15 (App Router, React 19, Server Components, Server Actions)
Backend / Database	Supabase (PostgreSQL, Row‑Level Security, Auth, Realtime)
Authentication	Supabase Auth (email/password with SSR cookie sessions)
Styling	Tailwind CSS 4 with a custom design system
Icons	Lucide React
Deployment	Vercel
Database Migrations	Supabase CLI (`supabase db push`)

아키텍처 결정

기본적으로 서버 컴포넌트 – 페이지가 서버에서 데이터를 가져와 클라이언트 측 워터폴을 없앱니다. 버튼, 댓글 폼, 실시간 구독 등 인터랙티브한 부분만 클라이언트 컴포넌트로 표시됩니다.
모든 변형에 서버 액션 사용 – 별도의 API 라우트가 필요 없습니다. 인증, 게시물, 댓글, 좋아요, 프로필 업데이트를 위한 폼 제출은 Next.js 서버 액션과 revalidatePath를 사용해 캐시 무효화를 수행합니다.
행 수준 보안 (RLS) – 모든 테이블에 세밀한 정책이 적용됩니다; 사용자는 자신의 데이터만 수정할 수 있으며 공개 읽기 접근은 커뮤니티를 투명하게 유지합니다.
데이터베이스 트리거 – likes_count와 comments_count는 PostgreSQL 트리거를 통해 자동으로 최신 상태를 유지하여 N+1 쿼리를 방지합니다.
Supabase 실시간 구독 – LikeButton과 CommentSection은 postgres_changes 이벤트를 수신합니다. localActionRef는 현재 사용자의 동작을 중복 카운트하지 않으면서도 다른 사용자의 업데이트를 받을 수 있게 합니다.
미들웨어 – 각 요청마다 Supabase 인증 세션을 새로 고치고 /profile 및 /posts/new와 같은 라우트를 비인증 접근으로부터 보호합니다.
마이그레이션 기반 스키마 – 8개의 순차적인 SQL 마이그레이션이 테이블, RLS 정책, 트리거, 인덱스, 실시간 설정, 시드 데이터를 정의합니다. 스키마는 supabase db push로 완전히 재현 가능합니다.