미리보기

Description

하이퍼로컬 커뮤니티 플랫폼 "당근마켓'을 개발하는 스타트업
동네의 사장님들과 이웃을 연결해주는 Local Business에서 Frontend Developer근무하였습니다.

Stack

React, TanStack Query, Vanilla-extract

Experience

• 동네탐험가 1.0 런칭 (2025.04.08)

  • 동네 지도 탭 내에서 후기와 같은 사용자 생성 콘텐츠(UGC)의 생산을 유도하는 동네탐험가 시스템 구축

    • UGC 생산 시 사용자 보상을 위한 포인트 및 레벨업 애니메이션 UI 구현

    • UGC 생산 이력을 시각화하기 위해 동네 별 탐험 내역 페이지와 프로필 내 동네 탐험가 섹션 구현

• UGC 생산 UX 문제 인식 및 개선

  • 후기 작성 후 후기 결과 페이지에서 다음 버튼을 통해 추가 후기 작성 화면에 진입을 기대했으나 화면 전환율이 13%인 것을 확인

  • 다음 버튼이 스크롤을 내려야 보이는 UX 상 전환 유도 문제를 파악하고 빠르게 UI/UX 개선하여 화면 전환율 78% 개선

• UGC 생산 완료 후 화면 순서를 동적으로 구성하는 useSequentialRouter hook 구현

  • UGC 생산 완료 후 유저 상태와 정책에 따라 화면 순서가 변경되어야하는 요구사항

  • PM이 직접 정책을 수정하면 AI가 화면 순서를 담은 배열을 생성, useSequentialRouter 는 해당 배열을 기반으로 화면 전환을 제어

  • 컴포넌트는 화면 순서를 알 필요 없이 useSequentialRouter가 반환한 custom replace 함수를 통해 화면 이동

  • 정책-플로우-UI를 분리한 설계로 유지보수성과 정책 변경 호환성을 동시에 확보

Description

Hyper-Scalable 인공지능 연구개발 및 인퍼런스 서비스 플랫폼 Backend.AI 를 개발하는 스타트업

Stack

React, GraphQL, Relay, Jest, Playwright,ant.d

Experience

• 오픈 소스로 운영되는 Backend.AI WEB UI 의 이슈를 해결하였습니다.

  • 컴포넌트에서 상태를 유연하게 제어하기 위해 custom hook 구현

  • 이미지 목록 테이블 컴포넌트를 Lit -> React로 마이그레이션

    • 초기 렌더링 시 화면 전체 지연을 Suspense를 활용해 해결

    • 리렌더링시 깜빡임 문제를 useTransition을 활용해 해결 (관련 블로그)

    • 테이블에서 행 선택 및 정렬 성능 저하 문제를 메모이제이션을 활용해 컴포넌트 리렌더링 시간 1113ms -> 405ms 단축

  • E2E 테스트 코드 구현

    • 테스트 코드가 없어 기능을 구현할 때마다 사이드 이펙트에 대한 우려가 있었고 이를 해결하기 위해 테스트 코드 도입 및 테스트 코드 구현

• "Form을 다루는 방법 : uncontrolled vs controlled 관점에서 이해하기" 주제로 기술 세미나 진행하였습니다.

• Frontend Team의 교류를 위해 React, GraphQL,Relay 공식 문서 스터디를 개설하였습니다.

Description

명지대학교 학생을 대상으로 졸업 요건을 검사하는 서비스 (github) (service)

유저 수 1,200 + a

• "졸업을 부탁해"는 학생들이 파편화된 졸업 요건 정보를 수집하고 수동으로 남은 졸업 학점을 계산해야 하는 번거로움을 해소하기 위해 시작된 프로젝트며 현재까지 운영 중입니다.

• 성적표를 업로드하면, 졸업에 필요한 모든 정보를 쉽고 빠르게 확인할 수 있습니다.

Stack

Next.js ,Tailwind CSS, Jotai, Storybook, TanStack Query, shadcn, MSW

Experience

Vanilla JS에서 Next.js 14 (App Router)로 마이그레이션

