Frontend/Modern Javascript Deep Dive

48 모듈 모듈이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드조각을 말한다. 이는 파일 단위로 분리한다. 모듈이 성립하기 위해서는 모듈 자신만의 파일 스코프를 가져야 한다. JS와 모듈 파일마다 독립적인 파일 스코프를 가지지 않음 파일을 분리해서 script로 로드해도 독자적인 스코프를 가지지 않음 ⇒ 변수 중복 등의 문제 발생 CommonJS와 AMD진영해서 각각 해결 방안을 제시함 NodeJS는 CommonJS를 택하여 기본적으로 NodeJS에서는 파일별로 독립적인 파일 스코프를 가짐 ES6 모듈(ESM) 브라우저에서도 동작하는 모듈 기능을 추가함 브라우저script 태그에 type=”module”이라는 어트리뷰트를 추가하면, 해당 스크립트는 모듈로 작동한다. 다만, 일반적인 js파일이..

46 제너레이터와 async/await 제너레이터란? ES6에 도입됨 코드 블록 실행을 일시중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 일반함수와의 차이 함수호출자에게 함수 실행 제어권을 양도할 수 있음함수를 부른 함수는 함수 실행을 제어할 수 없다.함수 호출자가 일시중지, 재개가 가능하다는 것 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 일반함수를 호출하면 제어권은 해당 함수에게 넘어간다. 제너레이터 함수는 함수 호출자와 함수 상태를 주고받을 수 있다. 제너레이터 함수를 호출하면 제네레이터 객체를 반환한다. 제네레이터 함수를 호출하면 함수 코드를 실행하는게 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환함 제너레이터 함수의 정의 function*로 선언하며, ..

45 Promise 비동기 함수는 동기함수가 끝나야 테스크 큐에서 콜스택으로 푸쉬에서 실행되므로, 반환 결과를 외부에서 확인할 수 없고, 상위 스코프 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리결과에 대한 후속처리는 비동기함수 내부에서 수행해야한다. 에러처리의 한계 콜백 패턴으로 비동기 처리를 하면, 에러처리가 곤란하다. try{ setTimeout(()=>{throw new Error()}, 2000); } catch(err){ console.log(err); } 에러가 잡히지 않는다. 에러는 호출자 방향으로 전파된다. 즉, 콜스택에 위에 있는 함수에서 아래에 있는 함수로 전파된다. 이때 비동기 함수는 콜스택에 없으므로 에러가 전파되지 않는것이다. 프로미스의 생성 const promise=ne..

43 Ajax AJAX WebAPI 중 XMLHttpRequest 객체를 기반으로 동작함 장점 변경할 부분 갱신하는데 필요한 데이터만 받아오기 때문에 불필요한 통신이 없음 화면 깜박임이 없음 블로킹 없이 동작함 JSON JavaScrtip Object Noation 클라이언트-서버간 HTTP통신을 위한 텍스트 데이터 포맷 JSON 표기방식 객체 리터럴과 유사하게 키-값으로 이뤄진 순수한 텍스트임 JSON의 키는 반드시 큰 따옴표로 묶어야함 JSON.stringify 객체를 JSON포맷의 문자열로 변환함 클라이언트가 서버로 객체를 보내려면 객체를 문자열화 해야하기때문임 이를 직렬화라함 JSON.parse JSON문자열을 객체로 변환함 서버→클라이언트로 도착한 데이터는 문자열임 이를 JSON으로 객체화해야 ..

