AI 로 공부하고 정보를 보는...

fetch 응답에 타입을 붙였는데 런타임 오류: unknown과 타입 가드로 API 경계 검증하기

기준일: 2026-11-03 · 아래 코드는 설명용 예시이며 실제 실행·컴파일·테스트를 수행한 결과가 아닙니다.API 응답을 User 타입으로 지정했는데 화면에서 Cannot read properties of null 같은 오류가 발생할 때가 있습니다. 에디터에서는 자동 완성이 잘 되고 타입 검사도 통과했는데, 실제 데이터에는 필요한 필드가 없거나 전혀 다른 값이 들어온 상황입니다.이때 확인할 것은 타입 선언의 유무보다 외부에서 받은 값을 언제, 어떤 조건으로 믿기 시작했는가입니다. 프런트엔드 코드에 적힌 타입과 서버가 실제로 보낸 값은 서로 다른 층에 있습니다. AI가 만들어 준 API 함수에 as User나 Promise가 붙어 있어도 런타임 검증이 생긴 것은 아닙니다.이 글에서는 단일 사용자 조회 ..

GitHub Actions에서 npm ci만 실패할 때: package-lock.json 불일치 안전하게 고치기

기준일: 2026년 11월 2일. npm v11 공식 문서를 참고한 설명용 예제이며, 실제 저장소에서 설치·테스트·빌드를 실행한 결과는 아닙니다. 프로젝트의 npm 버전에 맞는 문서도 함께 확인하세요.로컬에서는 개발 서버가 잘 켜지는데 GitHub Actions의 npm ci 단계에서 설치가 멈출 때가 있습니다. 이때 CI 명령을 npm install로 바꾸거나 잠금 파일을 삭제하면 당장은 넘어갈 수도 있습니다. 하지만 어떤 의존성 조합을 검증했는지 불분명해져 같은 문제가 다시 나타날 수 있습니다.먼저 확인할 것은 실패한 단계의 로그입니다. 이 글은 package.json과 package-lock.json의 의존성 정보가 맞지 않아 설치가 중단되는 상황을 다룹니다. 네트워크 장애, 사설 레지스트리 인증 ..

React 검색 결과가 이전 값으로 돌아갈 때: useEffect 요청 경쟁과 cleanup

기준일: 2026년 11월 1일. 공식 문서 기반의 설명용 예제이며 실제 프로젝트 실행·컴파일 검증은 하지 않았습니다.검색창에 re를 입력한 다음 react까지 입력했는데, 잠시 뒤 목록이 다시 re의 검색 결과로 바뀐다면 무엇부터 확인해야 할까요? 입력 상태는 정상이고 API도 성공했는데 화면만 과거로 돌아간다면, 요청을 보낸 순서와 응답을 받은 순서가 달라졌을 가능성이 있습니다.AI에게 검색 컴포넌트를 만들어 달라고 했을 때도 이 부분은 직접 검토할 만합니다. fetch와 setState가 들어 있다고 해서 빠른 입력, 느린 응답, 화면 이동까지 처리된 것은 아니기 때문입니다. 이번 글은 이미 클라이언트의 useEffect에서 검색 요청을 보내는 코드를 기준으로, 이전 요청이 현재 화면을 덮어쓰지 않..

CLAUDE.md에 패키지 매니저와 테스트 규칙을 적었는데 Claude Code가 다른 명령을 실행한다면, 지시를 더 강하게 쓰기 전에 파일이 실제로 읽혔는지부터 확인해야 합니다. 파일이 로드되지 않은 문제와, 읽은 지시를 제대로 따르지 않은 문제는 해결 방법이 다릅니다.이 글은 2026년 10월 31일 확인한 공식 문서를 바탕으로 한 진단 가이드입니다. 아래 예시는 설명용이며 실제 Claude Code 세션에서 실행 검증하지 않았습니다. 설치된 버전과 프로젝트 구조에 따라 화면·동작이 달라질 수 있습니다.1. 먼저 /context로 시작 시 로딩 여부를 확인한다터미널에서 버전과 시작 위치를 기록하고 해당 프로젝트에서 Claude Code를 실행합니다.pwdclaude --versionclaudeClau..

요약: strict mode violation이 발생하면 대기 시간을 늘리기 전에 locator가 몇 개의 요소를 가리키는지 확인해야 합니다. 이름이 같은 버튼이 반복되는 화면에서는 exact: true만으로 충분하지 않습니다. 먼저 카드나 행의 범위를 좁히고, 그 안의 버튼을 선택한 뒤 클릭 결과까지 검증하는 방법을 정리합니다.버튼은 보이는데 왜 클릭하지 못할까상품 목록에 ‘담기’ 버튼이 두 개 있습니다. 사람은 상품명을 보고 원하는 버튼을 누르지만, 테스트에 “담기 버튼을 클릭하라”라고만 적으면 어느 상품인지 알 수 없습니다. 이때 먼저 발견한 버튼을 임의로 누르는 대신 모호한 선택을 오류로 알려주는 것이 strictness입니다.Playwright의 locator는 단일 요소를 대상으로 하는 작업에..

