210308 블로그 제작일지

메인 헤더 디자인

헤더의 배경에 추가되는 특성 이미지(썸네일)의 역할은 단지 제목에 적당한 시각적 즐거움을 주기 위함인데, Parallax 효과에 간혹 색이 강렬한 이미지도 쓰다 보니 본연의 역할을 하지 않고 오히려 본인이 더 돋보일 때도 있는 것 같아 그래디언트를 하나 추가하고 Parallax 효과를 제거해 이미지가 돋보이지 않게 업데이트했습니다.

제목을 제외한 텍스트들의 색상을 더 어둡게 변경했습니다.

댓글 애니메이션

새로운 댓글이 추가될 때 애니메이션이 표시됩니다!

Debounce

export function debounce(func: Function, wait: number) {
    let debouncing: ReturnType<typeof setTimeout>;
 
    return () => {
        clearTimeout(debouncing);
        debouncing = setTimeout(() => {
            func();
        }, wait);
    };
}

Resize 이벤트 리스너 등은 종종 모든 작동이 끝났을 때 한 번만 작동하면 되는 경우가 많습니다.
이를 위해 debounce를 간단히 구현하고 Masonry layout을 제외한 모든 Resize 이벤트 리스너에 사용했습니다.

오류 수정

• 일정 해상도에서 메가 메뉴의 렌더링이 깨지는 현상을 수정했습니다.
• 글의 저작권 관련 문구가 표시되는 부분에 작성일이 2021년인 글도 2020년으로 표기되던 오류를 수정했습니다.
• 배너 이미지의 srcset이 제대로 업데이트되지 않던 오류를 수정했습니다.
• 카테고리 관련 글이 6개인 카테고리의 글에서 6개가 되지 않는 카테고리의 글로 넘어갔을 때 이전 카테고리 관련 글 몇 개가 제대로 삭제되지 않던 오류를 수정했습니다.
• 스크롤을 내려 배너가 보이지 않는 상황에선 visibility: hidden 으로 가시성을 조정하도록 했습니다.

기타

• tsconfig의 strict를 true로 변경했습니다.
• 모든 CSS transition에 트랜지션이 걸리는 속성을 명시했습니다.
• 유튜브 링크를 찾는 정규표현식을 수정했습니다.
• Intersection Observer 지원 여부를 판별해 지원되지 않으면 scroll 이벤트 리스너를 추가하던 부분을 제거했습니다.
• 페이지네이션 버튼의 외관을 수정했습니다. 원형에서 둥근 사각형으로 수정해 두 글자 이상의 페이지에서도 레이아웃이 깨지지 않도록 했습니다.
• href 속성이 #으로 시작하는 모든 a 태그에 json을 불러오는 클릭 이벤트 리스너를 추가하지 않습니다.
• RSS 피드에서 게임 카테고리 등을 제거했습니다. 앞으로 혹여 해당 카테고리에 글을 쓸 일이 생겨도 RSS 피드는 업데이트되지 않습니다.