🐶 DogGain Forum

개이득 정보를 나누는 핫딜 커뮤니티 포럼
실시간 핫딜 정보와 소비자 후기, 꿀팁을 공유할 수 있는 커뮤니티를 목표로 직접 기획하고 개발한 웹 포럼 서비스입니다.

---

📚 목차

• 📸 데모 및 배포 링크
• 💡 프로젝트 탄생 배경
• 🎯 핵심 기능 및 사용자 시나리오
• 🛠 기술 스택 및 개발 환경
• 🛠 기술 스택 선택 이유
• 🚀 실행 방법
• 🐳 Docker로 실행하기
• 📸 주요 화면 스크린샷
• 🔧 주요 트러블 슈팅 히스토리
• 📈 프로젝트 성과 및 사용자 피드백
• 🎉 개발 과정에서 배운 점
• 🔄 향후 발전 방향
• 👨‍💻 개발자 정보
• 🙏 마치며

---

📸 데모 및 배포 링크

• 배포 링크

---

💡 프로젝트 탄생 배경

기존 핫딜 공유의 구조적 문제점

기존 핫딜 정보 공유는 주로 특정 분야 중심의 커뮤니티에서 이루어졌습니다.

현재 상황:

• 의류 커뮤니티 → 의류 관련 핫딜만 공유
• 전자기기 커뮤니티 → 전자제품 핫딜만 공유
• 휴대폰 커뮤니티 → 통신 관련 핫딜만 공유

핵심 문제점:

• 카테고리 편향: 특정 분야에 관심 있는 사람들이 해당 카테고리 핫딜만 집중 공유
• 정보 분산: 다양한 분야의 핫딜을 찾으려면 여러 커뮤니티를 돌아다녀야 함
• 핫딜 본질 희석: "핫딜 자체"보다는 "해당 카테고리 제품"에 대한 관심이 우선

DogGain_Forum이 해결하고자 한 핵심 문제

진짜 핫딜러들을 위한, 핫딜 그 자체에 집중하는 플랫폼이 없다

목표한 차별점:

• 카테고리에 상관없이 할인율과 가성비 자체에 집중
• 의류부터 전자기기, 생필품까지 모든 분야의 핫딜을 한 곳에서
• 특정 분야 전문가가 아닌 핫딜 찾기의 달인들이 모이는 공간

해결하고자 한 핵심 가치

1. 실시간성: 핫딜 정보를 즉시 공유하고 확인할 수 있는 환경
2. 신뢰성: 구매 후기와 주의사항을 통한 검증된 정보 제공
3. 사용성: 직관적인 UI로 누구나 쉽게 사용할 수 있는 플랫폼

---

🎯 핵심 기능 및 사용자 시나리오

1. 핫딜 정보 실시간 공유

사용자 스토리: "방금 발견한 좋은 딜을 빠르게 공유하고 싶어요"

• 간편한 게시글 작성 (제목 10자 이상 유효성 검사로 품질 관리)
• 실시간 게시글 업데이트
• 좋아요/북마크로 유용한 정보 저장

2. 스마트 검색 시스템

사용자 스토리: "원하는 상품의 핫딜 정보를 빠르게 찾고 싶어요"

• 실시간 검색으로 즉시 결과 확인
• 검색 모달 UI로 끊김 없는 사용자 경험
• Firestore 인덱스 최적화로 빠른 검색 속도 구현

3. 사용자 맞춤 경험

사용자 스토리: "내 취향에 맞는 환경에서 편리하게 이용하고 싶어요"

• Google 간편 로그인
• 다크/라이트 모드 지원
• 개인 활동 히스토리 관리

---

🛠 기술 스택 및 개발 환경

구분	내용
Frontend	React, React Router
Language	TypeScript (JavaScript에서 마이그레이션 완료)
State Management	Redux Toolkit, React Query
State Persistence	redux-persist
Styling	styled-components, ThemeProvider
Custom Hook	useOnClickOutside, useInfinitePosts 등 자체 구현
Architecture	FSD (Feature-Sliced Design)
Build Tool	CRA → Vite
Authentication	Firebase Authentication (Google Login)
Database	Firebase Cloud Firestore
컨테이너화	Docker, Docker Compose, Nginx
배포 환경	GitHub Pages, Docker Container

---

🛠 기술 스택 선택 이유

Frontend

• React + TypeScript: 컴포넌트 재사용성과 타입 안전성을 통한 확장 가능한 구조
• Redux Toolkit: 복잡한 사용자 상태와 게시물 상태의 일관된 관리
• React Query: 서버 상태 캐싱으로 불필요한 API 호출 최소화

Backend & Database

• Firebase: 빠른 프로토타이핑과 실시간 데이터 동기화 지원
• Firestore: NoSQL의 유연성과 실시간 리스너를 통한 즉시 업데이트

빌드 & 배포

