우분투 18.04에서 워드프레스 엔진을 교체하는 것을 기준으로 설명합니다.PHP를 사용하지 않으신다면 모듈 설치는 건너뛰시면 됩니다. 아래 과정을 따라 하시면 설치하는 중에 2~3초가량을 제외하곤 아무런 문제 없이 웹사이트에 접속할 수 있습니다. 참고로 워드프레스 등의 PHP를 사용하는 웹사이트를 운영하신다면, Nginx로 교체해도 성능이 체감될 만큼 향상되진 않습니다만, 개인적으로 관리가 Apache2보다 훨씬 편한 것 같습니다. 약간의 성능 차이도 있긴 하고요....
깃허브 약 9개월 전에 바닐라 자바스크립트로 만든 로또 추첨기를 리액트로 다시 제작해봤습니다. 손보는 김에 예전엔 모바일 기기에선 공을 세로로 일렬로 표시했으나, 이젠 3열로 표시하게 해뒀습니다.버리는 공간이 훨씬 적어진 느낌이라 마음에 드네요. 바닐라로 짤 땐 html에 .ball이란 div를 만들고, #button을 클릭하면 document.querySelectorAll(".ball")로 DOM에 접근해 내용을 바꾸는 방식으로 작업하는데, 리액트로 짜니 컴포넌트를 만들고, 버튼을 클릭하면 컴포넌트의 상태를...
Discord.js로 만든 봇을 Heroku에 호스팅하는 방법입니다.어떤 언어로 작성한 봇이건 호스팅 과정은 크게 다르지 않긴 합니다만, 세세한 부분은 다를 수 있으니 참고해주세요. 파일에 개별적인 접근이 불가능하단 치명적인 단점이 있긴 하지만, 아무래도 무료 호스팅에 많은 걸 바라긴 힘들지 싶네요.아이유 봇은 파일에 종종 개별적인 접근이 필요해 헤로쿠에 올리지 못하고 있습니다. 준비물 디스코드 계정 헤로쿠 계정 깃허브 계정 (선택)...
설정할 때마다 조금씩 헷갈려 정리용으로 작성하는 글입니다.우분투 18.04에서 터미널만을 이용해 작업합니다.우분투 콘솔, SSH 등의 상황에서도 똑같이 하실 수 있습니다. 가볍게 체험만 하고 싶으시면 구글 클라우드 플랫폼 등 무료로 호스팅을 받을 수 있는 곳이 있습니다. 서버엔 apache2 대신 nginx를 사용합니다. 참고 : 터미널에 입력하는 것 중 한글로 적힌 건 전부 똑같이 적는 게 아니고 본인이 작성하셔야...
애니메이션 대부분은 JS에선 엘리먼트의 class 정도만 변경해주고 CSS에서 애니메이션을 추가하는 방식으로 사용하실 수 있습니다.하지만, 엘리먼트의 width나 height을 변경하거나, 특정 엘리먼트까지 부드럽게 스크롤 하는 덴 위 방식으로 한계가 있습니다.엘리먼트의 width나 height을 css의 transition으로 변경하면 60FPS 보장이 굉장히 힘들어지고, scroll-behavior은 사파리에서 지원하지 않기 때문입니다. jQuery에선 .animate() .slideToggle() 등으로 간단히 작업할 수 있는데, 이를 바닐라로 비슷하게 구현해봤습니다. function animateScroll(to) {...
Ayana, FredBoat 등의 디스코드 봇을 직접 제작하는 방법입니다.Node.js 외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있습니다만, 이 글에선 Node.js로 봇을 만드는 법을 다룹니다. 디스코드 봇을 만들기 위해선 서버를 돌릴 수 있는 기기 혹은 서비스가 필요합니다. 시작하시기 전에 유념해주세요.개인 PC로도 충분히 되긴 하지만, 24시간으로 돌릴 서비스에 windows 10을 이용하는 건 추천하지 않으며, 개인 PC를...
![[CSS, JS] 잉크 퍼지는 효과](https://marshallku.com/wp-content/uploads/2020/02/ink-transition-effect-400x266.jpg)
원본은 codehouse의 Ink Transition Effect입니다.데모 페이지에서 확인하실 수 있듯, 버튼을 누르면 잉크가 퍼지는 효과와 함께 모달 창이 열립니다. 원본 스크립트에서 jQuery를 제거하고, 자바스크립트에서 처리할 필요 없이 css에서 처리하면 되는 건 css로 옮겨뒀습니다. 깃허브에서 파일들을 내려받으실 수 있습니다.Clone or download 버튼을 클릭하셔서 zip 파일을 내려받으시거나 index.htmlcss>style.cssjs>main.vanilla.jsimg>모든 파일정도만 받으셔서 수정하셔도 됩니다. 자바스크립트 document.addEventListener("DOMContentLoaded", () => { const modalTrigger = document.querySelector(".cd-modal-trigger"), transitionLayer = document.querySelector(".cd-transition-layer"), transitionBackground = transitionLayer.querySelector(".bg-layer"), modalWindow = document.querySelector(".cd-modal");...
티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One...
페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) { const uri = new URL(uriString);...
