Front End Develop Front End Develop

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..

자바스크립트 클린코드에 대한 관점들이 많이 있습니다. 다른사람들을 위한 코드를 작성하는 것이 좋고, 또 그 자체로도 본인에게도 매우 도움이 되기 때문에 어떻게 보면, 클린코드는 좋은 개발자의 덕목에 필수불가결하다고 할 수 있습니다. 여전히 어지럽고 난해한 코드를 작성하는 법, 아무도 알아보지 못하게 코드를 작성하는 법에 대한 책들이 있긴 하지만, 저는 그런 관점에 대해서는 자기 자신이 자신이 없기 때문이라는 생각만 듭니다. 이 글에서는 자바스크립트 관점에서만 다룹니다. 1. 강력한 타입 체크 == 대신에 ===를 사용하세요. 0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false // 예시 const val = "123"; ..

script 호출 방식을 지연하는 것에 async와 defer가 있습니다. 언제 사용하면 좋을까요? async는 DOM에 직접 연관이 없거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행해야할 때 효과적입니다. 구글 애널리스틱스, 쿠키봇 등 독립적으로 사용되는 서드파티 스크립트들은 async가 적합합니다. defer도 async와 마찬가지로 병렬로 로드합니다. async와 유일한 차이점은 defer는 DOM이 모두 로드 된 이후에 실행이 일어납니다. 그래서 순서가 보장된다는 차이점이 있습니다. 때문에 기본적으로 DOM의 모든 요소에 접근할 수 있고, 실행 순서도 보장이 됩니다. 스크립트 파일끼리 의존성이 있을 경우 사용하면 좋습니다.

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..

자바스크립트를 다루는데에 있어서 좋은 습관들이 있어 공유드립니다. 코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야합니다. Object와 Class를 다룰 때 Getter와 Setter를 쌍으로 이루자 우리는 Getter와 Setter를 반드시 쌍으로 다뤄야 합니다. Getter가 없으면 속성을 읽을 수 없으므로 사용되지 않습니다. 예를 들어 아래처럼 사용하기 보다는 const obj = { set a(value) { this.val = value; } }; 아래처럼 사용하는 것이 이상적입니다. const obj = { set a(value) { this.val = value; }, get a() { return this.val; } }; 배열을 여닫기 전에 줄바꿈 하기 const arr =..

animation 가속과 감속을 자유롭게 이루어내는 javascript 가속도에 대한 코드. .smoothBox { position:fixed; left:0; top:300px; width:0; height:200px; background:hotpink; } const box = document.querySelector('.box'); const smoothBox = document.querySelector('.smoothBox'); const accelearation = 0.1; let delay = 0; let requestAnimationId; let animState; let approx; const anim = () => { delay = delay + (pageYOffset - delay) *..

ES 모듈인 ESM은 자바스크립트(ES) 모듈을 의미합니다. 최신 브라우저가 지원합니다. IE를 삭제하는 한 문은 상당히 열려 있습니다. ESM 이전의 JavaScript 프로젝트 상황은 다음과 같습니다. npm에서 사용해야하는 패키지가 있습니다. package.json, npm install 등을 사용하여 미리 npm에서 설치합니다. 어떤 이유로 (개발자의 편의를 위해) 잘못된 ESM 인 import 문을 작성하고 로컬 node_modules 폴더에서 패키지를 가져 오는 것으로 가정합니다. 우리 번들러는 잘못된 import를 어떻게 처리해야하는지 알게 될 것입니다. Babel 및 다른 대안들을 실행하는 것과 같이 어쨌든 우리가 원하는 다른 작업을 수행한다는 말이 있기 때문에 이것은 모두 괜찮습니다. 우..

JavaScript는 이제 많은 라이브러리와 프레임워크가 파생된 매우 인기있는 프로그래밍 언어입니다. 하지만 상위 생태계가 어떻게 진화하든 바닐라 자바스크립트 없이는 불가능합니다. 여기에서는 프로그래머의 바닐라 JavaScript 기술을 테스트하기 위해 4개의 JavaScript 인터뷰 질문을 선택했습니다. 1. Array.prototype.map 구현 Array.prototype.map 메서드를 직접 구현하는 방법은 무엇입니까? lodash를 참조하면 다음과같은 맵 함수를 작성할 수 있습니다. function map(array, iteratee) { let index = -1 const length = array == null ? 0 : array.length const result = new Arra..