반응형 개발공부 일지/면접17 프론트 엔드 면접 예상문제(찐) 1. 브라우저 렌더링 원리 (https://d2.naver.com/helloworld/59361) - 1. DOM, CSSOM생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다 → 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. (html이 여기서 파싱된다) DOM Tree와 CSSOM Tree가 만들어진다 2. Render Tree생성: DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. 3. Layout 단계: 브라우저의 뷰포트(Viewport) 내에.. 2023. 10. 12. Observer(옵저버) 패턴 옵저버 패턴(Observer Pattern)은 옵저버(관찰자)들이 관찰하고 있는 대상자의 상태가 변화가 있을 때마다 대상자는 직접 목록의 각 관찰자들에게 통지하고, 관찰자들은 알림을 받아 조치를 취하는 행동 패턴이다. interface Observer { update(subject: Subject): void; } class ConcreteObserever implements Observer { constructor(private id: number) {} public update(subject: Subject): void { console.log( `Observer ${this.id} updated, new state: ${subject.getState()}` ); } } interface Subjec.. 2023. 10. 9. Template Method(템플릿 메서드) 패턴 Template 패턴은 어떤 기능을 구성하는 각 실행 순서(단계)를 미리 정하고 각 실행 단계에 대한 구체적인 코드를 재정의 할 수 있는 유연성을 제공합니다. Template Method는 상속(Inheritance)을 기반으로 한다. 이를 통해 하위 클래스에서 해당부분을 확장하여 알고리즘의 일부를 변경할 수 있다. Strategy은 구성(Composition)을 기반으로 한다. 해당 동작에 해당하는 다른 전략을 제공하여 객체 동작의 일부를 변경할 수 있다. Template Method는 클래스 레벨에서 작동하므로 정적이다. Strategy은 객체 레벨에서 동작하므로 런타임에 동작을 전환할 수 있다. export class AbstractClass { public method1(): void { thro.. 2023. 10. 9. Command(커맨드) 패턴 커맨드 패턴이란 커맨드패턴은 객체의 행위(메서드)를 클래스로 만들어 캡슐화하는 패턴이다. 하나의 명령(기능)을 객체화한 패턴 객체는 전달할 수 있고 보관할 수 있음, 즉 명령(기능)을 전달하고 보관할 수 있게 됨. 배치 실행, Undo/Redo, 우선 순위가 높은 명령을 먼저 실행하기 등이 가능해 짐 행위(Behavioral) 패턴 중 하나. 커맨드 패턴에서는 크게 Invoker, Receiver, Command(이하 커맨드, 명령) 객체로 구분됩니다. Invoker는 기능의 실행을 요청하고 Receiver는 명령을 수행하는 객체입니다. namespace CommandPattern { export class Command { public execute(): void { throw new Error("Ab.. 2023. 10. 8. Iterator(이터레이터) 디자인 패턴 이터레이터 패턴(Iterator 패턴) - 여러 종류의 Collection을 하나의 Interface로 조회하는 패턴 - Iterator 패턴은 컬렉션(데이터 집합)을 탐색하거나 순회하는 방법을 추상화하는 패턴입니다. - 반복문을 사용해서 개발자가 직접 인덱스를 통해 각각의 원소를 꺼내오는 대신, 자동으로 모든 원소를 차례대로 꺼내서 작업을 연속적으로 할 수 있게 해주는 행동 패턴(Behavioral Pattern)의 일종입니다. 반복로직을 구현과 분리가 가능하다는 장점이 있습니다. 이 패턴은 컬렉션 내부 구현을 클라이언트 코드로부터 숨기고, 컬렉션의 요소를 반복적으로 열거하거나 접근하기 위한 일관된 인터페이스를 제공합니다. 이를 통해 클라이언트 코드는 컬렉션의 구조를 알 필요 없이 요소에 접근할 수 있.. 2023. 10. 8. MVC vs MVP vs MVVM MVC => Model - View - Controller MVP => Model - View - Presenter MVVM => Model - View - ViewModel [ MVC 패턴] (SW 개발방법론) MVC패턴은 개발자가 Controller내의 로직을 다루고 Controller는Model 을 통해 가져온 데이터를, View 에게 전달합니다. 간단히 말하자면, View는 웹 화면, Controller는 서버, Model 은 데이터베이스라고 할 수 있습니다. MVP와 MVVM는 MVC에서 파생된 또 하나의 개발방법론입니다. 그렇다는 의미는 MVC 를 먼저 이해하는 것이 기본 베이스입니다. 우선 MVC에서의 Controller 는 Model에게 직접 영향을 끼칠 수 있습니다. 하지만 Model 은.. 2023. 10. 4. 전략 패턴(Strategy Pattern) 전략 패턴은 실행(런타임) 중에 알고리즘 전략을 선택하여 객체 동작을 실시간으로 바뀌도록 할 수 있게 하는 행위 디자인 패턴 이다. 여기서 '전략'이란 일종의 알고리즘이 될 수 도 있으며, 기능이나 동작이 될 수도 있는 특정한 목표를 수행하기 위한 행동 계획을 말한다. 즉, 어떤 일을 수행하는 알고리즘이 여러가지 일때, 동작들을 미리 전략으로 정의함으로써 손쉽게 전략을 교체할 수 있는, 알고리즘 변형이 빈번하게 필요한 경우에 적합한 패턴이다. Strategy 패턴은 어떤 기능에 대한 특정 알고리즘을 느슨하게 결합시켜주는 패턴입니다. 어떤 알고리즘이 느슨하게 결합되면 추후 더 나은 알고리즘으로 쉽게 변경할 수 있을 뿐만 아니라 프로그램이 실행 중에 상황에 맞는 알고리즘으로 쉽게 변경할 수 있습니다. 또한 .. 2023. 10. 3. 자바스크립트)Throttling(쓰로틀링) vs Debounce(디바운스) 쓰로틀링: 한번 로직이 실행 되고 나면 정해진 시간 동안 해당 로직의 실행을 막는 방식. function throttle(func, delay) { let lastCallTime = 0; return function(...args) { const now = Date.now(); if (now - lastCallTime >= delay) { func(...args); lastCallTime = now; } }; } // 예시 함수 function doSomething() { console.log("실행됨!"); } // 쓰로틀링된 함수 생성 const throttledFunction = thrott.. 2023. 10. 3. 파사드 패턴(Facade Pattern) 어떤 기능을 처리하기 위해 여러 객체들 사이의 복잡한 매서드 사용을 감춰서 단순화 시켜주는 패턴 예시)어떤 데이터를 조회해서 출력해주는 기능 Facade 패턴은 어떤 기능 개발을 위해 필요한 많은 클래스와 관련 API 호출 등 복잡한 내용을 단순환 시켜주는 패턴입니다 즉,Facade에 해당하는 클래스 하나로 단순화 시키고 기존의 캘래스들은 감출 수 있습니다.(비공개 처리가 가능) Facade 패턴을 적용하여 만들어진 라이브러리를 사용하는 개별자의 입장에서 학습에 대한 부담이 많이 줄게 됩니다. class Amplifier { public turnOn(): void { console.log("Amplifier is turned On"); } public setVolume(level: number): voi.. 2023. 10. 3. 이전 1 2 다음 반응형
