본문 바로가기

JavaScript

(12)
div에 자동 스크롤 기능 적용하기 div의 innerHTML 속성에 문자열을 이어 붙일 때 스크롤바를 자동으로 맨 밑으로 이동시겨 보겠습니다. 1. 자동 스크롤 테스트를 위한 HTML 코드 작성. ADD LOG 2. div에 overflow style 추가.. #log { white-space: pre; overflow-y: scroll; width:300px; height:100px; border:1px solid black; } 3. JavaScript 코드 추가. const log = document.getElementById("log"); log.isScrollBottom = true; log.addEventListener("scroll", (event) => { if (event.target.scrollHeight - event..
비동기 호출, async, await를 이해해 보자. 2020/04/12 - [JavaScript] - 비동기 호출, Promise를 이해해 보자. 2020/04/14 - [JavaScript] - 비동기 호출, Promise를 이해해 보자(2). 이전 글에서 자바스크립트 비동기 호출을 위한 Promise에 대해서 알아보았는데요. 이 Promise 보다 훨씬 사용하기 편하고, 코드 가독성도 뛰어난 async function, awiat에 대해서 알아보겠습니다. async function async function async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를..
비동기 호출, Promise를 이해해 보자(2). 2020/04/12 - [JavaScript] - 비동기 호출, Promise를 이해해 보자. Promise의 기본 사용법을 다룬 지난 글에 이어서, 이번에는 여러 동기화 작업을 동시에 다루는 방법을 알아보겠습니다. Promise.all() Promise.all() The Promise.all() method returns a single Promise that fulfills when all of the promises passed as an iterable have been fulfilled or when the iterable contains no promises or when the iterable contains promises that have been fulfilled and non-prom..
비동기 호출, Promise를 이해해 보자. 프롤로그 promise? MFC를 사용하는 윈도 프로그래머지만, reactjs, electron에 관심을 가지면서 신묘한 자바스크립트 문법에 적응이 안 되었는데, 그중 하나가 promise! C 프로그램만 하던 나로서는 이게 인터럽트도 아니고, 스레드도 아니고, 콜백도 아닌 것이, 프로그램 코드 진행은 그대로 지나갔는데, 나중에 코드가 실행되니 신기했다. 만약, fetch를 사용하는 아래와 같은 코드를 실행하면, console.log("fetch 시작"); fetch("http://example.com/list.json") .then(res => { return res.json(); }) .then(json => { console.log(JSON.stringify(json)); }); console.lo..