유 동 우

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

Frontend Next React TypeScript JavaScript Git Slack

👋 Introduce

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

🧑‍💻 Career

[ 잇올 스파르타 ]

2025.02 ~

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

<aside> 📄

잇올 몰입형 기숙학원 홈페이지 2025.04 ~

• Github Action, Vercel 배포
• Turbo Repo
• BFF(Backend for Frontend) 아키텍처 적용
  • 프론트엔드에서 사용하는 데이터를 프론트 전용 API 서버에서 가공하여 제공, API 응답 구조 단순화 및 비즈니스 로직 분리

Next.js, TypeScript, Tailwind

</aside>

<aside> 📄

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

• Github Action, Vercel 배포
• 신청 상태(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>

[ 시더스이플랫폼 ]

2023.05 ~ 2023.12