미리보기

• 주식 모으기 서비스 고도화

  • React에서 Next.js로 마이그레이션 하여 FCP 60% 이상 개선 및 TBT 개선

• 주식/증권 계좌에 대한 자산을 조회할 수 있는 통합 서비스 개발

• 투자왕 랭킹 서비스 설계 및 서비스 종료 대응

• 모의 투자 대결 서비스 개발 및 운영

• 웹뷰(카카오톡/카카오페이) 환경 스킴을 UI 형태로 생성시킬 수 있는 스킴 빌더 개발

  • 기존에 스킴 생성에 사용되던 업무 시간을 60분에서 10분(약 83%)으로 감소

• 초대 이벤트, 사전예약 등 이벤트성 페이지 개발 및 모듈화 작업

  • 이벤트를 통해 약 8%의 고객 수 증가

• 공식 홈페이지에 사용되는 공통 모듈 4가지 개발 및 공통화

  • 공통 모달, 커뮤니티 상단 배너, 3-Depth 탭, 대표 캐릭터 변경 탭

• Lovebeat 공식 홈페이지 개발 및 유지보수

• Blade & Soul 2 공식 홈페이지 개발 및 유지보수

• 신규 서비스(튜터링 플레이) 개발

  • 마이 페이지, 유튜버별 채널 페이지 및 구독 기능 개발 및 유지보수

  • 플립카드 구현을 통한 사용자 경험 개선 작업 수행

  • 에피소드, 핵심표현, 코스 페이지 기능 개발 및 해당 페이지 제작

• 튜터링(tutoring) 플레이 유지보수

  • 튜터링 플레이 서비스의 유저 데이터를 분석하여 수업 노트 UI 개선 작업 수행

  • 관리자(admin) 페이지 신고 기능 업데이트

  • 관리자 페이지에서 채널, 에피소드, 코스 검색 기능 최적화 작업 진행

초보자도 주식을 쉽게 투자할 수 있도록 적립식으로 투자할 수 있는 서비스

• 페이 레포지토리에서 증권 레포지토리로 이관하면서,

  Next.js 마이그레이션 및 Streaming SSR 도입을 통한 이관 전 대비 성능 60% 개선

• Layout Shift / FCP 개선

  • 웹뷰 요청 헤더에서 받은 기기 정보들(다크모드 여부, 시스템 높이 등)을 미들웨어에서 처리 후 Context API 활용하여 상태 관리 모듈 개발

  • 서버 상태 관리를 tanstack-query의 Hydration Boundary를 통해 단일화하여 코드 복잡도 감소 및 개발자 경험(DX) 개선 (관련 글)

• 모으기 생성 화면

  A/B 테스트를 위한 API 연동 후, 실제 유저 데이터 기반 중심의 개발 진행

• 전자서명(클라이언트의 기능)과 전자서명과 함께 요청할 API(본 요청)를 공통 훅 개발

  • 기존에 전자서명이 없는 API에도 쉽게 결합이 가능하도록 설계

• 서버 컴포넌트 및 클라이언트 컴포넌트에서 URLSearchParams를 쉽게 관리할 수 있는 공통 모듈 개발

• MSW(Mock Service Worker)와 스토리북을 활용하여 개발 생산성 향상

  • 서버 컴포넌트와 SSR 환경에서도 MSW가 정상 동작하도록 커스텀 진행

주식 매매를 쉽게 따라 할 수 있도록 투자 고수들의 랭킹을 제공해 주는 서비스

• 투자왕 랭킹 서비스 설계 및 서비스 운영 고도화 진행

  • FSD 아키텍처의 트레이드 오프 파악 후 전체 폴더 리팩토링 진행

  • 특정 API 에러로 인해 전체 에러 Fallback이 노출되지 않도록 영역별 에러 바운더리 처리

• Pull To Refresh Trouble-shooting 및 개발 (관련 글)

  • css transform 속성을 통한 GPU 가속과 requestAnimationFrame 을 통해 성능 최적화 진행

• 약정 전환율과 방문 리텐션을 확보하기 위한 목적 중심의 개발 진행

  • A/B 테스트를 활용해 비교군/대조군의 데이터 유의성 파악하여 승자를 적용

• 앱 빌트인(built-in) 화면 분기를 위해 search params로 컴포넌트 UI 분기 처리

