분류 전체보기

이벤트: 캡처링과 버블링의 원리와 활용

최근에 공부를 하면서 백엔드 지식뿐만 아니라 프론트의 지식도 알고 있어야 프로젝트를 하는데 도움도 되고 취업에도 유리하겠다란 생각이 들어 공부를 시작하게 되었다. 프론트를 배우면서 면접에서 가장 많이 질문받는 것 중 하나가 캡처링과 버블링의 차이라고 한다. 간단하게 설명하자면 캡처링과 버블링은 이벤트가 DOM에서 전파되는 방식을 설명하는 용어이다. 버블링(Bubbling): 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전파되는 과정이다. 이벤트가 발생한 요소에서 시작해서 부모요소, 그 부모의 부모요소까지 전달되어 올라가는 방식이다. (제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어졌다.) 캡처링(Cpaturi..

디자인 패턴 - 빌더패턴(Builder)

디자인 패턴이란? 디자인 패턴은 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 해결책이다. 디자인 패턴하면 떠오르는 'Gof의 디자인 패턴'에서는 객체지향적 디자인 패턴의 카테고리를 "생성패턴(Creational Pattern)", "구조 패턴(Structural Pattern)", "행동 패턴(Behavioral Patter)" 이렇게 3가지로 구분하고 있다. 그중 생성 패턴에 해당하는 Builder 패턴에 대해 알아보자 빌더 패턴(Builder) 빌더는 복잡한 객체들을 단계별로 생성할 수 있도록 하는 생성 디자인패턴이다. 이 패턴을 사용하면 같은 제작 코드를 사용하여 객체의 다양한 유형들과 표현을 제작할 수 있다. 구조 Buolder(추상클래스)를 정의하고 이를 ..

디자인패턴 - 프로토타입 패턴(Prototype)

디자인 패턴이란? 디자인 패턴은 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 해결책이다. 디자인 패턴하면 떠오르는 'Gof의 디자인 패턴'에서는 객체지향적 디자인 패턴의 카테고리를 "생성패턴(Creational Pattern)", "구조 패턴(Structural Pattern)", "행동 패턴(Behavioral Patter)" 이렇게 3가지로 구분하고 있다. 그중 생성 패턴에 속하는 프로토타입 패턴에 대해 알아보자. 프로토타입 패턴(Portotype Pattern) 프로토타입 패턴은 객체를 생성하는데 비용이 많이 들고, 비슷한 객체가 이미 있는 경우에 사용되는 생성 패턴 중 하나이다. 즉, 프로토타입 패턴은 원본 객체를 새로운 객체에 복사하여 필요에 따라 수정하는..

디자인 패턴 - 전략 패턴(Strategy)

디자인 패턴이란? 디자인 패턴은 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 해결책이다. 디자인 패턴하면 떠오르는 'Gof의 디자인 패턴'에서는 객체지향적 디자인 패턴의 카테고리를 "생성패턴(Creational Pattern)", "구조 패턴(Structural Pattern)", "행동 패턴(Behavioral Patter)" 이렇게 3가지로 구분하고 있다. 그중 행동 패턴에 속하는 전략 패턴에 대해 알아보자. 전략 패턴(Strategy) 전략 패턴 은 알고리즘들의 패밀리를 정의하고, 각 패밀리를 별도의 클래스에 넣은 후 그들의 객체들을 상호교환 할 수 있도록 하는 행동 디자인 패턴이다. 예시 문제점 당신은 RPG 게임을 만들기로 했다. RPG 게임의 특성상 캐릭..