개발자 — 관련 콘텐츠 273건

React invalid hook call, 훅 규칙, 중복 리액트 | 패키지가 리액트를 두 개 들고 있으면?

Invalid hook call이 패키지 쪽에서 나면 앱과 react-dom이 서로 다른 리액트 파일을 읽고 있는 상태다. npm ls react로 트리를 보고, npm link·별칭·overrides로 한 복사본에 맞춘다. 훅을 조건 안에 넣은 줄과 자리를 나눈다. React, Next.js, webpack, 피어 의존성, 프론트엔드, 개발자 기준. 2026년 9월 리액트·npm 공식 문서.

headers was already sent, API 라우트, res.end | JSON을 두 번 쓰면 왜 500이 되나?

페이지 API에서 JSON을 두 번 쓰면 노드가 헤더를 이미 보냈다고 하고 화면은 500이 된다. res.json 다음 return, headersSent, 앱 라우트 Response 반환을 나눈다. 카카오 콜백과 토스 웹훅에서 200 뒤 오류 칸을 본다. Next.js, Node.js, API, 웹훅, 백엔드, 개발자 기준. 2026년 9월 Node.js, Next.js 공식 문서.

Invalid src prop, next/image, remotePatterns | 외부 이미지가 깨지면 설정은 어디인가?

넥스트 이미지가 Invalid src를 내면 외부 주소 호스트가 remotePatterns에 없는 상태다. next.config.js의 images 칸에 프로토콜·호스트·경로를 맞추고 개발 서버를 다시 켠다. unoptimized는 최적화만 끈다. Next.js, 이미지 최적화, 카카오 CDN, 슈퍼베이스 스토리지, 버셀, 프론트엔드, 개발자 기준. 2026년 9월 Next.js 공식 문서.

504 Gateway Timeout, maxDuration, 스트리밍 | 응답이 끊기기 전에 어디를 자를까?

배포만 504면 함수가 라우트 최대 실행 초 안에 응답을 못 끝낸 상태다. 오류 이름의 함수 호출 시간 초과, maxDuration, 스트리밍 시계, after로 일을 자르는 순서를 본다. 한도만 키우지 말고 첫 바이트를 먼저 보낸다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

502 Bad Gateway, 업스트림, 함수 타임아웃 | 버셀 로그에 함수는 성공인데 화면이 502면?

버셀 함수 로그는 성공인데 화면만 502면 업스트림 응답이 프록시에 유효하게 안 도착한 상태다. x-vercel-error의 NO_RESPONSE_FROM_FUNCTION, 첫 바이트 지연, 스트림 중단을 본다. 응답을 먼저 보내고 긴 일은 after로 뺀다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

403 Forbidden, RLS, 권한 | 슈퍼베이스에서 select는 되고 insert만 막히면?

조회는 되고 저장만 403이면 행 수준 보안의 넣기 정책이 그 행을 거절한 상태다. 조회 조건과 쓰기 검사, 사용자 아이디, 익명 키와 서비스 롤 키를 나눈다. 슈퍼베이스, 포스트그레, Next.js, API, 백엔드, 보안, 카카오 로그인, 서버 액션, 개발자 기준. 2026년 9월 MDN, 포스트그레, 슈퍼베이스 공식 문서.

401 Unauthorized, Bearer, 만료 토큰 | 로그인은 됐는데 저장만 거절되면?

로그인은 됐는데 저장만 401이면 화면 세션과 요청 자격이 갈린 상태다. Bearer 헤더 누락, 만료된 액세스 토큰, 서버 액션에 안 실리는 인증부터 본다. WWW-Authenticate의 invalid_token이면 리프레시 한 번 후 재시도한다. 개발자, Next.js, 서버 액션, API, 카카오 로그인, 보안, 백엔드 기준. 2026년 9월 MDN·RFC 6750·카카오 공식 문서.

429 Too Many Requests, Retry-After, 백오프 | API 한 번에 몰리면 어디를 줄일까?

