미리보기

온라인 개발 강의 플랫폼인 인프런과 커리어 플랫폼인 랠릿을 개발 및 유지보수 하였습니다.

• 인프런의 레거시 코드를 유지보수

• 레거시 코드를 typescript와 react로 재개발

• 인프런 서비스의 통합 디자인시스템 신규 기능 개발

• 개발자 리소스를 줄이기 위한 사내 라이브러리에 기여

• 인프런 로드맵 에러 모니터링 시스템 구축

• 인프런 로드맵 페이지 LCP 모니터링 시스템 구축

• 인프런 컨텐츠 빌더 제작

ㅤㅤ

ㅤㅤ

ㅤ

[프로젝트 설명]

인프런의 해외 진출을 위해서 협업사와 함께 해외 결제 서비스를 붙이는 프로젝트입니다.

[주요 내용]

• 협업사와 메인으로 소통을 담당하였습니다.

• 해외 유저 대응을 위해 i18n을 이용해 다국어 환경을 개발하였습니다.

[프로젝트 설명]

인프런의 제품 구매를 담당하는 수강바구니 페이지를 레거시 스택에서 nextjs로 개편하는 프로젝트입니다.

[기술 스택]

typescript, react, nextjs, valtio

[주요 내용]

• 클래스 기반의 레거시 코드를 최대한 활용하기 위해, valtio라는 프록시 기반 상태관리 라이브러리를 사용했습니다.

• nextjs static build를 통해 CSR 배포를 진행했습니다.

[프로젝트 설명]

인프런의 제품인 강의를 탐색할 수 있는 페이지인 강의 리스트 페이지를 레거시 스택인 express을 이용한 SSR 에서 nextjs로 개편하는 프로젝트입니다.

[기술 스택]

typescript, react, nextjs

[주요 내용]

• 사내 다양한 곳에서 사용되는 강의카드를 공통 컴포넌트화 했습니다.

• LCP 모니터링 및 대시보드 구축으로 항상 페이지 속도를 신경 쓰도록 환경을 구축했습니다.

ㅤ

ㅤ

[프로젝트 설명]

인프런에서 지식공유자들이 사용할 강의 소개글을 wordpress와 비슷한 형태로 제작할 수 있도록 하는 프로젝트입니다 프로젝트 구축 및 데이터 흐름을 설계하고 빌더 개발을 담당하였습니다.

[기술 스택]

typescript, react, craft.js

[주요 내용]

• 컨텐츠 빌더를 오픈하여, 에디터 직군의 업무를 줄이고, 오픈된 강의 수를 50% 증가시켰습니다.

• express를 이용한 SSR과 react 환경에서 동일한 결과물을 보여주기 위한 데이터 저장방식을 도입했습니다.

• 빌더 결과물을 정적 분석하여, SEO를 검사하는 익스텐션을 개발했습니다.

• 노출되는 곳과 수정하는곳의 차이가 있어야 하는 상황에서, 데이터 추출 시에 전처리 프로세스를 개발하여 처리 하였습니다.

[프로젝트 설명]

인프런 서비스에서 여러 개의 강의를 묶어서 순서대로 학습할 수 있게 한 로드맵 기능을 신규 스택으로 전환과 동시에 추가 기능을 개발하는 프로젝트입니다.

[기술 스택]

react, typescript, next

[주요 내용]

• 로드맵의 사용성을 개편하여, 로드맵 참여 수는 42%, 완주 수는 76% 를 증가시켰습니다.

• monorepo로 관리되던 기존 프로젝트들의 유령 의존성들을 해결하기 위해서 패키지 관리자를 pnpm으로 교체하였습니다.

• devops와의 협업으로 pnpm store를 캐싱하여, 캐시 히트가 되었을 때 2분가량 걸리던 의존성 설치를 5초 이 내에 완료되도록 구성하였습니다.

• lighthouse SEO와 성능 점수를 60점 에서 90점 이상으로 향상시켰습니다.

• datadog을 이용하여 로깅 및 에러, LCP 모니터링 시스템을 구축하였습니다.

• 구글의 구조화된 데이터를 활용하여 SEO를 개선하여, 검색 순위를 10% 가량 올렸습니다.

ㅤ

ㅤ

ㅤ

[프로젝트 설명]

개발자 커리어 관리 플랫폼인 랠릿을 개발하는 프로젝트입니다.

구직자가 사용하는 B2C, 기업에서 사용하는 B2B, 어드민 중에서 B2B의 프론트엔드 개발을 담당하였습니다.

[기술 스택]

react, typescript, react-hook-form

[주요 내용]

• 랠릿을 위한 자체 디자인 시스템을 개발 및 유지보수 하였습니다.

• redux로 작업되어 있는 form state 코드를 dx와 성능 개선을 위해서 react-hook-form으로 재개발하였습니다.

• 마케팅 지표 설정이 되어있지 않은 상황에서 데이터 확보를 위해 GTM과 GA를 이용해 환경을 구축했습니다