IT/자바스크립트 4

비동기식 코드 작성 (promise, async , await) 고려점

프로젝트를 진행하면서 비동기식 코드를 작성을 많이 하게 되는데, 비동식으로 코드 작성시 항상 갈증이 있었는데 외국 블로그에 잘 정리된 글을 보고 배움을 얻어 코드를 작성할때 고려하려고 한다. 한화면에서 여러 api로 호출하는 부분이 있었는데 promise.all을 써서 해결한 경험이 있었는데 eslint 로 조금더 가독성 좋은 코드로 되는 부분이 있어서 내용을 가져왔다. // ❌ for (const url of urls) { const response = await fetch(url); } // ✅ const responses = []; for (const url of urls) { const response = fetch(url); responses.push(response); } await Promi..

자바스크립트 object 2개 비교하기

개발 도중에 JSON으로 된 Object 또는 일반 object에 특정 값이 변경 되었을 경우 비교하여 조건문을 걸고 싶은 경우 생각하지 못했던 결과를 얻게 되어서 정리를 해보겠습니다. const k1 = {fruit: '🥝'}; const k2 = {fruit: '🥝'}; // Using JavaScript JSON.stringify(k1) === JSON.stringify(k2); // true // Using Lodash _.isEqual(k1, k2); // true - Deep Nested 비교 조금더 복잡하고 중첩되어진 Object를 비교하여도 제대로된 결과를 얻을수 있습니다. const one = { fruit: '🥝', nutrients: { energy: '255kJ', minerals:..

Throttle(쓰로틀링)과 Debounce(디바운스)에 대해서 알아보자! 정리하자!

밑에 참조한 블로그 들이 정말 정리가 잘되어서 있어서 간단하게 정리하려고 한다. Throttle : 쓰로틀링은 보통 성능 문제 때문에 많이 사용. 특성 자체가 실행 횟수에 제한 실사용 예제) 인피니티 스크롤, 관련 검색어 추천 및 자동완성 등 Debounce: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 실사용 예제) 리사이징(웹페이지) 등 참조 블로그: https://webclub.tistory.com/607 디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점 Throttle, Debounce & Difference 스로틀(Throttle) 과 디바운스(Debounce) 란 무엇일까? 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립..

Javacript - call , apply , bind 차이점 정리

함수를 호출하는 방법: -함수이름.call(객체, 인수,인수....) , 함수이름.apply(객체, [인수,인수,...]) , 함수이름.bind(객체,인수,인수 ...) Call - 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. 뭔소리지? 밑에와 같이 person1의 객체에 매개변수 'Hello'을 담아서 함수를 즉시 호출 할 수 있다. 즉!! say함수 안에서 this는 person1 또는 person2로 지정된다. var person1 = {firstName: 'Jon', lastName: 'Kuperman'}; var person2 = {firstName: 'Kelly', lastName: 'King'}; function say(greeting) { console.log..