전체 글 96

자바스크립트 클래스 사용 방식 및 특징

이전 글에서 살펴보았듯이, 자바스크립트는 프로토타입을 사용하여 객체 지향 프로그래밍을 할 수 있다. ES6에서 도입된 클래스는 자바나 C 언어의 클래스 문법과 유사하게 객체 생성할 수 있도록 한다. 자바스크립트의 클래스는 실제로는 함수처럼 동작하며, 기존의 프로토타입 생성 방식과 다르지 않다. 따라서 클래스를 문법적 양념(syntactic sugar)일 뿐이라고 말하기도 한다. 클래스가 도입된 이유 function Student(name,age){ this.name = name this.age = age } const student1 = new Student('king',20) // {'name': 'king', 'age': 20} const student2 = Student('king', 20); //..

해시 링을 사용한 안정 해시 설계

안정 해시 설계 해시 키 재배치 문제 서버가 추가되거나 기존 서버가 삭제되면 해시값 인덱스가 달라져서 재배치 해야한다. 대부분의 키가 재분배 되면 대규모 캐시 미스가 발생할 것 이다. 안정 해시란 평균적으로 k/n개의 키만 재배치하는 해시 기술이다. 해시 링 해시 공간을 구부려 접어서 해시 링을 만들고, 서버 IP나 이름을 이 위치에 대응시킬 수 있다. 해시 키도 링 위의 어느 지점에 배치한다. 시계 방향으로 링을 탐색해서 만나는 첫 번째 서버에 대응된다. 위 사진에서의 해시 링에서 서버 10.5.5.2, 10.9.5.1, 10.1.2.3을 각각 빨강, 파랑, 초록색으로 해시 링 공간에 대응하였다. 그리면 Venus에 해당하는 해시는 링을 탐색해서 만나는 첫 번째 서버인 파란색에 대응할 것이다. Mars..

처리율 제한 장치의 설계

4장 처리율 제한 장치의 설계 처리율 제한 장치 (rate limiter) 클라이언트 또는 서비스가 보내는 트래픽의 처리율을 제어하기 위한 장치 API 요청 횟수가 제한 장치에 정의된 임계치를 넘어서면 추가로 도달한 모든 호출은 처리가 block 된다. 예시) 사용자는 초당 2회 이상 새 글을 올릴 수 없다. 같은 IP 주소로는 하루에 10개 이상의 계정을 생성할 수 없다. 장점 Dos(Denial of Service) 공격에 의한 자원 고갈을 방지할 수 있다. 비용을 절감할 수 있다. 우선순위가 높은 API에 더 많은 자원을 할당할 수 있다. 서버 과부하를 막는다. 봇에서 오는 트래픽이나 사용자의 잘못된 이용 패턴으로 유발된 트래픽을 걸러낼 수 이다. 1단계) 문제 이해 및 설계 범위 확정 문제를 이해..

자바스크립트 this 동적 바인딩 총정리

자바스크립트는 객체지향 프로그래밍 언어이기 때문에, 자신이 속한 프로퍼티나 메서드를 참조할 수 있는 this 식별자를 사용할 수 있어야 한다. // 객체 리터럴 생성 const circle = { radius: 10, getDimeter() { return 2 * this.radius; } } console.log(circle.getDiameter); // 20 // 생성자 생성, new로 객체 생성 시 인스턴스 this를 암묵적으로 반환한다. function Circle(radius) { // this : 생성자 함수가 생성할 인스턴스 this.radius = radius; } Circle.prototype.getDiameter = function () { return 2 * this.radius; }..

타입스크립트에서 중복되는 타입 선언 리팩토링하기

