210826 블로그 제작일지

개발

210826 블로그 제작일지
최종 수정일:

TOC 구현

목차

한번 만들어보고 싶다고 생각하진 1년도 넘었을 것 같은 기능입니다.
볼 때마다 예쁘긴 한데, 뭔가 실용적이진 않은 것 같고, 모바일에선 표시도 힘든데다 깔끔하게 만들기도 어려워 보여서 저울질만 한참 했네요.
만들고 보니 글이 한층 구조적 이어 보이기도 하고, 시각적 재미도 있는 것 같아 마음에는 듭니다.

최적화할 여지가 꽤 있어 보이는데, 쉽진 않네요. 코드가 깔끔하게 정리되고 나면 한 번 공유해보겠습니다.

Auto Growing Textarea

const autoGrow = () => {
    const numberOfLineBreaks =
        (textarea.value.match(/\n/g) || []).length + 2;
    const newHeight = Math.max(numberOfLineBreaks * 1.7, 6.8);
 
    textarea.style.height = `${newHeight + 1}rem`;
};

textareaheight 값을 auto로 바꾸고 scrollHeight을 구해 height에 다시 적용하던 방식에서, textarea의 값에 줄 바꿈이 몇 번 있는지 확인해 height을 업데이트하는 방식으로 바꿨습니다.
스크롤이 구석에 박힐 일도 없고, rem 등의 단위도 사용할 수 있으니 이 방식이 기존에 쓰던 방식보다 훨씬 괜찮지 않나 싶습니다.

갤러리 카테고리

이 카테고리만 보면 번뇌가 입니다.

가볍게 한두 장 찍은 사진을 어떻게 처리할지(업로드 여부), 사진과 관련된 이런저런 효과를 줘보고 싶은데 블로그가 너무 무거워지진 않을지 생각하다 보면 '따로 블로그를 만들자' 싶다가도, 블로그 하나 관리도 제대로 못 하는데 너무 일을 벌이기만 하는 게 아닌가 싶어서 이러지도 저러지도 못하고 사진만 쌓여가고 있네요.

일전에 영어 단어 앱을 만들며 CRUD도 경험해봤겠다, 블로그를 구축해보는 것도 재밌지 않을까 싶은데, 그럼 관리해야 할 블로그와 서버가 하나씩 느는 거라 과투자란 생각도 강하게 드네요.
그렇다고 이 블로그에 모조리 올리자니 블로그의 정체성이 너무 약해질까 염려도 됩니다. 사진도 개발도 '제 관심사'라는 틀 안에 있긴 하지만, 성격이 아주 다르긴 하니까요.

갈팡질팡만 하는 것도 참 꼴이 웃기니 9월 중으로 못 정하면 그냥 동전 던져서 정해야 하나 싶네요…😂

카테고리별 피드

카테고리 피드

블로그 정체성이 약해지는 걸 해결하기 위해 궁여지책으로 카테고리마다 RSS 피드 링크를 추가해뒀습니다.
여러모로 근본적인 해결책은 아닌 것 같긴 합니다.

홈 화면

홈 화면 갤러리

홈 화면이 허전한 느낌은 왜 지워지질 않는지 모르겠습니다.
갤러리 카테고리의 최근 글 6개를 표시하게 업데이트해봤습니다.

아바타

댓글 목록

기존의 언어 / 프레임워크 등의 아이콘을 제거하고, DiceBear Avatars를 이용해 훨씬 다양한 아이콘이 표시되게 했습니다.
작성자의 IP 5자리를 바탕으로 아이콘을 생성해, 훨씬 다양하고 개인화된 아바타가 표시됩니다.

배너 디자인

배너

특성 이미지(Featured Image, 썸네일)의 불투명도를 0.5에서 0.3으로 낮추고, 그래디언트를 제거했습니다.

메타 태그

Codeblock

코드블럭

파일명 등을 입력할 수 있게 업데이트했습니다.

트랜지션

페이지 전환 효과

페이지 전환 효과에서 #maintransform을 변경하던 부분을 삭제했습니다.

드로어

드로어와 햄버거 버튼의 트랜지션을 0.5초에서 0.3초로 변경했습니다.

편의성

오류 수정

리팩토링

Typescript

PHP

CSS

Report an issue