본문 바로가기

블로그 관리

티스토리 jQuery 버전 올리기

티스토리 북클럽(Book Club) 기본 스킨 기준으로 작성되었습니다.
jQuery를 다운로드해서 직접 추가하는 방법을 다룹니다. (CDN방식 X)
한번 해보고 싶은 경우 또는 별도의 필요한 경우가 아니라면 굳이 변경할 필요는 없다고 생각됩니다.

버전 수정하는 다른 방법

티스토리 속도 개선 (jQuery 이중 로드 제거)

 

티스토리 속도 개선 (jQuery 이중 로드 제거)

해당 포스팅은 티스토리의 기본 북클럽 스킨(Book Club)에서 진행되었습니다. 티스토리의 jQuery 버전이 바뀌므로, 다른 별도의 커스터마이징 된 스킨을 이용하시는 경우 문제가 발생할 수 있습니다

inveglo.tistory.com

티스토리 book club 스킨

1. 기본 jquery 버전 확인

티스토리 스킨 편집의 HTML 탭을 확인해보면 기본적으로 jquery를 로드하는 스크립트가 추가되어있습니다.

티스토리 스킨 편집 HTML 탭

'티스토리 관리 > 꾸미기 > 스킨 편집 > html 편집'에서 확인할 수 있습니다.
위의 이미지와 같이 기본적으로 jquery 1.12 버전을 추가하고 있음을 알 수 있습니다.
자신의 블로그에서 F12 버튼을 누른 후, console 탭에서 아래의 코드를 입력해보시면 버전 확인이 가능합니다. 

jQuery().jquery

티스토리 크롬 F12 콘솔 창 jQuery 버전 확인

2. jQuery 다운로드

아래의 경로에서 jQuery 프로덕션 압축 버전을 받아줍니다.

https://jquery.com/download/

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

jQuery 다운로드 페이지

위 이미지의 표시된 링크를 누르면 아래와 같은 페이지가 노출됩니다.

jQuery 다른 이름으로 저장

위와 같이 페이지에서 마우스 오른쪽 클릭 후, '다른 이름으로 저장'을 눌러 저장해줍니다.
파일 이름은 기본으로 하거나 본인이 알기 쉽게 하셔도 무방합니다.

jQuery 3.6.0 다운로드 파일

3. 티스토리에 jQuery 파일 업로드

티스토리 html 편집에서 아래와 같이 다운로드한 jQuery 파일을 업로드해줍니다.

티스토리 jQeury 파일 업로드

아래와 같이 HTML 탭에서 업로드한 jQuery 파일 경로를 추가해줍니다.

티스토리 jQuery 스크립트 추가

// 기본 적용 스크립트
<script src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
// 수정 스크립트
<script src="./images/jquery-3.6.0.min.js"></script>

빨간색으로 줄이 그어진 기존 jquery 1.12.4 버전 스크립트는 지워줍니다.
적용을 누르면 이제 jQuery 버전 업그레이드는 완료되었습니다.

티스토리 크롬 F12 콘솔 창 jquery 버전 업그레이드 후

4. 기본 script.js 수정

jQeury 버전이 1.12에서 3.6으로 올리면서 기본 script.js 파일의 한 줄 수정이 필요합니다.

북클럽 스킨 코드 수정

jQuery 1.8부터 load 함수는 사용되지 않으므로 위의 이미지와 같이 수정이 필요합니다.
수정하기 위해 티스토리에서 script.js 파일을 다운로드하여줍니다.
편의를 위해 다운로드 시 파일 이름은 script.js 기존과 동일하게 해 줍니다.

script.js 파일 다른 이름으로 링크 저장

다운로드한 파일은 혹시 모를 복원을 위해 하나 복사해 둡니다.
다운로드한 script.js 파일을 메모장에서 열어 아래 이미지와 같이 수정해줍니다. 

script.js 파일 소스 수정

$(window).load( 
// 위를 아래와 같이 수정
$(window).on("load",

수정한 script.js 파일을 저장해줍니다.
기존 티스토리의 script.js 파일 삭제 후, 저장한 파일을 업로드해줍니다.

기존 script.js 파일 삭제
수정한 script.js 파일 추가

기존 script.js 파일을 삭제 후, 다운로드하여서 수정한 script.js 파일을 추가해주면 완료입니다.
적용 버튼을 눌러준 후, 자신의 블로그 중 아무 글에 들어가 F12를 눌러 Console 창을 확인해 봅니다.

티스토리 크롬 F12 콘솔 창 에러

위와 같이 Error가 노출되지 않고, 아래와 같이 Error가 없어야 합니다.

티스토리 크롬 F12 콘솔 창 버전 업그레이드 후 정상 상태

이로써 티스토리 jQuery 3.6.0 버전 업그레이드 작업이 완료되었습니다.

5. 복원 방법

복원하는 방법은 2가지를 수정해주면 됩니다.

  1. 티스토리 html 탭에서 jQuery 로드 스크립트 복원
  2. 티스토리 파일 업로드 script.js 수정 부분 복원

이는 본문 목차의 3번과 4번에서 수정했던 부분을 반대로 복원해주면 됩니다.

반응형