프로젝트

• @custardcream/msw-devtools

  2024년 09월진행중
  • MSW Request Handler 관리를 위한 프레임워크 독립적 DevTools 개발
  • UI를 통해 핸들러를 관리(추가, 수정, 삭제, 활성화/비활성화, 지연 처리) 할 수 있도록 구현
  • Mock Handler의 import/export 지원을 통해 테스트 환경 설정 간소화
  • Devtools를 위한 WebSocket 서버를 제공, Request Handler를 JSON 파일 형태로 관리

  서비스 개발 시 MSW Request Handler 관리에 불편함을 느껴 개발하고 있는 Devtools입니다.

  • GitHub
  • 데모

• 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처럼 다룰 수 있으면 좋겠다'는 아이디어에서 시작했습니다.

  • GitHub
  • npm 배포

• 기술 블로그

  2022년 08월진행중
  • Next.js 12버전으로 시작했던 프로젝트를 13으로 업그레이드 하며, Server Component 스타일링을 더 편하게 하기 위해 utility-class-components 라이브러리를 개발
  • Lighthouse 기준 Accessibility, SEO 점수 100점을 유지
  • 블로그 내 게시물 검색 기능을 구현했으며, API Call 최적화 및 어뷰징 방지를 위해 디바운싱을 적용하는 등 지속해서 기능을 개선 및 추가중
  • 게시물의 썸네일을 자동으로 생성

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

  • GitHub
  • 블로그 링크
  • 추천글: CSS-in-JS와 서버 컴포넌트