본문 바로가기

📚 Study Note/JavaScript9

모던 자바스크립트 Deep Dive - 프로미스 콜백 함수 콜백 함수는 ES6이전에 비동기 처를 위해 사용하던 하나의 패턴이지만, 다음과 같은 단점들이 있어 ES6에서 프로미스 패턴이 도입된다. 1. 콜백 헬로 인해 가독성이 나쁘다. 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출하여 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상 let g = 0 setTimeout(() => {g = 100;},0) console.log(g) // 0 위의 코드에서 처럼 비동기 처리 결과를 변수에 할당하려고 하면 기대한 대로 동작하지 않는다. setTimeout은 실행후 브라우저에서 타이머가 만료되면 콜백 함수를 태스크 큐로 이동한다, 그리고 콜 스택이 비어 있으면, 이때 태스크 큐에서 콜스택으로 이동하고 콜백함수가 실행된다. 그렇기 때문에 g = 100 .. 2022. 12. 31.

모던 자바스크립트 Deep Dive - REST API REST REST란 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이다. - REST의 기본원칙을 성실히 치킨 서비스 디자인을 RESTful이라고 표현한다. - REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API 구성 - 자원 : URL - 행위 : HTTP 요청 메서드 - 표현 : 페이로드 REST API 설계 원칙 1. URL는 리소스를 표현해야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. # bad GET /getTodos/1 # good GET /Todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 요청 메서드는 크게 5가지가 있다. (GET, POST, PUT, PATCH, DE.. 2022. 12. 31.

모던 자바스크립트 Deep Dive - Ajax Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax가 나오기 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작했습니다. 그렇기 떄문에 다음과 같은 문제점들이 있었습니다. 1. 변경할 필요가 없는 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 2. 매번 새로운 HTML을 전송 받기 때문에 깜빡이는 현상이 발생한다. 3. 클라이언트와 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로 부터 응.. 2022. 12. 31.

모던 자바스크립트 Deep Dive - 비동기 프로그래밍 모던 자바스크립트 Deep Dive - 실행 컨텍스트 실행 컨텍스트 실행 컨텍스트를 알면 호이스팅과 클로저, 코드 실행 순서를 이해하는데 도움이 되기 때문에 정리합니다. 소스 코드의 타입 - 전역 코드 전역 변수를 관리하기 위해 최상위 스코 l-lsh.tistory.com 자바스크립트 엔진은 싱글 스레드 방식으로 동작하며, 하나의 콜스택을 가집니다. 그렇기 때문에 태스크들이 여러 개 있더라도 순차적으로 하나씩 태스크를 처리하는데 이것을 동기 처리라고 합니다. 동기 처리: 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식 - 장점 : 태스크를 순서대로 하나씩 처리하기 때문에 실행 순서가 보장된다. - 단점 : 태스크가 하나씩 처리되기 때문에 앞선 태스크가 시간이 오래 걸리는 경우.. 2022. 12. 31.

모던 자바스크립트 Deep Dive - this 자바스크립트 this에 대해 정리합니다. this 정의 - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서들를 참조할 수 있다. this 사용 자바스크립트에서 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. - 전역에서 this this는 어디서든 참조 가능하다. 그리고 전역에서의 this는 전역 객체 window를 가리킨다. console.log(this) // window - 일반 함수에서 this 일반 함수에서 this를 사용 시 전역 객체 window를 가리킨다. 하지만 strict mode일 경우 undefined가 바인딩된다. 메서드 내부에서 일반함수로 호출되면 this.. 2022. 12. 25.

모던 자바스크립트 Deep Dive - 객체 리터럴 객체 리터럴 - 자바스크립트는 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. - 객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. - 객체는 0개 이상의 프로퍼티로 구성된 집합이며 키와 값으로 구성된다. - 모든 값은 프로퍼티 값이 될 수 있으며 함수도 가능하다. (함수가 프로퍼티의 값인 경우 메서드라고 부른다.) - {...} 중괄호 안에 프로퍼티를 정의 하며, 나열할 때는 쉼표(,)로 구분한다. var person = { name: "Lee", // 프로퍼티 sayHello: function () { // 메서드 console.log("Hello ~~") } console.log(typeof person) // object console.log.. 2022. 12. 25.

모던 자바스크립트 Deep Dive - 실행 컨텍스트 실행 컨텍스트 실행 컨텍스트를 알면 호이스팅과 클로저, 코드 실행 순서를 이해하는데 도움이 되기 때문에 정리합니다. 소스 코드의 타입 - 전역 코드 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. - 함수 코드 지역 스코프를 생성하고 지역변수, 매개변수, arguments객체를 관리한다. - eval 코드 엄격 모드에서 자신만의 독자적인 스코프를 생성한다. - 모듈 코드 모듈별로 독립적인 모듈 스코프를 생성한다. 소스코드(전역, 함수, eval, 모듈) → 코드 평가 → 실행 컨텍스트(전역, 함수, eval, 모듈) 소스 코드의 평가와 실행 자바 스크립트 엔진은 소스코드를 2개의 과정으로 나누어 처리한다 ( 소스코드 평가, 소스코드 실행 ) - 소스 코드 평가 실행 컨텍스트 생성하고 .. 2022. 12. 11.

모던 자바스크립트 Deep Dive - 호이스팅, var, let, const var, let, const 각각의 특징과 호이스팅에 관해서 정리합니다. var - 변수 중복 선언이 가능하다 var a = 'a' console.log(a) // 'a' var a = 'aa' console.log(a) // 'aa' - 함수 레벨 스코프를 가진다 var 키워드를 사용하여 선언한 변수는 함수 내부에서 선언한 게 아니라면 전역 스코프를 가진 전역 변수이다. 함수 레벨 스코프란? 함수의 코드 블록만을 지역 스코프로 인정하며 함수 외부에서 선언한 변수는 전역 스코프를 가진다. - 변수 호이스팅 var 키워드로 선언한 변수는 호이스팅 과정에서 선언과 초기화가 동신에 진행되며 이때 undefined로 초기화된다. 그렇기 때문에 변수 선언 전에 호출하게 되면 undefined가 출력된다. cons.. 2022. 12. 9.

모던 자바스크립트 Deep Dive - 스코프 스코프 스코프란 식별자가 유효한 범위를 뜻한다. 여기서 식별자는 변수, 함수, 클래스 이름 등을 뜻 한다. 우선 스코프는 선언된 위치에 따라 크게 지역 스코프, 전역 스코프로 나뉜다. 지역 스코프 지역이란 함수 몸체 내부를 뜻한다. 그러므로 함수 내부 또는 블록 내부에서 변수를 선언하면 지역 스코프를 가지는 지역 변수가 되며 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서만 참조 가능하다. 전역 스코프 전역이란 코드의 가장 바깥쪽 영역을 말한다. 그러므로 전역에 변수를 선언하면 전역 스코프를 가지는 전역 변수가 되며 전역 변수는 어디서든 참조 가능하다. var x = 'global' // 전역 스코프, 전역 변수 function outer(){ // 지역 스코프 var z = 'local' // .. 2022. 12. 8.

이전 1 다음

티스토리툴바