블로그 작업노트 28: 버그 수정 및 동적 처리 정적화

April 21, 2025

목차 인터렉션 버그 수정 및 정적화
모바일 상단 메뉴 애니메이션 추가
구글 애드센스 자동광고와의 CLS 씨름

거의 한달만의 블로그 작업노트다.

이번 작업은 기존에 작업했던 부분에서 의도치않은 버그가 발생했던 부분을 수정한거라던지 관련된 내용에 대한 기록이다.

기록안해두면 내가 까먹어서 말이다...

목차 인터렉션 버그 수정 및 정적화

기존 블로그 작업노트에서 페이지 로드 시 본문내부에 있는 h2, h3 헤딩 태그를 가져와서 동적으로 목차를 만드는 방식을 만들어서 적용했다는 기록을 했다.

만들었던 당시에는 기존글을 전부 수정할 수 없어서 그냥저냥 뷰 요청시 잘 뜨면 그만이겠거니 했는데, 이게 본문량이 미친듯이 많아지면 연산시간이 생각보다 오래걸린다는 문제를 발견했다.

그리고 나는 그때당시에 내부에서 저 작업을 하는 코드를 구현할때 변환작업을 하고 난 이후에 유니코드로 변환되는지 몰라서 실제 본문데이터가 유니코드 변환분 만큼 커지는 내부적인 문제도 있었다.

그래서 해당 문제를 해결하기위해 이를 글 등록, 수정시 1번 변환작업을 하고 그 값을 DB에 저장해두고, 페이지 요청시 DB에 저장해둔값을 꺼내서 보여주는 방식으로 교체했다.

단 이 방식은 기존 글 전부 다시 수정해야하는 문제가있어서 점진적으로 변경처리를 하려고 뷰단의 코드를 아래와 같이 적용해두었다.

//$headings = $post->getHeadingsWithOrder();
$headings = $post->heading
    ? json_decode($post->heading, true)
    : $post->getHeadingsWithOrder();Copy

실제 내 에디터 페이지 화면

사실 블로그 자체가 이렇게까지 조회수가 나올지 모르고 동적으로 처리해둔부분인데 요청량이 많아지다보니 이런식으로라도 서버 부하를 줄이는게 정답인것 같다.

모바일 상단 메뉴 애니메이션 추가

이 부분은 요즘 내가 모바일용 하단 앵커 광고를 사용하다보니 최대한 컨텐츠 영역을 늘리기위해서 적용해본 애니메이션이다.

모바일 메뉴 테스트

위 영상처럼 모바일 화면에 한해서 아래로 슬라이드하면 메뉴가 올라가고 위로 올리면 메뉴가 다시 나타나는 방식이다.

실제로 광고가 떠있는 화면이라 이렇게라도 컨텐츠영역을 크게하지않으면 모바일에서 많이 불편할거같다.

구현 자바스크립트 코드는 아래와 같다.

function initMobileHeaderScroll() {
    const header = document.querySelector("header");
    if (!header || window.innerWidth > 727) return; // 모바일만 적용

    let lastScrollY = window.scrollY;
    let isPeeking = false;

    window.addEventListener("scroll", () => {
        const currentScrollY = window.scrollY;

        if (currentScrollY > lastScrollY && currentScrollY > 80) {
            if (!isPeeking) {
                header.classList.add("peek");
                isPeeking = true;
            }
        } else if (currentScrollY < lastScrollY) {
            if (isPeeking) {
                header.classList.remove("peek");
                isPeeking = false;
            }
        }

        lastScrollY = currentScrollY;
    }, { passive: true });
}Copy