[FE] 유동우 이력서

증명사진2.jpg

유 동 우

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

GitHub.	https://github.com/devwoodie
Blog.	https://www.devwoodie.com

Frontend Next React TypeScript JavaScript Git Slack

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

2025.02 ~

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 ~

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

<aside> 📄

Cedars On (시더스온) 2023.07 ~ 2023.12

사내 영상, 라이브 방송 등의 ott 서비스 / 사내 가맹점 정보, 위치, 길 찾기 가능한 market 스위칭 앱 FE 개발

React로 모바일 웹을 개발하고 React Native Webview로 하이브리드 앱을 구현하여 안드로이드, 앱스토어 빌드, 배포를 진행했습니다. expo를 사용하여 aos/ios 동시 배포를 진행했습니다.
프론트엔드 서버로 aws 인스턴스를 생성해 타겟 그룹과 로드밸런서 연결을 진행하였고, Route53 도메인 연결을 진행하여 서버 구축을 하였습니다. aws s3 버킷을 생성해서 어드민에서 엑셀/이미지 파일을 등록하면 base64로 변환 후에 버킷에 저장을 하였습니다.
ott 서비스에서는 react-player 로 영상 플레이어를 구현하여 앱 자체 컨트롤러를 새로 구현하고 영상을 본 시점을 저장하여 재접속 시 저장된 시점부터 실행할 수 있게 구현하였습니다.
market 서비스에서는 카카오 map api를 사용해 지정된 market 위치 dot 표시, 상세 클릭 후 길 찾기 시 카카오맵 어플로 딥링크 연결하여 그 위치로 길 찾기가 진행되게 개발하였습니다.
ott/market 스위칭 되는 앱이기 때문에 앱에서 아웃되기 전의 상태를 저장하여 재진입 시 기존 서비스를 이용할 수 있게 하는 등 앱과 웹 간의 원활한 통신을 진행하였습니다.

React, React-Native, Kakao Map, React-player, Redux, Expo

</aside>

<aside> 📄

G1CASH (web/admin) 2023.05 ~ 2023.07

앱 로그인, 결제를 web에서 진행할 수 있는 서비스 FE 개발

google maps api를 활용해 어드민에서 주소 검색, 지도 표출 기능을 구현했습니다.
aws s3 버킷을 생성하여 어드민에서 등록된 이미지/파일 등을 base64로 변환하여 저장하였습니다.
react-quill 에디터 구현을 진행하였고, 창을 닫으면 삭제되는 session storage를 활용해 uid, token을 임시 저장하였습니다.

React, Google Map, React-quill, Redux

</aside>