Sh개발일기

비동기 처리 비동기 처리란 특정 로직의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 먼저 실행하는 것을 의미합니다. 자바스크립트에서는 이러한 비동기 처리가 매우 유용하게 사용되는 경우가 있습니다. let getData() = () => { let responseData; axios.get('http://domain.com/images/1', (res) => { responseData = res }); return responseData; } console.log(getData()); // undefined 위 코드는 자바스크립트를 이용하여 데이터를 가져오는 코드입니다. 일반적인 코드의 경우 res가 나와야 할 것 처럼 보이지만, 결과는 위에 나온것처럼 undefined가 나오게 됩니다. 그 이유는 a..

학습 목표 Ajax기술은 왜 나왔고, 어떻게 사용하는지 이해합니다. 핵심 개념 XMLHTTPRequest Ajax Ajax기술을 이용하면 브라우저의 새로고침 없이 데이터를 얻어와 더 좋은 UX를 제공할 수 있다. Ajax와 비동기 4라인의 익명함수는 비동기로 실행되어 이벤트큐에 보관된다. 이후 load 이벤트가 발생하면(서버로부터 데이터를 받으면) call stack에 실행된다. (즉 4라인의 익명함수는 8,9 라인보다 나중에 실행되게 된다.) JQuery라이브러리를 사용한 AJAX통신의 코드단위 비동기처리는 다음과 같은 순서로 동작하게 된다. Ajax 응답처리 서버로부터 받아온 JSON데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수 없다. 따라서 브라우저에서 제공해주는 JSON객체를 이용하여 문..

학습 목표 setTimeout을 필요한 곳에 사용할 수 있다. 비동기가 무엇인지 기본 개념을 이해한다. DOM(Document Object Model)을 이해한다. 핵심 개념 setTimeout과 비동기 DOM Tree DOM API querySelector window 객체 브라우저 개발을 하다 보면, window 객체를 만날 수 있다. window에는 많은 메소드들이 존재하며, 아래처럼 사용할 수 있다. window는 default 개념이므로 생략이 가능하다. setTimeout 활용 setTimeout은 다른 함수들과 조금 다르게 동작한다. 인자로 함수와 시간을 받고 있으며 다음과 같이 동작한다. setTimeout(function, time) -> time시간 뒤 function 실행 이렇게 나중..