• 서비스를 운영하면서 전반적으로 사용에 어려움이 있다는 피드백이 있었고 고객의 목소리를 기반으로 문제를 해결하기 위해 UX 설문조사 및 유저 인터뷰를 진행 ( UX 설문조사 및 유저 인터뷰, 논의, PR )

  • 결과적으로 긍정적인 피드백 증가 및 개선된 페이지 체류 시간 27% 향상

• 39.7%의 로그인 페이지 이탈률을 줄이기 위해 비회원 검사 기능을 개발

• GA 분석 결과 모바일 유저가 85% 이상인 것을 확인하고 Modal을 모바일 viewport 환경에서 Drawer로 전환하여 모바일 UX를 개선

• Fetch API를 사용함에 있어 불편함을 겪었고 사용하기 편하도록 유틸 확장 오픈소스 Custom Fetch 라이브러리 개발

• Lighthouse 성능 81점 -> 95점 향상

  • 컴포넌트 지연 로딩을 하여 번들 크기 감소

  • 폰트 최적화

• 스토리북(Storybook) 활용

  • 공통 컴포넌트 문서화

  • UI 테스트

  • 웹 접근성 테스트 및 개선

Description

Axios 문법을 기반으로 한 Custom Fetch 오픈 소스 라이브러리 (github) (npm)

Experience

졸업을 부탁해 프로젝트 중 Fetch API를 사용하면서, 아래와 같은 불편함을 느꼈고 개발 생산성을 향상하기 위해 개발하였습니다.

• 반복적인 Headers 설정

  • 반복적인 Headers 설정들 때문에 중복되는 코드가 많아졌고, 설정이 일관되지 않았습니다. 이를 해결하기 위해 Default Options 기능과 Instance 구조를 구현하였습니다.

• 반복적인 JSON 작업

  • 반복적인 JSON 작업을 없애기 위해 JSON 직렬화, 역직렬화 자동화 기능을 구현했습니다.

• 이외에도 Error Handling, Interceptor 기능을 구현했습니다

  .

Result

• 졸업을 부탁해 프로젝트의 전체 API 함수에서 최대 코드 160줄 감소

• 반복적인 설정 때문에 설정이 일관되지 않은 문제 해결

• 배포 업데이트 자동화

  • fetch-ax 버전 업그레이드 시, npm 배포 자동화

  • fetch-ax 업데이트 시, 이를 사용하는 프로젝트에서 자동으로 버전 업데이트 적용

• CJS, ESM 동시 지원

Description

IT 아티클에 대한 생각을 공유하는 서비스 (github)(service)

React의 내부 구현 구조와 동작 원리에 대해 더 깊게 공부해보기 위해, React 코드를 분석하고 라이브러리 의존성 없이 Vanilla Javascript를 통해 CSR을 직접 구현해 보았습니다.

Stack

Javascript ,Tailwind CSS

Experience

• 라이브러리 의존성 없이 Vanilla JS로 CSR(Client Side Rendering) 구현

  • Observer Pattern을 이용한 전역 상태관리 구현

  • Diffing Algorithm을 이용한 Rendering 구현

  • Component Class 구현

  • Router를 통한 SPA(Single Page Application) 구현

• Event Delegation을 활용하여 이벤트 리스너를 효율적으로 관리

• 프론트엔드 개발 부트캠프

  • 최우수 수료생 (1등)🥇

  • 나만의 virtual dom 만들기 발표

  • 알고리즘 스터디 진행 및 팀장 담당

  • 토이프로젝트1, 토이프로젝트2, 파이널 프로젝트 팀장 담당

• 프론트엔드만 할 수 있다는 한계를 뛰어넘고 "개발자"로서 역량을 기르기 위해 서버 파트로 참가하여 서버 구축의 전반적인 내용을 학습하였습니다.

• 아마존 클론 코딩 서비스 서버 개발

• 솝커톤(SOPT 해커톤) 대상 수상

• 리서치 없는 맛집 지도 서비스 서버 개발

• 디자이너와 개발자가 함께하는 IT연합동아리

• 영화 추천 서비스 “Chart In Box” 프론트엔드 개발 리드