카테고리 없음

JavaScript 콘솔에 'Uncaught SyntaxError' 자꾸 뜰 때 체크리스트

트티 2025. 4. 22. 08:00

JavaScript 콘솔에 'Uncaught SyntaxError' 자꾸 뜰 때 체크리스트

개발자라면 누구나 한 번쯤 마주치는 오류, 바로 JavaScript 콘솔에 빨간 글씨로 뜨는 'Uncaught SyntaxError'입니다. 코드를 아무리 봐도 어디가 틀렸는지 모르겠고, 때로는 에러 메시지도 애매하게 느껴지죠. 특히 초보자에겐 더욱 당황스러운 순간일 수 있어요.

이 글에서는 이런 Uncaught SyntaxError가 발생했을 때, 당황하지 않고 차근차근 원인을 파악할 수 있는 실용적인 체크리스트를 소개할게요. 실제 사례와 함께 하나하나 짚어보며, 앞으로는 이 에러가 두렵지 않게 만들어 드릴게요.

📌 괄호, 따옴표, 중괄호 빠진 곳 찾기

'Uncaught SyntaxError'는 대부분 코드의 문법적 구조가 잘못되었을 때 발생해요. 특히 괄호나 중괄호, 따옴표가 짝이 맞지 않거나 빠졌을 때 자주 나타나죠.

예시:

if (user.isLoggedIn {
  console.log("환영합니다!");
}

이 코드는 여는 괄호는 있지만 닫는 괄호 )가 빠져 있어 SyntaxError가 납니다.

이런 오류는 IDE에서도 표시되지만, 가끔은 눈에 띄지 않는 경우도 있어서 코드를 천천히 라인별로 읽어보는 습관이 중요해요.

📌 if, else, return 문법 구조 확인

if, else, return 같은 키워드는 특정 문법 구조를 필요로 해요. 이 구조를 어기면 SyntaxError가 발생할 수 있죠.

예시:

function checkAge(age) {
  if age > 18
    return "성인입니다.";
}

위 코드는 if 뒤에 괄호 ()가 빠져 있어 에러가 납니다. 자바스크립트는 조건문에서 반드시 괄호를 요구합니다.

📌 Unexpected token 오류 이해하기

'Unexpected token'은 생각지 못한 위치에 기호나 문자가 들어갔을 때 발생하는 SyntaxError입니다. 주로 쉼표, 세미콜론, 연산자 등을 잘못 썼을 때 나타납니다.

예시:

const greeting = "안녕하세요",

문장이 ,로 끝나서 자바스크립트는 다음 문장이 올 거라 기대하는데, 실제론 끝이라 에러가 납니다. 이런 경우 ;를 써야 하죠.

📌 실제 사례로 살펴보기

제가 예전에 겪은 경험을 하나 소개할게요. 쇼핑몰 웹사이트에서 사용자 리뷰를 실시간으로 불러오는 기능을 만들고 있었는데, 갑자기 콘솔에 Uncaught SyntaxError: Unexpected end of input이 떴어요. 코드를 아무리 봐도 문제가 없어 보였는데...

알고 보니, JSON 데이터를 fetch한 후 파싱할 때 중괄호 한 쌍이 빠져 있었던 것이었어요.

잘못된 코드:

fetch("/reviews.json")
  .then(res => res.json())
  .then(data => {
    console.log(data);

보이시죠? 마지막 }와 );가 빠졌어요. 단순한 실수지만 찾기 어려운 유형이죠.

이런 경우는 VSCode의 Bracket Pair Colorization 같은 확장 기능이나, Lint 툴을 활용하면 금방 발견할 수 있어요.

📌 디버깅 툴 활용 팁

에러 메시지에서 당황하지 마세요. Chrome 개발자 도구의 콘솔 창에는 에러가 발생한 정확한 파일명과 라인 번호가 표시돼요. 해당 줄로 이동하면 어떤 부분이 잘못됐는지 바로 확인할 수 있죠.

또한 Sources 탭을 통해 실시간으로 코드 라인을 수정하고 결과를 테스트할 수 있으니, 디버깅할 때 매우 유용하게 활용할 수 있어요.

📌 더 많은 경험과 실용적인 팁

