728x90
728x90
웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..
입력이 있는 페이지에서 잔뜩 글을 작성 중인데, 실수로 X 버튼을 누른다면 어떻게 될까? 대부분의 웹사이트는 바로 닫히지 않고 웹페이지를 닫을 것인지 묻는 알림창이 뜰 것이다. 이는 당연히 자동으로 생성되는 기능이 아니라, 개발자가 구현해주어야 하는 부분이다. 다음과 같이 구현할 수 있다. window.addEventListener('beforeunload', function (event) { // 경고 메시지를 설정합니다. event.returnValue = '페이지를 떠나시겠습니까?'; // 이벤트 객체의 returnValue 속성에 경고 메시지를 설정하면 브라우저가 경고를 표시합니다. }); 적절하게 script에 넣어줌으로써, 페이지를 진짜로 떠날지 마지막으로 물을 수 있다.
MutationObserver는 DOM 트리의 변경을 감지한다. 이를 사용하면 실시간으로 DOM의 변경을 감지하고, 처리할 수 있다. ⛄️ 예제 간단하게 댓글을 다는 HTML을 구현해보자. 그리고, 새로운 댓글이 추가될 때 마다 이를 MutationObserver로 감지해서 alert를 띄우는 예제를 구현해보기로 했다. 일단, 기본적으로 댓글을 추가하는 HTML과 자바스크립트를 작성해준다. Comment List add const inputDiv = document.getElementById("input_div"); const textInput = document.getElementsByClassName("text_input")[0]; const inputBtn = document.getElementsB..
이 문제는 클로저를 활용하여, 단 한 번만 호출되는 함수를 만드는 것이 목적이다. isCalled라는 변수를 사용하여 한 번 호출된 뒤에는 다시 호출될 수 없도록 문제를 해결하였다. var once = function(fn) { let isCalled = false; return function(...args){ if(!isCalled) { isCalled = true; return fn(...args); }else { return; } } }; 자바스크립트의 함수 특징을 사용한 문제였다.
이번 문제는 Promise를 사용하는 함수와 시간제한이 있을 때, 이 함수가 시간 제한 내에 실행이 끝나는지를 판별하는 코드를 작성해야 했다. setInterval을 사용하여 시간을 재고 이 시간이 끝나기 전에 성공하는지 실패하는지 확인하는 방법으로 코드를 작성하려고 했는데, 생각처럼 되지 않았고 결국 다른 사람의 힌트들을 보고 다음의 코드를 작성하였다. var timeLimit = function(fn, t) { return async function(...args) { const result = fn(...args); const checker = new Promise((resolve, reject) => { setTimeout(() => { reject("Time Limit Exceeded"); },..
자바스크립트에서 데이터를 나타내는데 많이 사용되는 객체는 때에 따라서 수정되야 하고 동적으로 생성되야 한다. 이런 경우에, 유용하게 사용될 수 있는 문법들을 정리해보기로 하였다. Computed Property Names ⛅️ 객체에서 프로퍼티의 이름을 동적으로 생성할 수 있게 해주는 문법이다. 대괄호 안에 변수를 넣음으로써, 해당 변수의 값이 프로퍼티의 이름이 되게 한다. const name = "park"; const target = false; const obj = { [name]: target, } console.log(obj); // {park: false} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..