안녕하세요, 저는 오혜성입니다.

• 섹션과 페이지 별 머물렀던 시간과 스크롤 정도를 기록할 수 있는 트래킹 시스템을 선언적으로 구축하도록 노력했습니다.
• 동적으로 사이트맵을 생성되도록 개발해, 블로그와 이력서 등 동적으로 추가되는 Route를 검색엔진에 빠르게 노출될 수 있도록 하였습니다.
• 블로그 개별 페이지의 SSR시 컨텐츠 내용을 조회하도록 수정해 라이트하우스 기준 성능 점수 32점 상승 및 처음으로 그려지는 HTML에 데이터를 노출해 SEO에 이점이 있도록 노력했습니다.
• Sentry를 부착해 에러 모니터링 환경을 구축하였습니다.

F-Lab Design System

• 초기 환경을 구축하고, 스토리북 및 크로마틱을 설정하였습니다.
• Type-Safe하게 다형성을 지원하기 위해 노력하였으며 관련 경험을 사내 블로그에 기고하였습니다.

LMS

• 홈페이지의 하위 디렉토리에 있던 LMS를 별도의 도메인으로 분리하는 작업을 전담하였습니다.
• 고객이 느끼는 가치를 높이기 위해 주도적으로 인터랙션을 추가해 유려하게 보일 수 있도록 노력했습니다.
• 홈페이지의 인증 정보를 공유할 수 있도록 저장 공간을 변경하고, 로직을 추가하였습니다.

백오피스

• 바로 옆의 사용자 행동을 관찰하여 form 입력 값 유지, enter 키 대응 등 사용자 경험을 증진시킬 수 있도록 주도적으로 나섰습니다.

멘토 페이지

• Nuxt.js로 개발되어 있는 레거시를 Next.js 환경으로 마이그레이션 했습니다.

App

• 환경 설정과 함께 WebView 기반의 개발을 전담했습니다.
• 어쩌면 지금까지의 경력 중 가장 큰 실패로 생각될 수 있는 프로젝트입니다.

프론트엔드 챕터

• PR의 작업 범위, diff 크기, 제목을 이용해 라벨링을 자동화해 PR의 시인성을 높이고, 개발자의 부담을 덜 수 있도록 노력했습니다.
  관련해 사내 블로그에 기고한 글은 다음 링크에서 확인하실 수 있습니다.
• 직렬적으로 동작하던 CI를 의존 관계에 따라 병렬적으로 동작하도록 변경해 CI 시간을 절반으로 단축시켜 개발자의 생산성을 높였습니다.
• stand alone 빌드 적용 및 배포 과정을 개선해 절반 이상의 시간으로 단축시켰습니다.
• staged된 파일에만 pre-commit git hook이 실행되도록 설정해, 커밋 시 불필요하게 소모되는 시간을 줄여 개발자의 생산성을 높였습니다.
• Vitest, Playwright를 이용해 테스트 환경을 구축하고 팀 내에 테스트 문화 도입을 위해 선행하고 있습니다.
• 매주 진행하는 프론트엔드 챕터 모임에서 팀원의 성장을 위해 새롭게 알게 된 내용 및 도구들을 가장 활발히 공유하며, 성장에 유리한 환경을 만들기 위해 노력합니다.

• 모노레포 패키지 분리 전략을 주도하였습니다.
• 사용자의 목소리를 적극 반영할 수 있는 환경을 만들기 위해 노력했습니다.
• 게이미피케이션이 가미된 프로젝트가 될 수 있도록 노력했습니다.

• 서비스를 이용한 제 커리어 명함은 다음 링크에서 확인하실 수 있습니다.
• 23년 7월 기준 일일 최대 사용자 540명 대를 기록하고 있습니다.
• 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
• 리뷰와 커리어 명함 페이지에 SSR을 적용하고, 오픈그래프 태그를 개별 사용자에 맞게 그려주어 SNS 공유를 효과적으로 할 수 있도록 하였습니다.
• 사용자별 동적 이미지를 서버 사이드에서 만들어 TTFB가 오래 걸리는 이슈를, API Route와 동적으로 요청하는 방법으로 변경해 830ms에서 200ms로 개선하였습니다.

