미리보기

• 가상자산 커스터디 서비스 개발 및 유지보수

• 백오피스 서비스 개발 및 유지보수

• 초기 서비스 MVP 개발 및 기술 스택 선정과 프로젝트 환경 구성

• 서비스 최적화 및 DX 개선

• 테스트 도입 및 자동화 프로세스 구축

• 18n을 이용한 다국어 처리

보컬 데이터 수집 서비스 개발

• 작업 제출 시 mp3, midi, txt 파일 S3 Pre-signed-url을 이용해 파일 업로드 개발

• 작업자 할당/취소, 검수자 할당/취소, 작업 제출/반려/승인 등 작업 상태 관리 및 개발

• 신규 서비스 개발을 통해 약 2.5억원의 계약 성사 및 성과 달성

데이터 어노테이션 라벨링 및 프로젝트 작업자 관리 개발 및 유지 보수

• IOU 알고리즘을 이용하여 threshold 값에 따른 Pre-labeling 결괏값 병합 조절 개발

  • OCR 프로젝트 작업 시간 40% 단축

• 작업자 인터뷰 데이터 기반으로 단축키 개선 및 가이드 개발 및 UX 개선

Data Voucher & AI Voucher 랜딩 페이지 개발

• 총 100건 이상의 인바운드 문의 달성

• 반응형 및 i18n을 이용한 영문화 적용

회사 홈페이지 프로젝트에 디자인 시스템을 적용하기 위해 Github Packages를 활용해 디자인 시스템 배포

• 배포 과정에서 tsup 번들러를 사용하여 CJS / ESM 모듈 형식 지원

• CJS / ESM의 모듈의 차이점 및 동작 방식에 대해 경험하고 이해함

• 배포 후 회고를 통해 디자인 시스템의 별도 배포가 오버 엔지니어링임을 판단, 모노레포에 프로젝트를 통합하여 효율적인 관리 방식으로 개선

  • 기술 도입 및 문제 해결 시, 상황에 맞는 최적의 솔루션을 찾는 능력을 기를 수 있었음

• 기술 스택: pnpm, turborepo, tsup

출금 신청 기능 개발 [링크]

• 서비스 제공 지갑의 보유 가상자산을 외부로 출금 신청할 수 있는 기능 개발

• 출금 금액에 따른 출금 수수료 계산 및 법정화폐(KRW, USD 등) 환산 금액 계산 로직 구현.

• 정확한 금액 처리를 위해 decimal.js 라이브러리를 도입하여, JavaScript 부동소수점 계산의 오차 문제를 해결.

고객의 KYB 수집 및 WLF/RA 위험 평가 기능 개발

• zod + react hook form을 이용한 form validation 처리

• 기존 KYB에서 추가된 세분화된 상태 및 추가된 데이터 폼 개발

• i18n 처리를 통한 다국어 적용

스프라이트 기법을 이용한 아이콘 성능 최적화 [링크]

• JSX 파일 관리 방식으로 인해 파일 수가 증가함에 따른 복잡성과 번들 크기의 증가로 인해 개선의 필요성을 느낌

• 스프라이트 기법으로 전환하여 번들 사이즈를 줄이고, 파일 관리를 간소화함과 동시에 inline 스타일을 쉽게 적용할 수 있도록 처리

• 사용하지 않는 번들 크기 약 7.91% 감소

• svg 파일을 스프라이트 형태로 변환을 위한 스크립트 작성 및 팀원들과 공유

Next.js 미들웨어를 활용한 페이지 접근제어 기능 개발

• KYC/KYB, 법인의 국가에 따라 접근할 수 있는 페이지를 검사 후 허용 및 리다이렉트 처리

• 각 페이지별로 리다이렉트 처리를 했을 때, 페이지 생성 단계에서 동작하므로 정적 컨텐츠를 포함하는 페이지가 불필요하게 재생성되는 문제 발생

• 인증 및 리다이렉트 로직을 미들웨어로 처리하여 페이지는 페이지의 역할만 담당하도록 처리

Suspense를 적용하여 선언적 코드 및 유연한 로딩/에러 처리 [링크]

• useSuspenseQuery + ErrorBoundary + Suspense(Suspensive) 도입

• 로딩, 에러 처리를 외부에 위임하여 비동기 처리에 대한 복잡도를 낮추어 DX를 향상

• 유연한 로딩 및 에러 처리에 따른 UX 향상

복잡한 요구사항을 검증하기 위한 테스트 코드 도입

• 테스트 커버리지에 집착하지 않고, 복잡한 기능을 가진 코드나 다른 팀원에게 추가적인 설명이 필요한 경우, 유닛/통합 테스트 코드를 작성하여 코드 안정성 확보

• Jest, Testing library를 이용한 테스트 환경 구성

기술 스택: pnpm, turborepo, nextjs, react-query, zustand, tailwind, msw, jest, testing-library

B2B 가상자산 커스터디 서비스 MVP 개발 및 백오피스 Admin 서비스 개발

• 유저가 사용할 수 있는 입출금 계좌 등록, 입금, 출금 기능 개발

• 재사용 가능한 공용 컴포넌트 개발

  • 합성 컴포넌트를 이용하여 재사용성을 높이고 유연하게 사용할 수 있도록 처리

  • 컴포넌트의 역할 및 단위에 맞게 아토믹한 컴포넌트로 분리

  • 커스텀 훅을 이용해 역할에 맞게 로직과 컴포넌트를 분리

• 기술 스택 선정 및 프로젝트 환경 구성

• 기술 스택: pnpm, turborepo, nextjs, react-query, zustand, tailwind, emotion, storybook

개발을 하면서 얻은 내용들을 정리하고 공유하는 개인 블로그 (Github, Website)

• matter-js를 이용한 objects falling 구현

• jest, testing library를 이용한 테스트 코드 작성

• 기술 스택: Next.js TypeScript Tailwindcss matter-js jest Testing Library