프로젝트

• @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와 서버 컴포넌트

• 카카오톡, 디스코드 코인 / NFT 정보 조회 챗봇

  2021년 06월2024년 04월
  • 최대 약 700여 명의 MAU 기록 (서비스 중단)
  • 코인 거래소별로 다른 API 명세에 대응하기 위한 normalizer를 구조적으로 설계
  • NFT 프로젝트 커뮤니티 관리를 위한 이벤트 기능, NFT 정보 검색 및 보유 중인 NFT 조회 기능을 탑재한 디스코드 봇을 개발해 약 2,800여 명의 사용자가 있는 디스코드 서버에서 실사용

  블록체인에 관심을 가져 개발한 챗봇입니다. 코인 가격 조회, NFT 가격 조회, 가격 변동 알람 등 20 ~ 30가지의 블록체인 투자 관련 기능을 가진 카카오톡 봇과, NFT 커뮤니티 관리를 위한 디스코드 봇입니다.

  • 카카오톡 봇 기능 설명