2023/03 22

[구조 패턴] 프록시 패턴(Proxy pattern)

의도 프록시 패턴은 다른 객체에 대한 대체 또는 자리 표시자를 제공할 수 있는 구조 디자인 패턴이다. 프록시 패턴은 어떤 객체에 대한 접근을 제어하기 위한 용도로 대리인이나 대변인에 해당하는 객체를 제공하는 패턴이다. 원래 객체에 대한 접근을 제어하므로 당신의 요청이 원래 객체에 전달되기 전 / 후에 무언가를 수행할 수 있도록 한다. 문제 상황 객체에 대한 접근을 제한하는 이유는 무엇일까? 방대한 양의 시스템 자원을 소비하는 거대한 자원이 있다고 가정하자. 이 객체는 필요할 때가 있기는 하지만 항상 필요한 것은 아니다. 필요할 때만 객체를 만들어서 초기화를 구현 가능하다. 그러면 객체의 모든 클라이언트들은 어떤 지연된 초기화 코드를 실행해야하는데 이는 많은 코드 중복을 초래한다. 이 코드를 객체의 클래스..

[구조 패턴] 퍼사드 패턴(Facade pattern)

퍼사드 패턴(Facade pattern, Singletone Abstract Factory, 싱글톤 추상 팩토리) GOF에 따르면 퍼사드 패턴은 "하위 시스템의 인터페이스 세트에 일관된 인터페이스를 제공하는 것" 하위 시스템의 복잡도를 감추는 동시에 그 전체 기능을 사용하기 쉬운 인터페이스로 제공한다. 실생활에서 퍼사드 패턴의 예시 세탁기 찌든 때, 에벌 빨래 두 가지 모드가 있다. 두 모드에 따라 세탁 방법이 다른다. 세제 투입량, 물 온도, 탈수시간 등등 위와 같은 잡다한 정보를 인터페이스 내부에 두고 두 가지 세탁 모드만 제공한다. 사용자는 복잡한 생각 없이 모드만 선택하면된다. 퍼사드 패턴을 쓰는 경우 레거시 백 엔드 시스템에 단일 접근 창구를 제공한다. 클래스에 드라이버 같은 API를 만든다. ..

Apache Kafka와 구성 요소

Apache Kafka 카프카란? 카프카: 분산 이벤트 스트리밍(분산 데이터 스트리밍) 플랫폼이다. 여러 소스에서 데이터 스트림을 처리하고 여러 사용자에게 전달한다. 필요한 모든 곳에서 대규모 데이터를 동시에 이동 가능하다. 웹 사이트, 애플리케이션, 센서 등에 취합한 데이터를 스트림 파이프라인을 통해 실시간 관리하고 보내기 위한 분산 스트리밍 플랫폼이다. 데이터 생성하는 애플리케이션과 데이터를 소비하는 애플리케이션 간의 중재자로서 전송 제어, 처리, 관리 역할을 한다. 전통적인 메시징 시스템의 대안이다. 하루에 1조 4천 억 건의 메시지를 처리하기 위해 LinkedIn이 개발한 내부 시스템으로 시작했다. Java, Python, Go로 프로슈머, 컨슈머를 개발 카프카는 데이터 이동에 필요한 핵심 역할을..

[구조 패턴] 데코레이터 패턴(Decorator pattern, 장식자)

데코레이터 패턴을 이용하면 타깃 객체를 감싸 어떤 로직을 런타임에 동적으로 부여할 수 있다. 데코레이터 끼리도 감쌀 수 있어서 사실상 타깃 객체를 장식하는 경우의 수는 이론적으로 무한하다. 데코레이터 패턴은 상속 보다 유연하지만. 애플리케이션 실행하기 전엔,ㄴ 객체 타입과 동작방식을 알 수 없어서 더 복잡하다. 거의 모든 언어와 UI, 플랫폼, 백엔드 할 것없이 두루 쓰인다. 의도 데코레이터 패턴은 객체들을 새로운 행동들을 포함한 특수 래퍼 객체들 내에 넣어서 위 행동들을 해당 객체들에 연결시키는 구조적 디자인 패턴이다. 데코레이터 예시 Order 인터페이스 가격, 피자 이름을 조회 가능 public interface Order { public double getPrice(); public String ..

미들웨어(Middleware)

미들웨어(Middleware) 미들웨어는 서로 다른 애플리케이션이 통신하는데 사용되는 소프트웨어를 말한다. 미들웨어는 OS와 해당 OS 상에서 실행되는 애플리케이션 사이에 존재하는 소프트웨어이다. 단일 시스템에 원할하게 통합할 수 있도록 다양한 기수르 도구, 데이터베이스 간에 다리 역할을 한다. 웹 브라우저가 데이터베이스로부터 데이터를 저장하거나 읽어올 수 있도록 미들웨어가 존재한다. 미들웨어의 종류 DB 접속 미들웨어: 애플리케이션과 데이터베이스 서버를 연결해주는 미들웨어 웹 애플리케이션 서버(Web Application Server): 애플리테이션과 데이터베이스 서버를 연결해주는 미들웨어 메시지 지향 미들웨어(Message Oriented Middleware, MOM) 분산 응용 프로그램 간에 미시지..

메시지 브로커(Message Broker)

메시지 브로커(Message Broker): 송신자의 메시지 프로토콜 형식으로부터의 메시지를 수신자의 메시지 프로토콜 형식으로 변환하는 중간 컴퓨터 프로그램 모듈이다. 메시지 브로커들은 응용 소프트웨어가 이전에 정의해둔 메시지를 교환할 수 있는 전기 통신의 요소 또는 컴퓨터 네트워크이다. 송신자(Publisher)로부터 받은 메시지를 수신자(subscriber)로 전달해주는 중간 역할을 한다. 응용 소프트웨어 간에 메시지를 교환할 수 있도록 한다. 메시지가 적재되는 공간을 Message Queue 라고 한다. 메시지 그룹을 topic이라고 한다. Ex) Apache Kafka, Rabbit MQ, Redis 메시지 브로커와 이벤트 브로커의 차이점 매시지 브로커는 이벤트 브로커 역할 가능하지만 이벤트 브로..

