사용자의 음성이 인식되고 있다는 것을 표현하기 위해 Oscillator 컴포넌트를 만들었습니다. 음성이 인식되고 있다는 것을 사용자에게 피드백하기 위해 위와 같은 컴포넌트를 디자인 했습니다.이 디자인의 핵심은 사용자의 음성을 주파수의 파형으로 보여주는 오실리에이터입니다. 오실리에이터를 제가 어떻게 구현했는지 설명드리겠습니다. 1. Media Capture and Streams API를 사용하여 음성데이터 가져오기사용자의 음성을 시각화하는 것이므로 가장 먼저 해야하는 것은 음성 데이터를 가져오는 것입니다. 이를 위해 Media Capture and Streams API의 MediaDevices의 getUserMedia 메서드를 사용하여 마이크 권한을 요청하고 반환값으로 MediaStream을 받습니다.co..

Claude Code에게 오래 걸리는 작업을 명령한 후, 작업이 완료되기만을 기다리며 화면만 바라본 경험이 있지 않으신가요? 저 역시 /init 같은 명령어를 입력하고 작업이 끝날 때까지 무작정 기다린 적이 있습니다. 하지만 이 시간이 아깝지 않나요? Claude가 작업을 빠르게 마친다면 문제없겠지만, 오랜 시간이 걸린다면 그 시간 동안 다른 일을 하는 것이 훨씬 생산적일 것입니다. 이를 위해 Claude code에서는 알림을 설정할 수 있습니다.알림 설정 방법은 2가지 방법으로 할 수 있습니다.terminal의 알림 기능 사용하기 (iterm2만 가능)Claude code 훅 사용하기 Terminal의 알림 기능 사용하기terminal의 notification 기능을 사용하는 것은 iterm2만 가능합..

이번 일주일 동안 저번 포스팅에서 만든 UI 라이브러리를 가지고 압축 사이트를 만들었습니다.https://www.runzipper.app/ RunzipperZIP, TAR, TAR.GZ 형식을 지원하는 브라우저 기반 파일 압축 및 아카이브 도구입니다. 서버 업로드 없이, 설치 불필요하며, 완벽한 개인정보 보호를 제공합니다. 모든 압축 처리는 사용자의 기기에서www.runzipper.app 제가 이 프로젝트를 시작한 계기는 간단한 툴을 웹서비스 형태로 제공하여 방문자수를 모니터링하고 싶어서였습니다.이 서비스를 사용하는 사람이 충분하다면 광고를 추가하여 수익을 창출하는 것도 고려하고 있습니다. ❓ 다양한 툴 중에 왜 압축 사이트를 만들었나요?일반 컴퓨터 사용자는 보통 압축, 압축해제를 하려면 반디집 같은 압..

2025.12.02 - [개발] - [vite] vite로 라이브러리 빌드하기 [vite] vite로 라이브러리 빌드하기최근 제가 사이드 프로젝트로 진행하는 프로젝트에서 사용할 목적으로 UI 컴포넌트 라이브러리를 만들었습니다. UI 컴포넌트를 만들 때, 프로젝트를 vite의 react 템플릿을 사용하여 생성하였습니bobostown.tistory.com 이전에 vite로 라이브러리를 빌드한 경험을 포스팅으로 남겼는데요,라이브러리를 실제로 사용해 보니 다양한 버그에 부딪쳤습니다. 그중에서도 가장 심각했던 버그는 제네릭 컴포넌트에서 타입 추론이 제대로 동작하지 않는 것이었습니다. 문제상황예를 들어, 다음과 같은 컴포넌트가 있습니다: 이용약관 이 컴포넌트는 'p', 'span', 'label' 등 다양한..

2025년 12월 6일에 인천 송도에서 열린 DevFest에 다녀왔습니다. 이번 DevFest에서는 웹 프론트엔드, 백엔드, AI, 플러터 등 다양한 주제의 세션이 열렸습니다. 저는 오늘 열리는 세션중에 "의 추억", "모던 자바스크립트 패키지 개발하기", "이력서 첨삭 세션"을 청강하였습니다. 세션에 들어가기에 앞서 네트워킹 존에서 열리는 다양한 이벤트에 참여했습니다.네트워킹 존에는 모두의 연구소, Upstage, Mondiran AI 등 기업들의 부스가 있어서 간단한 설명을 들으면 소정의 경품을 받을 수 있었습니다. 부스행사 참여후에 첫 번째 세션인 의 추억: HTML부터 RHF, Server Actions까지를 청강했습니다. 의 추억: HTML부터 RHF, Server Actions 해당 세션에서는..