• Vite: CRA 대비 3배 빠른 빌드 속도로 개발 생산성 향상
• GitHub Pages: 무료 호스팅으로 빠른 MVP 검증
• Docker: 환경 독립적 실행과 일관된 배포 환경 제공

컨테이너화

• Docker + Nginx: 프로덕션 환경과 동일한 멀티 스테이지 빌드
• Docker Compose: 개발자 친화적인 간편한 로컬 실행 환경
• 환경 격리: Node.js 버전이나 의존성 충돌 없는 안정적 실행

---

🚀 실행 방법

필수 요구사항

• Node.js 18.0 이상
• npm 또는 yarn

로컬 환경 설정

# 1. 저장소 클론
git clone https://github.com/ensil-dev/DogGain_Forum.git
cd DogGain_Forum/forum_client

# 2. 의존성 설치
npm install --legacy-peer-deps

# 3. 개발 서버 실행
npm start

# 4. 프로덕션 빌드
npm run build

3. 환경 변수 설정

# .env 파일 생성 후 Firebase 설정, kakao api key 추가
VITE_apiKey=your_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storageBucket
VITE_messagingSenderId=your_messagingSenderId
VITE_appId=your_appId
VITE_measurementId=your_measurementId
VITE_KAKAO_JAVASCRIPT_KEY=your_KAKAO_JAVASCRIPT_KEY

---

🐳 Docker로 실행하기

Docker를 사용하면 환경에 관계없이 일관된 실행 환경에서 애플리케이션을 실행할 수 있습니다. 프로덕션 환경 시뮬레이션과 배포 테스트에 최적화되어 있습니다.

필수 요구사항

• Docker
• ⚠️ 환경변수 설정 필요 - 환경변수 설정 섹션 참고

실행 방법

# 1. 저장소 클론 및 의존성 설치
git clone https://github.com/ensil-dev/DogGain_Forum.git
cd DogGain_Forum/forum_client
npm install

# 2. 환경변수 설정 (.env 파일 생성)
# ⚠️ 이 단계 없이는 Firebase 연결이 실패하여 앱이 정상 동작하지 않습니다
# 환경변수 설정 방법은 위 '실행 방법' 섹션의 '환경 변수 설정' 참고

# 3. 원스톱 배포 테스트 (빌드 + 실행)
npm run docker:test

단계별 실행 (선택사항)

npm run docker:build    # Docker 이미지 빌드
npm run docker:start    # 컨테이너 시작 (8080 포트)
npm run docker:stop     # 컨테이너 중지

접속 확인

실행 완료 후 브라우저에서 다음 주소로 접속:

• 로컬 접속: http://localhost:8080

컨테이너 관리

# 컨테이너 상태 확인
docker ps -f name=doggain-forum

# 컨테이너 중지
docker stop doggain-forum

# 컨테이너 제거
docker rm doggain-forum

# 이미지 제거
docker rmi doggain-forum:latest

로그 확인

# 실시간 로그 확인
docker logs -f doggain-forum

---

📸 주요 화면 스크린샷

게시판 관련

• 무한 스크롤로 게시글 목록 로딩

• 게시글 작성

• 상세 게시글 조회·수정·삭제

• 좋아요

• 북마크 설정

• 게시글 공유

• 조회수 카운트

• 댓글 달기

검색

• 실시간 검색과 검색 모달 UI 제공

인증·사용자 기능

• Google 로그인 및 로그아웃

• 프로필 설정(프로필 사진 변경, 닉네임 편집)

• 사용자 히스토리

• 북마크 관리

관리자 대시보드

• 사용자 통계 그래프 / 관리자 이메일 등록·삭제 / 사용자 게시글·댓글 관리

테마

• 다크 모드·라이트 모드 전환 토글

---

🔧 주요 트러블 슈팅 히스토리

1. 검색 기능 성능 최적화

문제: 게시글 검색 시 전체 데이터 로드로 인한 응답 지연 및 네트워크 트래픽 과다 발생

원인 분석:

• 전체 게시글을 가져온 후 클라이언트에서 필터링하는 비효율적 구조
• Firestore 검색 인덱스(keywords 필드) 부재
• 검색 쿼리 최적화 미적용

해결 과정:

// Before: 전체 데이터 로드 후 클라이언트 필터링
const q = query(collection(db, 'posts'), orderBy('created', 'desc'));
const snap = await getDocs(q);
const posts = snap.docs.map((d) => ({ ...d.data(), id: d.id }));
return filterPostsByKeyword(posts, keyword, type).slice(0, limitCount);

// After: Firestore 인덱스 쿼리 활용
// 단일 키워드 검색
const q = query(
  collection(db, 'posts'),
  where('keywords', 'array-contains', keyword.toLowerCase()),
  orderBy('created', 'desc'),
  limit(limitCount)
);

// 다중 키워드 검색
const q = query(
  collection(db, 'posts'),
  where('keywords', 'array-contains-any', tokens),
  orderBy('created', 'desc'),
  limit(limitCount)
);

