글을 시작하기 전에 TTFB(Time To First Byte)에 대해 짧게 설명하자면, 서버에 HTTP 요청을 보내고 브라우저가 첫 정보를 수신하기까지 걸리는 시간을 의미합니다. 위 그림에 표시된 것처럼클라이언트가 요청을 보내는 데 걸린 시간 + 서버가 그 요청을 처리한 시간 + 서버가 응답한 시간이 셋을 합한 시간이 TTFB입니다. 지금까지 저 세 단계 중 "처리 시간"을 좀먹던 녀석입니다.어느 부분이 시간을
홈 화면 슬라이더 디자인 쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요. 조만간 디자인을 대폭 손보지 않을까 싶습니다. SVG 로고 제작 PNG로 만든 로고를 SVG로 리마스터했습니다.SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다! 악성 봇 차단 IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.Apache
페이지 전환 효과 저번 포스트에 작성했던 페이지 전환 효과입니다. 페이지를 불러오면 페이드 인 효과가 나타나는데, 다른 페이지로 넘어갈 땐 그냥 바로 텅 빈 화면으로 가버리는 게 안타까워서 작업해봤습니다. 코드 블럭 맥 OS의 디자인으로 꾸며봤습니다.
스크린샷에 담기 힘든 효과가 많은 날이네요. 홈 화면 슬라이더 업데이트 창 크기를 변경하면 슬라이더의 위치도 변경되도록 업데이트했습니다. 창 크기가 1920px인 기기에서 접속했다 치면, 예전엔 창 크기를 800px로 줄여도 한 페이지의 크기가 1920px이라 생각하고 1920px씩 페이지를 넘겼다면, 이젠 800px씩 넘깁니다.
1월 5일에 작성하고 한 번도 작성하질 않았네요…;;그동안 자잘하게 수정은 많았는데, 수정한 거 캡처한 폴더를 지워버리는 바람에…남은 거라곤 최근에 한 수정사항뿐입니다. 😥 404 페이지 등 이미지 수정 인덱스 페이지나 404 페이지 등에 있던 이미지들을 조금씩 수정했습니다. T 전화 휴대폰 색상 수정 T 전화 올릴 때 사용하는 휴대폰이 검은색이라 어두운 모드에선 보기 힘들던 문제가 있었습니다.이젠 어두운 모드에서
이미지 뷰어 이미지를 클릭했을 때 새 창에서 열리지 않고 현재 페이지에서 새로운 레이어 위에 이미지가 표시되도록 변경했습니다. 확대 / 축소가 새 창에서 열릴 때 훨씬 편해서 어떤 방식을 써야 할지 고민입니다. 비디오 포스트 추가 이 포스트에 임시로 적용해뒀습니다. 문자 그대로 비디오 중심의 포스트를 작성할 때 쓸 수 있는 양식입니다. [임시]인 이유는, 모바일 기기에서 렉 /
꽤 오랜만에 쓰는 글이라, 생각나지 않는 게 아주 많은데, 최대한 기억을 떠올리며 기술해보려 합니다. 댓글 작성 방법 업데이트 나름 대규모 업데이트입니다.기존엔 댓글을 입력하거나 답글을 입력하려 하면 페이지를 통째로 다시 불러왔는데, 이젠 페이지 로딩 없이 댓글을 추가하고 답글을 입력할 수 있습니다.아직 댓글 수정은 업데이트하지 못했습니다. ㅠㅠ fetch()를 이용해 작업했고, 제 로컬 테스트 환경에서 일어날 경우 대부분은
신경을 끄고 살다 검색 엔진에 블로그가 어떻게 노출되는지 확인해보니, 분명 티스토리 쓸 땐 본문에 첨부한 이미지도 검색 결과에 표시되고 그랬는데 블로그를 옮긴 후로는 그런 게 싹 사라졌더라고요.원인을 찾다 보니 구조화된 데이터(Structured Data)가 빠져서 그런 거였습니다. SEO 최적화 플러그인만 설치하면 끝날 문제긴 하나, 외부 플러그인 사용의 최소화란 똥고집 때문에 구조화된 데이터를 직접 만들어가는 중입니다. 새삼스럽게 정말
비디오 제어 버튼 비디오 아래에 비디오를 일시 정지 / 재생하는 버튼과 소음(消音) / 해제하는 버튼을 추가했습니다.소리 토글 버튼은 비디오에 소리가 있을 때만 나타납니다. document.querySelector("video").addEventListener("click", function() { if (typeof this.webkitAudioDecodedByteCount !== "undefined") { if (this.webkitAudioDecodedByteCount > 0) { console.log("소리 있는 비디오임") } } else if (typeof this.mozHasAudio !== "undefined") { if (this.mozHasAudio) { console.log("소리 있는 비디오임") } } }) 위 코드를 사용해 비디오에 소리가 있는지 판단합니다.위 코드의 두 if 문에 걸리지 않으면 비디오에 소리가 있는지 없는지 판단할 수 없다는