..

Troubleshooting: Uncaught SyntaxError (매핑 중복 문제)

1. 문제 상황

웹 페이지에서 파일 다운로드 기능을 구현하던 중, 브라우저 콘솔에 Uncaught SyntaxError: Unexpected token '<' 그리고 uncaught reference $ is not defined 오류가 발생하는 현상을 겪었습니다.

2. 디버깅 과정

처음에는 jQuery 임포트 경로 문제로 판단하여 긴 시간을 허비했으나, 실제 원인은 엉뚱하게도 서버 측 RestController에 있었습니다.

// 문제가 된 코드 (매핑 중복)
@RequestMapping(method = RequestMethod.GET)
@GetMapping("blabla")

빠른 개발을 위해 코드를 복사해서 붙여넣다가, 동일한 엔드포인트에 @RequestMapping과 @GetMapping이 중복으로 선언된 것을 발견했습니다.

3. 해결 방법

중복된 어노테이션을 제거하고 하나로 통합하여 해결했습니다.

// 해결된 코드
@GetMapping("blabla")

화면단에서 발생하는 Syntax 오류가 때로는 서버 측의 잘못된 컨트롤러 설계로 인해 엉뚱한 HTML(에러 페이지 등)이 반환되면서 발생하는 연쇄적인 문제일 수 있음을 명심해야 합니다.