애니메이션 대부분은 JS에선 엘리먼트의 class 정도만 변경해주고 CSS에서 애니메이션을 추가하는 방식으로 사용하실 수 있습니다.하지만, 엘리먼트의 width나 height을 변경하거나, 특정 엘리먼트까지 부드럽게 스크롤 하는 덴 위 방식으로 한계가 있습니다.엘리먼트의 width나 height을 css의 transition으로 변경하면 60FPS 보장이 굉장히 힘들어지고, scroll-behavior은 사파리에서 지원하지 않기 때문입니다. jQuery에선 .animate() .slideToggle() 등으로 간단히 작업할 수 있는데, 이를 바닐라로 비슷하게 구현해봤습니다. function animateScroll(to) {
Make Website Faster 더욱 빠른 웹사이트를 구축하는 방법을 찾아가는 중입니다. 확실히 알게 된 건, 역시 돈이 최고입니다.서버 여러 대 구축해서 할 일을 분산시키니 훨씬 빨라지네요. 캐시 서버 추가 예전에도 언급했지만, 제 서버는 HDD를 사용합니다.서버 특성상 읽기 / 쓰기가 굉장히 자주 일어나 언제 데이터가 날아갈지 몰라 HDD로 구성했는데, 물리적인 한계로 아무래도 방문자가 몰리면 몰릴수록 많이 느려집니다.
평소와 다름없이 관리 페이지에 들어왔는데 업데이트 알림이 있어 확인해보니 5.4 업데이트가 진행되었습니다. 나오자마자 업데이트해서 그런지 아직 번역이 안 된 부분도 있네요.이전 버전부터 있던 기능인데 왜 번역이 안 된 건지 모르겠습니다… 이제 알림판에서 사이트 건강 상태를 확인할 수 있습니다. 저 페이지 눌러본 게 php 메모리 제한 늘리고 제대로 적용됐나 확인하려 누른 게 거의 마지막이긴 하지만, 텅
2020년에 그래도 웹 개발에 발가락 정도 걸쳐두고 쓰는 블로근데, PHP를 쓰는 워드프레스를 쓰는 건 영 아닌 것 같아 이런저런 cms 둘러보며 이사를 고민하고 있었습니다. 블로그엔 댓글이 반드시 지원돼야 한다고 생각하는데, nodejs 등을 사용하는 cms 대부분이 댓글은 disqus등의 서비스를 사용하도록 해둬서 마음을 접던 와중에, Gatsby.js가 제공하는 괜찮은 기능을 하나 발견했습니다. 다른 포스트로 가는 링크에 마우스를 올리면
Ayana, FredBoat 등의 디스코드 봇을 직접 제작하는 방법입니다.Node.js 외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있습니다만, 이 글에선 Node.js로 봇을 만드는 법을 다룹니다. 디스코드 봇을 만들기 위해선 서버를 돌릴 수 있는 기기 혹은 서비스가 필요합니다. 시작하시기 전에 유념해주세요.개인 PC로도 충분히 되긴 하지만, 24시간으로 돌릴 서비스에 windows 10을 이용하는 건 추천하지 않으며, 개인 PC를
![[CSS, JS] 잉크 퍼지는 효과](https://cdn-t.marshallku.com/images/images/2020/02/ink-transition-effect.w500.jpg.webp)
JavaScript와 CSS로 잉크가 퍼지는 효과를 만들어보았습니다.
글을 시작하기 전에 TTFB(Time To First Byte)에 대해 짧게 설명하자면, 서버에 HTTP 요청을 보내고 브라우저가 첫 정보를 수신하기까지 걸리는 시간을 의미합니다. 위 그림에 표시된 것처럼클라이언트가 요청을 보내는 데 걸린 시간 + 서버가 그 요청을 처리한 시간 + 서버가 응답한 시간이 셋을 합한 시간이 TTFB입니다. 지금까지 저 세 단계 중 "처리 시간"을 좀먹던 녀석입니다.어느 부분이 시간을
티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One
페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) {     const uri = new URL(uriString);