Javascript40 closest() 실용적으로 사용하기 javascript를 통해서 가장 가까운 요소를 찾는 방법 중에 closest()라는 메서드가 있습니다. DOM 노드의 부모를 찾는데 어려움을 겪은 적이 있나요? Click data-id 값을 한번 가져와볼까요? const button = document.querySelector("button"); button.addEventListener("click", (event) => { console.log(event.target.parentNode.dataset.id); // normal }); 이런 케이스의 경우에는 parentNode API로도 충분합니다. 하지만 HTML 구조가 조금 더 중첩이 되면 어떨까요? 반복문으로 parentNode를 계속 돌면서 찾는 것은 매우 비효율적일 수도 있습니다. 물론 c.. 2021. 6. 29. Javascript Clean Code에 관하여 자바스크립트 클린코드에 대한 관점들이 많이 있습니다. 다른사람들을 위한 코드를 작성하는 것이 좋고, 또 그 자체로도 본인에게도 매우 도움이 되기 때문에 어떻게 보면, 클린코드는 좋은 개발자의 덕목에 필수불가결하다고 할 수 있습니다. 여전히 어지럽고 난해한 코드를 작성하는 법, 아무도 알아보지 못하게 코드를 작성하는 법에 대한 책들이 있긴 하지만, 저는 그런 관점에 대해서는 자기 자신이 자신이 없기 때문이라는 생각만 듭니다. 이 글에서는 자바스크립트 관점에서만 다룹니다. 1. 강력한 타입 체크 == 대신에 ===를 사용하세요. 0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false // 예시 const val = "123"; .. 2021. 4. 11. <script async> / <script defer> 언제 사용하면 좋을까? script 호출 방식을 지연하는 것에 async와 defer가 있습니다. 언제 사용하면 좋을까요? async는 DOM에 직접 연관이 없거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행해야할 때 효과적입니다. 구글 애널리스틱스, 쿠키봇 등 독립적으로 사용되는 서드파티 스크립트들은 async가 적합합니다. defer도 async와 마찬가지로 병렬로 로드합니다. async와 유일한 차이점은 defer는 DOM이 모두 로드 된 이후에 실행이 일어납니다. 그래서 순서가 보장된다는 차이점이 있습니다. 때문에 기본적으로 DOM의 모든 요소에 접근할 수 있고, 실행 순서도 보장이 됩니다. 스크립트 파일끼리 의존성이 있을 경우 사용하면 좋습니다. 2021. 3. 2. Async/Await를 try/catch 없이 사용하기 Async/Await 사용할 때 try/catch문 없이 사용 할 수 있을까요? 아래의 코드를 개선하여 각각 에러처리도 가능하면서 try/catch 구문에서도 빠져나가 봅시다. function fetchAndUpdatePosts() { fetchPosts() .then((posts) => { updatePosts(posts) .catch((err) => { console.log('error in updating posts'); }); }) .catch(() => { console.log('error in fetching posts'); }); } 포스트를 패치하고 나서 업데이트 하는 구문인데 패치할 때 catch에 걸릴 수도 있고 업데이트할 때 catch에 걸릴 수도 있습니다. 우선 async/await.. 2021. 3. 1. 이전 1 2 3 4 5 6 ··· 10 다음
