미리보기

개발 배경

대학 축제 및 공연에서는 연예인을 보기 위해 실제 공연이 시작하기 N시간 전 부터 줄을 섭니다.

Uket은 사전 티켓팅 및 QR 코드를 통해 비효율적인 대기 시간을 줄여, 보다 지루하지 않고 즐겁고 편한 축제 경험을 제공하고자 합니다.

관련 링크

Github • Web

기술 스택

React Vite NextJS TypeScript TanstackQuery Monorepo TailwindCSS react-hook-form zod

담당 태스크

FE 팀장 담당

• 프로젝트 기간 • 팀원의 개발 경험 • 서비스 특성 및 요구사항을 고려하여 기술 스택 선정

• 커뮤니케이션 비용 및 Human Error 최소화

  • 코드 컨벤션 정의 • precommit hook 도입

  • 코드와 커밋 메세지의 일관성과 명확성을 부여하기 위해 husky, commitlint를 도입

관련 링크

• 기술 스택 선정

• 코드 컨벤션 정의

모노레포, 사용자 서비스와 백 오피스 서비스의 분리

문제 상황

새로운 백오피스 서비스 도입에 따른 아키텍처 설계 시 다음과 같은 고려사항이 있었습니다.

• 기존 구조(모놀리스)의 한계점

  • 일반 사용자의 백오피스 URL 접근 가능으로 인한 모놀리스 구조의 보안 취약성

  • 멀티레포 전환 시 예상 문제점: 공통 라이브러리/설정 중복 관리 • 복잡한 코드 리뷰 프로세스 • 공통 컴포넌트 동기화 이슈

• 핵심 요구사항

  • 프론트엔드와 백오피스 간 컴포넌트 공유 필요

  • 백 오피스 서비스의 보안성 확보 • 효율적인 코드 관리

해결 방법

✔ 모놀리스와 멀티레포의 장점을 가져갈 수 있는 모노레포 기반의 아키텍처를 설계

• UI 컴포넌트 • ESLint 설정 • TypeScript 설정을 독립적인 패키지로 분리 및 의존성으로 참조

• 백 오피스와 사용자 서비스를 2개의 워크스페이스로 분리

• 서브도메인 기반 백 오피스 접근 제어로 보안성 확보 • 일반 유저의 접근 가능성 감소

성과

• 공통으로 사용되는 컴포넌트 및 환경 설정 관리 효율성을 개선 하면서도 서비스 간 독립성 유지

회원가입 이탈률을 줄이기 위한 고민

문제 상황

회원가입 플로우 설계 시 다음과 같은 기술적/사용자 경험적 문제를 파악했습니다.

• 기술적 도전 과제

  • 회원가입은 총 8단계 및 최대 8개의 입력 필드를 관리

  • 페이지 기반 구현 시 문제점: 복잡한 전역 상태 관리 • 페이지 전환 간 데이터 영속성 확보 • 순차적 진행을 위한 추가 로직 필요

• UX 고려 사항

  • 단일 페이지 방식의 문제점: 다량의 정보 입력으로 인한 사용자 피로도 • 입력 정보 확인의 어려움 • 높은 사용자 이탈률 발생 위험

해결 방법

✔ Activity 기반의 컴포넌트 구조로 회원가입 플로우 개선

• 단일 페이지 내 여러 Activity 컴포넌트 조합

• <NextStepButton> 컴포넌트를 통한 플로우 제어 • 다음 Activity를 props로 전달하여 플로우 강제 • 순서 검사 로직 단순화

✔ Compound 패턴 적용으로 일관된 레이아웃 구현 • 컴포넌트 재사용성 및 유지보수성 향상

✔ react-hook-form 및 zod를 도입하여 폼 상태 관리 및 유효성 검사

성과

• 사용자 관점에서의 플로우 구성

• 상태를 한곳에 모아 상태 관리를 간소화

• 각 단계에서 입력한 데이터가 초기화되지 않도록 개선

• 코드의 응집도 향상 및 UX 개선

트러블슈팅 및 관련 링크

• 사용자 이탈률 증가 사례

단일 책임 원칙에 의거한 선언적 비동기 데이터 및 에러 처리

문제 상황

명령형으로 처리된 비동기 API 작업의 로딩/에러 처리가 다음과 같은 문제를 야기했습니다.

• 어플리케이션 규모가 커질수록 컴포넌트마다 중복되는 로딩/에러 처리 로직으로 유지보수성 어려움

• 컴포넌트 내부의 상태 관리 로직이 비즈니스 로직과 혼재되어 컴포넌트의 책임이 모호

해결 방법

✔ 단일 책임 원칙을 의거한 선언적 비동기 처리

• useSuspenseQuery와 Suspense를 활용하여 비동기 데이터의 존재를 항시 보장

