Skip to content

boostcampwm2023/iOS08-WeTri

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WeTri

우리가 함께 만드는, 트라이애슬론 🏃🏻 | 🏊‍♂️ | 🚴

개발기간: 2023.11.06 ~ 2023.12.15

🎙️ 소개

트라이애슬론 커뮤니티와 수영, 달리기, 사이클링에 대한 기록을 할 수 있습니다.

또한 실시간 랜덤매칭으로 서로 경쟁하며 운동할 수 있는앱 입니다.

iOS iOS iOS BE BE
안종표 정다함 홍승현 신정용 임원호
S020_안종표 S035_정다함 S043_홍승현 J078_신정용 J130_임원호

🔥 프로젝트 주요 화면

로그인화면 기록확인화면 지도화면
RPReplay_Final1702430990 RPReplay_Final1702430990 Simulator Screen Recording - iPhone 15 Pro - 2023-12-13 at 10 40 08
타이머화면 기록화면
Screen Recording 2023-12-13 at 9 12 51 AM Screen Recording 2023-12-13 at 9 12 51 AM
운동선택 및 매칭 화면 -
Screen Recording 2023-12-13 at 9 12 51 AM -

🏗️ 아키텍처

🍎 iOS

ModularArchitecture

image

  • Feature 단위로 모듈을 나눠서 개발하였습니다.
    • 각 Demo앱을 만들어서 앱을 동작함으로써 기능별로 앱을 수정하거나 실행할 때, 프로젝트 빌드 시간을 80% 줄임으로써 일의 효율을 높였습니다.

Clean Architecture & MVVM-C

image

  • 각 Feature 내부에서 CleanArchitecture를 통해 Data, Domain, Presentation으로 레이어를 분리하였습니다.
  • DataLayer
    • DTO와 Repository를 통해 비즈니스 로직이 서버와의 독립성을 갖도록 하였습니다.
  • PresentationLayer
    • Coordinator를 통해 AppCoordinator가 Feature간의 이동을 담당하도록 하여서 화면간의 전환이 용이하도록 하였습니다.
    • MVVM을 통해 ViewModel이 ViewController의 input에 관련된 비즈니스 로직을 처리하고 output을 통해 처리결과를 전송했습니다.
  • DomainLayer
    • Entity를 정의하였습니다.
    • UseCase를 통해 비즈니스로직을 처리하였습니다.
    • Repository와의 DIP를 통해 서로의 구현체에 관해 느슨한 구조를 유지할 수 있도록 하였습니다.

💻 BE

BE 아키텍처

image

  • NestJs의 life cycle을 의미하기도 합니다.
  • Module에는 Controller, Service, Repository등이 포함되어 있고 저희는 이러한 Module 단위로 작업을 진행했습니다.
  • Exception Filter는 Global로 둠으로써 모든 예외는 한 곳에서 처리되도록 구현했습니다.
  • 예외가 발생하지 않으면 Global Interceptor에 들어오게 됩니다.역할은 iOS와 맞춰둔 데이터 형식으로 Format 합니다.

BE 배포 구조

image

BE 인프라 아키텍처

image

💪 기술 스택

분류 기술 스택
공통 WebSocket
iOS Xcode Swift Tuist
BE NodeJS NestJS TypeScript Redis MySQL TypeORM Nginx
배포도구 Naver Cloud Platform PM2 Docker Docker Swarm
협업도구 github Slack Figma Gather

💪 We-Challenges

WeTri를 프로젝트를 진행하면서, 우리가 마주한 문제를 어떻게 해결했는지, 기록해보았어요!

S020_안종표 - 겨우 이미지 하나에 처리할게 산더미..?

메모리 스파이크 처리 전 메모리 스파이크 처리 후

이미지 데이터를 서버에 보낼 때, JSON이 아닌 Multipart/form-data 형식을 통해 데이터를 보내는 과정에서 일어났던 문제점과 사용자로부터 이미지를 입력받으면서 발생한 메모리관련 이슈와 최적화 과정을 공유해드리고 싶습니다.

