부록
개발 빈번한 에러 문구
개발 할때 자주 발생하는 에러 모음집 입니다.
FRONTEND (JavaScript + React 등)
| 에러 메시지 | 원인 | 해결 방법 |
|---|---|---|
Cannot read properties of undefined (reading 'x') | 객체가 정의되지 않았는데 속성을 접근하려 할 때 | 옵셔널 체이닝 ?. 사용 또는 if (obj) 조건문으로 방어 |
TypeError: x is not a function | 함수처럼 호출한 값이 실제로 함수가 아님 | 콘솔로 타입 검사, 변수명이 함수인지 확인 (typeof x) |
Unexpected token < in JSON at position 0 | JSON을 예상했는데 HTML (주로 에러페이지) 응답 | 응답의 Content-Type 확인 및 백엔드 API 응답 점검 |
Uncaught TypeError: Cannot set property 'x' of null | null 상태의 DOM 요소에 접근 시도 | DOM이 로딩되기 전에 접근한 경우 → DOMContentLoaded 이후에 실행 |
Module not found: Can't resolve 'x' | 경로나 모듈명이 잘못되었거나 미설치 | 경로 정확히 확인, npm install로 의존성 설치 |
Invalid hook call. Hooks can only be called inside of the body of a function component. | React 훅을 잘못된 위치에서 호출 | 컴포넌트 함수 또는 커스텀 훅 내부에서만 사용해야 함 |
A component is changing an uncontrolled input to be controlled. | <input>이 처음에는 uncontrolled였지만 이후에 value가 설정됨 | value와 onChange를 동시에 설정하거나 초기값을 제공해야 함 |
ResizeObserver loop limit exceeded | 레이아웃 반복 감지로 인해 브라우저가 무한루프 감지 | <ResizeObserver> 사용 시 observer를 최적화하거나, 에러를 무시해도 무방함 (렌더링엔 영향 없음) |
BACKEND (Node.js, Express)
| 에러 메시지 | 원인 | 해결 방법 |
|---|---|---|
Error: listen EADDRINUSE: address already in use :::3000 | 이미 해당 포트에서 다른 프로세스가 실행 중 | 다른 포트 사용하거나 lsof -i :3000 → kill -9 PID |
SyntaxError: Unexpected token | JSON.parse 또는 코드 문법 오류 | JSON 포맷이 올바른지 확인, 혹은 문자열이 따옴표 등으로 올바르게 감싸졌는지 확인 |
ReferenceError: x is not defined | 변수를 선언하지 않고 사용 | let, const, var로 변수 선언 여부 확인 |
Cannot find module 'x' | 모듈을 설치하지 않았거나 경로가 잘못됨 | npm install x 실행 또는 경로 확인 (require('./x')) |
UnhandledPromiseRejectionWarning: ... | 비동기 처리에서 catch가 없거나 예외를 처리하지 않음 | try-catch 또는 .catch() 명시적으로 작성 |
TypeError: Cannot destructure property 'x' of 'undefined' | 구조 분해 대상이 undefined일 때 | 기본값 설정: `const { x = defaultVal } = obj |
CORS policy: No 'Access-Control-Allow-Origin' | 프론트 요청이 백엔드에서 차단됨 | 백엔드에서 CORS 허용 설정 (cors 미들웨어 사용) |
req.body is undefined | Express에서 body-parser 설정이 없거나 요청 형식이 안 맞음 | app.use(express.json()), Content-Type: application/json 확인 |
DATABASE (MongoDB + Mongoose)
| 에러 메시지 | 원인 | 해결 방법 |
|---|---|---|
MongoNetworkError: failed to connect to server | DB 연결이 실패 (URI, 포트, 서버 상태 문제) | Mongo URI 확인, 서버 실행 여부 확인, 방화벽 설정 확인 |
ValidationError: Path 'x' is required. | Mongoose 스키마에서 필수 필드가 빠짐 | 필수 필드가 누락되지 않았는지 확인 또는 required 해제 |
CastError: Cast to ObjectId failed for value | ID 값을 잘못된 형식으로 전달 | ID가 MongoDB의 ObjectId 형식인지 확인 (mongoose.Types.ObjectId.isValid(id)) |
E11000 duplicate key error collection | 유니크 제약 조건에 위배되는 값 삽입 시도 | 중복 검사 후 저장하거나 upsert 사용 |
document must have an _id before saving | 수동 생성 객체에 _id 누락 | _id 자동 생성되도록 하거나 직접 할당 (new mongoose.Types.ObjectId()) |
DATABASE (SQL - MySQL/PostgreSQL)
| 에러 메시지 | 원인 | 해결 방법 |
|---|---|---|
ER_PARSE_ERROR: You have an error in your SQL syntax | SQL 문법 오류 | SQL 쿼리에서 괄호, 따옴표, 콤마 위치 등을 점검 |
ER_DUP_ENTRY: Duplicate entry 'x' for key 'PRIMARY' | PK 또는 UNIQUE 제약 조건 위반 | 삽입 전에 해당 키 존재 여부 확인 또는 INSERT ... ON DUPLICATE KEY UPDATE 사용 |
Unknown column 'x' in 'field list' | 존재하지 않는 컬럼명 사용 | 컬럼명이 정확한지 확인 (DESC 테이블명 또는 ERD 참고) |
Cannot add or update a child row: a foreign key constraint fails | 외래키 제약 조건 위반 | 부모 테이블에 존재하지 않는 값을 참조하려고 할 때 발생. 참조 무결성 확인 |
Data too long for column | 칼럼의 데이터 타입보다 긴 값이 들어옴 | 칼럼의 타입 (VARCHAR(50) 등) 확인, 데이터 잘라서 삽입 |
Tip
console.log(err)또는console.error(err.stack)으로 에러의 전체 스택 추적을 확인하세요.
별 것 아닌 것 같아도 다음 순서를 따라서 해결해 보세요.
- 콜론을 확인해보세요
- 대소문자를 확인해보세요
- 공백이 있는지 확인해보세요
- 특수문자가 있는지 확인해 보세요
- 때로는 에러문구가 잘못된 오류 로그를 찍어 줄 때도 있어요.
- 쉬운 문제라도 도움을 요청해 보세요, 생각을 전환할 때 해결될 때도 있어요
- 기존에 잘 되는 소스코드, 쿼리, 디비 테이블, 시스템과 비교 해보세요.
- 사용하는 외부 라이브러리가 오류일 수도 있어요. 해당 이슈 체크해 보세요.
- 다 해봐도 안되면 프로그램 종료 후 재시작 해보세요.
- 그래도 도저히 안되면 현재 상황을 공유하고 기획을 약간 수정하자고 제안해 보세요.
- 무조건 있어야 하는 기능이라면 일단 체크해놓고 넘어가세요.