Jisu | Fullstack Developer

PROJECT_01 ⬡ MAIN

↓

듀오잉수 (duoingsu)

기획부터 인프라 구축, 네이티브 웹 기술 제어까지 풀스택으로 완성한 메인 프로젝트

Next.js Turborepo CF Workers D1 DB Drizzle ORM Web Push API

GitHub Live Demo

🛠 핵심 구현

Turborepo 기반 Monorepo 구조 설계 — apps/web, packages/shared 분리
Cloudflare Pages + Workers + D1 + R2 무비용 고가용성 서버리스 스택 구축
logical_date 알고리즘 — 오전 6시 기준 데이터 마감 제어로 데이터 무결성 확보
VAPID 암호화 + Service Worker 기반 독립형 웹 푸시 인프라 구축
Firebase Auth 화이트리스트 2인 구조로 접근 제어

📝 Next Step

연속 기록 스트릭(Streak) 시각화 대시보드

다중 이모지 반응 컴포넌트 터치 액션 최적화

30초 폴링 → WebSocket 실시간 동기화 전환 검토

🚨 트러블슈팅 — Android VAPID Key 파싱 오류

⚠ 원인 (CAUSE)

Android 환경에서 VAPID Public Key를 Base64 문자열 그대로 전달 시 브라우저 내부 파싱 오류로 Web Push 구독 실패. iOS와 달리 Android Chromium이 Uint8Array 바이너리 배열을 엄격하게 요구.

✓ 해결 (FIX)

Base64 URL-safe 문자열 → Uint8Array 변환 유틸 함수를 직접 구현하여 applicationServerKey 인자로 주입.
urlBase64ToUint8Array(publicKey) 함수를 shared 패키지에 등록하여 재사용.

◎ 결과 (RESULT)

Android / iOS / Desktop 크로스 브라우징 Web Push 구독 정상 동작 확인. shared 유틸로 추출하여 이후 다른 플랫폼 확장 시 코드 중복 없이 재사용 가능한 구조 확보.

PROJECT_02 ◈ TEAM

↓

탔시유 (TA-CU)

대전시 공공 자전거 API와 GPS 기반 맵 라이브러리를 연동하고 브랜치 전략으로 팀 협업을 이끈 프로젝트

React Native Expo CF Workers Firebase Auth Git

GitHub

🛠 핵심 구현

Expo 내 맵 컴포넌트 스크롤 간섭 이슈 직접 해결 (제스처 핸들러 분리)
공통 상수 관리 파일(apiConstants.js) 머지 충돌 중재 및 해결 주도
커밋 컨벤션 제안 및 브랜치 전략 문서화로 팀 생산성 향상
Firebase Auth + AsyncStorage getReactNativePersistence 통합

📝 Next Step

Redis 인메모리 활용 실시간 집계 아키텍처

GPS 어뷰징 방지 — 평균 속도/거리 역산 미들웨어 도입

Tashu API 실시간 스테이션 재고 반영 고도화

🚨 트러블슈팅 — Cloudflare Tunnel SSL/TLS 프로토콜 누락

⚠ 원인 (CAUSE)

Cloudflare Tunnel 배포 환경에서 환경변수에 저장된 API 엔드포인트 주소에 https:// 프로토콜이 누락됨. TLS 인증 메커니즘이 강제 적용된 CF Tunnel의 특성상 일반 HTTP 요청을 거부하여 API 통신 전체가 침묵하며 실패.

✓ 해결 (FIX)

Network 탭과 서버 로그를 교차 분석하여 요청 자체가 브라우저 단에서 차단됨을 확인. 환경변수 URL 앞에 https:// 명시 후, Tunnel 재시작 시마다 주소 갱신이 필요한 구조적 문제를 팀 공유 문서로 기록하여 온보딩 비용 제거.

◎ 결과 (RESULT)