당신의 타입은 중복되고 있지 않나요? 클린 코드에 관심있는 프로그래머라면, 소프트웨어 개발 3대 원칙에 해당하는 DRY(Do not Repeat Yourself)를 한 번쯤은 들어봤을 것이다. 우리는 코드의 중복을 줄이기 위해서 중복되는 부분은 함수로 엮어 재사용하기 쉬운 코드를 만들어야 한다는 것을 알고 있다. 그리고 이를 의식하며 재사용하기에 좋은 코드를 짠다. 그러나, 타입의 중복에 대해서는 깊게 생각하지 않는 경우가 많은 것 같다. 컴포넌트 계층 구조를 만들면서 같은 prop을 자식 컴포넌트로 전파할 때 등 코드를 짜다 보면 무심코 타입의 중복되는 경우가 많다. 이번 글에서는 코드를 통해서 타입 중복을 줄이는 방법에 대해서 설명하려고 한다. (타입스크립트에서 기본적으로 사용하는 타입 생성 방식, ..

자바스크립트는 프로토타입 기반 언어이다

자바스크립트는 객체지향 프로그래밍 언어, 프로타입 기반 언어이다. 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 모두 지원하는 멀티 패러다임 프로그래밍 언어이다. 자바스크립트가 객체 지향 언어가 아니라고 오해하기 쉬운데, 자바스크립트는 원시 값을 제외한 함수, 배열, 정규 표현식 등은 모두 내부적으로 객체처럼 동작한다. 자바스크립트 ES6에서 클래스가 도입되었으나, 다른 일반적인 프로그래밍 언어와 다르게 내부적으로 프로토타입 기반으로 동작한다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 접근자 프로퍼티 __proto__를 통해 간접적으로 접근 가능하다. 상속과 인스턴스 생성 const circle1 = new Circle(); const circle2 = n..

객체 프로퍼티 접근, 변경 시 내부 동작 방식 (Javascript)

들어가며 우리는 자바스크립트에서 코드를 작성할 때 많은 객체를 생성하고 접근하고 변경한다. const person = { name: 'Lee' } person.name = 'Kim'; person.age = 20; 다음은 person이라는 객체를 만들고 name, age라는 프로퍼티를 정의하는 코드이다. 이 때, 자바스크립트는 const 객체를 선언하기 때문에 메모리 공간에 객체 참조 공간을 할당하고, 값을 저장할 것이다. (변수에 대해서 궁금하다면 클릭) 그렇다면 자바스크립트에서는 프로퍼티에 대한 정보를 어떻게 관리할까? 내부 슬롯과 내부 메서드 모든 객체는 내부 슬롯과 내부 메서드를 가진다. (관련 문서) 이는 자바스크립트 엔진의 내부 로직이다. 하나를 예로 들자면 모든 객체는 [[Prototype]..

Quiz로 정리하는 타입스크립트 문법 (1)

Effective Typescript 책을 읽고 1장 ~ 10장 까지의 내용을 퀴즈로 정리해보았습니다. 다음 문제에 답해보면서 개념을 정리해보세요 🙏🏻 해설은 글 아래에 달아놓겠습니다. 문제 자바스크립트 파일 main.js를 main.ts로 바꾸면 오류가 발생할까? 타입 체크를 통과하더라도 런타임에 오류가 발생할 수 있을까? 타입스크립트의 strictNullChecks는 어떤 설정일까? 타입 오류가 있는 코드는 컴파일이 불가능할까? instanceof 체크는 컴파일 타임에 일어날까 런타임에 일어날까? 타입스크립트 타입을 많이 사용하면, 런타임 성능에 영향이 있을까? {x, y, z} 타입은 {x, y} 타입에 호환될까? any 타입을 사용하지 않아야하는 이유는 무엇일까? 가장 작은 타입의 집합과, 가장 ..

var, let, const의 차이 (자바스크립트 ES6)

자바스크립트 ES5까지 변수를 선언할 수 있는 유일한 방법은 var을 사용하는 것이었다. 그러나, 다른 var 키워드는 다른 언어와는 다른 특별한 특징들이 있어, 주의를 기울이지 않으면 몇가지 부작용이 발생할 수 있다. 따라서 이러한 단점을 보완하기 위해서 ES6에서는 새로운 변수 선언 키워드인 let, const를 도입하였고, 이 글에서는 이 세가지 키워드에 따른 작동 방식 및 차이에 대해서 소개하려고 한다. Var 키워드의 특징 1. 중복 선언 허용 var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 따라서 의도치 않게 변수값이 재할당될 수 있다. var x = 1; var y = 2; console.log(x); // 2 2. 함수 스코프 var 키워드로 선언한 변수는 오로지 ..

자바스크립트에서의 함수, 동작 방식

프로그래밍 언어에서의 함수는 일련의 과정을 statement로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부에는 매개변수와 반환값으로 구성되어 있다. 함수를 사용하게 되면 필요할 때 여러번 호출할 수 있어 코드의 재사용 측면에서 유리하다. 코드를 재사용하게 된다면 유지보수가 편하고, 코드의 신뢰성과 가독성 면에서 유리하다. 함수 정의 방법 자바스크립트에서 함수를 정의하는 방법은 크게 4가지가 있다. function add(x, y) { return x + y; } // 1. 함수 선언문 var add = function(x, y) { return x + y; } // 2. 함수 표현식 var add = new Function('x', 'y', 'return x+y'); //..