유 동 우

디자인과 기술의 조화를 실현하는 프론트엔드 개발자 유동우 입니다.

Frontend Next React TypeScript JavaScript Git Slack

👋 Introduce

협업을 통해 최선의 결과물을 도출해 내는 것을 좋아하며 맡은 일에 후회 없도록 마무리하는 것에 뿌듯함을 느낍니다. 현재 개발 트렌드를 배우기 위해 개발 콘퍼런스에 끊임없이 참여하여 개발자로서 새로운 것을 배우는 욕심과 그에 맞게 성장하고자 하는 목표를 갖고 있습니다.

🧑‍💻 Career

[ 잇올 ]

2025.02 ~

AI 기술을 접목해서 학습 관리 서비스를 진행하는 에듀 테크 기업

<aside> 📄

모두밀 식단표 대시보드 (진행 중) 2026.02 ~

업체별 식단 운영 현황 주 단위 모니터링 및 내부 보고용 대시보드 FE 개발

[핵심 구현]

• 15개 업체 × 7일 × 끼니별(조식/중식/석식) 매트릭스 구조의 주간 식단 그리드 대시보드 구현, 업체·지역·끼니·식단 구분 등 다층 필터링 지원
• 주간 식단표(OCR)와 일일 등록 식단 간 텍스트 비교 시스템 구현, 누락·추가·변경 메뉴를 시각적으로 강조하고 일치/불일치/미등록/미제공 등 5단계 상태 뱃지로 표시
• Recharts 기반 업체별 일치율 가로 막대 차트 및 주간 통계 요약 카드 구현, 필터 연동 동적 갱신
• Context API를 활용해 하위 라우트 간 필터·주차 상태 공유, 일자별 메모 CRUD(운영 이슈·변경 사유·보고 메모 카테고리 분류) 기능 구현

[문제 해결 경험]

• 기존 운영팀이 매주 수동으로 스프레드시트에서 식단표와 등록 데이터를 대조하던 업무를 대시보드로 자동화하여 수작업 대조 시간을 대폭 단축하고, 불일치 항목 시각적 강조로 모니터링 누락률 감소
• 식단 변경 사유가 구두·메신저 등에 분산 기록되어 내부 보고 시 추적이 어려웠던 문제를 해결하기 위해, 일자별 카테고리 기반 메모 시스템을 도입하여 변경 이력 보고 체계를 일원화

Next.js (App Router), TypeScript, Tailwind CSS, Recharts, Context API

</aside>

<aside> 📄

잇올 어드민 - 합격증 검수/통계 2025.11 ~ 2026.01

수집한 합격증의 분류 상태 점검 및 통계 데이터 시각화 기능 FE 개발

[핵심 구현]

• React Query 커스텀 훅(useQuery/useMutation) 기반 서버 상태 관리 아키텍처 설계, 컴포넌트의 UI 렌더링과 데이터 관리 책임을 분리
• 검수 상태(PENDING_CONFIRMATION, DUPLICATED 등)에 따라 입력창 비활성화, 버튼 라벨·색상 동적 전환 등 상태 기반 UI 제어로 사용자 오조작 방지
• 좌측 목록 패널 ↔ 우측 상세 패널 간 단방향 데이터 흐름 설계, useState + Props 기반으로 컴포넌트 간 의존성 최소화
• 목록 로드 시 첫 항목 자동 선택, 필터 변경 시 유효 항목 재선택, 선택 항목 자동 스크롤(scrollIntoView) 등 워크플로우 자동화로 검수 작업 효율 개선

[문제 해결 경험]

• 메모 저장·검수 확정 후 목록과 상세 화면 간 데이터 불일치가 발생하는 문제를 발견하고, 뮤테이션 onSuccess 콜백에서 연관 쿼리(목록·상세)를 refetch하는 방식으로 데이터 정합성 확보
• 상태 필터 변경 시 현재 선택된 항목이 필터링되어 사라지면서 상세 패널이 빈 상태로 남는 문제 → 필터 변경 감지 시 유효한 첫 항목으로 자동 재선택하는 로직을 추가하여 작업 중단 방지
• 검수 중 화면 이탈 시 미저장 메모가 소실되는 문제를 방지하기 위해 이탈 감지 + 확인 팝업 플로우 구현

