본문 바로가기

바이브코딩

(13)
ERR_CONNECTION_REFUSED 원인과 해결 체크리스트 ERR_CONNECTION_REFUSED 원인과 해결 체크리스트웹사이트나 로컬 개발 서버에 접속했는데 ERR_CONNECTION_REFUSED가 표시되면 코드 문제인지 네트워크 문제인지부터 헷갈리기 쉽습니다. 특히 localhost에서 개발할 때 어제까지 정상적으로 열리던 주소가 갑자기 접속되지 않는 경우가 있는데요. ERR_CONNECTION_REFUSED 오류는 브라우저가 대상 서버에 연결을 시도했지만 연결이 받아들여지지 않았을 때 볼 수 있는 메시지입니다. 서버 미실행부터 잘못된 포트, 방화벽, Docker 포트 설정까지 원인이 다양합니다. 가장 가능성이 높은 항목부터 확인해 보겠습니다. ERR_CONNECTION_REFUSED 뜻은 무엇일까?쉽게 표현하면 브라우저가 특정 주소와 포트로 연결을 요..
Failed to fetch, API 요청 실패 원인 10가지 Failed to fetch, API 요청 실패 원인 10가지자바스크립트에서 fetch()로 API를 호출했는데 콘솔에 TypeError: Failed to fetch가 나타날 때가 있습니다. 주소도 맞아 보이고 서버도 실행 중인데 응답조차 확인할 수 없다면 어디부터 점검해야 할지 막막한데요. Failed to fetch 에러는 API가 단순히 404나 500을 반환했다는 의미와는 다릅니다. 브라우저가 요청을 정상적으로 완료하지 못했거나 응답을 자바스크립트에 전달할 수 없는 상황에서 볼 수 있습니다. API 요청이 실패하는 대표적인 10가지 이유와 해결 순서를 알아보겠습니다. Failed to fetch 뜻부터 정확히 이해하기기본적인 fetch 요청은 다음과 같습니다.fetch("/api/users")..
npm ERR! ERESOLVE unable to resolve dependency tree 오류, 의존성 충돌 해결법 npm ERR! ERESOLVE unable to resolve dependency tree 오류, 의존성 충돌 해결법npm으로 패키지를 설치하다가 npm ERR! ERESOLVE unable to resolve dependency tree라는 긴 오류가 나타나면 어디부터 확인해야 할지 막막합니다. 프로젝트는 정상적으로 실행되다가 새로운 라이브러리 하나를 설치한 뒤 갑자기 문제가 생기기도 하는데요. npm ERESOLVE 오류는 대부분 npm이 여러 패키지가 요구하는 버전 조건을 동시에 만족시키지 못할 때 발생합니다. 무조건 node_modules를 삭제하거나 --force를 붙이기보다 어떤 패키지끼리 충돌하는지 먼저 확인하는 것이 중요합니다. 가장 쉬운 해결 순서부터 알아보겠습니다. ERESOLVE ..
Module not found 에러가 계속 뜬다면? 해결법 총정리 Module not found 에러가 계속 뜬다면? 해결법 총정리React, Next.js, Vite, Webpack 같은 프로젝트를 실행하다 보면 Module not found 오류를 자주 만나게 됩니다. 분명 파일도 있고 npm install까지 했는데 계속 같은 오류가 나타나면 무엇을 더 확인해야 할지 답답할 수 있는데요. Module not found 오류의 핵심은 현재 빌드 도구나 실행 환경이 코드에서 요청한 파일 또는 패키지의 위치를 찾지 못한다는 것입니다. 단순 설치 문제뿐 아니라 상대 경로, 대소문자, alias, package.json, 실행 위치 등이 원인이 될 수 있습니다. 가장 쉬운 확인 방법부터 알아보겠습니다. Module not found 오류 뜻부터 확인하기예를 들어 다음처럼..
Cannot access before initialization 오류(TDZ) 해결하기 Cannot access before initialization 오류(TDZ) 해결하기자바스크립트를 실행하다가 ReferenceError: Cannot access '변수명' before initialization이라는 오류를 만날 때가 있습니다. 분명 아래쪽에 변수를 선언해 두었는데 왜 “초기화 전에 접근했다”고 나오는지 처음에는 이해하기 어려운데요. Cannot access before initialization 오류를 이해하려면 let과 const, 그리고 TDZ(Temporal Dead Zone) 개념을 알아두는 것이 중요합니다. 단순히 변수 선언을 위로 옮우는 방법뿐 아니라 왜 이런 오류가 발생하는지 원리부터 차근차근 살펴보겠습니다. Cannot access before initializati..
Identifier has already been declared, 뜻부터 해결법까지 Identifier has already been declared, 뜻부터 해결법까지자바스크립트 코드를 실행했는데 SyntaxError: Identifier 'name' has already been declared 같은 메시지가 나타날 때가 있습니다. 분명 평소처럼 변수를 선언했을 뿐인데 갑자기 코드가 실행되지 않으면 어떤 부분부터 확인해야 할지 헷갈릴 수 있는데요. Identifier has already been declared는 쉽게 말해 “같은 이름을 이미 선언했는데 또 선언했다”는 의미입니다. 이번 글에서는 identifier가 무엇인지부터 중복 선언이 발생하는 대표적인 원인, 재선언과 재할당의 차이, 빠르게 해결하는 순서까지 알아보겠습니다. Identifier has already been..
Missing initializer in const declaration 에러 해결 방법 Missing initializer in const declaration 에러 해결 방법자바스크립트에서 const로 변수를 만들다가 SyntaxError: Missing initializer in const declaration이라는 오류를 만나는 경우가 있습니다. 영어 메시지만 보면 복잡해 보이지만 원인은 의외로 간단한데요. 대부분 const 변수를 선언하면서 초기값을 넣지 않았기 때문입니다. 이번 글에서는 Missing initializer in const declaration의 뜻부터 왜 const에서 이런 오류가 발생하는지, 실제 코드에서 확인해야 할 부분과 해결 방법까지 쉽게 알아보겠습니다. Missing initializer in const declaration 뜻은?에러 메시지를 그대로 풀..
Invalid or unexpected token 에러 해결법 총정리 Invalid or unexpected token 에러 해결법 총정리자바스크립트 코드를 실행했는데 콘솔에 SyntaxError: Invalid or unexpected token이라는 메시지가 나타나면 어디가 잘못됐는지 바로 찾기 어려울 수 있습니다. 코드가 멀쩡해 보이는데도 오류가 발생한다면 따옴표나 특수문자처럼 눈에 잘 띄지 않는 부분이 원인일 가능성이 있는데요. Invalid or unexpected token 에러는 자바스크립트 엔진이 코드를 읽는 과정에서 문법적으로 사용할 수 없거나 예상하지 못한 문자를 발견했다는 의미입니다. 오늘은 정확한 뜻부터 자주 발생하는 원인과 초보자도 따라 할 수 있는 해결 순서까지 쉽게 알아보겠습니다. Invalid or unexpected token 뜻은?자바스크..