최종 수정일 :
(1년 전)
메인 헤더 디자인
헤더의 배경에 추가되는 특성 이미지(썸네일)의 역할은 단지 제목에 적당한 시각적 즐거움을 주기 위함인데, 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 피드는 업데이트되지 않습니다.
