전체 글

오늘은 이벤트 버블링과 캡처링에 대해 다시 공부하면서,관련 메서드 3가지를 정리해 보았습니다.이벤트 버블링과 캡처링이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 발생한 가장 아래(자식) 요소에서 시작하여, DOM 트리를 따라 점점 상위 요소로 전파되는 과정을 말합니다. 예를 들어, HTML 문서에서 버튼(button)을 클릭하면 이벤트는 먼저 해당 button에서 발생하고, 그 후 button의 부모 요소로, 그 다음은 조상 요소로 순차적으로 이벤트가 전파됩니다. Click me!위의 예에서 버튼을 클릭하면, 클릭 이벤트는 먼저 button에서 발생하고, 그 후 div, 그리고 body, html 요소로 차례로 전파됩니다.이벤트 캡처링 (Event Capturing)이벤트 캡처링은..

문제상황오늘은 캐러셀을 만들다가 유저가 반복적으로 이전, 이후를 클릭할 경우에 캐러셀 자동 넘어가기 기능을 재개하는 시점을 어떻게 잡아야 할 것인지에 대한 문제에 봉착했습니다. 캐러셀은 좌 우 로 직접 넘겨볼 수 도 있고, 가만히 놔두면 자동으로 넘어가기도 하게끔 만들고 싶었는데,자동으로 넘어가다가 유저가 좌 우를 클릭하여 개입할 경우에 문제가 발생했습니다. 단순히 좌 우를 유저가 클릭하면 requestAnimationFrame(이하 rAF) 을 cancel 하고, setTimeout 을 이용해 5초 뒤에 다시 rAF 를 실행하게 하였는데, 그러자 클릭할 때마다계속해서 rAF 가 실행되어 결국 stack overflow 엔딩이 될 것이 명백했습니다.  생각한 해결책생각한 해결책으로는, 유저가 좌, 우를 ..

오늘은 깊은 복사의 구현 방법에 대해 공부하다가, Object.assign 메서드에 대해서도 알게 되었습니다.먼저 Object.assign을 간단히 정리하고, 해당 메서드로도 구현할 수 없는 깊은 복사를재귀함수로 구현하는 방법을 알아보려고 합니다.Object.assignObject.assign 메서드는 소스 객체의 모든 열거 가능한 속성을 타겟 객체에 복사합니다.이 메서드는 타겟 객체를 수정하고, 수정된 타겟 객체를 반환합니다.Object.assign은 주로 객체의 속성을 복사하거나 합치는 데 사용됩니다. 사용법Object.assign 메서드는 첫 번째 인자로 타겟 객체를 받고, 그 뒤에 하나 이상의 소스 객체를 받습니다.소스 객체의 속성은 타겟 객체로 복사되며, 이미 존재하는 속성은 덮어쓰기 됩니다.O..

오늘은 Object.is 에 대해 정리해 보려고 합니다.Object.is의 개념Object.is는 두 값이 같은지를 판별하는 메서드입니다.이 메서드는 === (엄격한 동등 연산자)와 비슷하게 작동하지만, 몇 가지 특별한 경우에서 다르게 동작합니다.Object.is는 다음과 같은 경우에 true를 반환합니다:두 값이 정확히 같은 경우 (예: 같은 객체를 참조하거나, 두 변수가 같은 기본값을 갖는 경우).두 값이 모두 NaN인 경우 (NaN === NaN은 false이지만, Object.is(NaN, NaN)은 true).두 값이 0과 -0인 경우 서로 다르다고 판단 (0 === -0은 true이지만, Object.is(0, -0)은 false).사용법Object.is 메서드는 두 개의 인자를 받으며, 이 ..

벌써 3주차가 지나갔습니다. 이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다. HTMLcollection 과 NodeList, DOMcontentLoaded,js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다. 이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데, 테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다. 그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면 'https://p..

오늘은 기초적인 내용이지만 헷갈려서 정확히 알지 못했던 변수 사용법에 대해 정리해 보려고 합니다. 상황자바스크립트 모듈 a.js, b.js, data.js 가 있습니다.a.js 와 b.js 는 무언가 기능을 하는 친구고data.js 에는 let fruit = "delicious"; 라는 변수가 export 되었습니다.각 모듈은 html 에서 type="module" 이 적용된 script 입니다. 궁금증은,"a.js 에서 import 한 fruit 변수를 재할당 할 경우 그 변동된 값이 b.js 에서도 반영되는가?"였습니다. 해답자바스크립트 ES6 모듈(commonJS 는 안된다고 합니다)에서 export로 내보낸 변수는,라이브 바인딩(live binding)이 적용되기 때문에, 한 모듈에서 변수의 값을..

오늘은 바닐라 자바스크립트로 코딩할때 으레 사용하게 되는 domContentLoaded 이벤트에 대해 궁금증이 생겼습니다. 처럼 defer 속성을 주거나 의 최하단에 를 적용하거나 하면dom 요소가 모두 로드되고 실행되어서 domContentLoaded 는 사용하지 않아도 되는 줄 알았는데,확실히 보장하려면 사용하는게 좋다는 결론을 얻었습니다. 사용 여부는 script 태그의 속성이 어떤지에 따라 달라질 수 있으므로, 먼저 script 태그의 속성부터 정리해보겠습니다. script - defer- 로딩 시점: 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.- 실행 시점: HTML 문서의 파싱이 완전히 끝난 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.- 순서 보장:..

오늘은 AbortController 라는 새로운 객체에 대해 알게되어 정리해보려고 합니다. AbortControllerAbortController는 하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스 입니다. 기본동작1.  생성AbortController 객체는 생성자를 통해 호출합니다.const controller = new AbortController(); 2. 속성AbortController 객체는 signal 이라는 속성을 가지고 있으며, 이 신호는 여러 요청에 사용될 수 있습니다.const { signal } = controller; 3. 요청 취소signal 을 fetch 의 옵션으로 사용하여 나중에 요청을 취소 할 수 있습니다.fetch(url, { signal }) .then(r..

오늘은 HTMLCollection, NodeList에 대해서 알아보았습니다. querySelectorAll 이나 getElementsByClassName 등으로 dom 유사배열객체를 찾아왔을 경우배열이라고 생각해서 배열메서드를 사용했는데 안되는 경우가 있었습니다. HTMLCollectionHTMLCollection은 getElementsBy~ 와 같은 메서드에 의해 찾아진 유사배열객체입니다.HTMLCollection의 경우 Array.prototype 에 정의된 메서드들을 바로 쓸 수 없습니다.사용하려면 간단히 배열로 변환해서 쓰면 됩니다.//Array.from 사용하기let collection = document.getElementsByClassName('some-class');let elementsA..

오늘은 자바스크립트의 비동기와 관련된 이벤트 루프와 태스크 큐에 대해 공부했습니다.자바스크립트는 싱글스레드 언어인 것으로 알고 있는데, 태스크 큐는 또 다른 스레드를 쓴다고 합니다.그렇다면 사실 멀티스레드인 걸까요? 그리고 태스크 큐는 비동기 함수나 콜백을 실행할 때만 사용되는 것인가요?자바스크립트의 싱글 스레드 동작자바스크립트 엔진은 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 태스크만 실행할 수 있습니다. 하지만 자바스크립트 환경(주로 브라우저나 Node.js)은 싱글 스레드인 자바스크립트 엔진 외에도 여러 개의 백그라운드 스레드를 사용하여 비동기 작업을 처리할 수 있게 해줍니다.이벤트 루프와 태스크 큐이벤트 루프는 자바스크립트가 멀티 스레드 같이 동작할 수 있게 하는 메커니즘입니다. 이벤트 루프..