달콘박스

Observer Pattern

연권 — Tue, 21 Jun 2022 22:57:17 +0900

이 글은 Patterns.dev 사이트를 참고하여 작성한 시리즈 입니다.

Observer Pattern

옵저버블을 사용해 이벤트가 발생할 때 구독자에게 알리기

옵저버 패턴을 사용하면 특정 객체(object)나 옵저버(observer)를 옵저버블(observable)이라 불리는 다른 객체를 구독(subscribe)할 수 있습니다.

observable 객체는 일반적으로 3가지 중요한 요소를 포함합니다.

observers: 특정 이벤트가 발생할 때마다 알림을 받는 observer 배열
subscribe(): observers에 observer를 추가하는 메소드
unsubscribe(): observers에서 observer를 삭제하는 메소드
notify(): 특정 이벤트가 발생할 때마다 모든 observer에게 알리는 방식

Observable 만들기

ES6의 class를 사용하면 쉽게 만들 수 있습니다.

subscribe 메소드로 observers에 옵저버를 추가하고 unsubscribe 메소드로 옵저버를 제거하며, notify 메소드로 모든 구독자에게 payload를 전달할 수 있게 되었습니다.

Observable 사용하기

옵저버블을 사용해 봅시다.

아래 코드는 Button과 Switch 컴포넌트를 갖고 있는 기본적인 어플리케이션입니다.

우리는 어플리케이션과 사용자의 상호작용을 추적하고 싶습니다. 사용자가 버튼을 클릭하거나(event) 스위치를 전환할 때(event)마다 이 이벤트를 타임스탬프와 함께 기록하고 표시되는 토스트 알림도 만들고 싶습니다.

최종적으로 만들고자 하는 형태는 다음과 같습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

사용자가 handleClick 이나 handleToggle을 호출할 때마다 observer에 있는 notify 메소드를 호출시킵니다. notify 메소드는 모든 subscriber에 의해 handleClick이나 handleToggle에서 전달된 data(payload)를 통지합니다.

먼저 logger와 toadtify 함수를 작성하겠습니다. 이 함수들은 최종적으로 notify 메소드에서 data(payload)를 전달받습니다.

현재는 옵저버블이 logger와 toastify를 인지하지 못합니다. 옵저버가 되도록 하려면 이 함수들을 옵저버블에 subscribe 메소드를 사용하여 등록해야합니다.

이제 이벤트가 발생할 때마다 logger와 toatify 함수가 실행됩니다. 이제 옵저버블의 notify를 호출할 핸들러 함수만 구현하면 됩니다.

함수의 이름은 handleClick, handleToggle로 하겠습니다. 그리고 함수에 옵저버가 수신해야할 데이터를 함께 넘겨줍니다.

이제 전체 흐름을 완성했습니다. handleClick() 이나 handleToggle()을 호출하면 notify를 통해 logger()와 toastify()를 호출하게 됩니다.

옵저버 패턴은 여러 가지 방법으로 사용할 수 있지만 비동기 이벤트기반 데이터를 사용할 때 매우 유용합니다. 특정 데이터가 다운로드 완료될 때 또는 사용자가 메세지 보드에 알림을 보내고 다른 사용자들이 알림을 받을 수 있습니다.

사례

Observable을 사용하는 일반적인 라이브러리는 RxJS입니다.

ReactiveX는 옵저버 패턴과 이터레이터 패턴을 함수형 프로그래밍과 컬렉션을 결합하여 이벤트 시퀀스를 관리하는 이상적인 방법을 제공합니다.

RxJS로 옵저버블을 생성하고 일부 이벤트들을 subscribe 해보겠습니다. 다음 예시는 사용자가 화면을 드래그 했는지 여부를 console.log를 통해 표시합니다.

장점

옵저버 패턴은 관심사 분리와 단일 책임 원칙을 강제할 수 있는 좋은 방법입니다. 옵저버는 옵저버블과 긴밀하게 결합되지 않으며 언제든지 합치거나 분리할 수 있습니다. 옵저버블은 이벤트를 모니터링 하는 역할을 하며 옵저버는 수신된 데이터를 처리합니다.

