포트폴리오
아이디어에서 출시까지, 직접 설계하고 개발한 모바일 앱입니다.
헬스로그
2025년 12월 출시운동 기록을 쉽고 간편하게 관리할 수 있는 피트니스 앱.
직관적인 UI/UX로 누구나 쉽게 사용할 수 있으며,
운동 루틴을 체계적으로 관리할 수 있습니다.
출시 4개월 만에 다운로드수 200+ 돌파
기술 스택 & 아키텍처
주요 기술 스택
FRAMEWORK
Expo (React Native)
BACKEND
Firebase (Auth, Firestore, Cloud Functions, Analytics)
STYLING
Styled Component
STATE MANAGEMENT
Context API
프론트엔드 아키텍쳐
아토믹 패턴 도입
거대 화면 파일 리팩토링(1000줄에 육박하는 운동 추가/수정 화면), UI 속에서 반복되는 운동 카드 / 운동 세트 입력 UI가 있었기 때문에 아토믹을 도입함.
폴더로 UI 컴포넌트를 쪼갬
커스텀 훅 패턴 도입
화면(UI)과 비즈니스로직 분리
useWorkoutLogsuseWorkoutForm카카오 로그인 우회
상세 설명
클라이언트에서 @react-native-seoul/kakao-login으로 카카오 액세스 토큰을 받은 뒤, kakaoLogin Cloud Function (region asia-northeast3)으로 전송 → 함수가 카카오 API로 토큰을 검증하고 Firebase 커스텀 토큰을 반환 → 클라이언트가 이 커스텀 토큰으로 Firebase에 로그인.
FLOW
STEP 1
카카오 SDK
STEP 2
Firebase 서버
(Cloud Function)
토큰 검증
STEP 3
Firebase 인증
Token 생성
STEP 4
Firebase
로그인 성공
우회 이유
카카오 로그인은 Firebase에서 직접 지원하지 않아 우회. (구글/애플 로그인은 Firebase Auth 사용)
서버에서 검증하는 이유
- (1)클라이언트 보안상 문제 (토큰 탈취 시 그 사용자의 운동/식단 로그를 모두 CRUD 가능)
- (2)Firebase 로그인 성공시키려면 토큰이 필요한데 Firebase가 허용하는 커스텀토큰(JWT)는 Firebase SDK에만 있음
네이티브 모듈을 위해 Expo Dev Client 모드 사용
미리 정해진 모듈만 있는 범용 프로젝트
내가 추가한 네이티브 모듈을 자유롭게 사용 가능한 커스텀 프로젝트
도입 이유 — 네이티브 모듈의 필요성
react-native-google-mobile-ads구글 애드몹 광고
react-native-iap결제
@react-native-seoul/kakao-login카카오 로그인
등 네이티브 모듈이 포함되어 커스텀 dev 빌드가 필요.
데이로그
2025년 12월 출시일상을 기록하고 추억을 남길 수 있는 다이어리 앱입니다.
간단하고 직관적인 인터페이스로 하루하루를 소중하게 기록하며,
나만의 이야기를 아름답게 담아낼 수 있습니다.
중국 앱 커뮤니티 Mergeek에 홍보기사로 소개
기술 스택 & 아키텍처
주요 기술 스택
FRAMEWORK
Expo (React Native)
STYLING
styled-components
NAVIGATION
Expo Router
DATABASE
expo-sqlite (SQLite)
LIBRARY
Google Drive API (백업)
아키텍쳐
Container / Presenter 패턴
CONTAINER
로직 및 조합 담당
PRESENTER
UI 및 Props 전달 담당
Custom Hook
복잡한 로직과 상태 관리 분리
Service Layer
비즈니스 로직 및 데이터 변환을 담당하는 순수 함수
스타일링
styled-components 사용하여 테마 기반 스타일링을 정의함.