React.js, TypeScript, Tailwind

</aside>

<aside> 📄

잇올 스파르타 - 합격증 등록 서비스 2025.10

본인인증 후 학생이 직접 합격증을 등록하는 모바일 웹 서비스 FE 개발

[핵심 구현]

• PortOne 본인인증 API 연동을 통한 학생 신원 확인 프로세스 구현, 인증 완료 후 학생 정보 자동 폼 바인딩으로 입력 편의성 개선
• 다단계 폼 플로우(본인인증 → 정보 입력 → 이미지 업로드 → 최종 제출) 설계, 각 단계별 유효성 검사 및 진행 상태 인디케이터 구현
• Next.js App Router 기반으로 각 단계를 별도 라우트로 분리하고, 뒤로가기 시에도 이전 입력 데이터가 유지되는 상태 관리 구현
• React Hook Form + Zod 기반 실시간 폼 검증 및 즉시 에러 피드백 제공

[문제 해결 경험]

• 다단계 폼에서 각 단계를 별도 라우트로 분리하면서 브라우저 뒤로가기 시 이전 입력 데이터가 소실되는 문제 발생 → 단계 간 상태를 상위에서 관리하여 라우트 전환에도 입력값이 유지되도록 해결
• PortOne 본인인증 완료 콜백 처리 시 인증 실패·중도 이탈 등 예외 케이스에 대한 분기 처리가 누락되어 있던 문제를 발견하고, 인증 상태별 에러 핸들링 및 재시도 안내 플로우를 추가

Next.js, TypeScript, Tailwind

</aside>

<aside> 📄

잇올 어드민 - 합격증 수집/등록 2025.09 ~ 2025.11

합격증을 수집하고 분류하는 어드민 기능 FE 개발

[핵심 구현]

• React Hook Form + Zod 기반의 타입 안전한 폼 검증 체계 구축, 합격증 등록에 필요한 필수 정보(학생명, 시험명, 합격일자 등) 검증 로직을 스키마 단위로 관리
• React Query의 useMutation + invalidateQueries 패턴을 활용해 합격증 CRUD 서버 상태 관리 및 목록 자동 갱신 구현
• 학생명·시험 종류·날짜 범위 등 복합 필터링 기능 구현, Zustand로 필터 상태를 관리하여 페이지 이동 후에도 필터 조건 유지
• 이미지 미리보기 및 다중 파일 업로드 지원, 클라이언트 단에서 파일 크기·형식 사전 검증으로 불필요한 서버 요청 절감

[문제 해결 경험]

• API 응답 타입과 폼 입력 타입 간 불일치로 인한 런타임 에러 가능성을 줄이기 위해 TypeScript strict mode 활성화 및 any 타입 사용을 금지하고, API 응답 타입과 Form 타입을 명확히 분리·정의하여 타입 안정성 확보

React.js, TypeScript, Tailwind

</aside>

<aside> 📄

6월 평가원 모의고사 2025.03 ~ 2025.04

[핵심 구현]

• 신청 상태(NOT_APPLY → APPLY → CLOSED → RESULT)에 따라 버튼·화면 동작이 분기되는 상태 기반 UI 흐름 설계 및 구현
• 지역 → 센터 → 과목 순서의 동적 드롭다운 구성, 잔여 좌석 API 연동을 통해 공석 없는 센터 비활성화 등 조건부 선택 제한 처리
• Atomic Design 패턴을 적용한 컴포넌트 구조 설계로 재사용성 및 유지보수성 확보
• GitHub Actions + Vercel 기반 CI/CD 파이프라인 구성

[문제 해결 경험]