단점

옵저버가 너무 복잡해지면 모든 구독자에게 통지할 때 퍼포먼스 문제가 발생할 수 있습니다.

Reference

https://www.patterns.dev/posts/singleton-pattern/

Proxy Pattern (JavaScript)

연권 — Tue, 7 Jun 2022 06:09:15 +0900

이 글은 Patterns.dev를 참고하여 작성한 시리즈 입니다.

Proxy Pattern

대상 객체에 대한 상호작용 가로채기 및 제어

Proxy 객체를 사용하면 특정 객체와 상호작용을 보다 효과적으로 제어할 수 있습니다. 프록시 객체는 값을 얻거나 설정할 때 등 상호작용할 때의 동작을 설정할 수 있습니다.

일반적으로 프록시는 다른 사람의 대리인을 의미합니다. 상대방과 직접 대화하는 대신, 당신이 대화하려고 했던 사람을 대신할 대리인과 대화합니다. JavaScript에서도 마찬가지 입니다. 원본 객체와 대화하는 대신 Proxy 객체와 대화합니다.

-> 원본 객체를 Immutable하게 사용할 수 있습니다.

먼저 yeon 객체를 생성합니다. 저를 나타내는 객체입니다.

이 객체와 직접 상호작용 하는 대신 프록시 객체와 상호작용하는 것이 좋습니다.

JavaScript에서는 Proxy를 통해 프록시 객체를 쉽게 생성할 수 있습니다.

Proxy의 두 번째 인자는 핸들러를 나타내는 객체입니다. 핸들러 객체에서 상호작용 유형에 따라 특정 동작을 정의할 수 있습니다. 메서드는 여러 가지가 있지만 가장 일반적인 두 가지 메서드는 다음과 같습니다.

get: 속성에 엑세스하려고 할 때 호출됩니다.
set: 속성을 수정하려고 할 때 호출됩니다.

Proxy 핸들러 추가

yeonProxy에 핸들러를 추가해봅시다. get과 set메서드를 호출할 때 console을 찍을 수 있도록 합니다.

속성을 수정하거나 탐색하려고 하면 어떤 일이 일어나는지 살펴보겠습니다.

속성을 수정하거나 탐색할 때 console.log가 찍히게 되었습니다.

활용하기

Proxy는 validation(검증)을 추가할 때 유용합니다. 사용자는 yeon의 age 값을 string 타입으로 변경해선 안됩니다. 또한 존재하지 않는 속성에 엑세스하려고 할 경우 사용자에게 알려야 합니다.

if문을 통해 객체가 의도하지 않은 형태의 값을 넣지 못하도록 했습니다. 즉 순수하게 데이터를 유지하는 데 도움이 됩니다.

Reflect

JavaScript는 Reflect라고 불리는 내장 객체를 제공합니다. Reflect를 사용하면 proxy를 사용할 때 대상 객체를 쉽게 다룰 수 있습니다.

이전에는 []을 통해서 직접 값을 가져오거나 대상 객체의 속성을 수정하고 엑세스 하려고 했습니다. 그 대신 Proxy의 핸들러를 모두 동일하게 갖고 있는 Reflect를 통해 Reflect.get(), Reflect.set()을 사용하는 것으로 객체의 속성을 엑세스하거나 변경할 수 있습니다.

Reflect를 사용함으로써 더 깔끔하게 에러핸들링과 값의 반영을 구현할 수 있게 되었습니다.

Reference

https://ui.toast.com/weekly-pick/ko_20210413

https://www.patterns.dev/posts/singleton-pattern/

Singleton Pattern (JavaScript)

연권 — Tue, 7 Jun 2022 04:52:26 +0900

이 글은 Patterns.dev를 참고하여 작성한 시리즈 입니다.

Singleton Pattern

애플리케이션 전체에서 단일 인스턴스 공유

싱글턴 패턴은 한 번의 인스턴스화가 가능한 클래스로 글로벌하게 엑세스할 수 있습니다. 이 단일 클래스는 애플리케이션 전체에 공유할 수 있기 때문에 애플리케이션의 글로벌 상태를 관리하는 데 적합합니다.