429는 인증 실패가 아니라 짧은 시간에 호출이 많아 서버가 기다리라고 한 응답이다. Retry-After 초와 HTTP 날짜를 읽고, 헤더가 없으면 지수 백오프에 지터를 넣는다. 크론·웹훅·액션이 같은 키를 쓰면 동시 호출과 배치부터 줄인다. 개발자, API, 백엔드, Node.js, Next.js, 깃허브 기준. 2026년 9월 MDN·RFC 6585·깃허브 REST 문서.

ETIMEDOUT, fetch failed, undici | 배포 함수에서만 타임아웃이면?

배포 함수에서만 fetch가 끊기면 로컬 회선이 빠른 게 아니라 함수 대기 한도와 아웃바운드 경로가 다르다. ETIMEDOUT과 undici fetch failed의 cause.code를 남기고, maxDuration·AbortSignal·리전을 맞춘다. 개발자, Node.js, 버셀, Next.js, 백엔드, API 기준. 2026년 8월 Node.js·MDN·버셀 문서.

ELIFECYCLE, npm ERR, 빌드 스크립트 | 로컬은 되고 CI만 빨간 줄이면?

ELIFECYCLE은 npm이 감싼 실패다. 실제 원인은 위 도구 로그와 종료 숫자다. 로컬은 되고 통합 환경만 실패하면 노드 버전, 잠금 파일 설치, 환경변수, 맥과 리눅스 대소문자부터 맞춘다. 개발자, npm, 깃허브 액션, Next.js, Node.js, 데브옵스 기준. 2026년 8월 npm과 깃허브 공식 문서 기준.

Heap out of memory, Node.js 메모리, --max-old-space-size | 빌드가 137로 죽으면?

빌드 종료 코드 137은 문법 오류가 아니라 커널이 프로세스를 죽인 신호다. 힙 메시지와 러너 메모리를 같이 보고, 원본 이미지를 줄인 뒤 공식 힙 상한만 올린다. 한국 1인 개발자, Node.js, Next.js, 깃허브 액션, 도커, CI, 빌드 기준. 2026년 8월 Node.js와 Next.js, 깃허브 공식 문서.

ENOENT, no such file, 경로 오타 | 스크립트 cwd가 루트가 아니면?

ENOENT는 그 경로 문자열이 지금 작업 폴더 기준으로 디스크에 없을 때 난다. npm 스크립트는 package.json 위치, 크론은 홈이 cwd다. __dirname으로 고정 파일을 열고 WorkingDirectory를 넣는다. 개발자, Node.js, npm, 깃허브 액션, 도커, 크론 기준. 2026년 8월 Node.js·npm·깃허브 문서.

Cannot find module, 모듈을 찾을 수 없음, node_modules | 지워도 같은 줄이 뜨면 뭐부터 볼까?

Cannot find module은 패키지가 없어서가 아니라 노드가 이름을 찾을 폴더를 지나쳤거나 대소문자가 달라서 난다. node_modules를 지워도 같으면 cwd와 require 이름부터 본다. 크론, 깃허브 액션, 맥과 리눅스 CI, npm ci. 개발자, Node.js, npm, Next.js, 백엔드 기준. 2026년 8월 Node.js·npm 공식 문서.

하이드레이션 미스매치, Hydration failed, 서버 클라이언트 불일치 | 콘솔에 빨간 줄이 뜨면 뭐부터 볼까?

Hydration failed는 코드가 틀린 게 아니라 서버가 그려 보낸 HTML과 브라우저 첫 렌더가 달라 리액트가 그 부분을 버리고 다시 그리는 것이다. new Date·Math.random·window·localStorage를 화면 그릴 때 읽거나, p 안의 div 같은 잘못된 HTML 중첩이 흔한 원인이다. 리액트 19 diff와 onRecoverableError로 범인을 찾고, useEffect 두 번 그리기·isClient 상태·dynamic ssr false·suppressHydrationWarning으로 안전하게 고치는 법까지. 개발자, Next.js, 리액트, 프론트엔드, SSR 기준. 2026년 8월 Next.js·React 공식 문서.

EADDRINUSE, 포트 이미 사용 중, 프로세스 종료 | 3000번이 안 죽으면 뭐부터 볼까?

