Sitemap 오류 수정기

블로거 사이트맵 오류 해결: 썸네일 누락으로 인한 JavaScript 'undefined' 문제와 try-catch 해결법

블로그 운영에 있어 검색 엔진 최적화(SEO)의 중요한 부분 중 하나는 바로 사이트맵(Sitemap) 제출입니다. 저도 사용 중인 블로거(Blogger) 템플릿 제작자가 제공하는 가이드 문서를 보고 사이트맵 기능을 적용해 보았습니다.

사이트맵 적용 후, 썸네일 관련 'undefined' 오류가 발생한 모습

사이트맵 적용 시도와 예상치 못한 오류

하지만 예상대로 한 번에 성공하지는 못했습니다. 😅 사이트맵 페이지를 확인해보니, 위 이미지처럼 일부 영역이 제대로 표시되지 않고 개발자 콘솔에는 'undefined' 관련 오류가 발생하고 있었습니다. "역시나 쉽게 되지 않는구나..." 하는 생각이 들었죠.

오류의 원인: 이미지 썸네일 누락과 JavaScript 중단

오류 메시지와 코드를 자세히 살펴보니, 게시물에 대표 이미지(썸네일)가 없는 경우, 썸네일을 처리하는 자바스크립트(JavaScript) 부분에서 값을 제대로 가져오지 못해 'undefined' 오류가 발생하며 스크립트 실행이 중간에 멈춰버리는 것이었습니다. 이 때문에 사이트맵 목록이 정상적으로 생성되지 못하고 있었습니다. (여담이지만, 템플릿 소스 코드가 정렬도 제대로 되어 있지 않아 분석하는 데 애를 먹었습니다.)

해결 과정: `try-catch`로 JavaScript 오류 극복하기

웹 개발 경험이 많지 않아 처음에는 `if`문으로 `undefined` 경우를 분기 처리하려고 시도했지만, 여전히 특정 지점에서 스크립트가 중단되는 현상이 해결되지 않았습니다. (아마도 `undefined`인 객체의 속성에 접근하려 할 때 발생하는 오류를 `if`문만으로는 완벽히 잡아내지 못한 것 같습니다.)

고민 끝에, 과거 자바(Java) 프로그래밍에서 예외 처리에 사용했던 try-catch 구문이 자바스크립트에도 동일하게 존재한다는 것을 알게 되었습니다. 이 `try-catch` 구문으로 오류 발생 가능성이 있는 코드 전체를 감싸주었더니, 드디어 문제가 말끔히 해결되었습니다! 🎉

오류 발생 부분을 `try-catch`로 감싸서 예외 처리한 코드

추가 개선: 기본 썸네일(Default Thumbnail) 적용으로 완성도 높이기

오류는 해결했지만, 썸네일이 없는 게시물의 경우 이미지가 표시되지 않아 어딘가 비어 보이는 아쉬움이 있었습니다. 이를 개선하기 위해, 썸네일이 없을 때 보여줄 기본 이미지(디폴트 썸네일)를 설정하는 코드를 추가했습니다.

기본 썸네일을 적용하여 모든 게시물에 이미지가 표시되도록 개선

이제 썸네일 유무에 관계없이 모든 게시물 항목이 일관된 형태로 표시되어 훨씬 보기 좋아졌습니다. 드디어 사이트맵이 제대로 작동하는 것 같아 뿌듯합니다! 😃

템플릿 코드의 어려움과 향후 과제

이번 사이트맵 오류를 해결하면서 다시 한번 느낀 점은, 제공받은 템플릿 소스 코드의 복잡성과 가독성 문제였습니다. 코드가 정렬되어 있지 않고, 일부는 암호화된 것처럼 보이기도 해서 오류가 발생할 때마다 원인을 찾고 수정하는 것이 쉽지 않았습니다. (없는 실력에 더더욱...)

가독성을 높이고자 웹 기반 코드 정렬 도구를 사용해 전체 소스를 정리해보기도 했지만, 이 과정에서 오히려 띄어쓰기 문제 등으로 새로운 오류가 발생하기도 했습니다. 물론 지금은 많은 부분을 수정하여 안정화된 상태입니다.

현재 블로그 로딩 속도도 다소 느린 편이라, 언젠가는 전체 템플릿 소스를 대대적으로 정리하고 최적화하는 날이 오지 않을까 하는 작은 희망을 가져봅니다. (과연... 🤔)

블로거에서 사이트맵을 설정하거나 자바스크립트 오류로 어려움을 겪는 분들께 이 글이 조금이나마 도움이 되었으면 좋겠습니다. 혹시 비슷한 경험이나 더 좋은 해결 방법이 있다면 댓글로 공유해주세요!