Tips

Node.js로 디스코드 봇 만들기

Node.js로 디스코드 봇 만들기

Ayana, FredBoat 등의 디스코드 봇을 직접 제작하는 방법입니다.Node.js 외에도 파이썬, 자바 ,Go 등 다양한 언어로 제작할 수 있습니다만, 이 글에선 Node.js로 봇을 만드는 법을 다룹니다. 디스코드 봇을 만들기 위해선 서버를 돌릴 수 있는 기기 혹은 서비스가 필요합니다. 시작하시기 전에 유념해주세요.개인 PC로도 충분히 되긴 하지만, 24시간으로 돌릴 서비스에 windows 10을 이용하는 건 추천하지 않으며, 개인 PC를...

[CSS, JS] 잉크 퍼지는 효과

[CSS, JS] 잉크 퍼지는 효과

원본은 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 pageTransition(nodeList) {     nodeList.forEach(a => {         const href = a.getAttribute("href");         const hash = a.hash || "tmp";         href && href[0] !== "#" && a.target !== "_blank" && a.href !== `${location.protocol}//${location.hostname}${location.pathname}${hash}` && (             a.addEventListener("click", e => {                 e.preventDefault(),                      setTimeout(() => {                     body.classList.contains("hidden") && (...

CSS Mask 이용하기

CSS Mask 이용하기

스크롤을 내려 확인해보세요!페이지 링크 위 데모처럼 특정 오브젝트 뒤로 글자가 넘어가게 하고 싶을 때 쓸 수 있는 CSS의 마스크(mask)입니다.아이러니하게도 CSS보단 포토샵에 능해야 깔끔하게 만들 수 있긴 합니다. 포토샵 글자 아래에 표시될 부분만 선택해줍니다.글자 위에 표시될 부분을 선택하는 게 편하시면 그 부분을 선택하시고 우클릭 > 반전 선택하셔도 무관합니다. 우클릭 > 작업 패스 만들기 > 허용치 1픽셀위...

[우분투] 워드프레스 발송용 이메일 만들기

[우분투] 워드프레스 발송용 이메일 만들기

우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. postfix 설치 sudo apt-get update && sudo apt-get install postfix 업데이트를 진행한 후 postfix를 설치합니다. 설치 도중에 설정 창이 뜹니다. Internet Site를 선택해주세요. System mail name을 입력하라고 나옵니다.위 설명에 적혀있지만 root@example.com이 발신자 메일이라 치면, example.com을 입력하시면 됩니다. 전 no-reply@marshall-ku.com을 이용할 예정이기에, marshall-ku.com이라 작성했습니다. 위 과정이 모두 끝나면...

[자바스크립트] 구구단 문제

[자바스크립트] 구구단 문제

자바스크립트 강의 볼만한 거 없나 싶어서 여기저기 기웃거리다 구구단 문제를 구현하는 강의가 있길래 재밌겠다 싶어서 만들어봤습니다. 한 5분 만에 써내려간 코드라 좀 허술합니다…HTML로 넘기기 귀찮아서 자바스크립트의 prompt()와 alert()를 이용했습니다만, 아주 못난 디자인이라 어지간하면 html로 넘기시는 걸 추천합니다.심지어 prompt()를 쓰다 보니 모바일에선 훨씬 문제 풀기 불리하더라고요. 도전해보기 const gugudan = () => {     const user = {         correct: 0,         incorrect: 0,         time: []     };     let max = 8;     const problem = () => {         let first, second;...

[자바스크립트] 강력한 비밀번호 만들기

[자바스크립트] 강력한 비밀번호 만들기

깃허브비밀번호 제작 페이지 무작위로 나열된 문자열을 제작하는 스크립트입니다.비밀번호나, 쿠폰 코드 등에 사용하실 수 있습니다. 전 주로 스킨 다운로드용 쿠폰을 발급할 때 사용합니다. 예전 블로그에 올린 스크립트에 이것저것 업데이트해봤습니다. let setting = {     "number": true,     "symbol": false,     "capital": true,     "small": true,     "removeSimilar": false,     "autoCopy": true,     "length": 20 }; const pwoutput = document.getElementById("password"); let chars; function init() {     const storage = localStorage.getItem("pw-setting");     storage && (         setting = JSON.parse(storage)     ),     [...document.querySelectorAll("input[type=checkbox]")].forEach(input => {         input.checked = setting[input.id]     }),     document.getElementById("pwlength").value = setting.length,     updateChars() } function createChars() {     let tmp = "";     if (setting.number) {         tmp = tmp + "0123456789"     }...

Form의 데이터 전달하기

Form의 데이터 전달하기

xhr(XMLHttpRequest) 혹은 fetch 등으로 데이터를 보낼(POST) 때, 쓰는 스크립트입니다. input[type="submit"]을 클릭했을 때와 같은 동작을 하는 버튼을 만들 때 쓰신다고 생각하시면 편합니다. function serialize(form) {     const serialized = new FormData();     for (let i = 0, length = form.elements.length; i < length; i++) {         const field = form.elements[i];                  if (field.name && !field.disabled && "file" !== field.type && "reset" !== field.type && "submit" !== field.type && "button" !== field.type) {             if ("select-multiple" === field.type) {                 for (let n = 0; n < field.options.length; n++)                     field.options[n].selected && serialized.append(field.name, field.options[n].value);             }             else {                 ("checkbox" !== field.type && "radio" !== field.type || field.checked) && serialized.append(field.name, field.value)             }         }              }     return serialized; } 위 함수를 추가한 뒤 * jQuery엔 .serialize()란 함수가 있습니다. 참고 const myForm = document.getElementById("myForm"); const data = serialize(myForm); fetch(myForm.action, {   method: "POST",   body: data })...

23456
카카오페이 qr코드 모바일이시라면 클릭