Architecture

Frontend

사용 기술

• 언어: javascript
• 라이브러리
  • react-native: javascript 언어로 동적인 어플리케이션을 만들고자 하고 컴포넌트 단위의 코드 작성 방식을 통해서 생산성과 유지 보수를 용이하게 하기 위해서 선정하였습니다.
  • styled-components : CSS 라이브러리로 Component 형태로 스타일을 정의 할 수 있도록 도와주고, props을 이용한 스타일링이 가능하여 편리하게 style을 적용 할 수 있게 해주므로 선정하였습니다.
  • react-navigation: react-native에서 화면 전환 기능을 사용하기 위해서 선정하였습니다. 저희 앱에서는 스택과 탭 네비게이션 둘 다 활용합니다.
  • react-modal: 커스텀 디자인의 modal창을 구현하기 위해 Modal 객체를 제공하는 라이브러리를 이용하였습니다.
  • Prettier: 작성한 코드를 정해둔 코드 스타일에 맞춰서 자동으로 변환해주므로, 협업에 있어서 코드 스타일을 통일 시켜주기 위해 선정하였습니다.
• 디자인 툴: figma
  • UI 디자인 도구로, 실시간 협업에 용이하므로 선정하였습니다

Backend

사용 기술

• 언어: python

• 프레임워크 : django

• 라이브러리

  • Celery: 별도로 실행중인 worker process가 message를 전달 받아 작업을 대신 수행해주는 라이브러리 입니다 비동기로 작업을 실행하기 위해서 선정하였습니다.
  • redis: 디스크에 상주하는 인메모리 데이터베이스 입니다, 지속성이 중요하지 않고 짧은 메시지에 적합하기 때문에 다른 라이브러리인 RabbitMQ보다 저희 프로젝트에 적합한 거 같아 선정하였습니다

• DB

  • SQLIte: python에서 기본적으로 제공하는 DB입니다. 하나에 파일에 데이터를 저장하여 쉽고 간편하게 사용 할 수 있어 선택하였습니다

• 인프라

  • swagger: REST API를 설계, 빌드, 문서화 및 사용하는데 도움이 되는 OpenAPI 사양을 중심으로 구축 된 오픈 소스 도구 세트입니다. ~~ 뒤에 설명
  • postman: API를 테스트하기 위해 선정하였습니다
  • git, github: 버전관리, 소스코드 공유 등 협업에 필수요소 이기에 선정하였습니다
  • nginx: 웹 서버로써, 사용자의 요청을 받아들이거나, 결과 값을 반환해주는 역할을 한다. 주로 정적인 정보를 반환하고 Event-driven 방식을 채택하였기에 동시요청시 메모리 사용량이 적고 초당 처리속도가 빠르기 때문에 선정하였습니다.
  • gunicon: 다른언어 사용자들의 다양한 요청을 이해할 수 있도록 공통된 규칙으로 변환하는 관문 역할을 하는 미들웨어이다. 리퀘스트의 경로를 지정하거나 같은 프로세스에서 여러 애플리케이션과 프레임워크를 실행되게 하는 역할을 함으로써 django의 runserver가 불안하기에 안정적으로 서버를 운용할 수 있도록 하기 위해 사용하였습니다.