제너레이터 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다 일반 함수를 호출하면 제어권이 함수에게 넘어가 제어가 불가능하지만 제너레이터는 가능 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다 제너레이터 함수의 정의 function* getDecFunc(){ yield 1; } const genExpFunc=function* (){ yield 1; } const obj={ * genObjMethod(){ yield 1..

비동기 처리를 위한 콜백 패턴 콜벡 헬 비동기+비동기+비동기.... (에러 ????? / 가독성 ↓) 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다 ex)setTimeOut let g=0; setTimeout(()=>{g=100},0) console.log(g) //0 onload는 비동기 let toods; const get=url=>{ const xhr=new XMLHttpRequest(); xhr.open(..

REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 *페이로드 => 사용에 있어서 전송되는 데이터를 뜻함, 페이로드라는 용어는 큰 데이터 덩어리 중에 '흥미 있는' 데이터를 구별하는 데 사용 REST API 설계 원칙 1. URI는 리소스를 표현해야 한다 ( 명사 사용 ) # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다 HTTP 요청 메서드 종류 목적 페이로드 GET index/retrieve 모든/특..

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지에 동적으로 갱신하는 프로그래밍 방식 - 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신 발생 X - 변경할 필요가 없는 부분은 re-rendering X 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다 - 클라이언트 서버 통신이 비동기로 작동 ==> 블로킹 발생 X 참고 : https://stackoverflow.com/questions/1510011/how-does-ajax-work JSON 클라이언트와 서벅 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다 JSON의 키는 반드시 큰따옴표로 묶어야한다. { "name":..

동기 처리와 비동기 처리 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다 -> 함수를 실행할 수 있는 창구가 단 한개 -> 동시에 2개 이상의 함수를 실행 X 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 싱글 스레드는 한 번에 하나의 태스크만 실행할 수 있다-> 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생 [!] 브라우저에 내장된 자바스크립트의 엔진이 싱글 스레드이고 브라우저는 멀티 스레드로 동작함 만약, 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작하면 비동기로 동작이 불가능하다 동기 처리 방식 태스크를 하나씩 처리 -> 실행 순서 보장 / 1번 태스크 종료때까지 2번 태스크 블로킹 비동기 처리 방식 태스크 상태 상관없이 ..

DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조 노드 Hello div / class / greeting / Hello / div start tag / attribute name / attribute value / contents / end tag 요소 노드 : div / 어트리뷰트 노드 : class:"greeting" / 텍스트 노드 : "Hello" 노드 객체들로 구성된 트리 자료구조를 DOM / DOM트리라고 한다 출처 : https://poiemaweb.com/js-dom 문서 노드(Document Node) 트리 최상위의 루트노드, HTML 문서당 document는 유일함..