• 신청 폼 페이지에 URL 직접 접근·뒤로 가기를 통한 우회 접근이 가능한 문제를 발견하여, sessionStorage 기반 인증 토큰 검증 로직을 페이지 진입 시점에 추가해 비인가 접근 차단
• 중복 신청, 잔여 좌석 초과 등 예외 상황에서 사용자에게 피드백이 없던 문제를 해결하기 위해 서버 에러 코드별 분기 처리 및 사용자 안내 메시지 체계를 구축

Next.js, TypeScript

</aside>

[ 유니버스 AI ]

2024.07 ~ 2025.01

얼굴 인식 기술을 기반으로 편리하고 안전한 결제 솔루션을 제공하는 기업

<aside> 📄

UNIVS Studio (유니버스 스튜디오) 2024.11 ~ 2025.01

Cloud API, SDK 통합 다운로드 가능한 서비스 FE 개발

[핵심 구현]

• NextAuth Credentials 기반 인증 시스템 구축, Next.js 서버에서 로그인 처리 후 cookie/session에 토큰 저장, middleware를 통해 미인증 사용자의 페이지 접근 시 로그인 페이지로 리다이렉트 처리
• 회원가입 시 랜덤 salt key 생성 + crypto-js를 활용한 비밀번호 해시화 처리로 보안 강화
• MUI + Emotion JS 조합의 Neomorphic 디자인 시스템 구축, Atomic Design 패턴으로 공통 컴포넌트 관리 및 스타일 적용 컴포넌트 네이밍 컨벤션(S.컴포넌트명) 도입으로 일반/스타일드 컴포넌트 구분
• React Query 기반 데이터 캐싱 및 메모이제이션 훅을 활용한 불필요한 API 재호출·리렌더링 최적화

[문제 해결 경험]

• 검색 결과 페이지나 페이지네이션 상태에서 다른 페이지로 이동 후 돌아왔을 때 검색 내역과 페이지 위치가 초기화되는 문제 → Zustand로 필터·페이지네이션 상태를 전역 관리하여 페이지 이탈 후에도 기존 상태 유지
• ESLint에 any 타입 사용 금지 규칙을 적용하여 프로젝트 전반의 타입 안정성 확보, API 응답부터 컴포넌트 Props까지 명확한 타입 정의를 강제

Next.js, TypeScript, Next-Auth, Tanstack-Query, Zustand, Material-ui, crypto-js, dayjs

</aside>

<aside> 📄

UNIVS Guard (유니버스 가드) 2024.07 ~ 2025.01

AI CCTV 얼굴, 몸 분석/매칭하는 서비스 FE 개발

[핵심 구현]

• SSE(event-source-polyfill) 기반 실시간 알림 시스템 구현, CCTV 인물 매칭 발생 시 특정 페이지가 아닌 서비스 전역에서 알림을 수신할 수 있도록 개선
• 매칭 결과 엑셀·PDF 다운로드 기능 및 카메라 엑셀 일괄 등록 기능 개발로 운영 편의성 향상
• Recharts 기반 대시보드 구현, 매칭 건수·작동 중인 카메라 수 등 주요 지표를 시각적으로 모니터링
• React Query 기반 데이터 캐싱 및 메모이제이션 훅 활용으로 불필요한 API 재호출·리렌더링 최적화

[문제 해결 경험]

• CCTV 인물 매칭 알림이 특정 페이지 내에서만 확인 가능하여 다른 페이지 작업 중 매칭 발생을 놓치는 문제 발견 → SSE(event-source-polyfill)를 활용해 앱 전역 실시간 알림 시스템을 구축하여 어떤 페이지에서든 즉시 매칭 알림 수신 가능하도록 개선
• 카메라를 하나씩 수동 등록해야 하는 운영상 비효율 문제를 해결하기 위해 엑셀 파일 기반 일괄 등록 기능을 개발, 대량 카메라 등록 시 작업 시간 단축

Next.js, TypeScript, Next-ui, Tanstack-Query, recoil, i18next, ol, crypto-js, dayjs, recharts

</aside>