'Uncaught SyntaxError'는 때론 단순하면서도, 해결하는 데 꽤 긴 시간을 소모하게 만드는 녀석이에요. 특히 프로젝트가 복잡해질수록 작은 실수 하나가 전체 기능을 마비시키기도 하죠. 아래는 제가 직접 겪었던 사례들과, 그때 깨달았던 실용적인 팁들을 정리해봤어요.

1. HTML 내 script 태그 위치 점검하기

한 번은 웹 페이지가 아무 반응도 하지 않길래, 코드를 열심히 디버깅했어요. 알고 보니 <script> 태그가 DOM이 로드되기 전에 실행되어서, 아직 존재하지 않는 요소를 조작하려다 에러가 난 거였죠.

해결 팁: </body> 직전에 <script> 태그를 넣거나, window.onload 또는 DOMContentLoaded 이벤트로 코드를 감싸는 습관을 들이면 좋아요.

2. 주석처리된 코드도 의심해보기

개발 중간에 주석처리를 하다가 문법 오류가 생긴 적도 있었어요. 특히 여러 줄 주석 /* */ 안에 */가 중복되거나 빠진 경우, 이후 코드 전체가 꼬이게 되죠.

팁: 주석을 임시로 처리할 땐 // 단일 줄 주석이 더 안전할 수 있어요. 특히 복잡한 if-else 구조 안에 있는 코드라면요.

3. VSCode 확장 프로그램 적극 활용하기

초보 시절 SyntaxError를 줄이기 위해 썼던 최고의 무기 중 하나는 Prettier + ESLint 조합이었어요. 코드 스타일을 자동으로 정리해주고, 오류가 발생할 여지도 줄여주죠.

특히 ESLint는 문법 오류가 발생하기 전에 코드 상에서 밑줄로 경고를 주기 때문에, 저장하기 전에 에러를 예방할 수 있어요.

4. 간단한 콘솔 테스트 습관

요즘은 새 기능을 추가할 때, 전체 파일에 넣기 전에 브라우저 콘솔에서 미리 짧은 코드 테스트를 해보는 습관이 생겼어요. 한 줄짜리 표현식도 에러 없이 잘 동작하는지 확인하면, 큰 그림에서도 실수가 줄어들더라고요.

5. 자주 실수하는 포인트 메모해두기

사람마다 자주 틀리는 포인트가 달라요. 저는 function() 쓸 때 콤마를 잘못 찍거나, 객체 정의 중 마지막 항목 뒤에 쉼표를 남기는 실수를 자주 했어요. 그런 것들을 따로 메모해두니까 같은 실수를 반복하지 않게 되더라고요.

💡 실용 팁: 개발일지를 짧게라도 작성해 보세요. 어떤 에러가 왜 났고, 어떻게 해결했는지를 정리하다 보면 디버깅 실력이 점점 올라갑니다!

SyntaxError 없이 개발하는 그날까지, 한 걸음씩!

📌 결론

'Uncaught SyntaxError'는 JavaScript를 처음 접하거나, 코드가 복잡해질수록 누구나 겪는 흔한 오류입니다. 하지만 중요한 건 에러가 발생했을 때 당황하지 않고, 차분하게 원인을 추적할 수 있는 습관을 기르는 거예요.

이번 글에서 소개한 체크리스트를 기준 삼아 하나씩 점검해보면 대부분의 문제는 금방 해결됩니다. 괄호나 따옴표 누락, 잘못된 문법 구조, 예상하지 못한 토큰의 위치 등 자주 발생하는 실수를 먼저 의심해보세요.

그리고 무엇보다 중요한 건, 경험을 기록하고 반복 학습하는 것이에요. 에러는 개발자에게 배움의 기회라는 말, 정말 진심입니다. 처음엔 머리 아프지만, 그 과정을 통해 점점 실력이 쌓이게 되니까요.

다음번에 콘솔에 빨간 글씨가 보이더라도, 이 글에서 소개한 체크리스트를 꺼내 하나씩 확인해보세요. 분명 더 빠르고 정확하게 문제를 해결할 수 있을 거예요!

더 많은 개발 꿀팁 보러 가기 🚀

티스토리