먼저 Counter 클래스를 작성해보겠습니다. Counter 클래스는 다음과 같은 메소드를 제공합니다.

getInstance: 인스턴스를 반환합니다.
getCount: 현재 counter 값을 반환합니다.
increment: 카운터를 1 증가시킵니다.
decrement: 카운터를 1 감소시킵니다.

위 클래스는 싱글턴의 기준을 충족시키지 못합니다. 싱글턴은 한 번만 인스턴스화 할 수 있습니다. 위 클래스는 복수의 인스턴스를 생성할 수 있습니다.

인스턴스를 한 개만 생성할 수 있는 한 가지 방법은 instance를 담을 변수를 만드는 것입니다.

새로운 인스턴스를 생성할 때, instance를 담는 변수에 이미 값이 있다면(인스턴스를 이미 생성했다면) 사용자에게 알리기 위해 에러를 발생시킵니다.

이제 더 이상 여러 인스턴스를 만들 수 없습니다.

외부에서 Counter를 사용할 수 있도록 Object.freeze를 한 후 내보냅니다.

Object.freeze는 객체 속성의 불변성을 보장합니다. 이렇게 해서 Counter의 속성을 추가하거나 수정할 수 없으므로 싱글턴 클래스를 실수로 변경할 위험을 줄입니다.

Counter Singleton 완성

적용하기

다음과 같이 redButton.js, blueButton.js 파일을 만들어 확인해 볼 수 있습니다.

각각의 버튼 파일이 Counter를 증가시키고 증가된 counter 상태값이 공유되기 때문에 index.js에 결과가 2가 나오는 것을 확인할 수 있습니다.

장단점

인스턴스화를 한 번만으로 제한하면 메모리 공간을 절약할 수 있습니다. 애플리케이션 전체에서 참조되는 한 개의 인스턴스에 대해서만 메모리를 설정하면 됩니다.

싱글턴 인스턴스는 애플리케이션 전체에서 참조할 수 있어야합니다. 글로벌 변수(window, global)도 동일한 동작을 나타냅니다. 하지만 전역변수를 갖는 것은 일반적으로 잘못된 설계로 간주됩니다. 글로벌 범위 오염은 실수로 글로벌 변수 값을 덮어쓰게 되어 예상치 못한 많은 동작을 일으킬 수 있습니다.

일반적으로 코드 베이스의 특정부분은 글로벌 상태 값을 변경하는 반면 다른 부분은 해당 데이터를 소비(사용)합니다. 여기서 중요한 것은 실행순서 입니다. 사용할 데이터가 없을 때 실수로 먼저 데이터를 소비하고 싶지 않다는 것입니다. 글로벌 상태를 사용할 때 데이터의 흐름을 이해하는 것은 애플리케이션의 크기가 증가함에 따라 매우 까다로워 질 수 있으며, 수십개의 컴포넌트가 서로 의존합니다.

React에서의 상태관리

React에서는 싱글턴을 사용하는 대신 Redux나 React Context 같은 상태 관리 도구를 통해 글로벌 상태에 의존하는 경우가 많습니다. 이러한 글로벌 상태의 동작은 싱글턴의 동작과 비슷해 보이지만 이러한 툴은 싱글턴의 가변(변경가능)상태가 아닌 읽기 전용(readonly) 상태를 제공합니다. Redux를 사용하는 경우 컴포넌트가 dispatcher를 통해 action을 전송한 후 순수함수 reducer만 상태를 업데이트 할 수 있습니다.

이러한 툴을 사용하여 글로벌 상태를 유지하는 것의 단점이 마법처럼 사라지지 않지만 컴포넌트가 직접적으로 상태를 갱신할 수 없기 때문에 적어도 글로벌 상태가 의도한 대로 변경 되도록 할 수 있습니다.

Reference

https://www.patterns.dev/posts/singleton-pattern/

타입 좁히기 (Type Guard)

연권 — Sat, 21 May 2022 01:23:38 +0900

