무브라더

출처 https://joshua1988.github.io/web-development/javascript/js-async-await/ 자바스크립트 async와 await (중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법 joshua1988.github.io async & await 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했다. var user = fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } fetchUser() 이라..

Promise 자바스크립트 비동기 처리에 사용되는 객체 서버에서 받아온 데이터를 화면에 표시할 때 사용 데이터를 받아오기도 전에 화면에서 데이터를 표시하려고 할 때 발생하는 오류를 방지하기 위해 사용 프로미스를 사용하기 전에 프로미스를 사용하지 않고 데이터를 받아오는 코드를 살펴보면 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 ta..

이벤트 버블링 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. const divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); } div 태그 한개만 클릭했을 뿐인데도 3개의 이벤트가 발생하는걸 결과로 알 수 있다. 그 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 일어났을 때 이벤트를 최상위에 있는 화면 요소까지 전파 시..

함수 호출 자바스크립트에서 함수를 호출하는 방법에는 먼저, 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다. 뭘 사용해도 다 같은 결과가 출력되는데 그렇다면 call apply bind의 차이점에는 무엇이 있는지 알아보자. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 1. Function.prototype.call() func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg: func 호출에 제공되는 thi..

this 라는 개념이 애매하고 헷갈려서 제대로 정리를 해보려고 한다. https://nykim.work/71 [JS] 자바스크립트에서의 this this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 th nykim.work 위 게시글을 통해 this 의 역할에 대해서 알아봤는데 보면서 이해가 안된 부분만 정리해보았다. this 1. 단독으로 쓴 this 2. 함수 안에서 쓴 this 3. 메소드 안에서 쓴 this 4. 이벤트 핸들러 안에서 쓴 this 5. 생성자 안에서 쓴 this 6. 명시적 바인딩을 한 this 7. 화살표 함수로 쓴 this ..

클로저에 관해 공부를 하다가 예제에서 Array.from 이라는 코드를 알게되었다. 공부도 하고 복습도 하고 정리도 할겸 포스팅을 해보려고한다. Array.from( {length : 20}, () => Array(10).fill(0) ); 대충 20x10 짜리 2차원 배열을 리턴하겠구나 정도는 파악 할 수 있었지만 생소한 표현법이라 어떻게 동작하는지 한번 알아보자 Array.from 은 유사 배열 객체를 배열로 바꾸는 데 자주 사용했었다. MDN에서 나와있는 예시로는 다음과 같다. 1. Array.from('Tei'); // ['T','e','i'] 2. Array.from([1,2,3], x => x + x ); // [2,4,6] 1번의 예시는 눈에 익는 예시이다. 문자열을 인자로 받아 이를 배열로..