성과: 검색 응답시간 70-80% 단축, 네트워크 트래픽 90% 감소, 서버 사이드 쿼리 최적화로 확장성 대폭 향상

2. 조회수 중복 증가 문제 해결

문제: 새로고침할 때마다 조회수가 증가하는 현상

해결 방법:

• 세션 스토리지를 활용한 조회 기록 관리
• 동일 사용자의 24시간 내 중복 조회 방지 로직 구현

영향: 정확한 인기 게시글 순위 제공으로 사용자 만족도 향상

3. TypeScript 마이그레이션

문제: JavaScript 환경에서 빈번한 타입 관련 런타임 오류 발생

마이그레이션 전략:

1. 핵심 컴포넌트부터 점진적 적용
2. 공통 타입 정의를 통한 재사용성 확보
3. Strict 모드 활성화로 타입 안전성 극대화

성과: 개발 중 타입 관련 오류 사전 발견, 코드 품질 대폭 향상

4. 상태 관리 최적화

문제: Redux store가 비대해지면서 불필요한 리렌더링 발생

해결:

• React Query로 서버 상태 분리
• Redux는 사용자 인증 상태만 관리하도록 역할 축소
• useMemo, useCallback 적절한 활용으로 성능 최적화

---

📈 프로젝트 성과 및 사용자 피드백

정량적 성과

• 검색 속도: 3초 → 1초 이내 (3배 향상)
• 런타임 오류: TypeScript 도입으로 90% 감소
• 빌드 시간: CRA → Vite 전환으로 70% 단축

사용자 피드백 (기능별)

• 다크 모드: "눈의 피로가 줄어들어 더 오래 사용하게 됨"
• 실시간 검색: "원하는 정보를 빠르게 찾을 수 있어 편리함"
• 무한 스크롤: "페이지 이동 없이 자연스럽게 콘텐츠 탐색 가능"

---

🎉 개발 과정에서 배운 점

기술적 학습

1. 성능 최적화의 중요성: 사용자 경험은 기능보다 속도에 더 민감
2. 점진적 개선: JavaScript → TypeScript 마이그레이션을 통한 안전한 코드베이스 구축
3. 적절한 기술 선택: Firebase의 실시간 기능을 활용한 빠른 MVP 구현

설계 철학

• 사용자 중심 사고: 기술적 완성도보다 실제 사용성 우선
• 확장 가능한 구조: FSD 아키텍처로 기능 추가 시 유지보수성 확보
• 데이터 기반 의사결정: 사용자 피드백을 통한 지속적 개선

---

🔄 향후 발전 방향

단기 목표 (1개월)

• PWA 지원으로 모바일 앱 같은 경험 제공
• 실시간 알림 시스템 구현
• Vitest 기반 테스트 코드 작성

장기 목표 (3개월)

• AI 기반 개인 맞춤 핫딜 추천
• 상품 가격 변동 알림 기능
• 소셜 로그인 확장 (카카오, 네이버)

---

👨‍💻 개발자 정보

이정윤 - Full Stack Developer

• 📧 Email: dlwjd164@gmail.com
• 🔗 GitHub: ensil-dev

기여도

• 서비스 기획 및 UX 설계 (100%)
• Frontend 개발 (100%)
• Firebase 백엔드 구축 (100%)
• 성능 최적화 및 트러블 슈팅 (100%)

---

🙏 마치며

DogGain Forum은 단순한 개발 실습을 넘어, 실제 커뮤니티 사용자들이 겪는 구조적인 문제를 해결하고자 한 문제의식에서 출발한 프로젝트입니다.

처음에는 단순히 "핫딜 정보를 모아보자"는 아이디어였지만, 개발을 진행하면서 기존 커뮤니티들이 갖는 카테고리 편향, 정보 분산, UX 비효율과 같은 실질적인 문제들이 있다는 것을 발견했습니다. 이에 따라 단순한 기능 구현을 넘어서, 사용자 경험을 중심으로 기능의 우선순위를 조정하고, 검색 최적화·중복 조회 방지·다크모드 지원 등 사용자가 겪는 불편함을 직접 해결하는 데 집중했습니다.

특히, 검색 성능 개선을 위한 Firestore 쿼리 최적화, 세션 기반 조회수 중복 방지, 실시간 데이터 동기화 및 무한 스크롤 설계 등은 모두 "사용자"를 고려한 의사결정이었고, 이는 기술적 학습 그 이상으로 큰 성장을 이끌었습니다.

DogGain Forum은 단순히 핫딜 정보를 모으는 서비스가 아니라, 핫딜을 사랑하는 사람들을 위한 효율적인 정보 공유 플랫폼을 지향합니다. 앞으로도 사용자 피드백을 바탕으로, 실질적인 문제를 정의하고 해결하는 개발자로서 꾸준히 개선해 나가겠습니다.

더 나은 커뮤니티, 더 유용한 핫딜 경험을 함께 만들어가고 싶다면 언제든 편하게 연락 주세요! 🐶🚀