관련 주제 '이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관' 이벤트 루프와 Web APIs의 관계자바스크립트는 싱글 스레드 언어로 한번에 하나의 작업만 실행할 수 있다.하지만 브라우저에서 비동기 작업을 처리할때는 이벤트 루프와 Web APIs가 함께 작동하여 여러 작업을 효율적으로 수행할 수 있다.즉, Web APIs가 없을 경우에는 자바스크립트는 싱글 스레드 언어이므로 모든 작업을 순차적으로 실행해야하는 비극을 겪을 수 있다. Web APIs 란?브라우저가 제공하는 기능으로 자바스크립트가 직접 실행할 수 없는 작업을 담당한다.자바스크립트는 Web APIs에 작업을 위임하고, Web APIs는 작업이 끝나면 콜백을 다시 자바스크립트로 넘겨주게 된다.즉, Web APIs는 자바스크립트의 비동기 처..
이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관
이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관자바스크립트는 싱글 스레드 기반이다. 싱글 스레드이기 때문에 한번에 한가지 작업만 실행할 수 있다.하지만 그렇다고 한번에 한가지 작업만 하게되면? 문제가 많을것이다. (무한 대기가 생기겠지?)그렇기 때문에 브라우저나 노드 환경에서 여러 작업을 동시에 처리할 수 있도록 설계되어있는데, 이 핵심이 이벤트 루프다. 이벤트 루프란?자바스크립트의 비동기 처리를 가능하게하는 매커니즘이다. (비동기 작업 HTTP요청이나 setTimeout 등..)비동기 작업은 나중에 실행되도록 예약하고, 이벤트 루프는 준비된 작업을 실행할 수 있도록 한다.이때 어떤 순서대로 실행을 시킬까?우리가 여기서 알아야하는 기본적인 개념은 '콜스택, 태스트큐, 마이크로태스크큐' 이다. (W..
react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 비동기적으로 바뀌는 컴포넌트 UI 테스트 비동기적으로 바뀌는 컴포넌트 UI 테스트 Async Utilities 함수를 사용 wait 해당 함수를 사용하여 특정 콜백에서 에러를 발생하지 않을때까지 대기 timeout을 초과하면 테스트 실패(timeout 기본값 4500ms, 커스터마이징가능) 리액트 16.8 버전 버그있음 waitForElement 해당 함수로 특정 엘리먼트의 변화가 생길때까지 대기(show, hide, change..) 프로미스가 끝날때 선택한 엘리먼트 resolve waitForDomChange 해당 함수 특징으로 콜백함수가 아닌 검사하고 싶은 엘리먼트를 넣어주면 해당 엘리먼트 변화가 발생할때까지..
AJAX 통신 jQuery는 AJAX 통신 관련해서 다양하고 편리한 메서드들을 제공한다. 실무에서 많이 사용하는 메소드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트 AJAX를 참조하면 된다. 메소드 $.ajax 비동기식 Ajax를 이용하여 HTTP 요청을 전송 $.get 전달받은 주소로 GET 방식의 HTTP 요청을 전송 (데이터 요청에 많이 사용) $.post 전달받은 주소로 POST 방식의 HTTP 요청을 전송 (데이터 전송에 많이 사용, 데이터를 캐시하지 않는다.) $.getScript 웹 페이지에 스크립트를 추가함 $.getJSON 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여 JSON 파일로 응답 받음 .load() 서버에서 데이터..