728x90
728x90
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..
HTML 작성 시 피해야 할 안티패턴들 🌈 이러한 패턴들은 코드의 가독성, 유지보수성 및 웹 접근성을 저해할 가능성이 있다. 테이블 레이아웃 테이블 요소를 사용하여 레이아웃을 구성하는 것은 지양해야 한다. 🐳 대신, CSS를 사용하여 레이아웃을 조정하는 것이 권장된다. 테이블 레이아웃은 가독성을 해치고 스크린 리더와 모바일 기기 접근성을 악화시킬 수 있다. 인라인 스타일 HTML 요소 내에 직접 스타일을 적용하는 것보다는 외부 CSS 파일을 사용하여 스타일링하는 것이 좋다. 인라인 스타일은 코드 유지보수를 어렵게 만들 수 있다. 문자 창조 순서 (Character Entity References) 사용 예전에는 특수 문자를 표현하기 위해 문자 창조 순서를 사용하는 경우가 많았다. 하지만 이제는 대부분의 ..
이 문제는 클로저를 활용하여, 단 한 번만 호출되는 함수를 만드는 것이 목적이다. 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} 객체 확장하기 기존에 존재하는 객체를 바탕으로 새롭게 더 많은 데이터, 프로퍼티를 가지는 객체를 생성하게 되야 하는 경우도 있다. 혹은 여..
바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..