배너 이미지

210603 블로그 제작일지

최종 수정일 : (11개월 전)

마지막으로 블로그 제작일지 쓴 게 언제인지 확인하다 3월 8일인 걸 확인하곤 경악을 금치 못했습니다…
Github에서 4페이지나 넘어다니며 커밋 로그들 확인했네요.

커밋을 네 페이지 넘게 하긴 했지만, 눈에 띄는 굵직한 변화는 없고, 대부분 리팩토링이나 최적화긴 합니다.
몇 번째 하는 말인진 모르겠지만 이젠 정말 작업이 끝났고 내실을 다지며 이렇게 자잘하게 고쳐가지 않을까 싶네요.

드로워에 최근 글 / 최근 댓글 주기적으로 업데이트

최근 글

SPA로 만들고 크게 신경을 못 쓰던 부분 중 하나입니다.

글 발행주기가 그리 짧지 않기에 크게 문제는 없었지 않을까 싶지만, 그렇다고 업데이트를 안 할 순 없으니 드로워를 열었을 때 마지막으로 드로워를 연지 오랜 시간이 지났으면 최근 글이나 댓글이 있는지 확인하고, 있으면 목록을 업데이트합니다.

최근 글 더 보기

인덱스 페이지 글 더 보기

위 기능을 추가하기 위해 최근 글과 댓글을 JSON으로 응답하는 페이지를 추가해야 했고, 이왕 추가한 김에 인덱스 페이지에 더 보기 버튼도 추가해봤습니다.
무한정 되진 않고, 최대 3회까지만 가능합니다.

이미지 캐시 서버 제거

picture 태그가 사라진 figure 태그

CORS, 이미지 변환 등 잡다한 지식을 배우게 해준 이미지 캐시 서버의 작동을 종료시켰습니다.
굳이 부하 분산을 해야 할 만큼 서버에 부하가 심하지도 않거니와, 서버란 게 돌려두고 끝이 아니라 지속적인 관심을 요하기에 너무 신경을 쓸 게 많아서 깔끔하게 제거했습니다.

소스도 남아있고, git 로그도 다 남아있으니 훗날 필요해지면 다시 복구해보도록 하겠습니다.

메인 네비게이션

메인 네비게이션

햄버거 버튼

부드러운 애니메이션을 위해 햄버거 버튼은 아이콘 폰트를 사용하지 않고 HTML과 CSS로 제작했는데, 아이콘 폰트의 아이콘들과의 통일성이 살짝 떨어지는 것 같아 너비와 두께 등을 수정했습니다.

아이콘 폰트 내부의 아이콘들도 여러 제작자(사)가 만든 것을 사용하고, 없으면 직접 제작하고 하다 보니 통일성이 살짝 떨어지는 것 같아 한 번 갈아엎어야 하지 싶은데, 노동의 강도가 어마어마할 것 같아 차일피일 미루고만 있네요…

모바일에서 글 제목 표시

모바일에선 메가 메뉴 없이 로고만 표시되다 보니 좀 허전한 느낌이라, 헤더가 가리고 메인 네비게이션이 상단에 고정되는 시점에 로고가 작아지며 글의 제목이 표시되게 업데이트해뒀습니다.
밀도가 올라가 훨씬 잘 된 디자인 같아 보이네요.

댓글

제출 버튼 클릭 시 애니메이션 표시

눈에 띌진 모르겠지만, 제출 버튼을 클릭하면 외곽에 동그랗게 진행 상황이 표시됩니다.
우측 하단에 있는 스크롤 인디케이터를 재사용할 수 있게 업데이트하고 활용했습니다.

기타

  • 이미지와 비디오를 찾는 정규표현 식을 업데이트했습니다.
  • 이제 댓글에 첨부된 이미지를 클릭해도 줌인 됩니다.

기타

프론트엔드

  • innerHTML을 사용하지 않고 정규 표현식으로 Special Character 파싱
  • 글자 줄 제한 있는 모든 요소에 -webkit-line-clamp 사용
  • 이전 / 다음 글에서 제목이 요소 밖으로 나가던 오류 수정
  • 이전 / 다음 글 그래디언트 디자인 수정
  • 사용하지 않는 CSS 제거
  • 메모리를 낭비하지 않기 위해 id를 가진 요소 최소화
  • 방명록에선 배너의 그래디언트 제거
  • Masonry 레이아웃에서 아이템 간격 수정
  • 드로워에서 최근 댓글 클릭 시 해당 댓글까지 스크롤
  • 모든 시간 앞에 표시되던 시계 아이콘 제거
  • '커피 한 잔 선물하기' 버튼 공유 아이콘들 좌측으로 이동
  • 기타 리팩토링 및 오타 수정

백엔드

  • JSON 응답에서 불필요한 공백 제거
  • 불필요한 함수 / 변수 제거
  • 검색 결과 페이지가 html로 응답할 때 오래된 레이아웃을 출력하던 오류 수정
  • JSON 응답 시 php 태그를 여닫지 않고 echo로만 스트링을 출력하도록 수정
  • .php 파일 제일 마지막 라인의 ?> 제거
  • 관리자만 접근 가능한 페이지에 사용자 접근 시 444로 응답
  • 쿼리를 가져올 때 $_REQUEST 대신 $_GET 사용
  • 뷰어 페이지 제거
  • 기타 리팩토링 및 오타 수정

profile

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.