주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

[챗지피티와 공부를 해보자] 02. 이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관   자바스크립트는 싱글 스레드 기반이다. 싱글 스레드이기 때문에 한번에 한가지 작업만 실행할 수 있다.하지만 그렇다고 한번에 한가지 작업만 하게되면? 문제가 많을것이다. (무한 대기가 생기겠지?)그렇기 때문에 브라우저나 노드 환경에서 여러 작업을 동시에 처리할 수 있도록 설계되어있는데, 이 핵심이 이벤트 루프다.  이벤트 루프란?자바스크립트의 비동기 처리를 가능하게하는 매커니즘이다. (비동기 작업은 HTTP요청이나 setTimeout 등..)비동기 작업은 나중에 실행되도록 예약하고, 이벤트 루프는 준비된 작업을 실행할 수 있도록 한다.이때 어떤 순서대로 실행을 시킬까?우리가 여기서 알아야하는 개념은 '콜스택, 태스트..

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() 서버에서 데이터..

동기(synchronous : 동시에 일어나는)란? 동기는 말 그대로 동시에 일어난다는 의미이며 요청과 결과가 동시에 일어납니다. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다. -요청과 자리에 결과가 동시에 일어남 = A와 B 사이의 작업 처리를 동시에 맞추겠다. 비동기(Asynchronous : 동시에 일어나지 않는)란? 비동기는 동시에 일어나지 않는다를 의미이며 요청과 결과가 동시에 일어나지 않습니다. -요청한 자리에 결과가 주어지지 않음 = A와 B사이의 작업 처리를 동시에 맞추지 않겠다. [ 예시 ] 출처 : https://blog.hanumoka.net/2018/10/06/javascript-20181006-javascript-callback/ 이해 잘 되게 ..