타입 좁히기는 타입스크립트를 넓은 타입으로부터 좁은 타입으로 진행하는 과정을 말합니다.

null 체크

존재하지 않을 때 null을 반환하는 메소드나 함수의 경우 if 문을 통한 null 체크를 통해 타입 좁히기를 할 수 있습니다.

instanceof

생성자의 프로토타입 속성이 객체 프로토타입 체인 어딘가에 존재하는 여부를 확인할 수 있는 instanceof 연산자를 if문과 사용해서 타입을 좁힐 수 있습니다.

속성 체크 (in)

프로퍼티가 존재하는지 확인할 수 있는 in 연산자를 통해 타입을 좁힐 수 있습니다.

내장 함수 사용

Array.isArray 같이 타입을 판별할 수 있는 내장함수를 사용하여 타입을 좁힐 수 있습니다.

tagged union 패턴 사용

명시적으로 태그를 붙여 타입을 좁힐 수 있습니다.

사용자 정의 타입 가드

타입 식별을 돕기 위한 커스텀 함수를 도입합니다.

라인 플러스 면접 후기

연권 — Fri, 13 May 2022 23:00:17 +0900

프로그래머스의 데브매칭인

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 였기 때문에 관련 개념 질문이 많이 나왔고 디자인 패턴에 대한 질문이 있었다.

결과는 탈락이였고 이번 기회에 모던 자바스크립트 딥다이브 정독하였다.

내가 자세하게 답변하지 못한 클로저와 이터레이션 프로토콜에 대해서 자세하게 알 수 있게되었고 디자인 패턴에 대해선 아래 사이트를 참고하여 실습을 해보며 체화시킬 예정이다.

https://www.patterns.dev/

Patterns.dev - Modern Web App Design Patterns

Improve how you architect webapps Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with...

www.patterns.dev

TypeScript Intersection & Union

연권 — Wed, 4 May 2022 23:40:31 +0900

타입스크립트의 타입은 타입들의 집합을 표현해 타입의 범위를 명확하게 표현하는 것입니다.

아래 코드를 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 에러 해결

연권 — Thu, 21 Apr 2022 20:45:29 +0900

docker-compose up을 하던 중 에러가 발생했다.

no matching manifest for linux/arm64/v8 in the manifest list entries

M1에서 docker를 사용시 발생하는 문제이며 platform을 명시해주면 해결이 가능하다.

platform: linux/x86_64

프로토타입

연권 — Thu, 14 Apr 2022 11:39:15 +0900

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다.

클래스

es6에서 클래스가 도입되었다. 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕이라고 볼 수 있다.

클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다.

proto접근자 프로퍼티

모든 객체는 proto 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

내부 슬롯은 프로퍼티가 아니며 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다.

proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

Object.protytpe을 상속받지 않는 객체를 생성할 수또 있기 때문에 proto 접근자 프로퍼티를 사용할 수 없는 경우가 있다.

따라서 proto 접근자 프로퍼티 대신 참조를 취득하고 싶은 경우에는 Object.getPrototypeOf 메서드를 사용하고, 프토토타입을 교체하고 싶은 경우에는 Object.setPrototypeOf 메서드를 사용할 것을 권장한다.

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

모든 객체가 가지고 있는(엄밀히 말하면 Object.prototype으로부터 상속받은) proto 접근자 프로퍼티와 함수 객체만이 가지고 있는 protytype 프로퍼티는 결국 동일한 프로토타입을 가리킨다. 하지만 프로퍼티를 사용하는 주체가 다르다.

구분 소유 값 사용 주체 사용 목적

proto 접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용

프로토타입 체인

자바스크립트는 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다. 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘이다.

Object.prototype을 프로토타입 체인의 종점(end of prototype chain)이라 한다. Object.prototype의 프로토타입, 즉 [[Prototype]] 내부 슬롯의 값은 null이다.

프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘.

스코프 체인은 식별자 검색을 위한 매커니즘.

오버라이딩과 프로퍼티 섀도잉

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가한다. 이때 인스턴스 메서드는 프로토타입 메서드를 오버라이딩 했고 프로토타입 메서드는 가려진다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라한다.