최근 제가 사이드 프로젝트로 진행하는 프로젝트에서 사용할 목적으로 UI 컴포넌트 라이브러리를 만들었습니다. UI 컴포넌트를 만들 때, 프로젝트를 vite의 react 템플릿을 사용하여 생성하였습니다.vite로 라이브러리를 빌드할 때는 react web app을 빌드할 때와 달리 추가적인 설정이 필요합니다. 아래 제가 vite로 라이브러리를 build 하며 겪었던 과정을 말씀드리겠습니다. 라이브러리 entry point 만들어주기vite의 react 템플릿을 사용하여 프로젝트를 생성했을 때, vite는 index.html을 entry point로 하여 프로젝트를 빌드합니다.하지만 저희는 UI 라이브러리를 만드는 것이기 때문에 index.html이 존재하지 않습니다. 그래서 저는 src 디렉토리 하위에 ma..

최근 개인적으로 사용할 UI 라이브러리를 개발해서 배포할 상황이 있었습니다. 이 라이브러리는 제가 특정 프로젝트에 사용할 용도로 만들었기 때문에 npm registry에 public으로 배포하는 것은 적절하지 않았습니다.그렇다고 npm registry에 private으로 배포하자니, 유료 플랜(7$)를 사용해야 해서 이 또한 선택지에서 제외했습니다. 그래서 github packages를 사용하여 private package로 배포하기로 결정했습니다. Github packages 란?GitHub Packages는 컨테이너 및 기타 종속성을 포함한 패키지를 호스팅 하고 관리하는 플랫폼입니다.GitHub Packages는 소스 코드와 패키지를 한 곳에 통합하여 권한 관리 및 결제를 제공하므로 GitHub에서 ..

peer dependency는 어떠한 상황에서 사용할까?지금까지 개발하면서 peer dependency에 대해 몰랐는데, 최근 UI 라이브러리를 개발하면서 이에 대해 학습하였습니다. UI 라이브러리는 React를 사용하여 개발했습니다. 그런데 이 라이브러리를 설치하는 프로젝트에도 이미 React가 설치되어 있다면, React가 중복으로 설치되는 문제가 발생합니다. 이 같은 문제를 해결하는 것이 peer dependency입니다. peer dependency는 "이 라이브러리를 사용하려면 특정 패키지가 필요합니다"라고 명시하는 방법입니다. 패키지를 직접 포함하지 않고. 사용자가 이미 설치했을 것으로 기대하는 의존성을 표시합니다. 실제로 프로젝트에 적용한 방법을 통해 설명하겠습니다.프로젝트 예시peer de..

React에서 어떤 요소를 상황에 따라 보여주거나 숨길 때 어떤 방식을 사용하나요?다음과 같이 조건부 렌더링을 하지 않으신가요?return ( {isShowing && )저도 위와 같은 방법을 많이 사용합니다,그런데 위와 같은 방법은 시나리오에 따라 문제가 발생할 소지가 있습니다. 기존 조건부 렌더링의 문제기존 조건부 렌더링의 문제를 설명하기 위해 예시 코드를 작성해 봤습니다. ">이 예시에서는 숫자를 증가시키거나 줄일 수 있는 카운터가 있고, 이 카운터를 토글 할 수 있는 버튼이 있습니다. 자식 컴포넌트의 상태가 유지되지 않습니다.카운터를 열고, 숫자를 증가시키거나 감소 후에 카운터를 닫습니다.다시 카운터를 열면 카운터는 기존에 내가 조작했던 숫자가 아닌, 0으로 초기화가 되었을 겁..

초기 미션 목표압축/압축해제 프로그램의 구현 방법에는 크게 2가지가 있습니다.여러 파일 들을 각자 압축 후 하나의 파일로 합치기 (zip 방식)여러 파일 들을 하나의 파일로 합치고, 이 파일을 압축하기 (tar.gz 방식)처음 프로젝트를 구상할 때는 2번 방식으로 구상했지만,제가 최종적으로 만들고 싶은 것은 zip 압축 프로그램이어서 1번 방식으로 선회했습니다. 여기서 저는 의문이 들었습니다.여러 파일 들을 각자 압축하는 것은 쉽습니다.하지만 압축된 파일들을 어떻게 하나로 합치고,압축해제 시에 합쳐진 파일들은 어떻게 다시 여러 파일들을 나눌 수 있을까? 그래서 인터넷에 자료를 찾아보다가 ZIP의 specification에서 해답을 찾을 수 있었습니다. 여러 파일들을 하나의 파일로 합치는 법ZIP 포맷을 ..