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

선언적으로 개발하기 위해 노력합니다

• 멘티와 멘토용 플랫폼의 다기능 대시보드를 개발했습니다. Suspense와 Error Boundary를 활용해 선언적인 로딩 및 에러 처리를 구현했으며, Suspensive의 wrap api를 통해 컴포넌트의 책임을 명확히 분리하여 결합도를 낮췄습니다.
• 판매 페이지의 섹션별 이벤트 추적 시 발생하는 관심사 분리 문제를 해결하기 위해, 섹션의 체류 시간과 페이지 스크롤 정도를 기록하는 선언적 트래킹 컴포넌트를 구현했습니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상시켰습니다.
• 인터랙션을 선언적으로 만들 수 있는 framer-motion을 선호하며, 내부 동작의 버그를 찾아 PR을 작성한 경험이 있습니다.

서버 사이드 동작에 익숙합니다

• 홈페이지 초기 렌더링 시 사용자 인증 정보를 포함해 초기 렌더링에 필요한 데이터가 누락되어 발생하는 UI 깜빡임 문제를 해결했습니다. 서버 사이드에서 초기 상태를 조회 및 dehydrate하여 클라이언트의 전역 상태와 React Query 캐시로 hydrate함으로써 매끄러운 사용자 경험을 구현했습니다.
• 블로그 개별 페이지의 SSR 시 컨텐츠를 서버에서 조회하도록 개선했습니다. 이를 통해 라이트하우스 성능 점수를 32점 향상시켰고, 초기 HTML에 컨텐츠를 포함시켜 SEO를 최적화했습니다.
• 홈페이지의 사용자 인증 정보를 멘티 플랫폼과 공유할 수 있도록 localStorage에서 쿠키로 마이그레이션했습니다. 과정 중 iframe을 이용한 방법을 시도했으나, 사파리 브라우저에서 발생하던 브라우저와 iframe 간 localStorage 불일치 문제를 해결하기 위해 쿠키를 이용했으며 이를 통해 크로스 브라우저 호환성을 개선했습니다.

Type-Safe한 코드를 작성합니다

• 디자인 시스템 컴포넌트에 Type-Safe한 다형성을 구현했습니다. 'as' prop에 따라 컴포넌트의 props가 정확히 타입 추론되도록 하여 개발자 경험을 개선했으며, 이 경험을 공유하는 글을 사내 블로그에 작성했습니다.
• OpenAPI 스펙을 활용하여 API 레이어 유틸리티와 타입을 자동 생성하는 시스템을 구축했습니다. 메타 프로그래밍 기법을 적용해 타입 추론을 고도화하여 개발 생산성과 타입 안정성을 크게 향상시켰습니다.

프론트엔드 챕터

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

조직

• 서비스의 VOC, 오류 리포트에 적극 참여해 기여함과 동시에 도메인 지식을 습득합니다.
• 정기적으로 만들었던 기능의 지표를 보며, 메이커들에게 효능감을 주고 앞으로의 방향성을 생각할 수 있는 시간을 만들어 운영하고 있습니다.
• 회사의 인지도를 위해 연합 동아리들과 직접 연락해 계약을 체결하고 필요한 지원을 제공하고 있습니다.
• 해커톤 행사를 주도적으로 기획하고 운영한 경험이 있습니다.
• 컬쳐핏 인터뷰를 리드하고 있습니다.

• 리액트, 함수형 프로그래밍과 같은 기술에 대한 서적부터 소프트 스킬에 대한 서적까지 함께 읽으며 스터디를 운영하고 있습니다.
• 만족도 조사, 회고를 통해 더 효과적으로 공부할 수 있는 스터디 그룹이 될 수 있도록 노력하고 있습니다.

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

• 깊은 인상을 남기며 정보를 효과적으로 전달하기 위해 인터랙티브하게 만들고자 노력하였습니다.
• 이미지 형식 변환, 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위를 달성했었습니다.
• 출시 이후 꾸준히 MAU 200명대를 기록하고 있습니다.
• 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
• 지표를 근거로 회원가입 플로우의 리뉴얼을 리드해, 회원가입 시 이탈률을 30% 감소시켰습니다.
• 수집한 지표를 Mixpanel을 통해 시각화 및 분석하여 운영에 반영하고 있습니다.
• 이미지 저장 기능 개발기는 다음 링크에서 확인할 수 있습니다.

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

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

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

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

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