41 타이머 호출 스케줄링 타이머 함수를 통해 일정 시간이 경과한 이후에 호출되도록 함수 호출을 예약하는 것 타이머함수 setTimeout, setInterval - 타이머 생성 clearTimeout, cleatInterval - 타이머 제거 ⇒ 빌트인 함수가 아니라 전역객체의 메서드로 제공 → 호스트 객체임 setTimeout 딱 한번 동작 setInterval 반복동작 타이머 함수는 비동기 처리방식으로 작동함 → js엔진은 싱글스레드이므로 타이머 함수 setTimeout/clearTimeout setTimeout은 두번째 인수로 받은 시간으로 단 한번 동작하는 타이머를 생성함 이후 만료되면, 첫 인수의 콜백함수가 호출됨 const timer=setTimeout(func, delaytime, [par..

40 이벤트 이벤트 드리븐 프로그래밍 브라우저는 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킴 특정 타입 이벤트에 대해 반응하여 어떤 함수를 실행시킨다면, 해당 타입의 이벤트가 발생했을때 호출될 함수를 브라우저에게 알려 호출을 위임함 이벤트핸들러 이벤트가 발생했을때 호출될 함수 이벤트 핸들러 등록 이벤트 발생시 이벤트 핸들러의 호출을 브라우저에게 위임하는 것 //Click me! const button=document.querySelector('button'); button.onclick=()=>{alert("누르셧군요");} 이벤트 타입 이벤트 종류를 나타내는 문자열 약 200가지의 이벤트가 있음 MDN참고바람…. 이벤트 핸들러 등록 3가지 방식으로 등록할 수 있음 이벤트 핸들러 어트리뷰트 방식..

39 DOM 노드 HTML요소와 노드 객체 HTML요소는 HTML문서를 구성하는 개별적인 요소를 말한다. HTML요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 이때 HTML요소의 어트리뷰트는 어트리뷰트 놓드로, HTML요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다. HI 요소노드 : div 어트리뷰트 노드 : class: greet 텍스트 노드 : HI HTML요소의 콘텐츠 영역에는 텍스트 뿐 아니라 다른 HTML요소도 포함한다. 이때 HTML요소간에는 중첩에 의해 계층적인 부자관계가 형성된다. 이를 트리자료구조로 표현한다. DOM 트리 노드 객체들로 구성된 트리 자료구조 노드 객체의 타입 노드 객체는 12개의 종류 상속구조를 가짐 문서노드(document) DOM트리..

35 스프레드 문법 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값의 목록으로 만든다. 이터러블만 가능하다. 스프레드 문법의 결과는 값이 아니다. 즉, 연산자가 아니라는 말 따라서 스프레드 문법의 결과는 변수에 할당할 수 없다. 객체리터럴의 프로퍼티 목록, 배열의 요소, 함수 호출문의 인수로 사용가능하다. 객체 리터럴 내부에서 사용하는 경우 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용한다. 기존에는 Object.assign메서드를 사용하여 여러개의 객체를 병합하거나 특정 프로퍼티를 변경, 추가했다. 36 디스트럭처링 할당 구조분해할당이라고도 하며, 구조화된 배열과 같은 이터러블, 객체를 구조 파괴하여 1개이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 디스트럭처링 할..

34 이터러블 이터러블 프로토콜 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속받아 호출하면, 이터레이터를 반환한다. 이를 이터러블 프로토콜이라 한다. 이터러블은 for … of 문을 통해 순회할 수 있으며, 스프레드문법과 디스트럭처링 할당의 대상으로 사용할 수 있다. 이터레이터 프로토콜 Symbol.iterator를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터.next를 호출하면 이터러블을 순회하며 value와 done프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. 이를 이터레이터 프로토콜이라 하며 이를 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소 탐색을 위한 포인터 역할을 한다. ... [Symbol.iterator](..

33 Symbol 이름충돌 없는 유일한 프로퍼티 키를 만들기 위해 사용함 Symbol함수 new와 함께 사용하지 않음 접근시 암묵적으로 래퍼 객체를 만듦 description, toString const mySymbol=Symbol("mysymbol"); console.log(mySymbol.description); //mysymbol 심벌값은 암묵적으로 문자열이나 숫자타입으로 변환되지 않는다. 단, 불리언으로는 변환된다. Symbol.for/Symbol.keyFor 인수로 전달받은 문자열을 키로 사용하여 키와 심벌값들의 쌍이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌값을 검색함 검색 실패시 전역 심벌 레지스트리에새로 생성하여 반환한다. const s1=Symbol.for('mySy..