미리보기

CLAS 결제 모듈 TF 팀에서 클라우드 서비스 CLAS의 폼페이 결제 시스템을 개발합니다.

타 계열사 협업을 위해 모듈을 라이브러리화하여 기존에 불가능했던 리모트 협업을 가능케하여, 개발자의 업무 효율을 높였습니다.

개요

• 클라우드 서비스 CLAS의 폼페이 결제 시스템

• 타 계열사 협업을 위해 모듈 라이브러리화

기술

• React.js, TypeScript

• Recoil, Emotion, React Hook Form, react-markdown

• Rollup, yalc, GitHub Packages

기여도

• 프론트엔드 개발 70%

• 모듈 라이브러리화로 타 계열사와 리모트 협업 도입

  • Rollup 번들러로 기존 프로젝트 라이브러리화

  • GitHub Packages로 Private 배포

• 개발 환경 개선

  • Yalc로 로컬 테스트 환경을 구축하여 테스트 시간 87% 감소

  • package.json 설정으로 로컬과 배포된 패키지 스위칭 테스트

  • 모듈 테스트 페이지를 배포하여 개발계와 운영계 분리하여 QA 진행

• 프로젝트 리팩터링

  • 공통 UI 컴포넌트 개발, 비즈니스 로직 분리

  • Line 560 컴포넌트 파일을 평균 Line 70 파일들로 분리

  • API Refetch, 상태관리 Hook 개발

  • 이용약관 파싱에 react-markdown 커스텀 컴포넌트 도입

개요

• 사진과 메세지로 함께 나눈 추억을 공유하고 보관하는 서비스

• 단국대학교 총학생회 제휴 서비스

기술

• Next.js, TypeScript

• Zustand, Styled Components, React Hook Form, Kakao Login

• MSW

성과

• MAU 1200명 달성

• 편지 데이터 550개 확보

기여

• 프로젝트 리드

  • 2주의 기획・개발 기간을 관리하여 MVP 모델 출시

• 메인페이지 LightHouse Performance 점수 33% 개선

  • Webp 이미지 최적화

  • 코드 스플리팅으로 번들 사이즈 축소

  • 서브셋 폰트 적용

• 토큰 탈취 시나리오 설계와 대응

  • 클로저 활용한 Refresh Token Rotation 구현

• 공통 컴포넌트 개발

  • 비즈니스 로직 분리, 도메인 컨텍스트 관리 객체 구현

  • 어댑터 패턴으로 라이브러리 사용의 유연성 확보

• 웹 접근성을 고려한 마크업

개요

• PKCE를 적용한 OAuth 2.0 시스템 오픈소스 라이브러리

기술

• React.js, TypeScript

• Rollup

• PKCE

성과

• 제휴 서비스 회원수 3배 증가

기여

• OAuth 로그인 플로우 설계와 개발

  • PKCE 기술 도입으로 보안 강화

개요

• 전공 학습 독려 챌린지 서비스

기술

• Next.js, TypeScript

• React Query, Recoil, Styled Components, React Hook Form, Tailwind CSS, Chart.js

• Sevice Worker, PWA

성과

• MAU 140명 달성

• 석달 연속 리텐션율 70%

• 문제 및 풀이 데이터 1500개 확보

기여

• 프로덕트 전체 기능 PWA 개발

  • 오프라인 캐싱

  • 푸시 알림

• 24% 트래픽에 대한 렌더링 UX 개선

  • 트래픽의 Latency 비율을 분석하여 300ms인 경우 Skeleton UI 노출

  • Suspense를 활용하여 구조 개선

• 업무 자동화로 인적 자원 투여 감소

  • 웹 푸시 알림으로 미션 독려 업무 일부 자동화

• 실제 사용자 유치 프로덕트 운영

• 프론트엔드 챕터 기술 공유 세미나 진행

• JavaScript 스터디 운영

• SWM 컨퍼런스 기술 발표