전체 글

Observer Pattern

이 글은 Patterns.dev 사이트를 참고하여 작성한 시리즈 입니다. Observer Pattern 옵저버블을 사용해 이벤트가 발생할 때 구독자에게 알리기 옵저버 패턴을 사용하면 특정 객체(object)나 옵저버(observer)를 옵저버블(observable)이라 불리는 다른 객체를 구독(subscribe)할 수 있습니다. observable 객체는 일반적으로 3가지 중요한 요소를 포함합니다. observers: 특정 이벤트가 발생할 때마다 알림을 받는 observer 배열 subscribe(): observers에 observer를 추가하는 메소드 unsubscribe(): observers에서 observer를 삭제하는 메소드 notify(): 특정 이벤트가 발생할 때마다 모든 observer..

Proxy Pattern (JavaScript)

이 글은 Patterns.dev를 참고하여 작성한 시리즈 입니다. Proxy Pattern 대상 객체에 대한 상호작용 가로채기 및 제어 Proxy 객체를 사용하면 특정 객체와 상호작용을 보다 효과적으로 제어할 수 있습니다. 프록시 객체는 값을 얻거나 설정할 때 등 상호작용할 때의 동작을 설정할 수 있습니다. 일반적으로 프록시는 다른 사람의 대리인을 의미합니다. 상대방과 직접 대화하는 대신, 당신이 대화하려고 했던 사람을 대신할 대리인과 대화합니다. JavaScript에서도 마찬가지 입니다. 원본 객체와 대화하는 대신 Proxy 객체와 대화합니다. -> 원본 객체를 Immutable하게 사용할 수 있습니다. 먼저 yeon 객체를 생성합니다. 저를 나타내는 객체입니다. 이 객체와 직접 상호작용 하는 대신 프..

Singleton Pattern (JavaScript)

이 글은 Patterns.dev를 참고하여 작성한 시리즈 입니다. Singleton Pattern 애플리케이션 전체에서 단일 인스턴스 공유 싱글턴 패턴은 한 번의 인스턴스화가 가능한 클래스로 글로벌하게 엑세스할 수 있습니다. 이 단일 클래스는 애플리케이션 전체에 공유할 수 있기 때문에 애플리케이션의 글로벌 상태를 관리하는 데 적합합니다. 먼저 Counter 클래스를 작성해보겠습니다. Counter 클래스는 다음과 같은 메소드를 제공합니다. getInstance: 인스턴스를 반환합니다. getCount: 현재 counter 값을 반환합니다. increment: 카운터를 1 증가시킵니다. decrement: 카운터를 1 감소시킵니다. 위 클래스는 싱글턴의 기준을 충족시키지 못합니다. 싱글턴은 한 번만 인스턴..

타입 좁히기 (Type Guard)

타입 좁히기는 타입스크립트를 넓은 타입으로부터 좁은 타입으로 진행하는 과정을 말합니다. null 체크 존재하지 않을 때 null을 반환하는 메소드나 함수의 경우 if 문을 통한 null 체크를 통해 타입 좁히기를 할 수 있습니다. instanceof 생성자의 프로토타입 속성이 객체 프로토타입 체인 어딘가에 존재하는 여부를 확인할 수 있는 instanceof 연산자를 if문과 사용해서 타입을 좁힐 수 있습니다. 속성 체크 (in) 프로퍼티가 존재하는지 확인할 수 있는 in 연산자를 통해 타입을 좁힐 수 있습니다. 내장 함수 사용 Array.isArray 같이 타입을 판별할 수 있는 내장함수를 사용하여 타입을 좁힐 수 있습니다. tagged union 패턴 사용 명시적으로 태그를 붙여 타입을 좁힐 수 있습니..

라인 플러스 면접 후기

프로그래머스의 데브매칭인 2022 Dev-Matching: 웹 프론트엔드 개발자(상반기) 2022 Dev-Matching: 웹 프론트엔드 개발자(상반기) 접수 22년 02월 21일 10:00 ~ 03월 10일 17:00 테스트 22년 03월 12일 14:00 ~ 03월 12일 17:00 programmers.co.kr 를 통해서 라인플러스의 면접을 볼 수 있는 기회가 생겼다. 내가 지원한 직군은 JavaScript SDK 개발자였기 때문에 이번 기회로 JavaScript와 CS 지식을 다시 볼 수 있는 계기가 되었다. 면접은 비대면으로 진행 됐으면 주로 질문은 자기소개서에 기반한 꼬리질문이였다. 자기소개서에 적혀있는 주된 업무는 JavaScript 였기 때문에 관련 개념 질문이 많이 나왔고 디자인 패턴에..

TypeScript Intersection & Union

타입스크립트의 타입은 타입들의 집합을 표현해 타입의 범위를 명확하게 표현하는 것입니다. 아래 코드를 Intersection(교집합)을 사용한 코드를 살펴봅시다. Intersection 처음 코드를 보았을 때 Person은 name을 갖고 있고 Lifespan은 birth와 death 프로퍼티를 갖고 있기 때문에 교집합이 없어서 never(공집합)이라고 생각했습니다. 아래 Union(합집합) 코드도 살펴봅시다. Union 합집합이기 때문에 모든 property를 갖고 있어야하지 않나? 생각할 수 있지만 그렇지 않습니다. type의 집합이기 때문에 interface를 정의하면 아래와 같습니다.

no matching manifest for linux/arm64/v8 in the manifest list entries 에러 해결

docker-compose up을 하던 중 에러가 발생했다. no matching manifest for linux/arm64/v8 in the manifest list entries M1에서 docker를 사용시 발생하는 문제이며 platform을 명시해주면 해결이 가능하다. platform: linux/x86_64

프로토타입

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 클래스 es6에서 클래스가 도입되었다. 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕이라고 볼 수 있다. 클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다. __proto__접근자 프로퍼티 모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다. 내부 슬롯은 프로퍼티가 아니며 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다. Object.protytpe을 상속받지 않는 객체를 생성할 수또 있기 때문에 p..

렉시컬 스코프

var x = 1; function foo() { var x = 10; bar(); } function bar() { console.log(x); } foo(); // ? bar(); // ? 위 예제의 실행 결과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다. 두 가지 패턴을 예측할 수 있다. 1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다. 2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. 첫 번째 방식으로 함수의 상위 스코프를 결정한다면 bar 함수의 상위 스코프는 foo함수의 지역 스코프와 전역 스코프일 것이다. 이 방식을 동적 스코프라 한다. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라 부른다. 두 번째 방식으..

라인 피드와 캐리지 리턴

IDE(VSCode)로 협업하며 개발을 하다 보면 문제가 없는 코드에 lint error 밑줄이 그어져 있는 경우가 있다. 이는 서로 운영체제가 달라서 그런데 Windows의 경우는 CRLF macOS는 LF를 사용하기 때문에 그렇다. LF는 라인 피드, CR을 캐리지 리턴을 의미하는데, 캐리지 리턴(\r)은 종리를 움직이지 않고 커서를 맨 앞줄로 이동하는 것이다. 초창기 컴퓨터는 출력을 프린터로 수행했는데, 이때 개행을 위해 라인피드와 캐리지 리턴을 모두 사용했다. 즉, CRLF(\r\n)로 커서를 맨 앞으로 이동시키고 종이를 한 줄 올리는 방식으로 개행했다. 자바스크립트에서 라인 피드와 캐리지 리턴은 모두 개행을 의미한다. 하지만 캐리지 리턴(/r)으로 개행하는 경우는 거의 없고 일반적으로 라인피드(..