미리보기

[회사 개요]
상급골퍼를 위한 골프 데이터분석 론치모니터 및 스크린골프 스타트업

[주요 업무]
사내 첫 프론트엔드 개발자로 입사하여 매장관리 백오피스, 디자인시스템, 모바일앱, KISOK앱을 초기 구축부터 참여하여 개발하였습니다.

• 대부분의 프로젝트를 초기 구축부터 참여하여 개발

• 사내 커뮤케이션 강화 및 업무관리를 위한 Notion 도입 리드

• 팀 내 Git Branch 전략을 문서화하여 온보딩에 기여

촬영이 필요한 고객과 사진작가를 중개하는 서비스 Polic 창업. 고객과 적극적으로 소통하며 길거리 사진판매, 온라인쇼핑몰을 거쳐 앱 플랫폼으로 사업을 성장시켰음.

• 구글 플레이 다운로드: 1000+

• 활동 승인 촬영업체 수: 111+

• 자금조달 및 운용: 1억 3530만원

• 누적매출액: 5384만원

창업도전기 보기

Vue에서 React로의 점진적 마이그레이션

Why
제품의 확장성 및 코드 단일화를 고려하여 React로의 마이그레이션이 필요했으나, 투입 인력의 부족과 안정적 서비스 제공의 이유로 인해 프로젝트 진행이 불가하였습니다.

How
그러나 일부 페이지만 점진적으로 마이그레이션 하면 부담을 줄일 수 있을 거라 판단하였고, Module Federation을 활용해 런타임에 통합하는 방식을 제안하고 팀원들의 동의를 얻어 안정적으로 마이그레이션을 진행할 수 있게 되었습니다.

해외 매장을 위한 국제화 대응(타임존, 다국어)을 통한 제품 사용률 100% 달성

Why
한국어만 지원하여 해외 매장 매니저 사용률이 떨어졌으며, 한국 타임존으로 인해 기간상품과 관련한 운영상의 착오가 발생하고 있었습니다.

How
- 매장의  국가, 언어, 타임존 설정의 복잡성을 해결하기 위해 Day.js 헬퍼 클래스 구현
- 일정한 규칙이 없던 에러 메시지를 번역 및 변경 대응에 유리하도록 문자열 에러 코드로 정리
- Excel과 JSON 파일 간 동기화 편리성을 위해 JSON 변환기 구현

실시간 매장관리 시스템 구축

- SocketIO를 활용하여 실시간 골프타석 로그인 및 에러 알림 기능 구현
- 회원, 상품, 보관품, 통계 등 관리를 위한 페이지 및 API 구현
- 매장, 머신, 점검, 모니터링 등을 위한 관리자 페이지 및 API 구현

[사용 기술]
Vue, Vuex, JavaScript, Chart.js, Vuetify, Sass, SocketIO, Express.js, Sequelize, Vite, React

디자인 시스템 설계 및 구축하여 일관된 UX/UI 제공과 개발 효율화

Why
커뮤니케이션 오류, 반복작업, 비일관적 결과물로 인한 업무의 비효율이 제품 품질에도 악영향을 끼치고 있는 상황이였습니다.

How
디자이너와 긴밀한 커뮤니케이션을 통해 디자인토큰, 컴포넌트 설계 등 디자인시스템의 규칙을 정립하였습니다.
성장형 디자인 시스템 도입기 보기

변화에 유연하게 대응하면서도 디자인시스템 적용과 안정적 배포를 위해 엄격한 규칙들을 적용하여 컴포넌트 라이브러리를 구현하였습니다.
- 컴포넌트를 Token, Style, UI 계층으로 나누어 설계 및 개발
- 최적화된 Emotion 사용 방법을 정리하고 적용
- 90여개의 테스트 작성하며, 테스트 커버리지 90% 유지
- Github Actions을 통해 테스트 및 배포 자동화
UI 컴포넌트 라이브러리 구현기 보기

[사용 기술]
Storybook, TypeScript, React, Emotion, Framer Motion, Github Actions, Vitest, Testing Library

[프로젝트 개요]
골퍼들의 상품관리, 샷 영상 및 데이터 조회, QR 코드 로그인 등 매장이용과 샷데이터 분석 제공을 위한 하이브리드 모바일앱

상태관리와 에러처리 리팩토링으로 리렌더링 및 서버요청을 최적화하고 개발 및 사용자 경험 증대

Why
외주로 넘어온 상태에서 중구난방인 상태관리와 에러처리로 인해 비효율적 서버 요청, 디버깅의 어려움, 변경에 취약한 문제가 있었습니다.
How
- 상태들을 클라이언트/서버로 구분하고 Recoil과 TanStack Query를 도입하여 리렌더링 및 서버요청 최적화
- 에러처리 프로세스를 정리하고, 공통에러핸들러, ErrorBoundary 등을 구현하여 선언적으로 처리

Webview에서 Flutter와 단방향 통신만 가능하던 한계를 양방향으로 데이터를 주고 받을 수 있도록 구현

Why
Webview에서 postMessage로 Native에게 요청만 가능하고 응답을 받을 수 없어 관련 로직들을 매끄럽게 처리할 수 없었습니다.

How

postMessage와 Promise를 활용하여 NativeBridge 클래스를 만들고 webview에서 Native로 요청 후 응답을 비동기로 받을 수 있도록 처리하였습니다.

모바일 앱 화면 및 기능 구현

회원정보 수정, QR코드 타석로그인, 샷 영상 리스트 및 플레이어,  클럽정보 셋팅 기능을 구현하였습니다.

[사용 기술]
Flutter, Next.js, TypeScript, Recoil, TanStack Query, Emotion, SocketIO, React Hook Form, Jest, Testing Library, Sentry

소프트웨어 용어사전, 문서번역, 트러블슈팅 및 기술블로그를 통해 지식을 축적하고 공유하고 있습니다.
Module Federation을 활용한 Vue2에서 React로의 점진적 마이그레이션
효과적인 Emotion(CSS in JS) 사용을 위한 6가지 방법
LoginPage로 보는 React 통합테스트
다른 글 더보기

최근 오픈소스 생태계에 관심을 가지며 활동을 해보려 노력하고 있습니다.

• component-boilerplater
  리액트 기반 디자인시스템에서 컴포넌트 생성을 위한 보일러 플레이트 생성 라이브러리
  - 파일을 생성하고 기본작성(index, Component, stories, test)에 소요되는 시간을 1초로 줄임.
  - config 설정 및 커맨드라인 지원
  자세히 보기
  
  

• TanStack Query
  PR - fix(query-core): Change to prevent undefined from overriding Mutation default side effects.
  
  

• MDN 번역 기여
  CSSStyleSheet
  PR - [ko]: translate - CSSStyleSheet

Emotion을 가장 효과적으로 사용할 수 있는 방법을 정리하기 위해 여러 방법들의 렌더링 속도를 비교하는 프로젝트를 진행하였습니다.
프로젝트 보기  / 깃허브 보기
- React Profiler를 통한 컴포넌트 성능 측정
- 성능측정을 기반으로 Emotion 사용가이드 작성 및 공유

• BIT 비즈니스 아이디어 공모전 (동상) :100만원
• 디지털라이프스쿨 3기 (우수) : 30만원
• 예비창업패키지 (선정) : 5000만원
• 청년창업사관학교 9기 (졸업) : 7200만원
• 재도전창업패키지 (선정) : 4500만원
• 서울창업디딤터 BI (입주) : 200만원
• 청년창업사관학교 후속지원 (선정) : 1000만원
• 윤민창의재단 굿스타터 (IR 서류합격)