• 투자왕 랭킹 서비스 시즌1, 시즌2 종료 대응

계좌에 따른 현재 자산을 조회할 수 있는 서비스

• 하루에 약 100만 건 이상 트래픽이 발생하는 서비스를 위해 SSR 및 서버 컴포넌트를 통해 빠른 화면 렌더링을 제공

• 서버 컴포넌트와 Streaming SSR을 사용하면서 발생한 불편한 DX 개선 (관련 글)

  • Next의 fetch와 tanstack-query를 함께 사용하면서 생긴 불편한 점을 FetchBoundary 컴포넌트 개발을 통해 DX 향상

  • 서버 컴포넌트에서 사용할 수 있는 Deferred 스켈레톤 컴포넌트 방법 고안

각 게임의 이용자들을 위한 초대 이벤트를 쉽고 빠르게 제작할 수 있도록 템플릿화를 진행한 프로젝트

단발성 초대 이벤트 페이지 제작

• 초대 코드 등록 및 공유 페이지는 각 게임 IP의 요구사항과 원하는 형태에 맞게 제작

• 사용자 트래킹을 위해 Google Analytics(GA) 태그 추가

• 10개국 다국어 서비스 대응이 필요한 이벤트를 위해 국제화(i18n) 적용

범용적인 초대 이벤트 모듈화 작업

• 신규/복귀 타입, 인원 달성 타입 2가지 형태의 초대 타입 개발

• Vue로 개발된 이벤트성 페이지를 React와 vite를 사용하여 마이그레이션을 진행

• 서비스에 사용되는 모든 영역(보상, 초대하기 영역, 초대 코드 등록 영역, 상단 영역 등) 개발

  • 게임마다 다르게 사용 가능하도록 Json을 주입하여 쉽게 커스텀할 수 있는 컴포넌트 설계

• 초대 서비스만의 디자인 시스템을 적용하여 디자인 적용 시간을 단축해 다양한 이벤트 페이지에 활용할 수 있도록 함

게임 공식 홈페이지에 사용되는 공통 컴포넌트들을 모듈로 만들어 라이브러리로 관리하는 프로젝트

• Git Tags를 활용하여 Versioning 및 S3를 통한 버전별 정적 패키지 관리 진행

• 커뮤니티 상단 배너 개발

• 3-Depth 탭 개발

  • N-Depth에도 대응 할 수 있도록, 재귀 방식으로 확장성에 유연한 컴포넌트로 리팩토링 진행

• 인 게임 대표 캐릭터 변경 모듈 개발 및 유지보수 진행

• 공통 모달 개발:

  • 다양한 형태의 UI 모달 패키지 개발 (alert, confirm, toast, modal 등) -

    SweetAlert2 사용 방식을 참고하여 설계

  • 필수적인 props를 모두 제공하고, 이벤트 콜백을 제공하여 예측 불가능한 케이스 대응

폐쇄망에서 관리되던 코드를 유지보수가 용이하게 리뉴얼 작업을 리드

• 레거시 코드를 반응형 페이지로 개편

  • 러빗툰, 뮤직리스트, 패션, 초보자 가이드 등 메인 페이지들을 담당하고 전체 아키텍처 설계를 담당

• 형상 관리 시스템을 SVN(Subversion)에서 Git으로 변경

• JSP 코드를 React 기반 리뉴얼 작업 진행

• API 캐싱 최적화 및 서버 상태 효율적으로 관리하기 위해 React-Query를 도입

• Webpack 커스텀 진행 (관련 글)

  • Tymeleaf로 개발된 페이지에 임포트할 정적 번들 파일(js, css)를 빌드하기 위해 Webpack 커스텀 Config 작성

  • 번들 용량 최적화를 위한 다이나믹 임포트, 이미지 최적화를 진행하여 500kb 내외로 용량 조절

스터디 멤버를 직접 모집하고 스터디장으로서 활동하고 있습니다.

• 총 6권의 개발 도서 스터디 운영 및 진행 완료

• 매주 온라인으로 스터디 내용을 발표하며 다양한 토론을 진행하며 개발적인 시야 확장

구름톤 univ에서 진행한 해커톤의 프론트엔드 멘토로 참여했습니다.

• 해커톤 진행 과정에서 마주한 인증 오류 및 구현 어려움에 대해 멘토를 진행