이 모든 과정을 더 깊이 있게 탐구하고 싶으시다면, 아래 링크를 방문해 주세요. 저와 팀원간 여정을 담은 기술 문서와 함께, 이 기능을 실제로 구현하기까지의 스토리를 공유하고 있습니다.


S035_정다함 - Details in the Devil, GPS 칼만필터로 뽀개기

image

아이폰에서 제공하는 CoreLocation데이터를 통해서 위치정보의 값들과 칼만필터를 통해서 노이즈를 줄이는 방법을 고안하였습니다.칼만필터가 뭘까? 백지 상태에서부터 끝날때는 자이로 센서를 활용한 위치 보정방식을 고안하여 리팩토링 하고싶다는 생각까지 여정을 공유하고 싶습니다.

이 모든 과정을 더 깊이 있게 탐구하고 싶으시다면, 아래 링크를 방문해 주세요. 저와 팀원간 여정을 담은 기술 문서와 함께, 이 기능을 실제로 구현하기까지의 스토리를 공유하고 있습니다.


S043_홍승현 - 헬스킷, 소켓, 맵킷, 렛츠고

image

HealthKit의 건강 데이터, WebSocket의 실시간 통신, MapKit의 지도 기반 화면까지. 이 세 가지의 기술이 어떻게 하나의 화면에서 조화롭게 작동할 수 있도록 했을까요? 저는 이 세 가지를 결합하여 사용자들이 운동 거리를 실시간으로 확인할 수 있도록 UI를 구성했고, 동시에 사용자들이 운동하며 지나온 거리를 지도를 통해 확인할 수 있도록 구현했습니다. 이 과정에서 제가 마주한 도전과 성공, 그리고 때로는 실패한 순간들을 공유하고 싶습니다.

이 모든 과정을 더 깊이 있게 탐구하고 싶으시다면, 아래 링크를 방문해 주세요. 저와 팀원간 여정을 담은 기술 문서와 함께, 이 기능을 실제로 구현하기까지의 스토리를 공유하고 있습니다.


J078_신정용 - 분산 환경에서 WebSocket과 Redis를 활용한 나의 여정

image

WebSocket Server는 분산 환경에서 독릭접인 존재입니다. 이 여러 WebSocket Server 간의 어떻게 메시지를 교환하고, 사용자 세션 및 상태 정보를 동기화 시킬 수 있었을까요? 저는 Redis와 Redis pub/sub을 이용해서 구현해줬습니다.

이 모든 과정을 더 깊이 있게 탐구하고 싶으시다면, 아래 링크를 방문해 주세요. 저와 팀원간 여정을 담은 기술 문서와 함께, 이 기능을 실제로 구현하기까지의 스토리를 공유하고 있습니다.


J130_임원호 - 클라우드 VPC 환경 구축도 CI/CD도 처음이었던, WeTri 인프라 구축

image

WeTri 프로젝트를 진행하면서, 클라우드 인프라, 배포에 대해 걱정하지 않도록 책임 을 지고 학습하고 구축해보았습니다. Classic 환경에서 VPC 환경으로, 수동 배포에서 자동 배포를 구현하면서 발생했던 문제를 어떻게 해결했는지 글 로 담았습니다.

이 모든 과정을 더 깊이 있게 탐구하고 싶으시다면, 아래 링크를 방문해 주세요. 저와 팀원간 여정을 담은 기술 문서와 함께, 이 기능을 실제로 구현하기까지의 스토리를 공유하고 있습니다.


🤔 Branch Strategy

image.png

  • WeTri 팀은 Git Flow를 간소화해서 사용해요

🤝 Merge Strategy

  • squash merge를 사용합니다.
  • approve한 사람이 최소 2명 이상이어야 merge 가능합니다.