instanceof 연산자

우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true로 평가되고, 그렇지 않은 경우에는 false로 평가된다.

생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인한다.

function Person(name) {
	this.name;
}

const me = new Person('Lee');
console.log(me instanceof Person); // true
console.log(me instanceof Object); // true

for ... in 문

객체의 모든 프로퍼티를 순위하며 열거하려면 for...in문을 사용한다.

for...in 문은 순회 대상 객체의 프로퍼티뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다.

for...in 문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거한다.

상속받은 프로퍼티는 제외하고 객체 자신의 프로퍼티만 열거하려면 Object.prototype.hasOwnProperty 메서드를 사용하여 객체 자신의 프로퍼티인지 확인해야 한다.

렉시컬 스코프

연권 — Fri, 8 Apr 2022 15:39:35 +0900

var x = 1;

function foo() {
	var x = 10;
    bar();
}

function bar() {
	console.log(x);
}

foo(); // ?
bar(); // ?

위 예제의 실행 결과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다. 두 가지 패턴을 예측할 수 있다.

1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.

2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.

첫 번째 방식으로 함수의 상위 스코프를 결정한다면 bar 함수의 상위 스코프는 foo함수의 지역 스코프와 전역 스코프일 것이다.

이 방식을 동적 스코프라 한다. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라 부른다.

두 번째 방식으로 함수의 상위 스코프를 결정한다면 bar 함수의 상위 스코프는 전역스코프일 것이다.

이 방식을 렉시컬 스코프 또는 정적 스코프라 한다. 동적 스코프 방식처럼 상위 스코프가 동적으로 변하지 않고 함수가 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고 부른다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

따라서 위 예제를 실행하면 전역 변수 x의 값 1을 두 번 출력한다.

라인 피드와 캐리지 리턴

연권 — Thu, 7 Apr 2022 00:18:04 +0900

IDE(VSCode)로 협업하며 개발을 하다 보면 문제가 없는 코드에 lint error 밑줄이 그어져 있는 경우가 있다.

이는 서로 운영체제가 달라서 그런데 Windows의 경우는 CRLF macOS는 LF를 사용하기 때문에 그렇다.

LF는 라인 피드, CR을 캐리지 리턴을 의미하는데, 캐리지 리턴(\r)은 종리를 움직이지 않고 커서를 맨 앞줄로 이동하는 것이다. 초창기 컴퓨터는 출력을 프린터로 수행했는데, 이때 개행을 위해 라인피드와 캐리지 리턴을 모두 사용했다. 즉, CRLF(\r\n)로 커서를 맨 앞으로 이동시키고 종이를 한 줄 올리는 방식으로 개행했다.

자바스크립트에서 라인 피드와 캐리지 리턴은 모두 개행을 의미한다. 하지만 캐리지 리턴(/r)으로 개행하는 경우는 거의 없고 일반적으로 라인피드(\n)를 사용해 개행한다.

달콘박스

Observer Pattern

Observer Pattern

Observable 만들기

Observable 사용하기

사례

장점

단점

Proxy Pattern (JavaScript)

Proxy Pattern

Proxy 핸들러 추가

활용하기

Reflect

Singleton Pattern (JavaScript)

Singleton Pattern

Counter Singleton 완성

적용하기

장단점

React에서의 상태관리

타입 좁히기 (Type Guard)

null 체크

instanceof

속성 체크 (in)

내장 함수 사용

tagged union 패턴 사용

사용자 정의 타입 가드

라인 플러스 면접 후기

2022 Dev-Matching: 웹 프론트엔드 개발자(상반기)

TypeScript Intersection & Union

Intersection

Union

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

프로토타입

클래스

__proto__접근자 프로퍼티

proto 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

함수 객체의 prototype 프로퍼티

프로토타입 체인

오버라이딩과 프로퍼티 섀도잉

instanceof 연산자

for ... in 문

렉시컬 스코프

라인 피드와 캐리지 리턴

proto접근자 프로퍼티