전체 글 (64) 썸네일형 리스트형 [리액트] 리액트가 0과 NaN을 다루는 법 최근 리액트에서 0을 다루는 법 때문에 당황했던 경험을 공유하고자 한다. \문제는 "사이드바를 펼친 상태에서 사이드바 상단 로고 옆에 0이 표시되는 것"이었다. 원인은 사이드바의 접힘 상태를 관리하는 훅 useSidebarCollapsed의 구현 방식에 있었다. 해당 훅은 접힘 상태를 boolean으로 관리하고 있었고, 이 값을 localStorage와 연동하는 로직이 있었다. localStorage는 모든 값을 문자열로만 저장하므로 되읽을 때 JSON.parse로 복원하는데, JSON.parse(raw) as T의 as T는 컴파일러를 향한 선언일 뿐 런타임 검증이 없다. 그래서 과거 버전이 localStorage에 남긴 숫자 0이 검증 없이 복원 과정을 통과했고, 소비처에는 boolean이 아닌 숫자.. 지도 위 42만개의 헥사곤을 쌓는 방법 최근 사내에서 GIS 프로젝트를 진행하며 지도 위 42만 개의 헥사곤을 그리고, 예상치 못한 버그를 마주했던 경험을 공유하고자 한다. 요구사항은 다음과 같았다.반지름 300m짜리 육각형 425,743개로 전국을 빈틈없이 덮는것 42만 개를 어떻게 그릴 것인가처음 받은 데이터는 단순한 CSV였다. 한 줄에 하나씩, "격자 번호, 중심점 경도, 중심점 위도".grid_no,lon,lat88083,126.9611787,37.55117605... 여기서 첫 번째 고민이 나온다. 중심점만 있고 육각형 모양은 없다. 모양은 우리가 그려야 한다.클로드에게 물어보니 위도·경도 좌표 위에서 바로 육각형을 그리면 서울에서 그린 육각형과 제주에서 그린 육각형이 다른 모양으로 찌그러진다고 한다. 이유는 지구는 둥글어서 위도에.. 풀스택 개발 연습 1편 - Prisma v7 + SQLite, 마이그레이션하며 만난 에러 Prisma v7로 백엔드를 세팅하다가 몇 번 막히면서 불필요하게 토큰을 낭비했던 경험을 공유하고자 합니다. 클로드 코드와 함께 작업하다 보니 v6 기준의 옛 정보로 진행되는 경우가 많았고, 그때마다 에러를 마주치며 원인을 따라가는 과정에서 알게 된 것들입니다.알게 된 사실은. v7은 내장 쿼리 엔진을 버리고 드라이버 어댑터 패턴으로 전환했다. 아래 네 에러는 전부 이 변화의 파생이었습니다.1. PrismaClient import 타입 에러Module '"@prisma/client"' has no exported member 'PrismaClient'프론트엔드만 할 땐 Vite/Next.js가 알아서 해주던 moduleResolution을 직접 마주하는 순간이었습니다. 무심코 "node"로 두고 넘어갔는.. 첫 오픈소스 기여 (feat. HeroUI & react-spectrum): NumberField 버그를 고쳐봤다 1. 발견HeroUI v3의 NumberField를 사용하던 중 이상한 동작을 발견했다.부모 컴포넌트에서 값이 주기적으로 변경되는 상황 (예: 타이머)이 상태에서 input에 직접 숫자를 입력하면, 입력값이 초기값으로 리셋됨버튼으로 값을 변경할 때는 문제가 없고, 키보드 입력에서만 발생했다.이미 동일한 이슈가 GitHub에도 올라와 있었다.-> https://github.com/heroui-inc/heroui/issues/64142. 원인문제를 추적하다 보니 react-spectrum의 useNumberFieldState 내부에서 원인을 찾을 수 있었다.if ( !Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions .. [프론트엔드] orval vs hey-api: OpenAPI 코드 생성 라이브러리 비교 최근 프로젝트를 진행하며 타입 안전하게 API 연동을 구성하려고 하면서hey-api와 orval을 둘 다 실제 프로젝트에 적용해봤다.결론부터 말하면:두 라이브러리는 지향하는 방향이 꽤 달랐다. 1. 철학 차이가장 먼저 느낀 부분은 라이브러리의 역할 정의였다.hey-apihey-api는 다음과 같은 요소들을 모두 포함한다.HTTP client (fetch / axios)타입API 함수유틸 함수TanStack Query 연동 옵션즉,API 연동에 필요한 요소를 한 번에 제공하는 풀패키지 접근orval반면 orval은 HTTP 클라이언트를 직접 제공하지 않는다.대신 mutator라는 개념을 통해HTTP 호출을 외부에서 주입하는 구조를 사용한다.export const customAxios = async (con.. [CSS] em, rem, px에 대하여 em현재 요소의 font-size를 기준으로 계산되는 상대 단위부모의 font-size를 상속받기 때문에 간접적으로 부모 영향 받음중첩 시 배수로 누적되어 커질 수 있음👉 특징컴포넌트 내부에서 **비율 기반 UI (ex. 버튼 padding, icon 크기)**에 유용하지만 누적 특성 때문에 예측이 어려움 → 제한적으로 사용 remdocument의 루트 요소 (html)의 font-size를 기준으로 계산되는 상대 단위모든 요소에서 일관된 기준 유지 (누적 없음)👉 특징레이아웃, 텍스트, spacing 등 전반적으로 가장 많이 사용**접근성(사용자 font 설정)**에 자연스럽게 대응👉 참고브라우저 기본 font-size (보통 16px)가→ html font-size의 기본값이 됨→ 그래서 간접적.. [프론트엔드] 모노레포에서 공유 패키지 버전 관리하기 — pnpm catalog 문제admin, web 두 앱을 모노레포로 운영하다 보니 react, typescript, eslint 같이 공통으로 쓰는 패키지들의 버전이 각자 package.json에 따로 선언되어 있었다.이게 지금 당장 문제가 되진 않지만, 버전을 올릴 때마다 파일을 일일이 찾아다니며 수정해야 하고, 수정하는 시점이 달라지면 앱마다 다른 버전이 설치될 수도 있다. 특히 typescript는 minor 버전만 달라져도 타입 추론 결과가 다르게 나올 수 있어서 이게 꽤 불편한 문제가 될 수 있다고 판단했다.pnpm Catalogpnpm 9.5+에서 지원하는 기능으로, pnpm-workspace.yaml에 패키지 버전을 한 번만 선언해두고, 각 패키지에서 "catalog:"로 참조하는 방식이다. 버전을 한 곳에서만 관리.. [버그 픽스] 메뉴 토글 시 로고가 사라지는 문제 분석: SVG clipPath 충돌 사례 개요UI 상에서 특정 메뉴를 열고 닫을 때 로고가 비정상적으로 표시되거나 사라지는 현상을 확인하였다.초기에는 상태 관리 로직의 문제로 판단했으나, 분석 결과 SVG 내부의 clipPath 참조 충돌로 인해 발생한 렌더링 이슈였다.본 글에서는 해당 문제의 원인과 해결 과정을 정리한다.문제 현상Regenerate 메뉴를 열면 ModelSelect 영역의 OpenAI/Gemini 로고가 표시됨메뉴를 닫으면 다시 로고가 사라짐특정 컴포넌트의 상태 변경이 다른 영역의 렌더링 결과에 영향을 주는 것처럼 보이는 비정상 동작 발생원인 분석문제의 핵심은 SVG 내부에서 사용된 clipPath의 id 충돌이었다.서로 다른 컴포넌트에서 동일한 SVG를 여러 번 렌더링각 SVG 내부에서 동일한 clipPath id 사용cli.. 이전 1 2 3 4 ··· 8 다음
