Javascript

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으로 객체화해야 ..

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

38 브라우저 렌더링 과정 리소스 요청 및 응답 브라우저는 HTML, CSS, JS, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 요청하고, 서버로부터 응답을 받는다. 브라우저 창에 URL를 입력함: https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=검색창&oquery=23123&tqi=h9Hmusp0JywsscwBK2NssssssfZ-229440 URL이 DNS를 거쳐 IP주소로 변환되고, 해당 IP주소에 해당하는 서버로 요청이 전송됨 요청한 HTML파일이 도착하고, 해당 HTML을 파싱하는 과정에서 외부 리소스를 필요로 하는 태그(img, link, script)를 만나면 해당 파일들을 요청하여 응답받는다. HTML ..

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

정규식은 다음과 같이 표기한다 const regExp = /is/gi; const str = 'IS this?'; console.log(regExp.test(str)); 플래그 정규식 패턴 뒤에 붙여 옵션을 준다. 플래그 의미 i 대소문자 구별 없이 검사함 g 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색 m 문자열의 행이 바뀌더라도 패턴 검색을 계속함 임의 문자열 검색 .은 임의의 문자열 하나를 말한다 …은 3개의 문자열을 의미한다. 반복검색 {m,n}은 앞의 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. +는 패턴이 한번 이상 반복되는 문자열을 의미한다. ?는 최대 한번 이상 반복되는 문자열을 말한다 []는 범위를 지정한다 [A-Z]는 A부터 Z까지. 대소문자 구별없이 하려면 [..

JS의 배열은 배열이 아니다 JS의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이지, 실제 배열과는다르다. 배열의 요소와 인덱스는 벨류와 키로 작동한다. length 프로퍼티와 희소배열 length 프로퍼티의 길이를 줄이면 배열이 줄어든다. 하지만, 늘린다고 빈 값으로 초기화되지는 않는다. empty가 들어가게 되고, 접근시 undefined가 출력된다. 배열 생성 배열 리터럴 const arr = []; Array 생성자 함수 Array 생성자 함수를 통해 배열을 생성할 수 있다. 인수가 1개인경우, length 프로퍼티 값이 인수인 배열을 생성한다. const arr = new Array(2); console.log(arr); //[empty*2]; 인수가 없는경우 빈 배열을 만든다. const..

함수구분 ES6에서는 함수를 3가지로 분류했다. 구분 constructor prototype super arguments 일반함수 O O X O 메서드 X X O O 화살표 함수 X X X X 메서드 메서드는 메서드 축약표현으로 정의된 함수만을 의미한다. 인스턴스를 생성할 수 없고, prortotype이 없으며, super 키워드를 사용할 수 있다. 화살표 함수 간략하게 함수를 정의한다. 표현뿐 아니라 내부 동작도 간략하다. 함수정의 함수 선언문으로 정의가 불가능하다. 함수 표현식으로 정의한다. 매개변수 선언 여러개인경우 소괄호 안에 선언한다. 하나인 경우 소괄호도 생략가능하다. 매개변수가 없는 경우, 생략이 불가능하다. const arrow=(x,y)=>{ ... }; const arrow=x=>{ ...

프로토타입과 클래스 클래스는 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 extends와 super를 제공함. 생성자 함수는 제공하지 않음 클래스는 호이스팅이 발생하지 않는 것처럼 보이지만 생성자함수는 호이스팅이 된다. 클래스내의 모든 코드에는 암묵적으로 strict mode가 적용되며, 해제할 수 없다. 클래스의 constructor, 프로토타입메서드, 정적메서드는 모두 Enurmable 값이 false이다. 열거되지 않는다. ⇒ 클래스 문법은 프로토타입과 다른 새로운 객체 생성 매커니즘 클래스 정의 클래스는 함수다. 클래스는 표현식으로 정의할 수 있다. 클래스는 일급객체로서 다음과 같은 특징을 갖는다. 무명의 리터럴로 생성가능 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에게 전달할 ..

const x=1; function outer(){ const x=10; const inner=function(){ console.log(x); } return inner; } const innerFunc=outer(); innerFunc(); // 10 외부함수보다 중첩함수가 더 오래 유지되는 경우 중첩함수는 이미 생명주기가 종료된 외부함수의 변수를 참조할 수 있음 이런 중첩함수를 클로저라 부름 상위 함수의 실행컨텍스트는 사라지지만, 렉시컬 환경은 inner함수에 의해 참조되어 사라지지않기때문에 가능함 참조되고 있는 메모리를 가비지 컬렉팅 하지 않음 상위 함수의 렉시컬 환경을 참조하는 경우만 클로저이다. 상위 함수의 렉시컬 환경을 참조 하지않으면 상위 함수의 렉시컬 환경은 가비지컬렉팅 대상이됨 일부만 ..