룸크리틱(방구석 평론가)

2023년 10월 - 현재

Room Critic

프로젝트 개요

룸크리틱은 영화, 드라마 등 미디어 콘텐츠에 대한 정보를 제공하고 사용자가 별점 및 리뷰를 남길 수 있는 플랫폼입니다.

기여도: FE, BE 100%
서비스 링크: https://room-critic.com
API 명세서: https://api.room-critic.com/api
기술 포트폴리오: PDF 다운로드

기술 스택

Frontend

React - UI 구현
Tailwind CSS - 스타일링
Redux Toolkit - Client State 관리
TanStack Query (React Query) - Server State 관리

Backend

NestJS - 서버 프레임워크
MongoDB - 데이터베이스
JWT - 토큰 기반 인증/인가
node-cron - 스케줄링

Infrastructure

AWS Route53 - 도메인 관리 및 CORS 해결
AWS S3 + CloudFront - 프론트엔드 배포
AWS EC2 + Load Balancer - 백엔드 배포
HTTPS - 보안 통신

주요 기능 및 구현

1. 콘텐츠 정보 제공

사용자가 영화, 드라마 등의 미디어 콘텐츠 정보를 쉽게 찾아볼 수 있도록 구현했습니다.

// TanStack Query를 활용한 데이터 페칭
export const useContentDetail = (contentId: string) => {
  return useQuery({
    queryKey: ['content', contentId],
    queryFn: () => fetchContentDetail(contentId),
    staleTime: 1000 * 60 * 5, // 5분
  });
};

2. 리뷰 및 별점 시스템

사용자가 콘텐츠에 대한 의견을 자유롭게 남길 수 있는 리뷰 시스템을 구현했습니다.

// NestJS 리뷰 컨트롤러
@Controller('reviews')
export class ReviewsController {
  @Post()
  @UseGuards(JwtAuthGuard)
  async createReview(
    @Body() createReviewDto: CreateReviewDto,
    @Request() req
  ) {
    return this.reviewsService.create(createReviewDto, req.user.id);
  }
}

3. 자동 데이터 수집 (Cron Bot)

TMDB API를 활용하여 최신 영화 정보를 자동으로 수집하는 크론 작업을 구현했습니다.

// node-cron을 활용한 스케줄링
@Cron('0 0 * * *') // 매일 자정 실행
async syncMovieData() {
  const movies = await this.tmdbApi.getLatestMovies();
  await this.saveToDatabase(movies);
  this.logger.log('Movie data synced successfully');
}

기술적 도전과 해결

CORS 이슈 해결

문제: 클라이언트와 서버가 다른 도메인에서 동작하여 CORS 에러 발생

해결: AWS Route53을 활용하여 서브 도메인 구성

클라이언트: room-critic.com
서버: api.room-critic.com

// NestJS CORS 설정
app.enableCors({
  origin: 'https://room-critic.com',
  credentials: true,
});

상태 관리 최적화

문제: 복잡한 클라이언트 상태와 서버 상태 관리

해결: Client State와 Server State를 명확히 분리

Redux Toolkit: UI 상태, 사용자 설정
TanStack Query: API 데이터, 캐싱

// Redux - UI 상태
const uiSlice = createSlice({
  name: 'ui',
  initialState: { theme: 'light', sidebarOpen: false },
  reducers: {
    toggleTheme: (state) => {
      state.theme = state.theme === 'light' ? 'dark' : 'light';
    },
  },
});

// TanStack Query - 서버 상태
const { data, isLoading } = useQuery({
  queryKey: ['contents'],
  queryFn: fetchContents,
});

HTTPS 배포

프론트엔드와 백엔드 모두 HTTPS로 배포하여 보안 통신을 구현했습니다.

프론트엔드: S3 + CloudFront + ACM 인증서
백엔드: EC2 + Application Load Balancer + ACM 인증서

성과 및 배운 점

성과

✅ 풀스택 개발 경험 (FE 100% + BE 100%)
✅ AWS 인프라 구축 및 배포 경험
✅ 토큰 기반 인증/인가 시스템 구현
✅ 실시간 데이터 동기화 시스템 구축

배운 점

1. 아키텍처 설계의 중요성

Client/Server State 분리로 유지보수성 향상
모듈화를 통한 코드 재사용성 증대

2. 인프라 관리

AWS 서비스 활용법 학습
CI/CD 파이프라인 구축의 중요성 체감

3. 성능 최적화

TanStack Query의 캐싱 전략 활용
불필요한 API 호출 최소화

앞으로의 개선 방향

소셜 로그인 추가 (OAuth)
추천 알고리즘 구현
모바일 앱 버전 개발
실시간 알림 기능 추가

프로젝트를 통해 프론트엔드부터 백엔드, 인프라까지 전체적인 웹 서비스 개발 경험을 쌓을 수 있었습니다.

메뉴

룸크리틱(방구석 평론가) - 미디어 콘텐츠 리뷰 플랫폼