경력(경험)

▽

그립컴퍼니

GripCompany

2022.08.16 ~ 재직 중

기회와 책임을 통한 빠른 성장

입사 당시 3명이던 팀에 합류하여 빠르게 10명까지 인원이 늘어나는 동안 코드 컨벤션 통일, 버전 및 브랜치 관리 전략 수립, 개발 사항 문서화, 그리고 코드 리뷰 활성화 등 팀 개발 문화를 정착을 주도하였습니다. 또한 적극적인 자세와 빠른 코드 파악을 바탕으로 업무 능력을 인정 받아 팀에서 담당하는 모든 프로덕트(국내 웹앱&어드민·US 웹앱&어드민·비즈니스 센터) 개발에 모두 참여한 유이한 팀원이 될 수 있었고, 결과적으로는 모든 성과 평가에서 높은 등급을 기록했습니다. 최근에는 모든 프로덕트에 대해 서비스 최적화 및 글로벌 출시 대비를 위해 새로이 레포지토리 생성부터 운영 배포까지 성공적으로 마쳤습니다.

기능 조직이었던 당시에는 모든 프로덕트에 대한 개발 및 유지 보수가 가능한 인원으로서 가장 많은 수의 지라 티켓 해소와 과제를 진행했습니다. 목적 조직이었던 당시에는 고연차가 가장 많도록 구성된 글로벌 TF(Task Force)팀과 미디어 스쿼드를 겸업하며 기획부터 프로덕트 출시까지의 프로덕트 사이클을 다수 경험했습니다. 그 결과, 일반적인 신입 및 주니어 개발자가 얻을 수 있는 기회와 책임 그 이상을 부여 받으며 빠르게 성장하였습니다.

저는 앞으로도 기회가 오면 주저하지 않고 잡아내어 책임감 있는 자세로 성장할 것이며 그 성장이 회사의 성장으로 연결될 수 있도록 노력할 것 입니다.

공통(웹앱, 어드민, 비즈니스 센터)

• 대부분의 브라우저 환경에서 호환 및 작동하도록 PC웹 및 모바일웹 코드를 최적화

• Middleware에서 인증 토큰 및 리프레시 토큰이 발급, 갱신되도록 구조 설계

• Git-flow 전략을 기반으로 한 팀 자체 버전 및 브랜치 관리 전략을 수립하고 문서화

• Github Action 및 Jenkins로 CI/CD를 브랜치 관리 전략에 맞게 적용해 협업 능률 향상

• 글로벌 서비스를 위한 i18n 적용

• 재사용할 수 있는 커스텀 hook을 만들어 중복 코드 축소 및 팀 전체 개발 속도 향상

• Eslint, Prettier, pre-commit을 활용하여 규칙적이고 type-safe한 코드 작성

어드민

어드민 보러가기

• Next.js(app router), Typescript, Chakra UI, TanStack Query, Axios, Jotai, Material React Table, Zod, MSW

• 그립의 사내 구성원들이 그립 서비스 전반을 관리할 때 사용할 수 있는 서비스 개발

• MSW를 활용하여 Mock 데이터를 기반으로 한 개발 진행

• 복잡한 기능이 포함된 테이블, 검색, 필터 구현

• 필터에 따른 값들을 URL 및 로컬 스토리지에 저장함으로써 검색 결과 유지

비즈니스 센터

비즈니스 센터 보러가기

• Next.js(app router), Typescript, Chakra UI, Ark UI, Radix UI, Tanstack Query, Axios, Jotai, Material React Table, Zod, Storybook

• 그립의 셀러 및 그리퍼가 자신의 상품, 방송, 계약 등 그립 내 자산 전반을 관리할 때 사용할 수 있는 서비스 개발

• Storybook을 활용하여 컴포넌트 테스팅 및 문서화 적용

• 접근 가능한 메뉴를 로그인 유저의 타입에 맞춰 관리할 수 있는 hook과 hoc 구현

• 필터에 따른 값들을 URL 및 로컬 스토리지에 저장함으로써 검색 결과 유지

• 영상과 이미지를 DnD로 업로드 및 순서 변경을 하고 썸네일을 클릭해 미리보기를 할 수 있도록 하는 컴포넌트 구현

US 웹앱 및 어드민

US 웹앱 보러가기 US 어드민 보러가기

• Next.js(pages router), Typescript, Material UI, Sass, GraphQL, Apollo Client, Axios, Recoil, HLS.js, Firebase

• 기존 웹앱에서 라이브 송출, 상품 판매 등 코어한 기능만 가져와 미국 시장을 타겟으로 3개월만에 웹앱과 어드민 개발

• 기존의 네이티브앱에서도 사용할 수 있도록 웹뷰 연동

국내 웹앱 - 전반

웹앱 보러가기

• Next.js(app router), Typescript, Sass, Tailwind CSS, shadcn/ui, Zustand, HLS.js, Firebase

• 기존 React 코드를 Next.js page router, app router로 점진적 마이그레이션

• 프로젝트 전반의 폴더 구조, 레이아웃, 컨벤션 등을 설계

• 모든 화면 크기 및 영역의 위치에 따라 overlay를 선언적으로 띄울 수 있는 컴포넌트와 hook 구현

• Message event를 활용한 iOS 및 Android 그립 앱 내 웹뷰 개발

• 카카오 스토리 앱 내 커머스 탭 웹뷰 페이지 구현

• Firebase Analytics로 로깅하는 로직을 컴포넌트화하여 중복 코드 최소화

• Next.js next/link router를 확장한 custom router를 구현

국내 웹앱 - 방송 및 쇼츠

웹앱 보러가기

• hls(.m3u8)를 활용한 실시간 라이브 스트리밍 서비스 구현

• ID3 tag를 활용하여 라이브 다시보기의 채팅, 알림, 후원 등의 데이터를 출력과 같은 서비스의 핵심인 방송 및 쇼츠 페이지 구현을 전담

• 방송 및 쇼츠 페이지의 코드를 최적화하여 번들 사이즈 최대 35% 축소 및 Chrome Lighthouse 기준 Performace 점수 20% 향상

• Firebase Firestore를 기반으로 실시간 채팅, 게임 참여, 후원, 쿠폰 수령 등을 구현

• 서비스 초창기부터 존재했던 문제인 음소거 해제된 미디어를 자동 재생할 수 없는 현상을 해결

• 상하 스와이프 및 스크롤을 통해 관련 영상을 연속으로 시청할 수 있는 구조 설계