patterns

항상 MVC, MVVM 등 디자인 패턴에 대해 의문을 가질 뿐 이게 프론트엔드 개발에 어떻게 적용이 되는지 이해가 되지 않았다.자바스크립트 관점에서 디자인 패턴에 대해 작성된 책을 번역한 사이트를 살펴보며 이해해보자!디자인 패턴은 소프트웨어를 개발하는 과정의 반복되는

Proxy 객체를 활용하면 특정 객체와의 인터렉션을 조금 더 컨트롤할 수 있게 된다. Proxy 객체는 어떤 객체의 값을 설정하거나 값을 조회할 때 등의 인터렉션을 직접 제어할 수 있다.일반적으로 Proxy는 어떤 이의 대리인을 뜻한다. 그 사람과 직접 이야기하는 것

앱 내의 여러 컴포넌트들이 데이터를 사용할 수 있게 해야하는 상황이 있다. props를 통해서 데이터를 전달하는 방식이 있지만 앱 내의 모든 컴포넌트들이 데이터에 접근해야 하는 경우 이 작업을 하기 매우 번거롭다.그리고 종종 props drilling이라 불리는 안티

Prototype 패턴은 동일 타입의 여러 객체들이 프로퍼티를 공유할 때 유용하게 사용한다.Prototype은 Javascript 객체의 기본 속성이므로 Prototype 체인을 활용할 수 있다.하나의 앱을 만들 때 동일한 타입의 여러 객체를 만들어내곤 한다. ES6

어쩌면 유일하게(?) 알고 있는 패턴...!부트캠프에서 Container/Presentational 패턴을 기본적으로 가르쳐서 부트캠프 플젝은 다 이 패턴으로 구현되어 있다.이 블로그를 작성하며 공부하다 보니 Hooks 형태로 react를 배웠는데 왜 굳이 이 패턴을

Observer 패턴에서 특정 객체를 구독할 수 있는데 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다.이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다.observers : 이벤트가 발

코드베이스가 커질수록 코드들을 유지보수 하기 좋게 쪼개는 것이 중요하다.이 때 모듈 패턴이 코드들을 재사용 가능하면서도 작게 나눌 수 있게 해준다.또한 모듈 패턴으로 코드를 나누는 과정에서 특정 변수들을 파일 내에 private하게 할 수 있는데, 모듈 스코프 내에서

Mixin은 상속 없이 어떤 객체나 클래스에 재사용 가능한 기능을 추가할 수 있는 객체이다. Mixin은 단독으로 사용할 수는 없고, 상속 없이 객체나 클래스에 기능을 추가하는 목적으로 사용된다.앱에서 여러 강아지를 만들어야 한다고 가정해보자. 아래 강아지 클래스는 n

컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통하도록 한다. 중재자 객체가 요청을 받아 이를 필요로 하는 객체들에게 전달하는 것이다. 중재자는 보통 객체나 함수로 구현된다.이 패턴은 공항에서 비행기의 동선을 관리하는 관제소에 비교할 수 있다. 비행기

부트캠프에서 refresh token 확인을 위해 고차 컴포넌트를 사용했던 기억이 있다. 그 땐 HOC, 고차 컴포넌트란 용어 자체로 인해 낯설고 어려웠던 기억이...종종 여러 컴포넌트에서 같은 로직을 사용해야 하는 경우가 있다. 이런 로직은 컴포넌트의 스타일 시트를

Render Props 패턴 컴포넌트를 재사용 가능하게 할 수 있는 방법으로 HOC 패턴을 알아보았다. 컴포넌트를 재사용 할 수 있는 또 다른 방법으로 Render Props 패턴을 사용할 수 있다. Render Props는 컴포넌트의 props로 함수이며, JSX