API 통신 정상화. 이후 팀 전원이 같은 실수를 반복하지 않도록 체크리스트 문서화 — 디버깅 경험을 팀 자산으로 전환.

PROJECT_03 ▸ LIVE

↓

세븐틴 제대 카운트다운

실제 유저가 사용 중인 서비스를 운영하며 요구사항을 발견하고 지속적으로 리팩토링하는 경험

React JavaScript CSS YouTube Embed API

GitHub Live

🛠 핵심 구현

실시간 타이머 훅 및 YouTube Embed API 미디어 연동 링크 트리 구조 설계
packages/shared/style.css 공통 스타일시트 도입 — 파편화된 스타일 리팩토링
공통 훅(useCountdown) 분리로 다른 멤버 카운트다운에 재사용 가능한 구조 확보
실제 유저 반응을 기반으로 UGC 실시간 응원방 기능 업그레이드 진행 중

📝 서비스 운영 인사이트

배포 후 유저 요청으로 멤버별 개별 카운트다운 기능 추가

링크 클릭률 분석으로 UI 배치 우선순위 재조정

실시간 응원방(UGC) — Web Push 연동 기능 개발 중

PROJECT_04 ◐ WIP

↓

엄마의 월급 계산기

주변의 실제 문제를 해결하기 위해 도메인 분석과 수식 모듈화 아키텍처를 설계하는 과정

React Native Expo Figma

GitHub

🛠 기획 및 설계 역량

시중 계산기의 한계 분석 — 교대 근무 / 변동 주휴수당을 반영하지 못하는 구조적 문제 도출
커스텀 근무 세팅 UI 레이아웃 Figma 설계 완료
급여 계산 수식을 컴포넌트와 분리한 독립 급여 계산 모듈 엔진 아키텍처 설계

📝 Next Step

수식 연산 모듈 단위 테스트 작성

교대 패턴 프리셋(2조 2교대, 3조 3교대) 저장 기능

Expo EAS Build 앱 스토어 배포

PROJECT_05 ▸ DEPLOYED

↓

Poke상성 도감

복잡한 외부 오픈 데이터를 재가공하고 다중 상성 알고리즘과 Mock API 구조를 직접 설계하며 기본기를 다진 프로젝트

HTML5 CSS3 JavaScript PokeAPI CF Pages

GitHub Live

🛠 핵심 구현

개발 착수 전 상세 워크플로우(흐름도) 선제 설계 — 예외 처리 분기 미리 확보
이중 속성 조합 상성 배수 연산 알고리즘 직접 구현
외부 API 미제공 데이터를 위한 정형화된 Mock API JSON 스키마 설계 및 바인딩
Cloudflare Pages 정적 배포로 무비용 CDN 서빙

📝 Next Step

static JSON → Cloudflare Workers + D1 DB 마이그레이션

커스텀 포켓몬 CRUD 생성 기능으로 고도화

Serverless 환경의 완전한 REST API 구조로 전환

비즈니스 의도를
견고한 아키텍처로
증명하는 개발자

페인 포인트를
코드로 해결합니다

카드를 클릭해
상세 구현 내용을 확인하세요

듀오잉수 (duoingsu)

탔시유 (TA-CU)

세븐틴 제대 카운트다운

엄마의 월급 계산기

Poke상성 도감

함께 만들어볼 준비가 되어 있습니다.

비즈니스 의도를 견고한 아키텍처로 증명하는 개발자

페인 포인트를코드로 해결합니다

카드를 클릭해상세 구현 내용을 확인하세요

듀오잉수 (duoingsu)

탔시유 (TA-CU)

세븐틴 제대 카운트다운

엄마의 월급 계산기

Poke상성 도감

함께 만들어볼 준비가 되어 있습니다.

비즈니스 의도를
견고한 아키텍처로
증명하는 개발자

페인 포인트를
코드로 해결합니다

카드를 클릭해
상세 구현 내용을 확인하세요