210308 블로그 제작일지

개발

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 이벤트 리스너에 사용했습니다.

오류 수정

기타

Report an issue