다잘하고싶어

이벤트루프 EventLoop 이벤트루프는 CallStack 과 Task Queue 의 상태를 체크하여, CallStack 이 비었을 때, Task Queue 의 첫번째 콜백을 CallStack 으로 밀어 넣는다. 콜스텍 CallStack 현재 실행중인 코드가 담기는 스택구조의 메모리 영역 함수를 실행하면 함수에 대한 기록이 스택에 push 됨. 함수의 결과값이 반환되면(응답되면) pop 그림으로 이해하기 1️⃣ 맨 처음 “로봇청소기 돌려→ 통 비우기”가 CallStack 에 담긴다. (= 스택에 담겼다가 통비우기(=콜백함수)는 바로 실행할 수 없으므로) 2️⃣ Web API 로 통비우기를 넘겨준다. 3️⃣서버와의 연결을 통해 응답을 받으면 테스크큐로 통비우기를 넘겨준다 4️⃣이벤트루프가 콜스텍과 테스크큐..

XMLHttpReqeust (XHR) 객체가 서버와 상호작용할 때 사용 비동기 방식으로 진행되는 대표적인 예시 서버와 클라이언트 통신 시 (상호작용 시 ) 비동기적으로 작업 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트 할 수 있음. XMLHttpReqeust 객체의 메서드들 open (” HTTP method”, “url”, sync/async) 요청의 초기화 작업 (사전 준비 작업) GET/ POST 의 지정 ( get : 데이터 요청 , post : 데이터 전송 ) 서버 URL 지정 동기 / 비동기 설정 ( ⇒ 비동기가 기본 ) send( content ) open 이후에 send 를 해야 요청이 날라감 get 방식은 url 에 따라 필요정보를 추가하기 때문에 null 적용 post 방식에..

AJAX Asynchronous JavaScript and XML AJAX ( 비동기 방식의 자바스크립트 XML) AJAX Apps 구글맵, VIBE, 네이버 검색 등 직관적이고 자연스러운 사용자 상호액션 방식 기존 클릭이 필요하지 않음 기존 → 서버요청, 대기, 전체화면 새로고침 AJAX → 업데이트가 필요한 부분만 변경화면의 일부분만 변경 동기를 사용한 예제 코드 function foo() { console.log("foo"); } //delay 시간동안 멈춤, 대기( 동기 ) function sleep(delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } function bar() { con..

Web Storage 브라우저의 저장공간 Web Storage API (Application Programming Interface) 키, 값 쌍으로 값을 저장 sessionStorage localStorage [세션 스토리지 vs 로컬스토리지] - 세션 스토리지 ⇒ 브라우저가 닫히면 데이터 사라짐 → 로그인 - 로컬스토리지 ⇒ 브라우저를 닫았다가 열어도 데이터가 남아있음 → 장바구니 localStorage setItem( key, value ) getItem( key ) removeItem ( key ) clear() → 전부 다 날려버려 key(index) length 값은 반드시 문자열로 저장 stringify() vs parse() stringify() Javascript 객체를 JSON 문자열로..