JavaScript 태그 글

jQuery 없이 애니메이션 사용하기

애니메이션 대부분은 JS에선 엘리먼트의 class 정도만 변경해주고 CSS에서 애니메이션을 추가하는 방식으로 사용하실 수 있습니다.하지만, 엘리먼트의 width나 height을 변경하거나, 특정 엘리먼트까지 부드럽게 스크롤 하는 덴 위 방식으로 한계가 있습니다.엘리먼트의 width나 height을 css의 transition으로 변경하면 60FPS 보장이 굉장히 힘들어지고, scroll-behavior은 사파리에서 지원하지 않기 때문입니다. jQuery에선 .animate() .slideToggle() 등으로 간단히 작업할 수 있는데, 이를 바닐라로 비슷하게 구현해봤습니다. function animateScroll(to) {

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

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

[JS] Infinite Scroll 플러그인

스크롤을 움직이거나 버튼을 클릭하면 다음 / 이전 페이지의 내용을 불러오는 플러그인입니다. 깃허브 데모 페이지Masonry 데모 설치 CDN <!-- 압축 --> <script src="https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.min.js"></script> <!-- 원본 --> <script src="https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.js"></script> 다운로드 infiniteScroll.min.js - 압축된 jsinfiniteScroll.js - 원본 js 시작하기 JS 파일 삽입 <script src="파일/경로/infiniteScroll.js"></script> cdn을 사용하시면 cdn 경로를, 본인이 js 파일을 업로드해 사용하신다면 해당 경로를 script 태그에 넣어서 사이트에 삽입해주세요. 기본적인 HTML 구조 <article id="container"> <div class="item">내용</div>

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

JavaScript와 CSS로 잉크가 퍼지는 효과를 만들어보았습니다.

티스토리 새 글 발행시 브라우저 알림 보내기

티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One

페이지 전환 효과 사용하기

페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) {     const uri = new URL(uriString);

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

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

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

깃허브비밀번호 제작 페이지 무작위로 나열된 문자열을 제작하는 스크립트입니다.비밀번호나, 쿠폰 코드 등에 사용하실 수 있습니다. 전 주로 스킨 다운로드용 쿠폰을 발급할 때 사용합니다. 예전 블로그에 올린 스크립트에 이것저것 업데이트해봤습니다.

Form의 데이터 전달하기

Form의 데이터를 전달하는 방법에 대해 알아봅니다.