티스토리 뷰
발단
구글링을 하면서 가끔 velog 블로그에 들어가면, 포스트의 왼쪽이나 오른쪽에 글의 목차를 나열한 리모콘 같은 것이 보였습니다.
예전에 볼 때엔 '시각적으로도 예쁘고, 편한 기능이네~' 정도로만 생각했는데,
얼마 전에 어떤 분의 티스토리 블로그에 방문했다가 비슷하게 생긴 걸 발견하고는
'내 티스토리 블로그에도 넣고 싶어!'라는 강한 욕구가 들어서 이게 무엇인지부터 찾아보기 시작했습니다.
전개
검색을 어떻게 해야할 지 조금 고민하다가, 구글에 '티스토리 목차 스크롤'이라고 쳐봤습니다.
다행히 원하는 단어가 바로 나타났습니다. TOC(Table Of Contents)라고 합니다.
하지만 여러 블로그에 들어가보니 블로그 포스트 내에 TOC를 삽입하는 경우에 대한 글도 많았습니다.
tocbot이라는 오픈소스도 찾았지만 Javascript 파트 수정을 다소 해야 할 것 같았습니다.
제가 사용하는 블로그 스킨 같은 경우에는 메인 포스트 아래에 '●●● 카테고리의 다른 글' 이라는 <h4> 태그를 가지는 요소가 있는데, 이 요소를 TOC에 포함하지 않게 예외처리도 해줘야 했고요.
그래서 좀더 시간을 들여 찾아보다가 구원과도 같은 오픈소스를 발견했습니다.
깃헙 주소: https://github.com/wbluke/tistory-table-of-contents
블로그 주소: https://wbluke.tistory.com/21
Tistory TOC 이라는 제목에 걸맞게, 마침 저와 같은 티스토리 스킨을 쓰고 계셔서 딱 안성맞춤이었습니다!
행복한 마음으로 제작자님의 깃헙에 방문하여 해당 repository를 fork하여 CSS와 JS 파일을 제 블로그에 적용하였습니다.
그런데...
위기~절정
분명 제대로 적용한 것 같은데 최근 포스트(패스트캠퍼스 수강 nn회차 글)의 왼쪽에는 TOC가 보이지 않았습니다.
이상해서 패스트캠퍼스 수강 nm회차 글에 들어가보니 제목3(h4) 태그의 내용 하나만 덜렁 보이고 있었습니다.
개발자 도구를 켜서 TOC 영역을 점검하자 문제점이 바로 보였습니다.
(미관상의 이유로) 현재는 수정 작업 중에 있습니다만,
제 블로그의 패스트캠퍼스 카테고리 내에 있는 포스트들은 초기에 모두 제목 태그 내용에 '<'와 '>', 즉 부등호 기호가 들어가있었습니다.
포스트의 제목 태그 내용에 '<float 해제 ⭐>'라고 적어놨더니, HTML에서 부등호 기호를 특수기호로 인식하지 않고 HTML 태그 기호로 인식해서 내용이 HTML 태그처럼 변해버렸습니다.
유효하지 않은 형식이니 TOC에서 보이지 않았던 것입니다.
해당 이슈를 제작자님께 알리고 그렇게 어려운 문제가 아닌 것 같아 제가 직접 고쳐보기로 마음 먹었습니다.
1. GitHub의 해당 Repo의 Issues에 발견한 버그 공유하기
1-1. 첫 PR이라 허둥거린 부분이 있습니다.
제가 fork해간 저장소에서 코드를 수정하면 제작자님께 PR하라는 안내가 뜨는줄도 모르고
제작자님의 저장소를 clone해서 거기서 코드를 수정하고 커밋하려고 애쓰고 있었어요...😅
알고보니 왕초보들이 자주하는 실수더라고요 흑흑 이제 안 헷갈린닷
2. 수정된 JS 파일을 제 블로그 스킨에 삽입하여 테스트 해보기
// 처음 수정한 코드
// dev-toc.js 파일의 createBasicItemBy 함수에 부등호 기호를 HTML 특수문자로 바꾸는 코드 추가
if (hTag.innerText.includes('<')) {
hTag.innerText = hTag.innerText.replace(/</g, '&lt;');
hTag.innerText = hTag.innerText.replace(/</g, '<');
}
if (hTag.innerText.includes('>')) {
hTag.innerText = hTag.innerText.replace(/>/g, '&gt;');
hTag.innerText = hTag.innerText.replace(/>/g, '>');
}
3. 코드 커밋 후 제작자님께 PR을 드리기
하지만...?
아 제발 꼼꼼하게 테스트하자
hTag 변수의 innerText에 있는 부등호 기호를 모두 특수 기호로 바꿔버려서 포스트 내용의 부등호 기호까지 변해버린 것을 제작자님께서 찾아내셨습니다.
그리고 master 브랜치로 커밋했었는데 develop 브랜치로 커밋해달라는 요청을 받았습니다.
웬만하면 남의 master 브랜치를 건드리면 안 되는데 제 개인 프로젝트만 하다가... 방심했네요!
4. 제작자님의 요청에 따라 다시 PR 드리기
hTag.innerText를 계속 사용하는 게 아니라, 포스트의 제목 내용이 바뀌지 않게 따로 변수로 저장해두고,
TOC에 들어갈 내용의 부등호 기호만 특수 기호로 변경한 뒤 hTag.innerText에 넣어주었습니다.
5. Merged 후 해당 저장소의 Contributor(기여자)로 등록됨!
이 날 저녁에 너무 기뻐서 트위터에 동네방네 자랑을 다 하고 다녔습니다.
결말
GitHub를 처음 알았을 때 다른 사람의 프로젝트에 '기여'할 수 있다는 점이 참으로 두근두근 했습니다.
하지만 당시 제 코딩/개발 실력은 너무 레벨이 낮았고, 무엇보다 오픈소스를 잘 사용하지 않으니 '기여할 일이 뭐가 있을까?'라는 생각까지 들었습니다.
개발 공부를 꾸준히 하고 개발자답게 이것저것 필요한 걸 찾고 만들다보니 다른 사람의 오픈소스에 기여할 일이 생기네요.
제 삶의 모토인 '성실하게 꾸준히 하고 싶은 공부/일을 하자'가 빛나는 순간이었습니다.
버그를 고쳤으니 조만간 제 취향에 맞게 CSS 파일을 수정해서 반영해보려고 합니다.
티스토리 블로그 커스터마이징이 생각보다 재미가 있네요. 😇
"야 나두 오픈소스 기여할 수 있어!"