EADDRINUSE address already in use는 코드가 틀린 게 아니라 쓰려는 포트를 이미 다른 프로세스가 쥐고 있어서 서버가 바인딩을 못 하는 것이다. lsof -i :3000·netstat -ano로 PID를 찾고, kill·kill -9·taskkill /F·npx kill-port로 그 하나만 종료한다. nodemon·pm2·도커가 자꾸 되살리는 경우, TIME_WAIT, PORT 환경변수와 next dev -p로 포트 옮기기, Ctrl+C 정상 종료 예방까지. 개발자, Next.js, 노드, 백엔드, 터미널 기준. 2026년 8월 Node.js·마이크로소프트 문서.

npm ERESOLVE, 피어 의존성 충돌, legacy-peer-deps, overrides | 설치가 멈추면 뭐부터 볼까?

npm ERESOLVE unable to resolve dependency tree는 코드가 아니라 어떤 패키지가 요구하는 피어 버전과 설치된 버전이 어긋나서 난다. npm 7부터 피어 의존성을 설치 시점에 엄격 검사하기 때문이다. npm explain·npm ls로 충돌 출처를 찾고, 버전 맞추기와 package-lock 재생성, npm 8.3 overrides로 전이 의존성 고정, --legacy-peer-deps와 --force의 차이와 위험까지. 개발자, Next.js, 리액트, 프론트엔드, npm, 오픈소스 기준. 2026년 8월 npm 공식 문서.

CORS 에러, 프리플라이트, Access-Control-Allow-Origin | 로컬은 되는데 배포하면 막히면?

CORS 에러는 코드가 틀려서가 아니라 서버가 응답에 허용 헤더를 안 붙여서 브라우저가 읽기를 막는 것이다. 프로토콜·도메인·포트가 하나라도 다르면 교차 출처가 되고, JSON 본문이나 Authorization 헤더가 붙으면 OPTIONS 프리플라이트가 먼저 날아간다. Access-Control-Allow-Origin·Methods·Headers, 쿠키를 쓸 때 와일드카드 금지와 정확한 출처 반사, Vary Origin, Next.js rewrites 회피까지. 개발자, Next.js, 프론트엔드, 백엔드, API, 보안 기준. 2026년 8월 MDN·Fetch 표준.

안드레 카파시 바이브 코딩, 정의, 한계 | 원문에서 실제로 뭐라고 했을까?

안드레 카파시 바이브 코딩은 2025년 2월 2일 그가 X에 올린 한 문장에서 시작됐다. 흐름에 몸을 맡기고 코드가 존재한다는 사실조차 잊는 방식이지만, 그는 버려도 되는 주말 프로젝트로 선을 그었다. 원문 다섯 가지 행동, AI 보조 코딩과의 구분, 유지보수와 보안 한계, 한국 1인 개발자가 diff를 읽고 안 읽는 자리를 나누는 법까지. 바이브 코딩, LLM, 커서, 클로드 코드, 개발자 기준. 2026년 8월 공식 자료.

클로드 AI 가격, 무료 한도, 부가세, 소넷 | 결제 직후 첫 주에 어디를 찍을까?

클로드 AI 가격을 결제한 직후 7일 체크리스트다. 웹·앱스토어 청구 경로, 부가세 10% 예산, 설정 사용량 북마크, 소넷 기본, 한국어 장문 쪼개기, 추가 사용량 상한, 콘솔 API 줄, 막힌 횟수, 카드 명세 대조까지. 결제 전·한도 직후·갱신 전과 자리를 섞지 않는다. LLM, API, 개발자, SDK, 클로드 코드, AI 에이전트 기준. 2026년 8월 공식 문서.

클로드 AI 가격, 무료 한도, 부가세, 소넷·오퍼스 | 월 실비용은 어디서 갈라지나?

클로드 AI 가격 표시 달러와 카드 실청구가 어긋나면 세금과 둘째 줄을 본 것이다. 프로 20달러·연 200달러·맥스 100·200달러에 부가세 10%를 가정하고, 구독·콘솔 API·추가 사용량을 나눈다. 무료 한도·한국어 장문 소진, 소넷·오퍼스 코딩 비용, 클로드 코드 동일 풀까지. LLM, API, 개발자, SDK, AI 에이전트, Next.js 기준 심층. 2026년 8월 공식 문서.