BookUs!

📕 Storybook for Bookus

🌲 Cypress for Bookus

✍️ Writing

Atomic Design for React by @inthewalter

실용적인 리액트 테스트 전략 by @doong-jo

주니어 개발자의 CI/CD 도입기 by @FullOfOrange

Express 기반 프로젝트에서 Typescript Typing에 대한 고민 by @dobest27

React Hooks 로 전역스토어 만들기 by @FullOfOrange

소개

Bookus!는 이벤트 예약 서비스 Festa! 클론 프로젝트입니다. 순간적으로 많은 트래픽이 몰리더라도 중단되지 않는 안정적인 선착순 예약 서비스를 목표로 하고 있습니다. 따라서 다음과 같은 도전과제를 갖고 있습니다.

재사용성이 높고 테스트로 검증된 UI Component

Atomic Desgin Pattern

가장 작은 단위의 컴포넌트를 만들어, 큰 단위로 쌓아나가며 각각의 UI 단위를 만들어 나가는 디자인 패턴입니다. 이번 프로젝트에서는 재사용성이 뛰어난 UI를 위해 아토믹 디자인 패턴을 적용했습니다.

실용적인 프론트엔드 테스트

1. Custom Hooks Testing

비동기로 API 요청에 대한 처리가 주가 되는 상태 관리에 대한 테스트

2. Playground for UI components of Storybook

Storybook을 통한 독립된 환경에서의 컴포넌트 테스트

3. Cypress를 이용한 End-to-End Testing

각 페이지와 컴포넌트 UI 테스트

과중한 트래픽이 몰려도 안정적으로 예약이 가능한 시스템

예약이 필요한 시점마다 늘어나는 트래픽을 감당하기 위한 Container Orchestration 툴로 Kubernetes를 선택했습니다. 설정파일

DevOps

Travis CI

Docker hub

Frontend image

Backend image

Reserve Server image

Test

테스트 커버리지 80를 목표로 하는 검증된 코드를 통한 안정적인 서비스를 목표로 합니다.

• Front-End : Jest + Enzyme + Stroybook + Cypress
• Back-End : Jest + Supertest

Built With

Team

• 문종현 @dobest27
• 육진혁 @FullOfOrange
• 이용호 @inthewalter
• 조성동 @doong-jo