개요

Jekyll 블로그를 구성하면서 비교적 잘 알려지지 않은 Scribble 태그를 선택한 것이 후회되는 순간이 한두 번이 아니다. 만든 지 며칠 되지도 않았는데

사실 필자는 자바스크립트에 대해 문외한이다. 그냥 이것저것 짜집기해서 만들고서 오류 나는 부분은 StackOverflow에 검색해서 해결하면 어떻게든 되는 것 같다. 단점은 사소한 버그에도 하루 종일을 써야 한다는 거…?

아무것도 없는 이 심플한 테마에 태그, 댓글, 목차 기능을 추가했는데 한글 태그가 제 역할을 하지 못한다는 걸 발견했다. 오늘도 잠자긴 글렀다.

그래도 답은 있겠지…

우선 먼저 발견한 문제.

//Move to post
$(".mv2").click((e) => {
  var element = $(e.target);
  href = element.attr("href");
  location.href = href;
});

포스트 제목을 클릭하면 해당 페이지로 이동되게끔 하는 코드다. 그냥 <a>태그 달고 끝낼 수도 있지만, 링크(포스트 바로가기) 안에 버튼(태그 선택)이 있어야 하는 상황이므로 JS script를 이용해야 했다.

문제는, mv2클래스에 이벤트를 적용했을 때 하위 객체에게도 이벤트가 전파된다는 것. 일반적인 상황에서는 자연스러운 과정이지만 태그를 클릭했을 때는 이게 실행되면 안 된다. 이해를 돕기 위해 그림을 첨부한다.

즉, 실제로 클릭된 개체값을 받아와 태그일 때는 저걸 무시하도록 해 줘야 한다.

//Move to post
$(".mv2").click((e) => {
  if(e.target.dataset.hasOwnProperty('tag')){return;}
  var element = $(e.target);
  href = element.attr("href");
  location.href = href;
});

이렇게, data-tag 클릭한 객체가 프로퍼티를 가지고 있으면 함수를 종료하는 조건문을 추가하여 해결했다.

두 번째 문제

이번엔 쿼리 데이터를 받아오는 부분에서 문제가 발생했다.

//String to JSON
function getQuery() {     
  var params = {};  
  window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
      function(str, key, value) { 
      params[key] = value; 
    }
  );
  return params; 
}

쿼리스트링을 JSON 객체로 바꿔 주는 편리한 함수이다. 그러나 저기에 한글이 들어가면 깨져버리는 현상을 확인했다. 검색을 통해 해결방법을 찾을 수 있었다.

//String to JSON
function getQuery() {     
  var params = {};  
  var url = decodeURI(window.location.search);//한글 쿼리 지원
  url.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
      function(str, key, value) { 
      params[key] = value; 
    }
  );
  return params; 
}

decodeURI() 를 사용하면 어째선지 한글이 깨지지 않게 되었다. 뭔지 모르겠지만 신기하다.

마지막 문제

태그에 공백이 들어가면 속성이 data-A B C 처럼 되어서 사용할 수 없다. HTML 태그는 속성을 공백으로 구분하기 때문이다. 잠깐 해결 방법을 고민하다 그냥 태그에 공백을 사용하지 않는 쪽으로 나 자신과 합의를 봤다. 원래라면 어떻게든 고쳤겠지만 생각해 보니 거의 모든 블로그 플랫폼에서 태그 공백을 허용하지 않는다는 것을 깨달았다. 뭔가 있구나 이거…

띄어쓰기가 꼭 필요할 때는 언더바( _ )를 대신 이용하자!

그리고 잠 좀 자자 ㅜㅜ