likemath1997

프록시 패턴객체가 다른 대상 객체에 접근하기 전에, 그 접근의 흐름을 가로채서 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층을 가지는 디자인 패턴보통 프록시 서버로 이 디자인 패턴을 알고 있음프록시 서버메인 서버와 클라이언트 사이에 존재하는 서버예시1) 메인 서버가 http를 사용할 때, 프록시 서버를 이용해 https로 바꿔 서비스 가능예시2) DDoS 같은 공격적인 트래픽을 필터링하기 위한 프록시 서버(cloudflare)예제 구현function createObject(target, callback) { const proxy = new Proxy(target, { set(obj, prop, value) { if (value !== obj[prop]) { cons..

팩토리 패턴상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위클래스는 객체 생성에 대한 구체적인 내용을 결정하는 패턴상위 클래스에서 객체 생성방식에 대해 관여하지 않아 유연성이 높음객체 생성 방식은 하위 클래스에서 관리하므로 유지보수가 용이함예시class Factory { // 상위 클래스 static createClass(type) { const factory = factoryList[type] return factory.createClass() // 하위 클래스 로직에 관계없음 }}class Lower1 { constructor() { this.name = "lower1" }}class Lower2 { con..

싱글톤 패턴싱글톤 패턴하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴인스턴스 생성 시 발생하는 비용을 줄이기 위해 사용함인스턴스 생성에 많은 비용이 드는 데이터 연결모듈에 많이 쓰임의존성이 높아지고 TDD를 할 때 불편함// 싱글톤이 아닌 경우 두 인스턴스가 다름 class NotSingleton { constructor(a) { this.value = a; }}const a = new NotSingleton(1);const b = new NotSingleton(1);console.log(a === b) // false// 싱글톤인 경우 인스턴스를 공유함class Singleton() { constructor() { if (!Singleton.instance)..

렌더링 과정브라우저는 HTML, CSS, 자바스크립트, 이미지 등 렌더링에 필요한 리소르를 서버에 요청해 응답을 받는다.브라우저의 렌더링 엔진은 서버로부터 받은 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환해 실행한다. 이때, 자바스크립트는 DOM API를 이용해 DOM과 CSSOM를 변경할 수 있다. 이렇게 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.요청과 응답이제 세부 과정을 살펴보자.기..

메모리의 종류와 할당 방식 데이터 영역(전역변수, static 변수) 프로그램 실행 시 로딩 힙(Heap) 영역(프로그래머 할당) 런타임에 크기 결정 스택(Stack) 영역(지역변수, 매개변수) 컴파일 타임에 크기 결정 함수 블록을 나가면 os에서 자동으로 해제시킴 메모리가 중요한 이유 메모리는 무한하지 않다. 즉 관리가 필요하다 사용자에 의한 관리가 필요함 프로그램이 종료되면, 할당된 모든 메모리가 날라감(정확히는 OS에 반환) 서비스 중인 유저의 데이터가 날아가게 되므로 데이터의 복구가 어려움 메모리에 값을 읽고 쓰는 행위는 반드시 동시에 일어나선 안된다(데이터 무결성) 메모리의 저장 매체 파일 : 메모리의 데이터를 프로그램에서 직접 하드 디스크에 기록 데이터베이스 : 메모리의 데이터를 DBMS등의 ..