Front-end (37) 썸네일형 리스트형 [JavaScript] Promise 프라미스화 콜백을 받는 함수를 프라미스를 반환하는 함수로 바꾸는 것을 '프라미스화(promisification)'라고 한다. 기능을 구현 하다 보면 콜백보다는 프라미스가 더 편리하기 때문에 콜백 기반 함수와 라이브러리를 프라미스를 반환하는 함수로 바꾸는 게 좋은 경우가 종종 생길 수 있다. ⭕️setTimeOut 함수 예시 function wait(text, milliseconds) { setTimeout(() => text, milliseconds); } // 특정 밀리세컨즈 후에 text라는 함수를 수행하는 함수 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { con.. [JavaScript] 프라미스 API Promise 클래스에는 5가지 정적메소드가 있다. 1. Promise.all 만약 여러개의 프로미스를 동시에 실행시키고 모든 프로마스가 준비될 때가지 기다려야한다면? ( 여러개의 URL에 동시에 요청을 보내고 다운로드가 모두 완료된 이후에 필요한 콘텐츠를 실행시키는 경우) Promise.all을 사용할 수 있다. let promise = Promise.all([...promises...]); Promise.all은 요소 전체가 프로미스 배열을 받고, 새로운 프로미스를 반환한다. 배열 안에 프로미스가 모두 실행이 되면 새로운 프로미스가 이행되는데, 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 result가 된다. Promise.all([ new Promise(resolve => setTim.. [JavaScript]프라미스와 에러 핸들링 프라미스가 거부되면 제어 흐름이 제일 가까운 rejection 핸들러로 넘어가기 때문에 프라미스 체인을 사용하면 에러를 쉽게 처리할 수 있다. fetch('https://no-such-server.blabla') // 존재하지 않는 url일 때. .then(response => response.json()) .catch(err => alert(err)) // 실행흐름이 이 .catch로 넘어가면서 에러를 alert한다. 여기서 .catch는 첫번째핸들러일 필요는 없고 여러개의 .then뒤에도 올 수 있다. 가장 먼저 오는 .catch에서 에러를 처리한다. 1. 암시적 try...catch 프라미스 executor와 프라미스 핸들러 코드 주위엔 '보이지 않는(암시적) try..catch'가 있다. 예외가 .. [JavaScript]프라미스 체이닝 순차적으로 처리해야 하는 로직이 여러개 있다면 어떻게 해야할까? --> 프라미스 체이닝을 이용할 수 있다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { // (**) alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).then(function(result) { alert(result); // 4 return result * 2; }); 위의 프라미스 체이닝은 다음과 같은 순서로 실행된다. 1초 후 최.. [JavaScript] setTimeout과 setInterval을 이용한 호출 스케줄링 일정 시간이 지난 후에 원하는 함수를 예약 실행할 수 잇게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 한다. 호출 스케줄링을 구현하는 방법 SetTimeout SetInterval 1. SetTimeout let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) ⭕️ 매개변수 func | code : 실행하고자 하는 코드로, 함수 또는 문자열형태이다. (대개는 함수가 들어감. 문자열은 추천하지 않는다고 함) delay : 실행 전 대기시간으로, 단위는 밀리초이며 기본값은 0이다. arg1, arg2... : 함수에 전달할 인수 //기본예시 function sayHi() { alert('안녕하세요.'); } setTime.. [JavaScript] new Function 문법 함수 표현식과 선언문 이외에 함수를 만들 수 있는 방법이 하나 더 있다. (잘 사용하는 방법은 아님!! 이 방법 외에는 없을 때 사용) 1. 문법 let func = new Function ([arg1, arg2, ...argN], functionBody); // 인수 (arg)와 functionBody로 구성된다. //예 let SsabalJass = new Function('noHomwork','fine', `return ${noHomwork}하면 ${fine}원`) console.log(SsabalJass('지각','50000') // 지각하면 50000원 //인수가 없고 본문만 있는 함수 let SsabalJass = new Function('console.log("숙제안하면 오마넌") Ssaba.. [JavaScript] defer, async 스크립트 모던 웹브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 무겁다. 용량이 커서 다운로드받는 데 오랜 시간이 걸리고 처리하는 것 역시 마찬가지. 브라우저는 HTML을 읽다가 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. 이는 src 속성이 있는 외부 스크립트 를 만났을 때도 마찬가지인데, 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있다. 이런 브라우저의 동작 방식은 두 가지 중요한 이슈를 만듭니다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버린다. 페이지에 접속하는 사용자들은 스크립트.. [JavaScript] 브라우저 창 사이즈와 스크롤 브라우저 창이 차지하는 너비와 높이를 어떻게 구할 수 있을까? 스크롤 때문에 보이지 않는 영역을 포함하여 문서 전체가 차지하는 너비와 높이는 어떻게 구할 수 있을까? 1. 브라우저 창의 너비와 높이 창이 차지하는 너비와 높이를 알려면 document.documentElement 의 clientWidth와 clientHeight를 사용하면 된다. ** window객체가 아닌 document.documentElement를 쓰는 이유 --> 브라우저의 window 역시 innerWidth와 innerHeight 프로퍼티를 지원한다. 하지만 그럼에도 document.documentElement를 쓰는 이유는 스크롤바가 생기면 스크롤바 역시 공간을 차지하는데, clientWidth나 clientHeight는 스크.. 이전 1 2 3 4 5 다음
