유 동 우
디자인과 기술의 조화를 실현하는 프론트엔드 개발자 유동우 입니다.
Frontend Next React TypeScript JavaScript Git Slack
👋 Introduce
협업을 통해 최선의 결과물을 도출해 내는 것을 좋아하며 맡은 일에 후회 없도록 마무리하는 것에 뿌듯함을 느낍니다. 현재 개발 트렌드를 배우기 위해 개발 콘퍼런스에 끊임없이 참여하여 개발자로서 새로운 것을 배우는 욕심과 그에 맞게 성장하고자 하는 목표를 갖고 있습니다.
🧑💻 Career
[ 잇올 스파르타 ]
2025.02 ~
AI 기술을 접목해서 학습 관리 서비스를 진행하는 에듀 테크 기업
<aside>
📄
잇올 어드민 - 합격증 검수/통계 (진행 중) 2025.11 ~
수집한 합격증의 분류 상태 점검 및 통계 데이터 시각화 기능 FE 개발
- Recharts 라이브러리를 활용해 합격증 통계 데이터를 파이 차트, 바 차트로 시각화했습니다. 시험 종류별, 학년별, 기간별 합격 현황을 한눈에 파악할 수 있도록 대시보드를 구현했습니다.
- 복잡한 필터링 시스템(검수 상태, 시험 종류, 날짜 범위, 담당자 등)을 구현했고, URL query parameter와 동기화하여 필터 상태를 공유 가능하도록 했습니다.
- React Query의 mutation과 invalidateQueries를 활용해 검수 완료 후 자동으로 통계 데이터가 갱신되도록 구현했습니다.
React.js, TypeScript, Tailwind
</aside>
<aside>
📄
잇올 스파르타 - 합격증 등록 서비스 2025.10
본인인증 후 학생이 직접 합격증을 등록하는 모바일 웹 서비스 FE 개발
- PortOne 본인인증 API를 연동하여 학생 신원 확인 프로세스를 구현했습니다. 본인인증 완료 후 학생 정보를 자동으로 폼에 채워 사용자 경험을 개선했습니다.
- 다단계 폼 플로우(본인인증 → 합격증 정보 입력 → 이미지 업로드 → 최종 제출)를 구현했고, 각 단계별 유효성 검사와 진행 상태 표시를 통해 사용자가 현재 위치를 파악할 수 있도록 했습니다.
- React Hook Form과 Zod를 활용해 합격증 정보(시험명, 합격일자, 점수 등) 입력 폼의 validation을 구현했습니다. 실시간 에러 메시지로 사용자가 즉시 입력 오류를 수정할 수 있도록 했습니다.
- Next.js App Router를 활용해 각 단계를 별도 라우트로 분리하고, 뒤로가기 시에도 이전 입력 데이터가 유지되도록 상태 관리를 했습니다.
Next.js, TypeScript, Tailwind
</aside>
<aside>
📄
잇올 어드민 - 합격증 수집/등록 2025.09 ~ 2025.11
합격증을 수집하고 분류하는 어드민 기능 FE 개발
- React Hook Form과 Zod를 결합하여 타입 안전한 폼 validation을 구현했습니다. 합격증 등록 폼에서 필수 정보(학생명, 시험명, 합격일자 등) 검증 로직을 스키마로 관리하여 유지보수성을 높였습니다.
- React Query(Tanstack Query)를 활용해 합격증 목록 조회, 등록, 수정, 삭제 작업의 서버 상태를 관리했습니다. useMutation으로 등록/수정 후 queryClient.invalidateQueries를 통해 목록을 자동으로 갱신하여 사용자 경험을 개선했습니다.
- 복잡한 필터링 기능(학생명, 시험 종류, 날짜 범위 등)을 구현했고, Zustand로 필터 상태를 관리하여 페이지 이동 후에도 필터 조건이 유지되도록 했습니다.
- 합격증 이미지 업로드 기능을 구현했으며, 이미지 미리보기와 다중 파일 업로드를 지원했습니다. 파일 크기 및 형식 제한을 클라이언트 단에서 검증하여 불필요한 서버 요청을 줄였습니다.
- TypeScript strict mode를 활성화하고 any 타입 사용을 금지하여 타입 안정성을 확보했습니다. API 응답 타입과 Form 타입을 명확하게 정의했습니다.
React.js, TypeScript, Tailwind
</aside>
<aside>
📄
잇올 몰입형 기숙학원 홈페이지 2025.04 ~ 2025.10
- Github Action과 Vercel을 이용한 CI/CD 배포 환경 구성
- Turbo Repo
- BFF(Backend for Frontend) 아키텍처 적용
- 프론트엔드에서 사용하는 데이터를 프론트 전용 API 서버에서 가공하여 제공, API 응답 구조 단순화 및 비즈니스 로직 분리
Next.js, TypeScript, Tailwind
</aside>
<aside>
📄
6월 평가원 모의고사 2025.03 ~ 2025.04
- Github Action과 Vercel을 이용한 CI/CD 배포 환경 구성
- 신청 상태(NOT_APPLY, APPLY, CLOSED, RESULT)에 따라 버튼 및 화면 동작이 달라지는 상태 기반 UI 흐름 구현
- 잔여 좌석 확인 API 연동을 통해 신청 가능 여부를 실시간으로 판단하고, 조건에 따라 페이지 이동 또는 상태 변경 처리
- 신청 폼 페이지 진입 시 sessionStorage를 활용한 인증 처리 구현
- URL 직접 접근 및 뒤로 가기 통한 우회 접근 방지
- 지역, 센터, 과목 등 동적 드롭다운 리스트 구성 및 조건부 선택 제한 처리 (ex. 공석이 없는 센터는 비활성화)
- 중복 신청, 잔여 좌석 없음 등 예외 상황에 대한 에러 코드 처리 및 사용자 피드백 제공
- 전반적인 컴포넌트 구성에 Atomic Design 패턴 적용하여 재사용성과 유지보수성 확보
Next.js, TypeScript
</aside>
[ 유니버스 AI ]
2024.07 ~ 2025.01
얼굴 인식 기술을 기반으로 편리하고 안전한 결제 솔루션을 제공하는 기업
<aside>
📄
UNIVS Studio (유니버스 스튜디오) 2024.11 ~ 2025.01
Cloud API, SDK 통합 다운로드 가능한 서비스 FE 개발
- Next.js와 TypeScript를 사용해 개발을 진행하였고, Neomorphic 디자인을 주로 사용해 화면 디자인을 하였습니다. Material UI 라이브러리를 사용해 공통으로 사용되는 컴포넌트를 만들었고, Atomic 디자인 패턴으로 컴포넌트 관리를 하였습니다. Emotion JS 로 style을 구현하였으며, emotion style이 적용된 Material 컴포넌트에는 S를 사용해 style이 적용되어 있는 컴포넌트로 구분을 하였습니다.
ex ) <S.Accordion />
- eslint 설정에 any type을 금지하여 명확한 type을 잡았습니다.
- 로그인/회원가입 구현 시 보안을 위해 랜덤 salt key를 생성해 password + salt key 조합으로 유저가 입력한 비밀번호를 hash화 해서 db에 저장하였습니다.
- NextAuth Credentials 를 사용해 로그인을 Next 서버에서 진행 후 백엔드 api를 호출하여 cookie와 session에 token을 저장하여 사용하였고, middleware를 구축해 token이 없을 때 다른 페이지에 접속 시 sign in 페이지로 return 되게 설정하였습니다.
- Zustand로 상태 관리를 진행하였고, 검색 or 페이지네이션 이동 후 다른 페이지로 넘어간 뒤에 다시 기존 페이지로 돌아가도 검색 내역 or 기존 페이지 처리를 진행하였습니다.
- 복잡한 data가 오는 api 콜에는 react-query를 사용해서 데이터 캐싱을 하였고, 메모이제이션 훅을 사용해 불필요한 api 재호출/랜더링을 막았습니다.
Next.js, TypeScript, Next-Auth, Tanstack-Query, Zustand, Material-ui, crypto-js, dayjs
</aside>
<aside>
📄
UNIVS Guard (유니버스 가드) 2024.07 ~ 2025.01
AI CCTV 얼굴, 몸 분석/매칭하는 서비스 FE 개발
- Next.js와 TypeScript를 사용해 개발을 진행하였고, Next UI를 주로 사용하여 디자인을 진행했습니다.
- 로그인/회원가입 구현 시 보안을 위해 랜덤 salt key를 생성해 password + salt key 조합으로 유저가 입력한 비밀번호를 hash화 해서 db에 저장하였습니다.
- 기존에는 cctv에 찍힌 인물과 db에 있는 인물이 일치할 때 일정 페이지 내에서만 알 수 있었는데 주 기능이 몇몇 페이지 내에 국한된 것 같아 프로젝트 전체에서 알림을 띄우는 기능을 SSE event-source-polyfill를 이용해 개발하였습니다.
- 복잡한 data가 오는 api 콜에는 react-query를 사용해서 데이터 캐싱을 하였고, 메모이제이션 훅을 사용해 불필요한 api 재호출/랜더링을 막았습니다.
- 매칭된 리스트들을 엑셀과 pdf 로 다운 받을 수 있는 기능을 개발하였고, 카메라 등록 시 하나하나 등록해야하는 불편함이 있었기 때문에 엑셀 파일에 리스트업 후 한 번에 등록할 수 있는 기능을 개발하였습니다.
- 매칭 건수, 작동 중인 카메라 수 등 지표를 한 눈에 보기 위해 recharts 를 이용해 대시보드를 구현했습니다.
Next.js, TypeScript, Next-ui, Tanstack-Query, recoil, i18next, ol, crypto-js, dayjs, recharts
</aside>