개요 prototype patttern은 같은 type을 가지는 많은 객체들 사이에서 프로퍼티들을 공유할 수 있는 유용한 패턴이다. prototype은 자바스크립트 고유의 객체로, 프로토타입 체인을 통해 객체에서 접근할 수 있다. 어플리케이션에서 같은 타입을 가지는 많은 객체들을 생성해야 하는 경우가 종종 있다. 이럴 때는 ES6 class를 사용해서 다수의 인스턴스를 생성하는 유용한 방법이 있다. prototype 패턴은 같은 프로퍼티에 객체가 접근해야 할 때 매우 강력한 패턴이다. 매번 중복된 프로퍼티를 새로 생성하지 않고, 간단하게 prototype에 프로퍼티를 추가하면 된다. 모든 인스턴스들이 prototype 객체에 접근할 수 있기 때문이다. 모든 인스턴스들이 프로토타입에 접근할 수 있기 때문에..
전체 글
개요 observer pattern을 사용하면, 관찰자(observer라고 불림. 특정 객체, 함수 등이 될 수 있음)가 다른 관찰 가능한 객체(observable이라고 불림)를 구독하도록 할 수 있다. 이벤트가 발생하면, observable 객체는 자신을 구독하고 있는 모든 observer 객체들에게 알린다. (대충 observer ->observable이렇게 바라보고 있다고 생각하면 된다.) observable 객체는 보통 3개의 중요한 부분을 포함한다: observers: 특정 이벤트가 발생할 때마다 알림을 받을 observer들로 이루어진 배열 subscribe(): observer들을 observer list에 추가하기 위한 메서드 unsubscribe(): observers들을 observer..
singleton pattern이란 무엇일까? 우선, 'singleton’이란 단어는 사전적으로 (단독) 개체를 의미한다. 그러니까 singleton pattern은 말 그대로 하나의 개체만을 구현하는 패턴인 것이다. singleton pattern의 특징 딱 한 번만 인스턴스화 될 수 있다. 전역에서 접근할 수 있다. singleton pattern의 장점 만들어진 single instance는 애플리케이션 전역에 걸쳐서 공유될 수 있다. 이 덕분에 어플리케이션 전역 상태를 관리할 때 유용하다. singleton pattern의 단점 전역적으로 공유가 되다보니 오염이 쉽게 발생될 수 있다. 다른 곳에서 instance를 변경하면 이를 참조하는 모든 곳에서도 변경이 일어나 예기치 못한 문제가 발생할 수 ..
개요 디자인 시안이 변경되면 추가되거나 다른 UI지만 같은 데이터 로직을 가진 컴포넌트를 만드는 경우가 발생한다. 이럴 때 매번 새로운 컴포넌트를 만들어야 했던 귀찮은 일이 생긴다. 위와 같은 이유가 발생하는 이유는 해당 컴포넌트에 두 가지 관심사가 존재하는 문제를 잘 분리하지 못했기 때문이다. 컴포넌트를 Headless하게 만들어서 이를 해결할 수 있다. 하나의 컴포넌트에 두 가지 관심사가 존재하는 문제를 Headless하게 만들어 보자. Headless가 뭘까? 우선 Headless가 무엇일까? 말 그대로 머리(Head)가 없는 것을 의미한다. 보통 Head는 컨텐츠를 보여주는 방법을 의미하고, Body는 컨텐츠 자체를 의미한다. React에서 Head는 UI 즉, 컨텐츠를 보여주는 방법, 컴포넌트가..
기존에는 JSON.parse(JSON.stringfy(o)) 방식을 많이 사용했다. 기존 JSON API의 문제 Date 객체가 문자열이 되는 문제 const Person = { name: "John", date: new Date("2022-03-25"), friends: ["Steve", "Karen"] } // JSON.stringify `date`를 문자열로 변환합니다. const buggyCopy = JSON.parse(JSON.stringify(Person)) { name: 'John', date: '2022-03-25T00:00:00.000Z', friends: [ 'Steve', 'Karen' ] } console.log(typeof buggyCopy.date); // string JSON은..
엄격한 단일 상속 Mixin에 앞서서 class의 엄격한 단일 상속에 대하여 알아둬야 합니다. (클래스가 수행할 수 없는 상속의 형태를 알게 되면, 그에 맞는 함수를 구상하는 데 도움이 됩니다.) 클래스 Typescript 그리고 Javascript 클래스는 엄격하게 단일 상속만 지원합니다. 그래서 아래와 같이 할 수 없습니다. class User extends Tagged, Timestamped {// 🚨오류 : 다중 상속 불가 } interface와 class를 헷갈리지 말자. interface는 multiple extends가 가능합니다. 아래 코드에서 interface IUser는 Tagged와 Timestamped를 만족시켜야 합니다. class User는 IUser를 만족시켜야 합니다.(imp..
개요 git actions에서 유용하게 사용하는 bash 명령어 중 echo를 활용할 수 있는 기본 문법을 간단하게 알아보자. Linux 명령어와 아주 유사하다. 변수 생성 및 할당 x=5 y=3 result=3+5 띄어쓰기를 통해 변수를 구분하여 선언 및 할당할 수 있다. z=10 k=20 🚨주의 : 선언과 할당에서 띄어쓰기를 사용하면 안 된다. 🚨할당(=)에서 띄어쓰기를 사용하면 안 된다. x= 20 # 🚨bash: 20: command not found x = 20 # 🚨bash: x: command not found 활용하기 x="name" y="olimjo" xy="$x $y" echo $xy # name olimjo 🚨주의 : 일반 변수에 $()는 사용할 수 없다. xy=$(x) $(y) # ..
개요 css counter를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어 counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 css규칙에 따라 증가하며, 본질적으로 변수입니다. counter()를 이용해서 자동 넘버링을 하기 위해서 다음 속성들을 사용합니다. `counter-reset` : 카운터 생성 및 재설정 `counter-increment` : 카운터 값 증가/감소 `content` : counter() 혹은 counters() 함수 지정할 수 있는 속성 `counter()` 또는 `counters()` 함수: 카운터값 추가 counter-reset css counter를 주어진..
debounce와 throttle은 성능 저하 방지를 위한 방법들이다. 클로저라는 개념을 안다면 이해하기 쉽다. IIFE(Immediately Invoked Function expression) 즉시 호출 함수를 통해 이벤트 발생 전에 이미 리턴된 함수가 이벤트 리스너에 콜백함수로 할당된다. 이벤트 리스너가 호출되기 전에 이미 리턴된 함수들이 계속해서 이벤트 발생으로 인해서 호출될 때마다 클로저 함수로서 이전의 timeId에 접근하는 컨셉이다. 1️⃣Debounce 동작 예시 이벤트를 그룹화하여 하나의 이벤트만 호출되도록 한다. 일정 시간(waiting time) 함수 호출이 없는 경우 가장 마지막 이벤트를 선택한다.(trailing) 이 대신에 가장 처음 호출된 이벤트를 선택하는 방법도 있다.(lead..
눈에 띄는 변화들만 정리 1. 하나의 함수 호출 시그니처(객체 형식)만을 지원 // useQuery - useQuery(key, fn, options) + useQuery({ queryKey, queryFn, ...options }) - useInfiniteQuery(key, fn, options) + useInfiniteQuery({ queryKey, queryFn, ...options }) - useMutation(fn, options) + useMutation({ mutationFn, ...options }) - useIsFetching(key, filters) + useIsFetching({ queryKey, ...filters }) - useIsMutating(key, filters) + use..