기술적 의사 결정
UI 프레임워크: React
설명: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 선언적이고 효율적이며 유연하며, 컴포넌트 기반 아키텍처를 제공합니다.
선택 이유: 빠르고 효율적인 UI 개발을 위해 선택하였고, 가상 DOM을 이용해 실제 DOM의 수정을 최소화하여 성능 또한 향상시킬 수 있습니다. 타 프레임워크에 비해 유연하고, 강력한 커뮤니티의 지원과 높은 호환성에 강점이 있습니다.
프로그래밍 언어: TypeScript
설명: JavaScript에 정적 타입을 추가한 언어로, 대규모 애플리케이션 개발에 적합합니다.
선택 이유: 타입 시스템을 통한 코드의 안정성과 유지보수성이 뛰어나며, 대규모 프로젝트와 팀 작업에 적합합니다. 오류를 빠르게 발견하고 디버깅할 수 있어 개발 효율성을 높입니다.
빌드 툴: Vite
설명: 프론트엔드 프로젝트를 위한 빌드 도구로, 빠른 핫 모듈 교체(HMR)와 빠른 콜드 스타트를 제공합니다.
선택 이유: 전통적인 번들러보다 개발 중에 페이지 리로드가 훨씬 빠르며, ES 모듈을 이용한 즉시 실행으로 개발 속도를 대폭 향상시킵니다. 간단한 설정과 빠른 성능으로 개발 경험을 개선합니다.
클라이언트 상태 관리: React Context API
설명: React 내장 기능으로, 컴포넌트 트리를 통해 데이터를 전역적으로 전달할 수 있게 해주는 도구입니다.
선택 이유: 별도의 상태 관리 라이브러리 없이 React만으로 전역 상태 관리가 가능합니다. 중간 규모의 프로젝트에서 간단하고 효율적으로 상태 관리를 할 수 있습니다.
서버 상태 관리: React Query
설명: 비동기 데이터와 서버 상태를 관리하기 위한 라이브러리입니다.
선택 이유: 데이터 캐싱, 동기화, 업데이트를 자동으로 관리해주며, 서버 상태 관리를 위한 복잡한 로직 없이 UI를 쉽게 구성할 수 있습니다. 개발 생산성과 애플리케이션 성능을 향상시킵니다.
스타일 라이브러리: Tailwind CSS
설명: 유틸리티 우선의 CSS 프레임워크로, 반응형 디자인을 쉽게 구현할 수 있습니다.
선택 이유: 커스텀 디자인을 빠르게 구현할 수 있으며, 유지보수가 쉽고, 디자인 일관성을 유지할 수 있습니다. 작성한 CSS의 양을 줄이면서도 높은 수준의 커스터마이징이 가능합니다.
UI 컴포넌트 라이브러리: Shadcn/ui
설명: 다양한 사전 제작된 UI 컴포넌트를 제공하는 라이브러리입니다.
선택 이유: 풍부한 컴포넌트와 쉬운 커스터마이징을 통해 개발 시간을 단축시키고, 애플리케이션의 UI 일관성을 유지할 수 있습니다.
백엔드 서비스: Firebase
설명: 구글이 제공하는 강력한 백엔드-as-a-Service(BaaS)로, 데이터베이스, 인증, 호스팅 등 다양한 기능을 제공합니다.
선택 이유: 빠른 개발 속도와 쉬운 사용법으로 개발자가 백엔드 기능을 손쉽게 구현할 수 있습니다. 실시간 데이터베이스와 풍부한 보안 기능을 제공하여, 신속하게 안전한 애플리케이션을 만들 수 있습니다.
Form 유효성 검사: React Hook Form
설명: React 애플리케이션에서 폼 유효성 검사를 쉽게 구현할 수 있게 해주는 라이브러리입니다.
선택 이유: 높은 성능과 최소한의 리렌더링으로 사용자 경험을 향상시킵니다. 복잡한 폼 처리와 유효성 검사를 간단하고 효율적으로 관리할 수 있습니다.
페이지 라우팅: React Router
설명: SPA(Single Page Application)에서 페이지를 네비게이션할 수 있게 해주는 라이브러리입니다.
선택 이유: 강력하고 유연한 동적 라우팅 기능을 제공하며, React와 긴밀하게 통합되어 사용자에게 부드러운 페이지 전환 경험을 제공합니다.
클라우드 스토리지: AWS S3
설명: 안전하고 확장 가능한 클라우드 스토리지 서비스로, 파일 저장과 검색, 서비스 연동 등을 지원합니다.
선택 이유: 높은 가용성, 데이터 내구성, 그리고 저렴한 비용으로 대규모 데이터를 저장하고 관리할 수 있습니다. 사이트 배포를 위한 빌드 데이터 저장 용도로 사용하였습니다.
콘텐츠 전송 네트워크: AWS CloudFront
설명: 글로벌 콘텐츠 전송 네트워크(CDN) 서비스로, 사용자에게 콘텐츠를 빠르게 전달합니다.
선택 이유: 전 세계에 분산된 데이터 센터를 통해 콘텐츠를 캐싱하여 빠르게 제공하며, 높은 가용성과 자동화된 네트워크 최적화 기능으로 사용자 경험을 향상시킵니다. S3의 데이터를 HTTPS로 호스팅 하기 위해 사용하였습니다.
E2E 테스트 프레임워크 : Cypress
설명: 웹 애플리케이션의 end-to-end testing를 위한 자바스크립트 기반의 프레임워크입니다. 실제 브라우저에서 사용자의 행동을 모방하여 애플리케이션을 테스트할 수 있으며, 개발자들이 더 빠르고 쉽게 테스트를 작성하고 실행할 수 있도록 설계되었습니다.
선택 이유: Cypress는 테스트 중에 실시간으로 실행 상황을 볼 수 있는 인터페이스를 제공합니다. 또한, 자동으로 대기하는 기능으로 인해 테스트의 신뢰성이 높아지며, 다양한 테스팅 필요에 맞춘 강력한 API를 제공합니다.
CI/CD 서비스 : GitHub Actions
설명: GitHub Actions는 GitHub 저장소를 기반으로 소프트웨어 개발 워크플로우를 자동화할 수 있는 CI/CD(지속적 통합 및 지속적 배포) 서비스입니다. 코드 변경 사항을 감지하고, 테스트를 실행하며, 빌드와 배포 과정을 자동으로 처리할 수 있습니다.
선택 이유: GitHub Actions는 GitHub에 직접 통합되어 있어 별도의 CI/CD 도구를 설정하고 관리할 필요가 없습니다. 또한, 유연한 워크플로우 구성이 가능하여 다양한 사용 사례와 언어, 환경에 맞게 쉽게 조정할 수 있다고 합니다. 깃허브 내용 자동으로 배포 사이트에 반영하기 위해 사용했습니다.
Last updated