미리보기

Frontend Developer – Solana Liquid Restaking Platform (Fragmetric)

I am responsible for the frontend development of Fragmetric, a native liquid restaking protocol on Solana. My role involves designing and implementing user-friendly, high-performance decentralized applications (dApps) that facilitate seamless interaction with the protocol.

F&B 외식업계의 디지털화를 선도하는 푸드노트서비스에서 프론트엔드 개발 및 일부 백엔드 개발을 담당하고 있습니다.

프론트: React.js, React-Native, Next.js, Typescript를 사용했습니다.

백엔드: Node.js, GraphQL, Prisma, MySQL을 사용했습니다.

Description

Strava 러닝 기록을 GitHub 컨트리뷰션 그래프처럼 시각화 하는 웹 서비스입니다.

프로젝트는 4일 만에 개발되어 빠르게 배포되었으며, 출시 후 3일 만에 900명 가까운 사용자 수를 기록했습니다.

Experience

• Next.js를 통한 풀스택 개발

• Vercel을 화용한 빠른 배포 및 CI/CD

• Strava API 요청 제한에 따른 API 캐싱 처리 최적화

• 트렌드에 맞는 사용자 친화적인 UI/UX 구축 및 SNS 이미지 공유 기능

Tech Stack

Next.js Vercel

Description

장부대장 프차 서비스의 여러가지 기능을 모바일 버전에서 한 눈에 확인할 수 있는 대시보드 기능입니다.

백엔드 리소스 부족으로 GrapQL을 적극적으로 제안했고 직접 서버개발을 하여 도입했습니다.

Experience

• GraphQL의 장점과 단점에 대한 이해를 바탕으로 상황에 맞는 적절한 Schema를 설계

• Schema에 따라 Prisma ORM 또는 Raw SQL을 통해 resolver 구현

• Apollo Sandbox와 Type Generation을 통해 효율적으로 프론트엔드와 백엔드간 커뮤니케이션 개선

• GraphQL을 활용하여 프론트엔드와의 효율적으로 커뮤니케이션 비용을 감소, 개발기간 단축

• Node.js 환경에서 Prisma ORM 활용

Tech Stack

GrqphQL Apollo Server Node.js Prisma

Description

장부대장 프차의 유료서비스인 상권 분석 서비스입니다. 모든 프론트엔드 기능을 단독 개발하였습니다.

프로젝트의 이해도는 개발자가 제일 잘 안다고 생각하여 직접 사용자를 위한 가이드문서를 GitBook으로 제작했습니다.

행정구역별 지역의 매출 및 세대수, 요일/업종별 매출, 생활인구, 학생 수, 학원 수 등의 상권데이터를 보여줍니다.

Experience

• Naver Map 라이브러리의 거의 모든 기능 활용

  • Marker, InfoWindow, Polygon, StreetView, Polyline, Clustering, Geolocation

• 지도 서비스가 메인 기능이므로 렌더링 최적화 고도화

  • 지도에 표시되는 수많은 DOM 요소 처리

  • 거리측정 및 선택한 반경내의 요소 표시, 다각형 면적 측정 등의 기능 개발

Tech Stack

React Typescript Next.js

Description

소상공인 사장님들의 배달 매출관리 앱인 장부대장의 리뉴얼 프로젝트에 참여했습니다.

지도 화면인 매장의 깃발광고, 맞집랭킹 순위, 매출분포 화면을 담당 했습니다.

Experience

• React Native환경에서 Naver map 라이브러리 커스텀 모듈화

• React Query를 활용하여 서버 상태 관리 효율화

• 배달의민족의 깃발광고, 맛집랭킹, 매출분포 지도 화면 개발

• Javascript에서 Typescript로 마이그레이션

• 지도 화면에서 blur 애니메이션 추가하여 로딩처리 개선

• 더 나은 UX 제안하여 BottomSheet 화면에 따라 지도 사이즈 조절 적용

Tech Stack

React native Typescript React Query

Description

장부대장 프차의 유료서비스인 SNS 트렌드분석 서비스입니다.

모든 프론트엔드 기능을 단독 개발하였습니다.

브랜드 검색량 및 선택 키워드 검색량 통계를 제공합니다.

Experience

• 대용량 데이터 시각화

• 다양한 차트 활용(Pie, Line, Doughnut, Bar etc)

• 데이터 표 형식의 공통 컴포넌트 개발

• 여러개의 팝업 렌더링 처리

• 검색 필터링(단어 포함, 제외, 일치, 시작) 프론트에서 처리

• SWR을 활용한 서버 상태 관리

Tech Stack

Web: React Typescript Next.js D3 Chart.js

Description

F&B 외식 프랜차이즈 관리 소프트웨어 장부대장 프차

지도 화면과 리뷰 관리 및 답글 달기 기능을 담당했습니다.

Experience

• Naver map을 사용하여 지도 화면 개발

  • 지도기반 사용자 interaction 개발

  • 맵 렌더링 최적화 - 마커 개수에 따른 렌더링 효율화

  • 가맹점 위치 및 정보 표시 (Marker, InfoWindow 활용)

  • 지도 밖에 있는 마커는 보이지 않도록 최적화 하여 맵 렌더링 개선

  • 마커 클러스터링 처리
    

• 리뷰 확인 및 답글달기 화면, 리뷰 대시보드 화면 개발

  • 차트를 활용한 데이터 시각화

  • 여러개의 form 입력 처리 및 필터링 기능

• Sentry 에러 로깅

  • 지도에서 발생할 수 있는 다양한 사용자 interaction 에러를 추적 및 관리했습니다.

Tech Stack

Web: React Typescript Next.js Naver Map