Skip to content

Latest commit

 

History

History
75 lines (50 loc) · 4.9 KB

PROJECT_OVERVIEW.kor.md

File metadata and controls

75 lines (50 loc) · 4.9 KB

📌 프로젝트 개요: Repo Image Viewer

1. 프로젝트 소개

Repo Image Viewer는 사용자가 입력한 GitHub 레포지토리의 이미지 파일을 불러와 표시하는 싱글 페이지 웹 애플리케이션입니다. GitHub Pages를 통해 배포되며, Lazy Loading 기법을 사용하여 레포지토리 내 모든 이미지를 효율적으로 탐색할 수 있도록 개발합니다.

2. 주요 기능

  • GitHub 레포지토리 이미지 조회
    사용자가 특정 GitHub 레포지토리의 URL을 입력하면, 해당 레포지토리에 포함된 이미지 파일을 불러옵니다.

  • URL 공유 기능
    React Hash Router를 활용한 정적 단일 페이지 라우팅을 적용하고, 필터링 설정을 쿼리 파라미터로 저장하여 URL 공유 시 동일한 화면을 재현할 수 있습니다.

  • 이미지 필터링
    필터링 기능을 통해 특정 문자열이 포함되거나 제외되는 이미지 파일만 표시합니다. (예: include -exclude 방식)

  • Lazy Loading
    react-virtualized 라이브러리를 활용하여 화면에 보이는 이미지들만 로드함으로써 대량의 이미지 렌더링 성능을 최적화합니다.

  • GitHub API 요청 캐싱
    API 요청 횟수 제한 (Rate Limit)으로 인한 기능 중단을 방지하기 위해 데이터를 캐싱합니다.

  • GitHub 개인 토큰 저장 지원
    사용자가 GitHub 개인 액세스 토큰을 입력할 수 있도록 하여, 인증된 요청을 통해 더 많은 API 요청을 수행할 수 있도록 지원합니다.

  • 반응형 UI
    다양한 화면 크기에서 최적의 사용자 경험을 제공하도록 디자인되어 있습니다.

3. 기술 스택 및 선택 이유

  • 프론트엔드: React
    컴포넌트 기반 설계를 통해 유지보수와 재사용성에 유리하며, 상태 관리 및 이벤트 핸들링이 용이합니다.

  • 스타일링: Tailwind CSS
    유틸리티 퍼스트 방식으로 빠르고 직관적인 스타일링을 제공하며, 클래스 기반 스타일링으로 코드 중복을 줄이고 가독성을 높입니다.

  • 상태 관리: Zustand
    가벼운 상태 관리 라이브러리로 불필요한 복잡성을 줄이고 성능을 최적화하며, 간단한 API 설계를 통해 코드의 직관성과 유지보수성을 높입니다.

  • 컴포넌트 라이브러리: Shadcn
    프리셋 컴포넌트를 활용하여 UI 개발 속도를 높이고, 디자인 일관성을 유지할 수 있습니다.

  • 데이터 캐싱: IndexedDB
    대용량의 캐시 저장을 위해 IndexedDB Storage를 사용합니다. (지원하지 않는 브라우저의 경우 localStorage를 사용합니다.)

  • 라우팅: React Hash Router
    정적 사이트에서도 라우팅이 가능하도록 해시 기반 라우팅을 적용합니다

  • 최적화: Lazy Loading
    react-virtualized를 사용하여 대량의 이미지 컴포넌트를 효율적으로 렌더링하며, Intersection Observer 기법을 활용해 화면에 보이는 이미지들만 로드함으로써 성능을 최적화합니다.

  • 배포: GitHub Pages + CI/CD
    GitHub Pages를 통해 별도의 서버 관리 없이 반영구적인 서비스 제공이 가능하며, GitHub Actions를 활용하여 커밋 시 자동 배포되는 CI/CD 파이프라인을 구축합니다.

4. 프로젝트 목표

  • 리액트 훅과 컴포넌트로 분리하여 재사용성과 유지보수성을 높이는 방법을 배웁니다.
  • 반응형 웹 디자인 최적화: 다양한 화면 크기에서 최적의 UI를 제공하기 위해 미디어 쿼리와 Tailwind CSS의 반응형 기능을 적극 활용합니다.
  • 성능 최적화: React의 렌더링 성능을 극대화하고, React.memo, useMemo, useCallback 등을 활용하여 불필요한 리렌더링을 최소화합니다.
  • 웹 접근성 향상: ARIA 규격을 준수하여 웹 애플리케이션의 접근성을 개선합니다.
  • 적절한 시멘틱 커밋 방식을 통한 커밋 메시지 작성: 명확한 커밋 메시지를 사용하여 협업 시 코드 변경 사항을 쉽게 추적하고, 코드 관리 효율성을 높입니다.
  • CI/CD 파이프라인 구축: GitHub Actions를 활용하여 커밋 시 자동 배포 및 테스트 자동화를 구현합니다.

5. 기능 확장 방향

  • PWA (Progressive Web App) 구현: 애플리케이션을 PWA로 변환하여 모바일 앱처럼 설치할 수 있도록 합니다.
  • 이미지 압축 다운로드: 사용자가 선택한 이미지들을 압축하여 다운로드할 수 있는 기능을 추가합니다.
  • 현재 이미지 목록 스크린샷 저장: 사용자가 현재 보고 있는 이미지 목록을 캡처하여 저장하는 기능을 추가합니다.

6. 배포 방식

  • GitHub Pages를 활용하여 정적 사이트로 배포합니다.
  • GitHub Actions를 활용하여 자동 배포(CI/CD) 파이프라인을 구성합니다.