프로젝트

• goormEXP

  구름, goormEXP SQD2023년 07월2024년 04월
  • goormEXP의 메인 랜딩 페이지를 한 스프린트만에 개발했을 정도로 높은 퍼포먼스를 유지했습니다.
  • Storybook 도입을 건의, 개발 환경을 구축하고, TypeScript으로의 마이그레이션을 주도했습니다.
  • 불필요한 작업을 최소화하기 위해 수정이 필요한 곳의 autofix가 가능한 ESLint Custom Rule을 개발, 도입하고 Lint Rule을 구조화했습니다.
  • SSR / SSG 환경에서 다국어 지원에 대응했습니다.

  게이미피케이션을 통해 구성원의 퍼포먼스를 이끌어내는 플랫폼인 goormEXP의 유지보수 및 개발을 맡았습니다. 팀의 프론트엔트 개발 환경 개선에 주력했습니다.

  • goormEXP 메인 랜딩 페이지
  • Next.js
  • Storybook
  • TypeScript
  • ESLint

• Goorm Design System (GDS)

  구름2023년 07월2024년 04월
  • Bootstrap을 변형해 사용하고 있던 goormstrap을 GDS 모노레포에 통합, GitHub Actions를 통한 테스트 버전 배포 방법을 구축하는 등 DX를 개선했습니다.
  • JS로 작성된 기존의 GDS를 TypeScript로 마이그레이션하는 작업에 기여했습니다.
  • 굉장히 복잡한 인터렉션이 필요한 간트 차트 라이브러리를 개발했습니다. Windowing 기법을 활용해 성능을 최적화했으며, 태스크 바의 드래그 앤 드롭이 가능합니다.

  사내 디자인 시스템 라이브러리인 Goorm Design System의 유지보수 및 개발을 맡았습니다.

  • React.js
  • TypeScript
  • Monorepo
  • Rollup
  • Sass

• utility-class-components

  개인 프로젝트2023년 05월2023년 06월

  import { utld, ud } from "utility-class-components";
  
  const Container = utld.div<{ $isRed: boolean }>`
    flex
    text-bold
  
    ${({ $isRed }) => $isRed && "text-red-500"}
  `;
  
  function Page() {
    return <Container $isRed={true}>AWESOME!!</Container>;
  }

  import { utld, ud } from "utility-class-components";
  
  const Container = utld.div<{ $isRed: boolean }>`
    flex
    text-bold
  
    ${({ $isRed }) => $isRed && "text-red-500"}
  `;
  
  function Page() {
    return <Container $isRed={true}>AWESOME!!</Container>;
  }

  • BundlePhobia 기준 3.8KB의 작은 번들 사이즈를 달성했습니다.

  개인 블로그를 Next.js 13 버전의 App Router로 마이그레이션 하며 개발한 라이브러리입니다. 대부분의 CSS in JS 라이브러리는 React Context API를 사용해 React Server Component(RSC)에서 사용하기 어려웠기에, TailwindCSS로 스타일링 라이브러리를 바꾸며 '유틸리티 클래스를 CSS in JS처럼 다룰 수 있으면 좋겠다'는 아이디어에서 시작했습니다. 이 프로젝트를 통해 RSC의 사용에 대해 깊게 고민했고, 덕분에 오픈소스 프로젝트(chakra-ui/panda, TanStack/query)에 기여하는 소중한 경험을 할 수 있었습니다.

  • GitHub
  • npm 배포
  • React.js
  • TypeScript

• 기술 블로그

  개인 프로젝트2022년 08월진행중
  • Next.js 12버전으로 시작했던 프로젝트를 13으로 업그레이드 하며, Server Component 스타일링을 더 편하게 하기 위해 utility-class-components 라이브러리를 개발했습니다.
  • Firebase SDK를 직접 사용하다가 API Route로 리팩토링 하며 React Query와 Suspense를 활용해 로딩 및 에러 처리 로직을 개선했습니다.
  • Lighthouse 기준 Accessibility, SEO 점수 100점을 유지하고 있습니다.
  • 복잡한 형태의 Conditional Rendering이 일어나는 댓글 컴포넌트를 객체를 사용한 설계로 리팩토링해 코드 가독성을 높였습니다.
  • 블로그 내 게시물 검색 기능을 구현했으며, API Call 최적화 및 어뷰징 방지를 위해 디바운싱을 적용하는 등 지속해서 기능을 개선 및 추가하고 있습니다.
  • 게시물의 썸네일을 자동으로 생성합니다.

  저만의 색깔을 나타낼 수 있도록 모든 부분을 직접 개발한 블로그입니다. 지속해서 리팩토링하며 컴포넌트 설계의 테스트베드로 활용하고 있습니다.

  • GitHub
  • 블로그 링크
  • 추천글: CSS-in-JS와 서버 컴포넌트
  • Next.js
  • TypeScript
  • styled-components
  • Node.js
  • Firebase