• 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
• 웹뷰 형태의 RN 어플리케이션 개발을 주도했습니다.

• 깊은 인상을 남기며 정보를 효과적으로 전달하기 위해 인터랙티브하게 만들고자 노력하였습니다.
• 이미지 형식 변환, next/image의 priority, placeholder 옵션 등을 통해 FCP를 13.8초, TTI를 12초, LCP를 11.9초 감소시켰습니다.
• 클라이언트 사이드에서 다이내믹 라우팅되던 페이지들에 SSG를 적용해 TTI를 0.4초, LCP를 1.5초 감소시켰습니다.
• GA와 Hotjar를 도입해 사용자 경험과 트래픽을 추적하였습니다.
• Google Search Console을 도입해 모든 페이지의 색인이 생성되도록 해, 더욱 많은 검색에서 디프만이 노출되도록 하였습니다.
• 관련 개발기는 다음 링크에서 확인할 수 있습니다.

• 22년 7월 기준 앱 스토어 생산성 카테고리 113위를 달성했었습니다.
• 23년 7월 기준 MAU 200명대를 기록하고 있습니다.
• 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
• 지표를 근거로 회원가입 플로우의 리뉴얼을 리드해, 회원가입 시 이탈률을 30% 감소시켰습니다.
• 수집한 지표를 Mixpanel을 통해 시각화 및 분석하여 운영에 반영하고 있습니다.
• 이미지 저장 기능 개발기는 다음 링크에서 확인할 수 있습니다.

• 교내에 파편화되어 있는 개발 커뮤니티를 한곳으로 모아 더욱 많은 학우들이 지식을 나눌 수 있는 환경을 구성하는 것을 목표로 진행했습니다.
• 개발자로써의 성장과 함께 재미를 느낄 수 있도록 해커톤, 미니 프로젝트, 솔루션 챌린지 등 행사를 개최하고 운영하였습니다.
• 웹 개발이 낯선 멤버를 대상으로 JavaScript, React, TypeScript, Next.js 등을 강의하였습니다.
• 전체 멤버를 대상으로 '개발자로써 성장을 위해 노력했던 경험', '프로젝트 경험' 등을 공유해 제가 겪은 시행착오를 겪지 않을 수 있도록 노력했습니다.

• Next.js의 'getStaticProps', 'getStaticPaths'를 이용해 SSG로써 구현하였습니다.
• Unified, Rehype를 이용해 Markdown을 컴파일하였습니다.
• robots.txt, sitemap.xml과 같은 정적 파일 생성을 자동화하였습니다.
• 블로그와 이력서 간 동일한 설정, 컴포넌트를 재사용하기 위해 Turborepo를 사용해 모노레포를 구성하였습니다.
• 회고는 다음 링크에서 확인하실 수 있습니다.

• 동적이며 아름답게 보여짐과 동시에 관리에 용이할 것이라 판단하여 React와 Ink를 사용하였습니다.
• Shelljs를 이용해 git clone 후, fs 모듈을 이용해 파일을 수정하는 방법으로 개발하였습니다.
• Github actions를 이용해 릴리즈시 NPM에 배포되도록 CD를 구축하였습니다.
• 회고는 다음 링크에서 확인하실 수 있습니다.

• 3인 프로젝트에서 프론트엔드 개발을 전담하였습니다.
• 회고는 다음 링크에서 확인하실 수 있습니다.

프론트엔드 지식 공유

• 입문자를 대상으로 프론트엔드 지식 공유를 진행하였습니다.

RoR, Django 지식 공유

• 비전공자, 입문자를 대상으로 백엔드 지식 공유를 진행하였습니다.

• tsup을 이용해 ESM, CJS 형태로 빌드해 제공합니다.

• 자주 사용하며 선호하는 Eslint와 Prettier 설정을 패키지화 하였습니다.
• 깃허브 릴리즈 시 배포되도록 CD를 구성하였습니다.

• 책, 강의, 멘토링 등 다양한 경로로 배우는 것을 정리하고 있습니다.
• 짧은 팁 혹은 코드 조각을 이슈로 정리하고 있습니다.