안녕하세요, 저는 오혜성입니다.
저는 인간적 성장을 통해 멋진 사람 그리고 좋은 아버지가 되는 것이 목표입니다.
'프로'다움은 책임감에서 나오며,
일에 대한 책임감을 통해 인간적 성장을 이룰 수 있다고 믿습니다.
링크
- Github: github.com/hyesungoh
- Blog: www.hyesungoh.xyz
- LinkedIn: www.linkedin.com/in/hyesungoh414
- Email: haesungoh414@gmail.com
경력
F-Lab & Company
2023.06 ~ 프론트엔드 개발자24년 3월부터 사내 1인 프론트엔드 개발자로써, 클라이언트 개발을 전담하고 있습니다.
프론트엔드 챕터
프론트엔드 개발자의 생산성과 환경을 위해 노력했습니다.- PR의 작업 범위, diff 크기, 제목을 이용해 라벨링을 자동화해 PR의 시인성을 높이고, 개발자의 부담을 덜 수 있도록 노력했습니다.
- 직렬적으로 동작하던 CI를 의존 관계에 따라 병렬적으로 동작하도록 변경해 CI 시간을 절반으로 단축시켜 개발자의 생산성을 높였습니다.
관련해 사내 블로그에 기고한 글은 다음 링크에서 확인하실 수 있습니다. - stand alone 빌드 적용 및 배포 과정을 개선해 기존 50분, 14분 소요되던 과정을 8분으로 단축시켰습니다.
- Vitest, Playwright를 이용해 테스트 환경을 구축하고 팀 내에 테스트 문화 도입을 위해 선행하고 있습니다.
- 매주 진행하는 프론트엔드 챕터 모임에서 팀원의 성장을 위해 새롭게 알게 된 내용 및 도구들을 가장 활발히 공유하며, 성장에 유리한 환경을 만들기 위해 노력했습니다.
Yarn BerryYarn WorkspacesVitestReact Testing LibraryCodecovPlaywrightGithub actionsHusky
근거를 기반으로 홈페이지를 유지보수합니다.
- 섹션과 페이지 별 머물렀던 시간과 스크롤 정도를 기록할 수 있는 트래킹 시스템을 선언적으로 구축하도록 노력했습니다.
- 인증 정보를 포함해, 초기 렌더링에 필요한 값들을 dehydrate, 초기 전역 상태에 저장해 사용자 경험을 개선했습니다.
- 블로그 개별 페이지의 SSR시 컨텐츠 내용을 조회하도록 수정해 라이트하우스 기준 성능 점수 32점 상승 및 처음으로 그려지는 HTML에 데이터를 노출해 SEO에 이점이 있도록 노력했습니다.
- 프론트엔드 코스의 그로스 작업에 참여해 기획 및 개발을 주도했으며 AB 테스트를 통해 효과를 검증해나가 전환률을 3% 상승시키는 성과를 거두었습니다.
- Sentry를 부착해 에러 모니터링 환경을 구축하였습니다.
Next.jsTypeScriptYarn BerryYarn WorkspacesEmotionRecoilTanStack/React QueryFramer-motionSentry
F-Lab Design System
- 초기 환경을 구축하고, 스토리북 및 크로마틱을 설정하였습니다.
- Type-Safe하게 다형성을 지원하기 위해 노력하였으며 관련 경험을 사내 블로그에 기고하였습니다.
TypeScriptReactEmotionStorybookChromatic
LMS
멘티님들께서 학습 시에 사용하는 Learning Management System입니다.- 홈페이지의 하위 디렉토리에 있던 LMS를 별도의 도메인으로 분리하는 작업을 전담하였습니다.
미들웨어를 사용해 이미 사용되고 있는 링크도 동작할 수 있도록 했습니다. - 홈페이지의 인증 정보를 공유할 수 있도록 저장 공간을 변경하고, 로직을 추가하였습니다.
- 고객이 느끼는 가치를 높이기 위해 주도적으로 인터랙션을 추가해 유려하게 보일 수 있도록 노력했습니다.
TypeScriptNext.jsEmotionReact Hook Form
백오피스
운영에 소모되는 자원을 줄이기 위한 백오피스 서비스입니다.- 바로 옆의 사용자 행동을 관찰하여 form 입력 값 유지, enter 키 대응 등 사용자 경험을 증진시킬 수 있도록 주도적으로 나섰습니다.
TypeScriptNext.jsEmotionReact Hook FormAntd
멘토 페이지
F-Lab의 멘토님들께서 사용하실 수 있는 서비스입니다.- 대시보드의 각 섹션을 병렬적으로 처리하며, 스켈레톤을 적용해 사용자 경험을 개선했습니다.
TypeScriptNext.jsEmotionReact Hook FormAntd
조직
2023.06 ~ 개발 이외에 회사에 기여할 수 있는 것을 찾아 하였습니다.- 정기적으로 만들었던 기능의 지표를 보며, 메이커들에게 효능감을 주고 앞으로의 방향성을 생각할 수 있는 시간을 만들어 운영하고 있습니다.
- 회사의 인지도를 위해 연합 동아리들과 직접 연락해 계약을 체결하고 필요한 지원을 제공하고 있습니다.
- 해커톤 행사를 주도적으로 기획하고 운영한 경험이 있습니다.
- 컬쳐핏 인터뷰를 리드하고 있습니다.
Yarn BerryYarn WorkspacesVitestReact Testing LibraryCodecovPlaywrightGithub actionsHusky
사이드 프로젝트
git-goods
2024.06 ~오버엔지니어링을 '지향'하며, github와 관련된 서비스를 만드는 그룹입니다.
2024.06 ~ 커밋을 통해 동물을 키우고, 동물이 포함된 이미지를 제공하는 서비스입니다.
- Zod의 타입 검증과 Axios method를 추상화한 유틸을 개발해 레이어 간 타입 검증을 쉽게 할 수 있도록 하였습니다.
- 모노레포 패키지 분리 전략을 주도하였습니다.
- 사용자의 목소리를 적극 반영할 수 있는 환경을 만들기 위해 노력했습니다.
Next.jsTypeScriptTurborepoTanStack/React QueryPNPMpanda-cssJotaiFramer-motionVercelZod
무한도전
2023.12 ~개발 서적 스터디 그룹을 운영하고 있습니다.
2023.12 ~
- 리액트, 함수형 프로그래밍과 같은 기술에 대한 서적부터 소프트 스킬에 대한 서적까지 함께 읽으며 스터디를 운영하고 있습니다.
- 만족도 조사, 회고를 통해 더 효과적으로 공부할 수 있는 스터디 그룹이 될 수 있도록 노력하고 있습니다.
디프만
2022.03 ~ 2023.08개발자 및 운영진직장인부터 학생까지의 디자이너와 개발자들이 만나 서비스 런칭을 목표로 하는 연합 동아리입니다.
2023.4 ~ 동료의 익명 피드백을 모아 직무 강점을 찾는 웹 서비스입니다.
- 서비스를 이용한 제 커리어 명함은 다음 링크에서 확인하실 수 있습니다.
- 23년 7월 기준 일일 최대 사용자 540명 대를 기록하고 있습니다.
- 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
- 리뷰와 커리어 명함 페이지에 SSR을 적용하고, 오픈그래프 태그를 개별 사용자에 맞게 그려주어 SNS 공유를 효과적으로 할 수 있도록 하였습니다.
- 사용자별 동적 이미지를 서버 사이드에서 만들어 TTFB가 오래 걸리는 이슈를, API Route와 동적으로 요청하는 방법으로 변경해 830ms에서 200ms로 개선하였습니다.
Next.jsTypeScriptYarn BerryEmotionStylelintFramer-motionTanStack/React QueryStorybookChromaticVitestReact Testing LibraryCodecovPlaywrightGithub actionsVercelCodechecksCodeQLHuskyGAHotjarMixpanelSentry
2022.10 ~ 소지품 리마인드를 위한 웹뷰 기반 모바일 서비스입니다.
- 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
- 웹뷰 형태의 RN 어플리케이션 개발을 주도했습니다.
Next.jsReact-NativeTypeScriptYarn BerryEmotionFramer-motionRecoilTanStack/React QueryJestReact Testing LibraryCodecovPlaywrightGithub actionsCodeQLHuskyGAHotjarMixpanelSentryCloudflare Pages
2022.08 ~ 2023.04디프만의 공식 랜딩 페이지입니다.
- 깊은 인상을 남기며 정보를 효과적으로 전달하기 위해 인터랙티브하게 만들고자 노력하였습니다.
- 이미지 형식 변환, next/image의 priority, placeholder 옵션 등을 통해 FCP를 13.8초, TTI를 12초, LCP를 11.9초 감소시켰습니다.
- 클라이언트 사이드에서 다이내믹 라우팅되던 페이지들에 SSG를 적용해 TTI를 0.4초, LCP를 1.5초 감소시켰습니다.
- GA와 Hotjar를 도입해 사용자 경험과 트래픽을 추적하였습니다.
- Google Search Console을 도입해 모든 페이지의 색인이 생성되도록 해, 더욱 많은 검색에서 디프만이 노출되도록 하였습니다.
- 관련 개발기는 다음 링크에서 확인할 수 있습니다.
Next.jsTypeScriptEmotionFramer-motionGithub actionsnext-sitemapGAHotjarHuskyVercel
2022.03 ~ 영감을 기록하는 모든 이들을 위한 아카이빙 서비스이며, 웹뷰 기반 모바일 플랫폼으로 제공됩니다.
- 22년 7월 기준 앱 스토어 생산성 카테고리 113위를 달성했었습니다.
- 23년 7월 기준 MAU 200명대를 기록하고 있습니다.
- 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
- 지표를 근거로 회원가입 플로우의 리뉴얼을 리드해, 회원가입 시 이탈률을 30% 감소시켰습니다.
- 수집한 지표를 Mixpanel을 통해 시각화 및 분석하여 운영에 반영하고 있습니다.
- 이미지 저장 기능 개발기는 다음 링크에서 확인할 수 있습니다.
Next.jsReact-NativeTypeScriptYarn BerryEmotionFramer-motionTanStack/React QueryRecoilJestReact Testing LibraryCodecovCypressGithub actionsCodeQLGAHotjarMixpanelSentryHuskyCloudflare Pages
블로그, 이력서 템플릿
2022.03 ~ 오픈소스 프로젝트2022.03 ~ 블로그와 이력서를 같은 스타일로 관리하고자 개발하였습니다.
- Next.js의 'getStaticProps', 'getStaticPaths'를 이용해 SSG로써 구현하였습니다.
- Unified, Rehype를 이용해 Markdown을 컴파일하였습니다.
- robots.txt, sitemap.xml과 같은 정적 파일 생성을 자동화하였습니다.
- 블로그와 이력서 간 동일한 설정, 컴포넌트를 재사용하기 위해 Turborepo를 사용해 모노레포를 구성하였습니다.
- 회고는 다음 링크에서 확인하실 수 있습니다.
Next.jsTypeScriptNextUITurborepoKBarGAHotjarVercelGithub actionsJestReact Testing LibraryCypress
2022.06 ~ comet-land 프로젝트를 더욱 쉽게 시작할 수 있는 CLI 어플리케이션입니다.
- 동적이며 아름답게 보여짐과 동시에 관리에 용이할 것이라 판단하여 React와 Ink를 사용하였습니다.
- Shelljs를 이용해 git clone 후, fs 모듈을 이용해 파일을 수정하는 방법으로 개발하였습니다.
- Github actions를 이용해 릴리즈시 NPM에 배포되도록 CD를 구축하였습니다.
- 회고는 다음 링크에서 확인하실 수 있습니다.
ReactTypeScriptInkShelljsWebpackGithub actions
그 외 프로젝트
2023.09 ~ 2023.09카카오톡과 같은 인앱 브라우저에서 외부 브라우저를 열 수 있도록 도와주는 라이브러리입니다.
- tsup을 이용해 ESM, CJS 형태로 빌드해 제공합니다.
Yarn BerryReacttsupEslintPrettier
2023.01 ~ 2023.02
- 자주 사용하며 선호하는 Eslint와 Prettier 설정을 패키지화 하였습니다.
- 깃허브 릴리즈 시 배포되도록 CD를 구성하였습니다.
Yarn BerryEslintPrettierRollupGithub actions
2021.04 ~
- 책, 강의, 멘토링 등 다양한 경로로 배우는 것을 정리하고 있습니다.
- 짧은 팁 혹은 코드 조각을 이슈로 정리하고 있습니다.
그 외 경험
Toss Frontend Accelerator
2024.07 ~ 2024.084주 동안 토스 프론트엔드 리드와 멘토-멘티의 관계를 맺어 학습하는 프로그램입니다.
- 우수 수료생으로 선정되었습니다.
2024.08 ~ Contributor
빠른 성능과 작은 번들 사이즈를 자랑하는 JavaScript 유틸리티 라이브러리입니다.
2024.08not merged yet
- 드래그 이후 클릭을 하는 경우 정상적으로 동작하지 않는 문제를 해결하는 PR을 작성하였습니다.
- PR 링크: https://github.com/framer/motion/pull/2758
오픈 소스 문서 기여
오픈 소스 및 생태계에 관심을 가지며, 간단한 문서 수정을 통해 기여한 경험이 있습니다.
- chakra-ui/panda, PR 링크: https://github.com/chakra-ui/panda/pull/2769
- toss/overlay-kit, PR 링크: https://github.com/toss/overlay-kit/pull/36
- pnpm/action-setup, PR 링크: https://github.com/pnpm/action-setup/pull/129
- pmndrs/drei, PR 링크: https://github.com/pmndrs/drei/pull/1855
- kbar, PR 링크: https://github.com/timc1/kbar/pull/298
- labeler, PR 링크: https://github.com/srvaroa/labeler/pull/87
- toss/slash, PR 링크: https://github.com/toss/slash/pull/70
- react-router, PR 링크: https://github.com/remix-run/react-router/pull/8666
2024.04Contributor
React transition 시 progress bar를 보여주는 오픈소스 프로젝트에 기여하였습니다.
- startTransition과 useTransition의 type 이슈 수정을 위해 @types/react의 버전을 업그레이드하였습니다.
- 예제에서 useTransition을 사용하는 부분의 코드를 수정하였습니다.
- PR 링크: https://github.com/vercel/react-transition-progress/pull/7
Software Maestro Expert
2022.06 ~ 13기, 14기, 15기 Expert연수생이 보다 개발에 몰입할 수 있도록 도움을 주는 활동에 참여해 후배 개발자 양성에 기여하고 있습니다.
2022.02Contributor
더미 데이터를 제공하는 오픈소스 프로젝트에 기여하였습니다.
- 한국어 정보를 추가, 잘못된 정보를 수정하였습니다.
- PR 링크: https://github.com/faker-js/faker/pull/573
2021.10Contributor
동영상 플레이어를 제공하는 오픈소스 프로젝트에 기여하였습니다.
- 동영상 재생 중에 호출되는 callback인 onProgress의 Props에 대한 interface를 정의하였습니다.
- PR 링크: https://github.com/cookpete/react-player/pull/1342
2021.04Contributor
블로그 테마 오픈소스 프로젝트에 기여하였습니다.
- SEO를 위해 robots.txt 플러그인을 적용하였습니다.
PR 링크: https://github.com/JaeYeopHan/gatsby-starter-bee/pull/247 - Social media section에 Instagram을 추가하였습니다.
PR 링크: https://github.com/JaeYeopHan/gatsby-starter-bee/pull/246
기술
의사소통
- 함께 일하고 싶은 사람은 신뢰에서 나온다고 믿으며, 이를 위해 빠른 실행력과 근거 기반의 의사소통을 위해 노력합니다.
- 팀 내 공통된 목표가 원활한 의사소통과 높은 생산성을 만든다고 믿습니다.
- 내가 모르는 것은 솔직하게 모른다고 말할 수 있는 용기를 위해 노력합니다.
- 백문이 불여일견을 믿어, 다양한 도구와 방법으로 의사소통하는 것을 좋아합니다.
HTML/CSS
- 의미있는 마크업을 작성하기 위해 노력합니다.
- CSS 전처리기와 CSS in JS에 익숙합니다.
- Zero Runtime CSS in JS 도구가 해결하고자 하는 문제를 알며, Vanilla Extract와 panda-css를 사용해본 경험이 있습니다.
- 검색 엔진 최적화 경험과 Sitemap.xml, Robots.txt를 통해 네이버, 구글에서 검색되도록 지원해본 경험이 있습니다.
JavaScript
- ES6 이후의 문법에 익숙합니다.
- Vanilla JavaScript를 사용해 개인 프로젝트를 진행한 경험이 있습니다.
TypeScript
- JavaScript보다 TypeScript 개발환경에 익숙합니다.
- Type-Safe하게 개발하는 것을 지향합니다.
- 유틸리티 타입, 제네릭, 서로소 타입 등을 이용해 타입을 좁히고, 정의하는 것에 익숙합니다.
비동기
- Async Await 문법에 익숙합니다.
- Data caching, revalidate를 이유로 Data fetching 라이브러리 TanStack/React Query, SWR을 사용한 경험이 있습니다.
React
- 함수 컴포넌트와 Hooks를 사용하는 것에 익숙합니다.
- Suspense와 Error Boundary를 사용해 선언적으로 코드를 작성하는 것을 좋아합니다.
- 프레임워크로써 Next.js 환경을 선호합니다.
- Next.js를 사용해 요구사항에 따라 적절한 렌더링 방법(CSR, SSR, SSG, ISR)을 선택할 수 있습니다.
- Recoil과 Jotai를 이용해 전역 상태를 관리한 경험이 있습니다.
Test
- Jest, Vitest 그리고 React Testing Library를 이용해 테스트 코드를 작성한 경험이 있습니다.
- Cypress, Playwright을 이용해 E2E 테스트 코드를 작성한 경험이 있습니다.
- 개발자의 용기를 높여주는 테스트 코드를 위해 고민합니다.
DevOps
- 자동화를 통해 생산성을 높히는 것을 좋아합니다.
- Github actions를 이용한 CI/CD에 익숙합니다.
- 간단한 AWS IAM 설정, S3, CloudFront, EC2, ECS 사용 경험이 있습니다.
기타
- Google Developer Group on Campus Lead
- Software Maestro 12기 수료
- 성공회대학교 소프트웨어공학과 졸업
- 한국게임과학고등학교 프로그래밍학과 졸업
- 1998년 4월 14일생