배경 출퇴근 중에 떠오르는 개발 아이디어를 즉시 구현까지 이어지게 하고 싶었다. Ghost Dev라는 프로젝트를 만들어서, 아이디어가 생기면 티켓을 생성하고 Claude API가 자동으로 기능을 구현해주는 흐름을 만들었다. 그런데 실행할 때마다 돈이 나간다. 토큰

React instrumentation encountered an error: Error: We are cleaning up async info that was not on the parent Suspense boundary. This is a bug in React.

요즘 Velog에 꾸준히 게시글을 올리려고 노력 중이다. 하지만 그동안 썸네일 없이 글을 올리다 보니, 나중에 목록을 확인할 때 해당 글이 어떤 내용을 담고 있는지 시각적으로 한눈에 들어오지 않았다. AI시대이니 이를 활용해 게시글의 내용을 요약하고 썸네일까지 자동으로

Claude와 같은 AI가 코드 작업을 할 때, 몇 가지 문제가 반복됐다.설계 없이 바로 구현에 들어가면 아키텍처 문제나 엣지 케이스를 놓치기 쉽고, 설계 결함은 구현 중간에 발견될수록 수정 비용이 기하급수적으로 늘어났다. 기분 탓인지 모르겠지만, 한 AI만 가지고 진

최근 개발 중인 AI 에이전트 'GhostDev'가 실행 도중 예기치 않게 종료되는 현상이 발생했습니다. 로그를 확인하니 다음과 같은 에러 한 줄만 남기고 프로세스가 종료되어 있었습니다.RetryError: Failed after 3 attempts.단순한 일시적 오류

최근 개인 프로젝트인 'Pin-Plate(맛집 기록 서비스)'를 개발하며 웹으로 만든 기능을 모바일 앱 내 웹뷰로 이식하는 작업을 진행했습니다.분명 웹 브라우저에서는 장소 검색 기능이 아주 잘 작동했는데, 유독 모바일 앱(안드로이드 웹뷰) 환경에서만 검색 결과가 빈 화

프론트엔드 개발을 하다 보면 피그마에서 아이콘을 가져오는 과정이 정말 번거롭다.아이콘 하나하나 Export 해서 다운로드하고, IDE 프로젝트 폴더에 옮기고, 파일명 컨벤션 맞추고, 다시 React 컴포넌트로 만드는 반복 작업을 하다보면 이 짓을 계속 해야 하나? 생각

사이드 프로젝트를 하다가 pr를 생성할때마다 내용을 작성하는게 귀찮아서 자동화 해줄 수 있는 방법이 없을까? 생각했다. 내가 commit을 올린 파일들을 기반으로 AI로 파일들의 내용을 요약하면 어떨까?먼저 github action이란 뭘까? GitHub Actions

apps/web 프로젝트에서 Vite/Rollup을 사용하여 프로덕션 빌드를 수행하던 중, 생성된 자바스크립트 에셋 파일에서 다음과 같은 Parse error가 발생하여 빌드가 실패했습니다.에러 로그:이 현상은 Rollup이 여러 모듈을 하나의 파일로 병합하고 압축하는

현재 사내 서비스에서는 Jira REST API와 연동하여 등록된 이슈의 상세 내용을 보여주는 기능을 제공하고 있습니다. Jira 이슈의 description에는 텍스트뿐만 아니라 여러 장의 이미지가 포함될 수 있습니다.하지만 기존 방식에는 두 가지 큰 문제점이 있었습

현재 회사 프로젝트는 안정적인 코드 품질 유지를 위해 husky를 이용한 pre-push 체크를 수행하고 있다. 하지만 체크 과정에서 약 4분 30초가 소요됨에 따라 개발자의 집중력이 저하되고 배포 흐름이 끊기는 문제가 발생하여 이를 최적화하기로 했다.빌드 관련 작업(

Promise와 같은 타입에 감싸인 타입이 있을 때, 안에 감싸인 타입이 무엇인지 어떻게 알 수 있을까요?정답PromiseLikePromise뿐만 아니라 then을 가진 커스텀 객체나 구형 라이브러리의 Promise까지 모두 포함. MyAwaited<U>만약 T가

배열(튜플) T를 받아 첫 원소의 타입을 반환하는 제네릭 First<T>를 구현하세요.정답infer FT extends \[infer F, …any\[]] ? F : never infer F 는 해당 원소 타입의 첫 부분을 이런 타입으로 받아오겠다는 뜻. T가 \

T에서 K 프로퍼티만 선택해 새로운 오브젝트 타입을 만드는 내장 제네릭 Pick<T, K>을 이를 사용하지 않고 구현하세요.정답keyof T여기서 keyof T가 핵심. K 는 T의 키의 일부여야하기 때문에 이러한 제약 조건을 둬야한다. Mapped Type K는

Storybook 8에서 9로 마이그레이션 하는겸 react 버전도 같이 올림 (18 → 19)기본적으로 크게 달라진건 @storybook/blocks 제거 → 이젠 @storybook/addon-docs/blocks 를 사용해야함. @storybook/blocks가

https://github.com/toss/es-toolkit/pull/1362type CamelCase를 보면 snake_case만 고려가 되어 있고 PascalCase는 고려가 되어 있지 않는 걸 확인할 수 있다. PascalCase를 고려하도록 함. in

JSX render won't allow webkitdirectory and directory to be used.React v18input의 속성인 webkitdirectory를 사용할 수 없는 현상=> React내에서 typescript를 사용시 발생하는 현상. D

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. context가 중첩되면 나오는 에러. Provider 파일 내부에 사용자 정보를 불러오는 로직을 추가

오늘 할 일 폴더 구조 표시 방법 생각해보기 (path를 이용해서 트리구조를 만들기) (내일) 로그아웃 기능 만들기 (완료) 로그인 후 유저 정보 불러오기 (완료) 파일 업로드시 hidden 파일은 불러오지 않도록(전송되지 않도록) 로직 작성하기 (완료) 배운점

파일 업로드 drag n drop (~ing)drag n drop 으로 파일 및 폴더를 업로드시 webkitGetAsEntry 메소드를 이용해야한다.이걸로 만든 directoryReader(entry.createReader)는 비동기처리를 해줘야해서 Promise로 감