Next.js에서 화면은 보이는데 hydration 오류가 뜬다면, 먼저 서버가 보낸 HTML과 브라우저의 첫 렌더가 같은지 확인해야 합니다. window 접근을 막았거나 화면이 정상처럼 보인다는 것만으로 해결됐다고 판단하기는 어렵습니다.이 글은 App Router에서 자주 만나는 세 가지 원인을 작은 예제로 좁혀 봅니다. localStorage를 읽는 시점, 날짜의 초기값, HTML 중첩을 차례로 확인한 뒤 필요한 경우에만 클라이언트 전용 렌더링을 선택합니다.1. 'use client'를 붙였는데 왜 서버와 비교할까'use client'는 클라이언트 컴포넌트 경계를 선언합니다. 초기 페이지 로드에서 서버의 HTML 사전 렌더링까지 끄는 옵션은 아닙니다. Next.js는 첫 방문에 보여 줄 HTML을 만..

로그인한 뒤 storageState()로 파일까지 만들었는데, 다음 테스트에서는 다시 로그인 화면이 나온다. 이때 로그인 버튼의 대기 시간을 늘리기 전에 저장 시점, 읽는 설정, 접속 주소, 저장소 종류, 세션 유효성을 나눠 확인하면 원인을 좁힐 수 있다.AI 코딩 도구가 띄운 브라우저에서 로그인에 성공했다는 사실도 테스트의 로그인 상태를 보장하지 않는다. Playwright Test는 기본적으로 테스트마다 격리된 브라우저 컨텍스트를 사용한다. 다른 브라우저에서 만든 세션을 자동으로 이어받는다고 가정하면 진단이 꼬인다. Playwright의 테스트 격리 설명이 글은 쿠키와 localStorage를 사용하는 일반적인 웹 앱을 기준으로 한다. IndexedDB와 sessionStorage의 차이도 짚지만 브..

브라우저 자동화를 붙였는데 로그인 화면부터 다시 나오거나, 스킬을 설치했는데 ego-browser 명령을 찾지 못하는 경우에는 무엇부터 확인해야 할까요? 앱 설치, 에이전트의 스킬 인식, 브라우저의 로그인 상태를 나눠 점검하면 원인을 좁히기 쉽습니다.Ego Lite Browser, 공식 표기 ego(lite)는 사람과 AI 에이전트가 함께 쓰도록 만든 Chromium 기반 브라우저입니다. Codex나 Claude Code 같은 외부 에이전트가 ego-browser를 통해 화면을 조작합니다. 이 글은 설치 확인 → 연결 문제 점검 → 로그인된 화면 검증 순서로 정리합니다. 마지막에는 이미 Playwright를 쓰는 프로젝트에서 역할을 어떻게 나눌지도 살펴봅니다. 공식 제품 소개2026년 10월 27일(한국..

프론트엔드 PR을 리뷰할 때는 비슷한 질문을 반복합니다. 키보드로 조작할 수 있는지, 로딩 중 중복 요청이 생기지 않는지, 공용 컴포넌트 변경이 다른 화면에 영향을 주는지 확인합니다. 매번 지시를 다시 쓰면 급한 날일수록 검토 항목이 빠지기 쉽습니다.2026년 10월 23일 공개된 Codex CLI 0.164.0에는 반복 프롬프트와 슬래시 명령을 저장하는 /presets가 추가됐습니다. 번호가 있는 슬롯 10개를 사용할 수 있습니다. 이 글에서는 이를 변경 사항을 검토하는 재사용 프롬프트로 구성해 봅니다. 공식 릴리스 노트이 글은 2026년 10월 26일 확인한 공식 릴리스와 구현 PR을 바탕으로 작성한 사용 가이드입니다. 아래 흐름을 실제 CLI에서 실행 검증하지는 않았습니다.무엇을 저장할까이전 글의 ..

Sequel Pro에서 Sequel Ace로: 2025년 macOS 개발자를 위한 최고의 MySQL 툴macOS에서 MySQL/MariaDB를 다루는 개발자라면 한 번쯤은 들어봤을 Sequel Pro. 깔끔한 인터페이스와 직관적인 사용법으로 많은 개발자들의 사랑을 받았던 이 툴이 더 이상 업데이트되지 않는다는 사실을 알고 계시나요? 2020년 공식적으로 개발이 중단된 Sequel Pro의 뒤를 이어 등장한 Sequel Ace가 과연 그 빈자리를 채울 수 있을까요?오늘은 두 툴의 차이점을 자세히 살펴보고, 왜 2025년 현재 Sequel Ace로의 마이그레이션이 필요한지 알아보겠습니다.Sequel Pro, 왜 중단되었을까?Sequel Pro는 2008년부터 시작되어 macOS 개발자들에게 없어서는 안 될 ..