MOZI

서비스 소개

MOZI는 글을 메모할 때 사용되는 메모지에서 뒤에 두글자를 떼어내어 만들어진 이름입니다.

MOZI는 할 일을 잊지 않기 위한 시간/장소 기반 TODO서비스 입니다. 사용자가 지정한 시간이나 장소에 기반하여 그 장소에 근접하거나 특정 시간이 되면 알림을 보내줌으로써 사용자가 할 일을 잊지 않고 할 수 있도록 도와줍니다.

MOZI는 PWA의 형태로 제작되어서 웹에 접속 가능한 환경이라면 어디서든 접속 및 다운로드 할 수 있으며, 오프라인 동기화 기능을 제공하여 인터넷이 연결되지 않은 환경에서도 사용할 수 있습니다.

MOZI의 사용법이 궁금하시다면 MOZI 공식문서의 튜토리얼 부분을 읽어보시는것을 추천합니다.

기술 스택

• PWA를 적용하여 웹 브라우저에서 다운로드가 가능하도록 구현하였고 반응형 UI로 크로스 플랫폼을 지원할 수 있도록 했으며, PWA에서 활용할 수 있는 핵심 기능인 웹 푸시와 백그라운드 동기화 기능을 활용해 웹이지만 사용자가 네이티브 앱을 사용하는 것처럼 사용할 수 있도록 구현했습니다.
• Next의 SSR를 활용해 SEO를 향상시켰고 Vercel 플랫폼을 활용하여 짧은 주기로 지속적 배포를 진행했습니다.
• React를 사용하여 컴포넌트를 재사용하고 페이지에서 리렌더링되어야 할 부분과 되지 않아야 할 부분을 생각하며 개발하였고, 사용자와 상호작용이 많은 페이지를 효율적으로 구현했습니다.
• TypeScript를 사용하여 타입 안정성을 보장하고, 코드의 가독성을 높였습니다.
• React Query를 사용하여 Data Fetching 로직을 작성하였고 전역 상태관리자처럼 사용해 데이터를 관리했습니다.
• styled-components를 사용하여 애플리케이션의 스타일을 체계적으로 관리하여, 애플리케이션에 테마를 추가하기 쉽도록 확장 가능하게 설계했습니다.
• Cypress를 사용하여 사용자의 행동을 시뮬레이션하여 E2E 테스트를 진행했습니다.
• Jest를 사용하여 TDD(테스트 주도 개발)를 부분적으로 적용하여 각 모듈에 대한 단위 테스트를 진행했습니다.
• Storybook를 사용하여 CDD(컴포넌트 주도 개발)을 진행했습니다.
• Docker를 사용하여 애플리케이션을 컨테니어화하여 배포를 진행합니다.
• NGINX를 사용하여 웹서버를 구성했습니다.

시스템 아키텍처

실행 방법

개발환경: Node.js v16.15.1, MacOS Monterey 12.2.1

Development Mode

yarn install
yarn dev

Production Mode

yarn build
yarn start

개발자 및 프로젝트에 도움을 주신 분들

이현진 Frontend	유찬희 Frontend	김시온 Backend	남상수 멘토님 Spotify	안수찬 멘토님 BOLD	김민장 멘토님 Facebook	목민주 멘토님 Kakao Enterprise

This Project is Sponsored by Software Maestro

This work was supported by the Institute of Information & Communications Technology Planning & Evaluation(IITP) grant funded by the Ministry of Science and ICT(MSIT) (IITP-2022-SW Maestro training course).