티스토리 블로그 구독 버튼 추가 후 SyntaxHighlighter 가 작동하지 않는 증상 임시 해결
Posted 2019. 3. 24. 00:29, Filed under: 개발/JavaScript티스토리에 추가된 블로그 구독 기능
2019년 3월 20일, 티스토리에 블로그 구독이라는 기능이 추가되었다.
여타 사이트의 구독 or 팔로잉 기능과 비슷하게, 마음에 드는 블로그를 구독하여 글을 쉽고 빠르게 모아볼 수 있는 기능이다.
자세한 설명은 다음의 링크 참조. https://notice.tistory.com/2477?category=110385
블로그 구독 버튼은 티스토리 관리자 페이지의 [메뉴바/구독 설정] 에서 활성화 할 수 있다.
이 블로그는 해당 기능이 나오자 마자 바로 블로그 구독 버튼을 활성화 해주었다.
블로그 구독 버튼 활성화 후 SyntaxHighlighter 가 작동하지 않는 증상 발생
그런데 블로그 구독 버튼을 활성화 한 후 3일 만에 알게된 것인데,
SyntaxHighlighter 가 적용되지 않고 원본 텍스트로만 출력되는 증상이 발생하고 있었다.
내 환경에서만 이런 문제가 발생하는 것인지는 따로 테스트를 해보지 않아서 잘 모르겠다.
내 경우 CDN 을 통해 SyntaxHighlighter 3.0.83 을 불러와 <pre> 태그를 이용하는 방법으로 SyntaxHighlighter 를 사용하고 있고
블로그 스킨으로는 개인적으로 수정한 Custom 스킨을 사용하고 있다.
문제 원인 파악
Chrome의 개발자도구를 열어 문제를 확인했다.
SyntaxHighlighter 의 shCore.js 에서 재귀호출이 너무 많이 일어나 오류가 발생하고 있었다.
CDN 에서 불러오는 shCore.js 파일은 압축(minify)되어있어 분석이 쉽지 않으므로
minify되지 않은 XRegExp.js 파일과 shCore.js 을 로드했다. (CDN 에서 불러오는 shCore.js 는 두 파일이 합쳐진 형태이다.)
이후 다시 문제를 확인하자 아래의 그림과 같이
구독 버튼을 추가하기위해 로드된 menubar.min.js 에서 String.replace 함수를 호출하는 과정에서 에러가 시작되었다고 한다.
그리고 그 에러는 XRegExp.js 로 연결되어 있었다.
XRegExp 라이브러리는 정규표현식을 편하게 사용할 수 있도록 돕고,
브라우저와 상관없이 동일한 정규표현식 동작을 수행할 수 있도록 호환성을 제공하는 라이브러리 이다.
설명에 따르면 아래와 같이 정규표현식을 사용하는데 쓰이는 몇가지 함수들이 브라우저 간 차이를 보이는 부분이 있어
호환성을 유지할 수 있도록 이러한 함수들을 덮어씌우는 동작이 있다고 한다.
그래서 아래의 그림과 같이 몇가지 prototype 함수들을 real 이라는 Object 에 복사해두고
아래의 그림과 같이, 브라우저 간 호환성을 유지할 수 있도록 수정된 함수를 덮어씌운다.
함수 내에서는 real 에 복사된 함수를 다시 호출하고, 조건식에 따라 브라우저 간 호환성 유지를 위한 여러 동작을 수행한다(고한다).
그리고 menubar.min.js 에서는 String.prototype.replace 함수를 호출하는데,
이 때 SyntaxHighlighter 를 사용하는 경우라면 XRegExp 에서 덮어씌워진 수정된 함수를 불러오게 된다.
여기서 에러(재귀호출)가 발생한다.
여기까지만 보고 코드를 더 분석해보지는 않았지만 대충 원인을 추정해보자면,
모종의 이유로 real 에 복사된 함수가 한 번 더 덮어씌워지게 되는 경우
수정된 함수 내에서는 real 에 복사된 함수를 호출하고 있으므로 결국 자기 자신을 호출하는 것이 되어 재귀호출이 발생할 수 있을 것 같다.
아니면 그냥 그 외 라이브러리 충돌 문제로 재귀호출이 발생하게 되어 문제가 발생하게 된 것일 수도 있다.
자세하게 분석하지는 않아서 정확한 이유는 모르겠다.
이 외에도 비슷한 몇가지 문제가 있었다.
임시로 문제 해결하기
XRegExp_new.js
파일 업로드 버튼을 누른 뒤
추가 버튼을 눌러 위에서 다운받은 두 파일(regExp_new.js, shCore_new.js)을 업로드한다.
이후 HTML 버튼을 눌러 HTML 편집창으로 간 뒤
기존의 shCore.js 를 불러오는 부분을 아래와 같이 수정한다.
혹시 기존에도 shCore.js 와 XRegExp.js 를 모두 로드하고 있었던 경우 두 라인을 모두 주석처리 해주면 된다.
주의할 점은 regExp_new.js 를 불러오는 라인이 shCore_new.js 를 불러오는 라인보다 반드시 위에 있어야 한다.
수정을 완료하였으면 적용 버튼을 눌러 저장한다.
근본적인 원인을 찾아서 수정했다면 더 좋았겠지만, 짧은 시간을 들여 해결할 수 있는 수준에서 대충 해치웠다.
사실 이 포스트를 적는 시간이 더 오래 걸렸다.
