hELLO 스킨 콘솔오류 Uncaught TypeError 원인과 해결 방법

Uncaught TypeError

무료로 제공되는 hELLO 스킨은
많은 사람들이 사용하고 있는
티스토리 스킨 중 하나입니다.

저 또한 hELLO 스킨을 사용하려고 하는데
처음 발생하는 오류를 어느 정도 해결하고
사용하려고 준비하고 있습니다.

오류발생

스킨을 처음 설치 후 콘솔을 확인하면
빨간색으로 확인되는 오류정보입니다.

Uncaught TypeError:
Cannot read properties of null (reading 'click')
at toggleAdminLayer (common.js:599:18)
at common.js:610:1

이건 무슨 오류일까요?

오류정보

이 오류는 JavaScript 코드에서
'null' 값을 가진 객체의 속성을 읽으려고 할 때 발생합니다.

여기서는 'click' 속성을 가진 객체를 참조하려고 했지만,
해당 객체가 'null'이므로 속성을 읽을 수 없다는 오류입니다.

해결방법

이 오류를 해결하려면
다음과 같은 접근 방법이 있습니다.

코드를 검토하여 'null'이 될 수 있는
객체를 참조하는 부분을 확인하고,
해당 객체가 실제로 'null'인지 아닌지를 확인합니다.

'null'일 경우에 대비하여 적절한 오류 처리를 추가합니다.

예를 들어, 객체가 'null'인 경우에는 해당 속성을
참조하지 않도록 조건문을 추가하거나,
'null'인 경우에 대체 동작을 수행하도록 코드를 수정합니다.

원인확인

티스토리에서 티스토리 관리를 위해 사용되는
스크립트에서 발생하는 오류였습니다.

function toggleAdminLayer () {
    $('.btn_etc').click(function () {
        var $layer = $('.layer_edit');
        if ($(this).attr('aria-expanded') === 'true') {
            $(this).attr('aria-expanded', 'false');
            $layer.removeClass('layer_open');
        } else {
            $(this).attr('aria-expanded', 'true');
            $layer.addClass('layer_open');
        }
    })
}
toggleAdminLayer();

콘솔을 확인해 봤을 때 위 스크립트에서
오류를 확인할 수 있었습니다.

결국 이오류는 lightbox를 불러올 수 없어서
발생한 오류였습니다.

해결완료

해결을 위해 사용한 스크립트입니다.

<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="//t1.daumcdn.net/tistory_admin/lib/lightbox/js/lightbox-v2.10.0.min.js" defer=""></script>

이 스크립트를 head 사이에 넣으면
해당 오류에 대한 문제는 해결됩니다.