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

<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>