210603 블로그 제작일지
개발 •
마지막으로 블로그 제작일지 쓴 게 언제인지 확인하다 3월 8일인 걸 확인하곤 경악을 금치 못했습니다…
Github에서 4페이지나 넘어다니며 커밋 로그들 확인했네요.
커밋을 네 페이지 넘게 하긴 했지만, 눈에 띄는 굵직한 변화는 없고, 대부분 리팩토링이나 최적화긴 합니다.
몇 번째 하는 말인진 모르겠지만 이젠 정말 작업이 끝났고 내실을 다지며 이렇게 자잘하게 고쳐가지 않을까 싶네요.
드로워에 최근 글 / 최근 댓글 주기적으로 업데이트
SPA로 만들고 크게 신경을 못 쓰던 부분 중 하나입니다.
글 발행주기가 그리 짧지 않기에 크게 문제는 없었지 않을까 싶지만, 그렇다고 업데이트를 안 할 순 없으니 드로워를 열었을 때 마지막으로 드로워를 연지 오랜 시간이 지났으면 최근 글이나 댓글이 있는지 확인하고, 있으면 목록을 업데이트합니다.
최근 글 더 보기
위 기능을 추가하기 위해 최근 글과 댓글을 JSON으로 응답하는 페이지를 추가해야 했고, 이왕 추가한 김에 인덱스 페이지에 더 보기 버튼도 추가해봤습니다.
무한정 되진 않고, 최대 3회까지만 가능합니다.
이미지 캐시 서버 제거
CORS, 이미지 변환 등 잡다한 지식을 배우게 해준 이미지 캐시 서버의 작동을 종료시켰습니다.
굳이 부하 분산을 해야 할 만큼 서버에 부하가 심하지도 않거니와, 서버란 게 돌려두고 끝이 아니라 지속적인 관심을 요하기에 너무 신경을 쓸 게 많아서 깔끔하게 제거했습니다.
소스도 남아있고, git 로그도 다 남아있으니 훗날 필요해지면 다시 복구해보도록 하겠습니다.
메인 네비게이션
햄버거 버튼
부드러운 애니메이션을 위해 햄버거 버튼은 아이콘 폰트를 사용하지 않고 HTML과 CSS로 제작했는데, 아이콘 폰트의 아이콘들과의 통일성이 살짝 떨어지는 것 같아 너비와 두께 등을 수정했습니다.
아이콘 폰트 내부의 아이콘들도 여러 제작자(사)가 만든 것을 사용하고, 없으면 직접 제작하고 하다 보니 통일성이 살짝 떨어지는 것 같아 한 번 갈아엎어야 하지 싶은데, 노동의 강도가 어마어마할 것 같아 차일피일 미루고만 있네요…
모바일에서 글 제목 표시
모바일에선 메가 메뉴 없이 로고만 표시되다 보니 좀 허전한 느낌이라, 헤더가 가리고 메인 네비게이션이 상단에 고정되는 시점에 로고가 작아지며 글의 제목이 표시되게 업데이트해뒀습니다.
밀도가 올라가 훨씬 잘 된 디자인 같아 보이네요.
댓글
제출 버튼 클릭 시 애니메이션 표시
눈에 띌진 모르겠지만, 제출 버튼을 클릭하면 외곽에 동그랗게 진행 상황이 표시됩니다.
우측 하단에 있는 스크롤 인디케이터를 재사용할 수 있게 업데이트하고 활용했습니다.
기타
- 이미지와 비디오를 찾는 정규표현 식을 업데이트했습니다.
- 이제 댓글에 첨부된 이미지를 클릭해도 줌인 됩니다.
기타
프론트엔드
innerHTML을 사용하지 않고 정규 표현식으로 Special Character 파싱- 글자 줄 제한 있는 모든 요소에 -webkit-line-clamp 사용
- 이전 / 다음 글에서 제목이 요소 밖으로 나가던 오류 수정
- 이전 / 다음 글 그래디언트 디자인 수정
- 사용하지 않는 CSS 제거
- 메모리를 낭비하지 않기 위해 id를 가진 요소 최소화
- 방명록에선 배너의 그래디언트 제거
- Masonry 레이아웃에서 아이템 간격 수정
- 드로워에서 최근 댓글 클릭 시 해당 댓글까지 스크롤
- 모든 시간 앞에 표시되던 시계 아이콘 제거
- '커피 한 잔 선물하기' 버튼 공유 아이콘들 좌측으로 이동
- 기타 리팩토링 및 오타 수정
백엔드
- JSON 응답에서 불필요한 공백 제거
- 불필요한 함수 / 변수 제거
- 검색 결과 페이지가 html로 응답할 때 오래된 레이아웃을 출력하던 오류 수정
- JSON 응답 시 php 태그를 여닫지 않고
echo로만 스트링을 출력하도록 수정 .php파일 제일 마지막 라인의?>제거- 관리자만 접근 가능한 페이지에 사용자 접근 시 444로 응답
- 쿼리를 가져올 때
$_REQUEST대신$_GET사용 - 뷰어 페이지 제거
- 기타 리팩토링 및 오타 수정