미리보기

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

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

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

• 서비스 최적화 및 DX 개선

• 프론트엔드 팀의 기술 향상을 위한 개발 지식 공유

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

• 기획 단계에 있어서 개발 및 디자인 팀과 협력하여 참여

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

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

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

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

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

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

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

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

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

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

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

서비스 모노레포에 포함되지 않은 회사 홈페이지 프로젝트에 디자인 시스템을 적용하기 위해 디자인 시스템을 GitHub Packages에 배포

• Github Packages 배포를 위한 tsup 번들러 사용

• CJS / ESM 모듈 형식 지원

• Changeset을 이용하여 버저닝 자동화 및 변경사항 문서화

• pnpm의 node-linker 값이 hoisted로 되어 있던 설정을 isolated로 변경 및 마이그레이션을 통해 각 프로젝트의 의존성을 독립적으로 관리하여 충돌을 방지

• 기술 스택: pnpm, turborepo, tsup, changeset

• 각 유저 권한별 다른 방식의 가입 및 KYC/KYB 인증 절차 개발

• 아이콘을 스프라이트 기법으로 전환하여 성능 최적화 진행

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

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

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

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

• Next.js 미들웨어를 활용하여 유저의 KYC/KYB 인증 프로세스 전환

  • KYC/KYB 요구사항에 따라 사용자 인증과 리다이렉트를 처리하는 로직이 각 요청 시 페이지 생성 단계에서 동작하므로 정적 컨텐츠를 포함하는 페이지가 불필요하게 재생성되는 문제 발생

  • 인증 및 리다이렉트 로직을 미들웨어로 처리하여 페이지 생성 전에 접근을 제어하여 서버의 부하를 줄이며, 초기 페이지 로드 시간을 단축 시킴

• 선언적 코드와 유연한 로딩 및 에러 화면 구성을 위한 Suspense 적용

  • useSuspenseQuery + ErrorBoundary + Suspense 도입

  • 로딩, 에러 처리를 외부에 위임하여 비동기 처리에 대한 복잡도를 낮춤 → 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