메인 Post화면에서 kotlin 관련글 썸네일을 불러오지 못하더니 Popular post에는 불러와서 보여준다.. 아무튼 뭐 이건 나쁠건 없지만 문제는 이미지가 하나도 없는글이다.
썸네일이 없어서 공간을 무너트린다. 탭은 템플릿에서 제공하고 포스트 정보는 구글에서 제공하는 위젯이라... 템플릿제공자와 구글의 환상적인 콜라보? 우리 구글형이 그럴리 없어!
아무튼.. 오늘은 이걸 고쳐보고자 다시 블로그 소스를 펼쳐 문제가 되는 부분을 찾아봤다.
...그래도 양반인게 분기 주석을 잘 달아줬다.ㅋㅋ
<b:if> 라던가 expr이런 문법들은 익숙치 않아 다른 줄에서 사용한 것들을 참고해서
대충 느낌적인 느낌으로 수정을 시도해봤다.(JSTL 문인가..? 😏)
<b:if></b:if>가 한쌍으로 분기가 되는걸보고 if문 뒤에 <b:else></b:else>로 추가 분기분을 넣고 수정을 시도해봤지만.. Popular post탭이 전부 사라져버렸다.(아마도 오류때문에 html 태그 생성이 안된듯하다.)
한참을 다시 보고 이것저것 시도해본중! if-else 사용법이 틀렸다.
기본적으로
[if 태그 열고] [if 태그 닫고] [else태그 열고] [else태그 닫고]
순서로 하는거라 생각했는데 그게 아니었다.
[if 태그 열고] [else태그 선언하고][if 태그 닫고]
이렇게 분기를 해야했다.
아무래도 개발을 위한 블로그다 보니 코드를 삽입할 경우가 많을거 같아 코드 삽입 법을 찾아봤는데 기본적으로 <pre> 태그를 html모드로 변경해 삽입 하는 엄청난 노가다를 구글에서 지원해준다.😲(구글이 그럴리 없어!)
코드쓰고 -> html모드로 바꾸고 -> 앞뒤로 <pre></pre>삽입.... 엄청난 노가다라 이런 비효율을 줄이기 위해 검색하던중 사이트 하나를 발견했다.
이렇게 깔끔하게 코드가 나온다 .
사이트로 이동해서 코드를 쓰고 -> 이미지에 나온것처럼 HTML코드를 복사해서 -> html모드로 바꾸고 -> 삽입! 야호! 코드 시작과 끝을 찾는 번거로움이 사라졌다...😂
그래도 초반엔 엄청난 도움이 되서 사용을 하다가 다시 다른 사이트를 찾게됐다.
블로거 사이트맵 오류 해결: 썸네일 누락으로 인한 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) 적용으로 완성도 높이기
오류는 해결했지만, 썸네일이 없는 게시물의 경우 이미지가 표시되지 않아 어딘가 비어 보이는 아쉬움이 있었습니다. 이를 개선하기 위해, 썸네일이 없을 때 보여줄 기본 이미지(디폴트 썸네일)를 설정하는 코드를 추가했습니다.
기본 썸네일을 적용하여 모든 게시물에 이미지가 표시되도록 개선
이제 썸네일 유무에 관계없이 모든 게시물 항목이 일관된 형태로 표시되어 훨씬 보기 좋아졌습니다. 드디어 사이트맵이 제대로 작동하는 것 같아 뿌듯합니다! 😃
템플릿 코드의 어려움과 향후 과제
이번 사이트맵 오류를 해결하면서 다시 한번 느낀 점은, 제공받은 템플릿 소스 코드의 복잡성과 가독성 문제였습니다. 코드가 정렬되어 있지 않고, 일부는 암호화된 것처럼 보이기도 해서 오류가 발생할 때마다 원인을 찾고 수정하는 것이 쉽지 않았습니다. (없는 실력에 더더욱...)
가독성을 높이고자 웹 기반 코드 정렬 도구를 사용해 전체 소스를 정리해보기도 했지만, 이 과정에서 오히려 띄어쓰기 문제 등으로 새로운 오류가 발생하기도 했습니다. 물론 지금은 많은 부분을 수정하여 안정화된 상태입니다.
현재 블로그 로딩 속도도 다소 느린 편이라, 언젠가는 전체 템플릿 소스를 대대적으로 정리하고 최적화하는 날이 오지 않을까 하는 작은 희망을 가져봅니다. (과연... 🤔)
블로거에서 사이트맵을 설정하거나 자바스크립트 오류로 어려움을 겪는 분들께 이 글이 조금이나마 도움이 되었으면 좋겠습니다. 혹시 비슷한 경험이나 더 좋은 해결 방법이 있다면 댓글로 공유해주세요!
블로거(Blogger) 페이지 네비게이션 사라짐 현상, 이렇게 해결했어요! (pagenavi 오류 복구)
블로거 템플릿을 사용하다 보면 예기치 않게 페이지 네비게이션(페이지네이션)이 사라지는 경우가 있습니다. 저도 최근 템플릿 설정을 변경하던 중, 어느 순간부터인가 블로그 하단의 페이지 이동 버튼들이 감쪽같이 사라져 버렸습니다. 😭 원인을 정확히 파악하기 어려워 답답했죠.
사라지기 전, 템플릿에서 정상적으로 작동하던 페이지 네비게이션의 모습입니다.
문제 상황: 갑자기 사라진 블로그 페이지네이션
보시다시피, 글 목록 하단에 있어야 할 페이지 이동 링크가 보이지 않는 상태입니다. 이로 인해 이전 글들을 찾아보기가 매우 불편해졌습니다. 특히 콘텐츠가 많은 블로그일수록 페이지 네비게이션은 필수적인 기능이죠.
페이지 네비게이션이 보이지 않는 문제 발생 화면
해결 과정: 사라진 페이지 네비게이션 복구하기
단순 설정 오류인지, 템플릿 코드 문제인지 파악하기 위해 몇 가지 단계를 거쳤습니다.
원인 분석 (크롬 개발자 도구 활용): 우선, 크롬 개발자 도구(F12)를 이용해 문제의 원인을 분석했습니다. HTML 코드를 살펴보니, 기존 네비게이션이 pagenavi라는 CSS 클래스와 연관되어 있음을 추측할 수 있었습니다.
구글링으로 해결책 검색: 이를 바탕으로 구글에 "Blogger pagenavi", "블로거 페이지네이션 복구", "Blogger navigation fix" 등의 키워드로 검색했고, 다행히 몇 가지 유용한 해결 방법을 찾을 수 있었습니다.
스크립트 및 CSS 적용: 검색한 자료 중 제 블로그에 적용 가능한 자바스크립트(JavaScript)와 CSS 코드를 찾아 블로그 HTML 편집 모드에 추가했습니다.
새로운 코드를 적용하여 복구된 페이지 네비게이션
찾은 자료를 바탕으로 블로그 HTML 편집 모드에서 새로운 JavaScript 코드와 CSS 스타일을 추가하고, 제 블로그 환경에 맞게 약간의 수정을 거쳐 적용했습니다. 그 결과... 짠! 이렇게 새로운 페이지 네비게이션이 생겼습니다. 기존 템플릿의 '정품' 네비게이션보다는 다소 심플해 보이지만, 일단 급한 불은 껐습니다. 😄 추후 CSS를 좀 더 다듬어서 블로그 디자인과 잘 어울리도록 개선할 예정입니다. 😋
💡 중요 팁: 페이지당 게시물 수 일치시키기
새로운 페이지 네비게이션 스크립트를 적용할 때 매우 중요한 점이 있습니다. 스크립트 내의 perPage (또는 유사한 이름의 변수, 예를 들어 numPostsPerPage 등) 값과 블로거 '레이아웃' 설정에서 '블로그 게시물' 위젯의 '기본 페이지에 표시할 게시물 수'가 반드시 동일해야 합니다. 이 숫자가 일치하지 않으면 페이지별로 게시물이 제대로 표시되지 않거나, 마지막 페이지 계산 오류 등 예기치 않은 문제가 발생할 수 있습니다.
예를 들어, 스크립트에서 perPage = 7로 설정했다면, 블로거 레이아웃 설정에서도 한 페이지에 표시할 게시물 수를 7개로 맞춰주어야 정확하게 페이지가 나뉘고 모든 글을 문제없이 볼 수 있습니다.
참고 자료
제가 페이지 네비게이션 문제를 해결하는 데 큰 도움을 받은 자료는 다음과 같습니다. 비슷한 문제를 겪고 계신 분들께 유용할 것입니다.
드디어 블로그의 제대로 된 첫 글이다.
블로그를 하려고 보니 무엇으로 시작할 지부터 고민이었지만 최종적으로 구글에서 서비스하는 Blogger를 '갓'구글형이니까라고 선택하게 됐다.
개인적으로 공부한 내용을 복습도 하고 스스로 꾸준한 공부를 하도록 압박(?)을 하기 위해서 개설했지만, 블로그를 운영해본 경험도 없고 설정을 하다 보니 욕심이 생겨서 이것저것 알아보다가 이제야 첫 글을 쓰게 됐다.
글을 써본 적도 없어서 존댓말로 써야 하나 반말로 써야 하나 반존대(?)를 해야 하나
맞춤법을 틀리면 어떡하지 하는 등의 고민이 꼬리에 꼬리를 물지만 일단은 하나하나 헤쳐가기로 하고 글을 써본다.
블로그의 목적은 위에서 말한 것처럼 공부한 것들의 복습용으로 올릴 예정이고 최대한 공식? 정식? 문서를 활용해서 기본에 충실하게 내용들을 채워볼까 한다.
아마 주 콘텐츠는 '안드로이드 개발'이 될 듯싶지만 프로그래밍 전반에 있어서 유용한 팁이나 정보들도 함께 올려볼 생각이다.