Chapter 03. Vue.js 사용 전 JavaScript 기본 지식

Vue 의 다양한 사용 방식 Standalone script Embedded Web Components Single Page Application fullstack / SSR JAMStack / SSG Beyond the web Vue 2.xx => Vue 3.xx 변한 부분 Composition API: Vue2에서 쓰던 방식과 호환된다. 기존에 쓰던 Options API를 대체한다. 혹은 두 개를 같이 쓸 수도 있지만 강사님은 둘 중 하나 선택하는 것을 권장하신다. SFC(Single File Component) 위 두 가지가 등장했다. 다양해지고 체계가 생겼다. Global API: 애플리케이션을 만들 때 new Vue() 를 이용했던 부분이 createapp() 이라는 정적 메소드를 이용해서 만들..

FrontEnd/Vue.js 3 2023.03.07

Chapter 02. 웹 프론트의 MVC 라이브러리

DOM(윈도우) 프로그래밍과 MVW 방식의 차이 Ex) 다음과 같이 클릭하면 덧셈이 되도록 하는 경우 그런데 이 코드를 아래와 같이 표현 가능하다. 노드를 조작하는 코드를 제거한다. document 객체 아래와 같이 모델만 남는다. x, y, z 라는 모델을 뷰에 바인딩한다? 연결된 변수가 모델이다. vue 프레임워크를 쓰면 DOM을 안 써도된다. MVC 패턴의 이해 mvc는 1970년대에 시작됐다. Model 기반의 코드 Smalltalk(객체 지향 언어의 일종)를 이용해서 윈도우를 만들었다. 누군가 데이터를 수정하면? 데이터가 변했다는 걸 인지하고 다른 화면도 바뀌도록 한다. 전체적인 UI 관리가 더욱 쉬워졌다. 출력할 변수(모델)을 이미 마련한 코두와 그렇지 않은 코드 비교하기 왼쪽: 제어와 출력이..

FrontEnd/Vue.js 3 2023.03.07

Chapter 01. 사전 지식과 SPA

사전 지식 HTML / CSS JavaScript(ES56) DOM 프로그래밍 JSX/TSX Typescript NodeJS - 모듈, npm이해하기 SPA(Single Page Application) 페이지 요청은 한 번만 하고 그 다음부터는 데이터만 요청하는 방식으로 바뀌었다. Vue.js는 Angular.js의 장점만 가지고 나왔다. 여러 기능도 추가했다. 예전에는 JavaScript와 Ajax 없이 HTML 기능만을 이용해서 이뤄졌다. 클라이언트가 요청할 때마다 서버가 새로운 페이지를 보낸다. 서버와 클라이언트 모두 비효율적이다. 최근에는 JavaScript와 Ajax까지 사용한다. 서버는 클라이언트에 맨 처음 요청에만 페이지를 보내고 그 다음부터는 필요한 데이터만 보내준다. 사용성이 좋아진다. ..

FrontEnd/Vue.js 3 2023.03.07

Chapter 01. 자바스크립트 기초

1. 자바스크립트란? 브라우저 위에서 동작하는 인터프리터 방식의 언어이다. 현재는 Node.js 라는 런타임 환경이 생겼기 때문에 서버에서도 자바스크립트를 사용 가능하다. Python, Java는 어떤 파일들을 다운 받아야 환경을 구축할 수 있는 것과는 다르게 JavaScript는 다운 받을 필요가 없다. JavaScript는 브라우저 위에서 바로 동작할 수 있기 때문에 브라우저 위에서 바로 테스트 가능하다. html은 문서이다. 웹 브라우저( ex) 크롬)을 통해 html, css, JavaScript 페이지를 열어볼 수 있다. xlsx 파일을 엑셀, 한컴, 구글 스프레드 시트로 열 수 있다. JavaScript는 html과 관련있다. html에 기능을 넣어준다. html은 웹 브라우저에서 동작한다. ..