• 컴포넌트에서 로딩 상태 관리 로직 제거

✔ 에러 처리 중앙화

• ErrorBoundary를 활용한 선언적 에러 처리로 조건부 렌더링 제거

• HTTP 상태 코드별 차별화된 에러 처리 구현

  • 500 에러: 상위 Error Boundary로 전파하여 전체 화면 에러 UI 표시

  • 기타 에러: 재시도 기능이 포함된 컴포넌트 단위 에러 UI 표시

✔ 일관된 에러 UI 구현

• Compound 패턴 적용으로 Error Fallback 컴포넌트의 레이아웃 일관성 확보

• 페이지와 기능별 세분화된 Error Fallback 구현으로 상황에 맞는 에러 처리

성과

• 코드 품질 및 유지보수 개선

  • 컴포넌트의 단일 책임 원칙(SRP) 준수

  • 비즈니스 로직(What)과 상태 관리 로직의 명확한 분리

  • 중앙화된 에러 처리로 코드 중복 제거

• 사용자 경험 개선

  • 상황별 최적화된 에러 화면 제공

  • 재시도 기능으로 자연스러운 에러 복구 흐름 제공

• 개발자 경험 개선

  • 선언적 코드로 인한 가독성 향상

  • 비즈니스 로직(What) 작성에 집중

  • 일관된 에러 처리 패턴으로 유지보수성 향상

트러블슈팅 및 관련 링크

• 선언형 컴포넌트 적용 및 고찰

사용자 관점에서 기능 개발 및 개선

문제 상황

인증 유무는 accessToken과 refreshToken으로 관리하며, 이에 따라 접근 가능한 페이지가 구분되고 있었습니다.

• 토큰 기반 인증의 한계

  • accessToken 만료 시, 사용자의 수동 재로그인 과정으로 인한 사용자 경험 저하

  • 회원가입을 완료한 사용자도 회원가입 페이지 접근 가능하여 중복 회원가입 등 비정상적인 플로우 발생

• 불완전한 사용자 경험

  • 인증이 필요한 페이지에서 URL 직접 접근과 같은 사용자 패턴 방지 필요성

  • 인증 필요 페이지 접근 시 갑작스러운 로그인 페이지 전환이 불친절한 사용자 경험 제공

  • 비동기 데이터 로딩 지연 시, 빈 화면으로 인한 서비스 중단으로 오인되는 혼동된 경험 발생 (Network의 Fast 3G 테스트로 확인)

해결 방법

✔ 토큰 관리 고도화

• axios의 interceptor를 활용해 만료된 accessToken을 자동으로 감지 및 갱신하여 사용자의 수동 재로그인 과정 제거

• 인증 플로우를 분석하여, useNavigate의 state 옵션을 활용하여 중복 회원가입 방지

✔ 사용자 경험 개선

• 인증 필요 페이지 접근 시, 로그인 유도 모달을 표시하여 갑작스러운 페이지 전환 대신 로그인 필요성을 명확히 안내

• 비동기 데이터 로딩 과정에서 Suspense Fallback 을 활용해 지연으로 인한 서비스 중단 경험을 최소화

✔ 보안 강화

• 최상위 레이아웃에서 토큰 존재 유무 확인 및 URL 정규식 패턴 검사를 통한 인증 필요 페이지 직접 접근 제한

성과

• 사용자 관점 개발

  • 자동 토큰 갱신으로 번거로운 수동 재 로그인 과정 제거

  • 명확한 인증 필요 안내로 사용자 혼란 최소화

  • Fallback을 활용하여 서비스 중단 경험 최소화

• 강화된 보안성

  • 인증 필요 페이지의 URL 직접 접근 제한

  • 중복 회원가입 방지로 데이터 무결성 확보

트러블슈팅 및 관련 링크

• 중복 회원가입 사용자 패턴 방지

• 이미지 최적화 및 최적화에 따른 외부 이미지 예외 처리

그 외

• 사용자 관점에서 기획 및 디자인에 적극 참여

• 어드민 서비스 QR 리더 기능 개발

• 카카오 지도 API 연동

• 프론트엔드의 근간인 자바스크립트에 대해 학습

• 바닐라 자바스크립트로 SPA 개발

• 멘토 및 동료와의 코드 리뷰를 통해 코드 최적화에 대한 고민

• 백엔드 협업을 포함하여 2번의 팀 프로젝트를 경험

• 총 12팀(81명) 백엔드 협업 최종 프로젝트 개발 우수상 수상(시연 영상)

• 스크래치 / 파이썬 초, 중급 강의 진행

• 해양 경찰청 협업 연구 과제 수행

• 파이썬, Flask를 사용하여 라즈베리파이 웹 서버 구축 및 SQLite DB 생체 신호 데이터 저장