[Tistory] "카테고리 한글 깨짐" 해결 방법

 

티스토리 스킨편집시 html 코드에 <script> 코드를 추가하여
카테고리 이름을 블로그 화면에 보이도록 설정해 두었습니다!
그런데!
한글로 작성된 카테고리명이 %EB%B6%80%EB%8F%99%EC%82%B0 이렇게 표시가 되었어요!

 

◼️ 문제 발생 코드 

          <script>
          // 현재 카테고르 이름 가져오기 
            document.addEventListener('DOMContentLoaded', function() {
              // URL에서 카테고리 이름 추출
              var currentPath = window.location.pathname;
              var pathSegments = currentPath.split('/').filter(function(el) { return el.length != 0; });
              var categoryName = pathSegments[pathSegments.length - 1]; // 마지막 세그먼트를 카테고리 이름으로 사용

              // 카테고리 이름을 <h2> 태그에 삽입
              var categoryTitleElement = document.querySelector('.title_list_section');
              if (categoryTitleElement) {
                categoryTitleElement.textContent = categoryName;
              }
            });
          </script>

 

categoryName이 화면에 보여줄 카테고리 이름입니다.

전 카테고리 이름을 url에서 가져오고 있습니다. 

문제의 원인은 URL에서 한글 카테고리 이름을 읽어올 때, 한글이 URL 인코딩되어 %EB%B6%80%EB%8F%99%EC%82%B0과 같이 표현되기 때문입니다. 이를 해결하기 위해서는 JavaScript의 decodeURIComponent 함수를 사용하여 URL 인코딩된 문자열을 정상적인 문자열로 변환해주어야 합니다.

 

 

 

 

◼️ 문제 발생 부분 찾기 

1. 웹 페이지 화면이 보이는 상태에서 F12 버튼을 클릭

2. 우측 또는 하단에 복잡하게 생긴 창이 나타납니다. (Naver 페이지 예시)

 

3. 빨간 박스 안에 있는 버튼을 클릭 후 네이버 페이지 화면에 마우스 포인터를 이동해 보세요.

 

4. 마우스 포인터가 가리키는 UI의 정보를 확인할 수 있습니다. 

이 정보의 이름 또는 코드를 복사하여 블로그 html 코드에서 찾아보시면 금방 위치를 찾으실 수 있습니다. 

 

 

 

◼️ 문제 해결 코드 

<script>
  // 현재 카테고리 이름 가져오기 
  document.addEventListener('DOMContentLoaded', function() {
    // URL에서 카테고리 이름 추출
    var currentPath = window.location.pathname;
    var pathSegments = currentPath.split('/').filter(function(el) { return el.length != 0; });
    var categoryName = pathSegments[pathSegments.length - 1]; // 마지막 세그먼트를 카테고리 이름으로 사용
    categoryName = decodeURIComponent(categoryName); // URL 인코딩된 카테고리 이름을 디코드

    // 카테고리 이름을 <h2> 태그에 삽입
    var categoryTitleElement = document.querySelector('.title_list_section');
    if (categoryTitleElement) {
      categoryTitleElement.textContent = categoryName;
    }
  });
</script>

 

categoryName = decodeURIComponent(categoryName); // URL 인코딩된 카테고리 이름을 디코드

 

URL 인코딩되어 있는 카테고리 이름을 정상적인 문자로 변경하는 코드입니다.