미리보기

Web 레포 | Admin 레포 | App Store | Play Store

프로젝트 설명

제휴 마케팅을 통해 벌어 들인 수입이 물건을 구매한 당사자에게 돌아가는 것을 목표로 제작된 서비스입니다.
지그재그 제휴 마케팅을 대상으로 MVP를 개발하여 앱 스토어와 플레이 스토어에 출시하였습니다.
프론트엔드 팀 개발 환경 구축, 공통 컴포넌트, Form Flow, 상품 페이지, 검색 페이지, 어드민 서비스를 개발하였습니다.

기술 스택

React React Native Vercel Storybook Typescript React Query Zustand TailwindCss Zustand ShadcnUI React Hook Form Zod

역할

DX 개선

• github action을 사용하여 스토리북 배포 프로세스 자동화
• 불필요한 변경사항 추적 방지를 위해 확장 가능성을 고려한 Provider Wrapper 컴포넌트를 설계 및 구현
• 개발 생산성 및 코드 품질을 위한 prettier, husky, eslint, vercel, github webhook 연동 등의 프론트엔드 개발 환경 세팅
• 웹뷰로 앱과 같은 뒤로 가기 구현을 위해 Web API의 replace 옵션을 활용한 URL 전략 수립

디자인 시스템

• SVG Sprites 방식을 사용하여 아이콘 컴포넌트 생성
• React Portal을 사용하여 아이콘 관련 크로스 브라우징 이슈 해결 및 네트워크 요청 최적화(페이지별 n 번 -> 전체 1번)
• tailwind plugin을 활용한 타이포그래피 클래스 생성을 통해 tailwind의 자동완성을 제공

어드민 페이지 개발

• 디자인 비용 없이 모바일 환경에 적합한 어드민 페이지로 변경하기 위해 meta 태그의 viewport 속성 활용
• 프로젝트 내 잠재적인 문제 사전 파악 및 각 파트 별 작업 분석 및 제안 문서화를 통해 기획, 디자인, FE, BE 간에 소통의 부재를 해결

기타

• 보안성 강화를 위해 access token 검증 구현 및 재발급 로직 수정
• url에서 특정 string 추출하는 util 함수 구현 및 테스트 코드 작성하여 안정성 확보

서비스 | 깃허브 레포 | 크롬 익스텐션

프로젝트 설명

총 방문자 수 6,000명 이상의 서비스로, 기존 북마크 서비스의 획일화된 형태에 불편함을 느껴 웹 페이지에서 정보를 자동으로 추출하고, 원하는 대로 배치하도록 하였습니다.
트렌딩 페이지, 스크랩 페이지, 보드 페이지, 메인 페이지, 유저 페이지의 프론트엔드 개발을 담당하였습니다.

기술 스택

React Storybook Typescript ReactQuery Jotai MUI DndKit Jira Confluence Amplitude Sentry 채널톡

역할

운영 경험

• Amplitude, Sentry 등을 기반으로 사용자 행동 분석 및 기능 개선
• 78%의 유의미한 유저 피드백을 반영하여 서비스 품질 향상
• 하루 최대 DAU 500 명 달성

DX 개선

• 폰트를 로딩하는 유틸리티 함수를 생성하여 스토리북에 전역 폰트가 적용되지 않는 버그 해결

보드 페이지

• 별도의 noSql 서버 대신 text 형태로 보드 데이터 저장 후 클라이언트에서 파싱하는 방법 채택
• DND kit 라이브러리를 사용하여 사용자가 원하는 위치에 메모 및 북마크 배치 기능 지원
• 보드 공유, 게시, 복제 기능 구현을 위한 url 및 db 구조 설계

트렌딩 페이지

• 보드 내 이미지 탐색하는 알고리즘 개발하여 썸네일 이미지 생성
• 이미지 탐색 알고리즘에 early return을 도입하여 속도 20% 향상

영원한 팀 개발 컨퍼런스

• 패키지 매니저(npm과 yarn)에 대해 발표를 통해 팀원들과의 협업 및 소통에 기여

디자인 시스템 스터디

관련 포스팅

• 모노레포 구조 및 컴포넌트 개별 배포 실습
• turbo gen을 활용한 컴포넌트 생성 자동화 실습
• 아이콘 업데이트 자동화를 위한 피그마 플러그인 개발 실습

너디너리 개발자 컨퍼런스

• 경험을 토대로 스토리북의 장단점에 대해 발표

React Native 스터디

• 1주마다 간단한 React Native 실습을 진행해보며 React Native의 사용법을 익힘