자바스크립트(JavaScript)는 웹 개발에서 필수적인 프로그래밍 언어지만, 종종 오류가 발생할 수 있습니다. 오류가 발생하면 웹사이트가 제대로 작동하지 않거나 콘솔에 에러 메시지가 표시됩니다.
이번 글에서는 자바스크립트 오류의 종류와 원인, 해결 방법을 단계별로 설명합니다.
1. 자바스크립트 오류의 주요 유형
자바스크립트 오류는 크게 **문법 오류(Syntax Error), 참조 오류(Reference Error), 타입 오류(Type Error), 실행 오류(Runtime Error)**로 나눌 수 있습니다.
🔹 1) 문법 오류 (SyntaxError)
설명: 코드의 문법이 잘못되어 발생하는 오류
예제:
console.log("Hello World" // 괄호 닫는 기호가 빠짐
해결 방법:
- 에러 메시지를 확인하고, 문법 오류를 수정합니다.
- 코드 에디터(Visual Studio Code 등)의 자동 완성 기능을 활용하세요.
🔹 2) 참조 오류 (ReferenceError)
설명: 존재하지 않는 변수를 참조할 때 발생
예제:
console.log(myVariable); // myVariable이 정의되지 않음
해결 방법:
- 변수가 선언되었는지 확인 (let, const, var 사용)
- 전역 변수와 지역 변수를 잘 구분하여 사용
🔹 3) 타입 오류 (TypeError)
설명: 데이터 타입이 올바르지 않거나, 잘못된 메서드를 호출할 때 발생
예제:
let number = 10;
number.toUpperCase(); // 숫자에 문자열 메서드를 호출하면 오류 발생
해결 방법:
- 데이터 타입을 사전에 확인 (typeof 연산자 사용)
- 올바른 메서드 사용
🔹 4) 실행 오류 (RuntimeError)
설명: 코드 실행 중 예외 상황이 발생할 때 발생
예제:
function divide(a, b) {
return a / b;
}
console.log(divide(10, 0)); // 0으로 나누면 무한대 값이 나옴
해결 방법:
- 예외 처리를 위해 try...catch 사용
- 예상치 못한 입력을 방지하는 로직 추가
2. 자바스크립트 오류 해결 방법
✅ 1) 콘솔 오류 메시지 확인하기
자바스크립트 오류가 발생하면 브라우저의 개발자 도구(DevTools)에서 오류 메시지를 확인할 수 있습니다.
브라우저별 개발자 도구 열기
- Chrome: F12 또는 Ctrl + Shift + I
- Firefox: F12 또는 Ctrl + Shift + I
- Edge: F12
- Safari: Option + Command + I
개발자 도구의 Console 탭에서 오류 메시지를 확인한 후 해당 코드 부분을 수정하세요.
✅ 2) console.log()로 디버깅하기
오류가 발생한 부분을 찾기 위해 console.log()를 활용하세요.
let user = { name: "John" };
console.log(user.age); // undefined (예상 가능)
console.log(user.name); // "John"
이렇게 값을 출력하면서 문제를 찾아낼 수 있습니다.
✅ 3) try...catch 사용하여 예외 처리하기
예외 처리를 통해 프로그램이 중단되지 않도록 할 수 있습니다.
try {
let result = someUndefinedFunction(); // 존재하지 않는 함수 호출
} catch (error) {
console.error("오류 발생:", error.message);
}
이렇게 하면 예상치 못한 오류가 발생해도 프로그램이 멈추지 않고 오류 메시지가 표시됩니다.
✅ 4) 변수 선언 여부 확인 (let, const, var)
// ReferenceError 예제
console.log(myVar); // 오류 발생 (myVar가 정의되지 않음)
let myVar = "Hello"; // 해결: 변수를 먼저 선언
console.log(myVar);
해결 방법:
- 변수를 사용하기 전에 반드시 선언 (let, const, var 중 하나 사용)
- 전역 변수와 지역 변수를 혼동하지 않도록 주의
✅ 5) 파일 경로 및 모듈 확인
외부 파일이나 라이브러리를 가져올 때 경로가 올바른지 확인하세요.
<script src="wrong-path.js"></script> <!-- 잘못된 경로 -->
✅ 해결 방법:
- 파일 경로가 정확한지 확인 (./, ../ 등 경로 확인)
- CDN을 사용할 경우 인터넷 연결 상태 점검
✅ 6) 최신 브라우저 사용 및 캐시 삭제
자바스크립트 기능이 최신 브라우저에서만 지원될 수도 있습니다.
또한, 브라우저 캐시 문제로 인해 코드 변경 사항이 적용되지 않을 수도 있습니다.
해결 방법:
- 최신 브라우저 사용
- Ctrl + Shift + R 또는 Cmd + Shift + R으로 강제 새로고침
3. Q&A
Q1. Uncaught ReferenceError: is not defined 오류는 어떻게 해결하나요?
원인: 변수가 선언되지 않음
해결책:
let myVar = "Hello"; // 변수를 선언한 후 사용
console.log(myVar);
Q2. TypeError: Cannot read properties of undefined 오류가 발생합니다.
원인: undefined인 값을 읽으려고 할 때 발생
해결책:
let obj = {};
console.log(obj.name?.toUpperCase()); // 옵셔널 체이닝 사용 (?.)
또는 값이 존재하는지 확인 후 사용하세요.
Q3. SyntaxError: Unexpected token 오류는 무엇인가요?
원인: 코드 문법 오류
해결책:
- 괄호, 따옴표 확인 ("", '', (), {} 등)
- 코드 줄 끝에 세미콜론(;)이 빠졌는지 확인
console.log("Hello World"); // 올바른 문법
Q4. CORS 오류가 발생할 때 해결 방법은?
원인: 다른 도메인의 API 요청이 차단됨
해결책:
- 서버에서 CORS 허용 (Access-Control-Allow-Origin 설정)
- 프록시 서버 사용 또는 fetch 요청 시 mode: "cors" 추가
4. 결론
자바스크립트 오류는 초보자뿐만 아니라 숙련된 개발자에게도 자주 발생하는 문제입니다. 하지만 오류 메시지를 정확히 분석하고, 디버깅 방법을 활용하면 빠르게 해결할 수 있습니다.
💡 핵심 요약
✔ 개발자 도구에서 콘솔 오류 메시지 확인
✔ console.log()로 변수 값 확인
✔ try...catch로 예외 처리
✔ 변수 선언 (let, const) 확인
✔ 파일 경로 및 캐시 문제 점검
자바스크립트 오류가 발생하면 당황하지 말고 한 단계씩 해결 방법을 적용해 보세요.