진취적 삶

41.1 호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면타이머 함수를 사용한다. 이를 호출 스케줄링 이라 한다. 타이머 함수는 호스트 객체다 . setTimeout 함수가 생성한 타이머는 단한번 동작 setInterval 함수가 생성한 타이머는 반복 동작한다. js 엔진은 싱글 스레드로 동작한다. 타이머함수 setInterval 과 setTimeout은 비동기 처리 방식으로 동작한다. 41.2 타이머 함수 41.2.1 setTimeout /clearTimeout 두번 째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머를 생성한다. const timeoutId = setTimeout(func|code, delay,param1,param2) cl..

42.1 동기처리와 비동기 처리 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸쉬되는것은 바로 함수 실행의 시작을 의미한다. js 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 대기중인 task 들은 현재 실행중인 실행 컨텍스트가 pop 되어 실행 컨텍스트 스택에서 제거되면, 비로소 실행되기 시작한다. 한번에 하나만 실행 할수 있는 싱글 스레드 방식으로 동작한다. 시간이 걸리는 테스크를 실행하는 경우 블로킹이 발생한다. //sleep 함수는 일정시간이 경과한 이후에 콜백함수를 호출한다. function sleep(func, delay) { const de..

43.1 Ajax 란? Ajax : js를 사용하여 브라우저가 서버에게 비동식 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 랜덩링하는 방식으로 동작 전통적인 방식의 단점은 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신 발생 변경할 필요가 없는 부분까지 처음부터 다시 랜더링 하기에 , 화면전화이 일어나면 화면이 순간적으로 깜박이는 현상..

HTTP 장점을 최대한 활용할수있는 아키텍처로서 REST를 소개 REST 의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTfull 이라고 표현한다. REST 는 HTTP 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고 ,REST API는 REST 기반으로 서비스 API를 구현한것을 의미한다. 44.1 REST API 구성 REST API 는 자원 행위 표현 의 3가지 요소로 구성된다 . 구성 요소 내용 표현 방법 자원 resource 자원 URI 행위 verb 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 URI 는 리소스를 표현하는데 집중하고, 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는것이 ..

비동기 처리를 위한 프로미스를 도입 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 const get = (url) => { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { console.log(JSON.parse(xhr.response)); } else { console.error(`${xhr.status} ${xhr.statusText}`); } }; }; get(""); get 함수는 서버의 응답 결과를 콘솔에 출력한다. get 함수는 비동기 함수다. 비동기 함수란 비동기로 동작하는 코드를 포함한 함수를 말한다. 비동기 함수..

31.1 정규표현식이란 일정한 패턴을 가진 문자열의 집합을표현하기 위해 사용하는 형식 언어이다. 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능 :특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환 31.2 정규 표현식의 생성 /regexp/i 시작 ,종료 기호 / regexp 패턴 i 플래그 const target = "Is this all there is?"; //패턴 :is //플래그 i=> 대소문자를 구별하지 않고 검색 const regexp = /is/i; console.log(regexp.test(target)); //true const target = "is this all there is ?"; const regexp = new RegExp(/is/i); const is..

32.1 string 생성자 함수 string 객체는 생성자 함수 객체이다 . new 연산자와 함께 호출하여 string 인스턴스를 생성할수 있다. 문자열은 원시값이므로 변경할수 없다. new 연산자를 사용하지 않고 String 생성자 함수를 호출하면 String 인스턴스 가 아닌 문자열을 반환한다. 32.2 length 프로퍼티 length 프로퍼티는 문자열의 문자 개수를 반환한다. 32.3 String 메서드 배열에는 원본을 직접 변경하는 메서드와 새로운 배열을 생성하여 반환하는 메서드가 있다. 하지만 string 객체에는 원본 String 래퍼 객체를 직접 변경하는 메서드는 존재하지 않는다. 언제나 새로운 문자열을 반환한다. 32.3.1 String.prototype.indexOf 대상 문자열에서 ..

33.1 심벌이란? 데이터 타입으로 변경 불가능한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 이름의 충돌위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용 33.2 심벌 값의 생성 33.2.1 Symbol 함수 심벌값은 Symbol 함수를 호출하여서 생성한다. 다른값과 절대 중복되지 않는 유일무이한 값 new 연산자와 함께 호출되지 않는다. 문자열을 인수로 전달할수 있지만 ,심벌값에 대한 설명이 같더라도 생성된 심벌값은 유일무이한 값이다. const mySymbol1 = Symbol("mySymbol"); const mySymbol2 = Symbol("mySymbol"); console.log(mySymbol1 === mySymbol2); //false Symbol 값은 암묵적으로 문자열이나..