한준호

코테를 풀던 중 인덱스에 대한 예외 처리를 하면서 다음과 같은 결과가 나오는 것을 알게되었다. 둘 다 존재하지 않는 인덱스에 대해 참조를 하였지만 결과가 달랐다. 자바스크립트의 경우 이차원 배열은 사실 일차원 배열이 쪼개져 있는 것이다. 즉, a[0][1] 을 참조하게 되면 a[0]으로 부터 배열을 반환받고 a[0]에서 다시 [1] 의 요소를 찾게 된다. 따라서 a[-1][0] 의 경우는 undefined[0] 과 같고 undefined는 인덱스 요소를 가지지 않기 때문에 Error가 나오게 되고 a[0][-1]의 경우는 a[0]인 [1, 2]의 -1번째 요소를 참초하게 되므로 undefined가 나오게 된다. const a = [[1,2], [3,4]] console.log(a[-1][0]) // Er..

■ REST API - HTTP를 기반으로 클라이언트가 서버에 접근하는 방식을 규정한 아키텍쳐 구성 요소 내용 표현 방법 자원 자원 URI 행위 자원에 대한 행위 HTTP 요쳥 메소드 표현 자원에 대한 행위의 구체적 내용 페이로드 REST에서 가장 중요한 기본 원칙은 두 가지다. 1. URI는 리소스를 표현해야 한다 리소스를 식별할 수 있는 이름은 동사보다 명사를 사용 #bad GET / getTodos / 1 GET / todos / show / 1 #good GET / todos / 1 2. 리소스에 대한 행위는 HTTP 요청 메소드로 표현한다. GET POST PUT PATCH DELETE HTTP 요청 메소드 종류 목적 페이로드 GET index/retrieve 모든/특정 리소스 취득 X POST..

웹 페이지에서 URL을 입력하면 어떤 동작이 발생할까? URL 입력 URL의 호스트 이름이 DNS를 통해 IP로 변환 해당 IP 주소를 갖는 서버에 요청 ■ HTTP 브라우저와 서버가 통신하기 위한 프로토콜 HTTP 1 => connection당 하나의 요청과 응답만 처리, 처리 시간은 리소스 개수에 비례 HTTP 2 => connection당 다중 요청과 응답 처리, HTTP 1에 비해 50% 빠름 ■파싱 텍스트 문서의 문자열을 토큰으로 분해하고 파스 트리를 생성하는 것 파스 트리를 바이트 코드로 변환하여 실행한다. ■ 렌더링 HTML, CSS, js로 작성된 문서를 브라우저에 그리는 것 - 렌더링 순서 브라우저는 HTML, CSS, js, 이미지, 폰트 등 필요한 리소스를 요청하고 서버로부터 응답을 ..

■ 배열 고차 함수 ● 고차함수 - 함수를 인수로 전달받거나 함수를 반환하는 함수. - 조건문과 반복문을 제거하고 변수의 사용을 억제하는 불변성 지향의 함수형 패러다임 ◎ Array.prototype.sort - 오름차순 정렬 - 일시적으로 요소를 문자열로 변환 후 유니코드 코드 포인트의 순서로 정렬하기 때문에 숫자를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. - 기존에는 quicksort 알고리즘 기반이었지만 동일한 값의 요소가 중복되어 있을 때 초기 순서와 변경될 수 있는 불안정한 정렬 알고리즘이기 때문에 ES10 에서는 timesort 알고리즘을 사용하도록 바뀌었다. const points = [40, 100, 1, 5, 2, 25, 10]; // 숫자 배열의 오름차순 정..

const arr = [1, 2, 3, 4, 5]; // 인수로 전달받은 값 0을 배열의 인덱스 1부터 3 이전(인덱스 3 미포함)까지 요소로 채운다. arr.fill(0, 1, 3); // fill 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [1, 0, 0, 4, 5]​ const arr = [1, 2]; // 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. let result = arr.shift(); console.log(result); // 1 // shift 메서드는 원본 배열을 직접 변경한다. console.log(arr); // [2] 자바스크립트의 배열은 자료구조의 배열과 다른, -배열의 동작을 흉내낸 해시 테이블로 구현된 객체다. - 자바스..

ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X ■ 메서드 ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. const obj = { x: 1, // foo는 메서드이다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다. bar: function() { return this.x; } }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 - ES6에서 메서드는 인스턴스를 생성할 수 없는 non-constructor다. 따라서 생성자 함수로 호출할 수 없다. - 인스턴..

■ 프로퍼티 - constructor 내부에서 정의한다. ◎ 접근자 프로퍼티 - getter / setter를 의미. 자체적인 값 [[Value]]를 갖지 않음 const person = { // 데이터 프로퍼티 firstName: 'Ungmo', lastName: 'Lee', // fullName은 접근자 함수로 구성된 접근자 프로퍼티다. // getter 함수 get fullName() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set fullName(name) { // 배열 디스트럭처링 할당: "36.1. 배열 디스트럭처링 할당" 참고 [this.firstName, this.lastName] = name.split(' '); } ..

프로토타입 기반 객체지향 언어는 클래스가 필요없는 객체지향 언어이므로 자바스크립트의 클래스는 문법적 설탕이라고 보이기도 한다. ■ 클래스 정의 일반적으로 클래스는 // 클래스 선언문 class Person {} 와 같이 선언한다. // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; - 클래스도 함수이다. - 클래스는 이름을 갖지 않을 수도 있다. - 클래스는 표현식으로 정의할 수 있다. - 표현식으로 정의 가능하므로 일급 객체이다. 무명의 리터럴로 생성. 즉, 런타임에 생성이 가능하다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. ■ 클래스 ..

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로져는 이너함수가 스코프 밖에 있는 변수에 접근하는 것으로 보통 정보은닉을 구현하거나 함수 팩토리를 생성할 때 사용된다. ◎ 렉시컬 스코프 - 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. - 함수는 정의된 위치와 호출되는 위지가 다를 수 있다. 상위 스코프를 기억하기 위해 함수는 자신의 내부 슬롯 [[Environment]]에 상위 스코프의 참조를 저장한다. 함수 코드가 평가될 때 다음과 같은 순서를 가진다고 했다. 1. 함수 실행 컨텍스트 생성 2. 함수 렉시컬 환경 생성 2.1 함수 환경 레코드 생성 2.2 this 바인딩 2.3 외부 렉시컬 환경에 대한 참조 결정 이때 렉..

var x = 1; const y = 2; function foo (a) { var x = 3; const y = 4; function bar (b) { const z = 5; console.log(a + b + x + y + z); } bar(10); // ← 호출 직전 } foo(20); - 위 코드의 실행 컨텍스트에 대한 진행 과정을 정리한 그림이다. ■ 전역 객체 생성 - 전역 객체는 전역 코드가 평가되기 이전에 생성된다. - 전역 객체도 Object.prototype을 상속받는다. ■ 전역 코드 평가 - 소스코드가 로드되면 자바스크립트 엔진은 전역 코드를 평가하고 다음과 같은 순서를 가진다. 전역 실행 컨텍스트 생성 전역 렉시컬 환경 생성 전역 환경 레코드 생성 객체 환경 레코드 생성 선언적 환..