📚개발지식5 [개념정리] 브라우저 렌더링의 순서 렌더링사전적 의미아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 공업 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도 브라우저 렌더링HTML, CSS, JS 등 개발자가 작성한 문서를 파싱하여 사용자가 눈으로 볼 수 있도록 브라우저에 출력하는 과정 브라우저 렌더링 순서1. 서버로부터 HTML 문서를 전달받는다. 2. 브라우저 엔진은 HTML 문서를 위에서 아래로 파싱하며 태그와 속성을 발견한다. 3. 태그와 속성들이 트리 형태로 변환되며 메모리에 저장되고, 이를 DOM Tree라고 한다. 4. HTML 파싱 중 CSS 링크 또는 스타일 태그를 만나면 CSSOM Tree로 변환한다. 5. 문서의 파싱이 완료되면 DOM과 CSSOM 트리를 결합하여 렌더 트리를.. 📚개발지식/개념정리 2024. 8. 7. [디자인패턴] 생성 패턴 - 팩토리 메서드 패턴 (Factory Method Pattern) 팩토리 메서드 패턴이란? 디자인 패턴의 생성 패턴 중 하나이다. 객체 생성을 공장 클래스로 캡슐화 처리하여 생성하게 하는 생성 디자인 패턴이다. 쉽게 말하면 사용자가 직접 new 연산자를 사용해 객체를 생성하지 않는다. 공장 클래스를 만들고, 이를 상속받는 서브 공장 클래스의 메서드에서 각각 객체 생성을 책임진다. 팩토리 메서드 패턴은 객체를 만들어내는 공장을 만드는 패턴이다. 팩토리 메서드 특징 • 객체간의 결합도가 낮아지고 유지보수에 용이하다. • 객체의 유형과 종속성을 캡슐화해 정보를 은닉 처리할 수 있다. • 기존 객체를 재구성하는 대신 기존 객체를 재사용하여 리소스를 절약할 수 있다. 장점 • 생성자와 구현 객체의 강한 결합을 피할 수 있다. • 팩토리 메서드를 통해 객체의 생성 후 공통으로 할.. 📚개발지식/디자인패턴 2024. 2. 6. [UML] 클래스 다이어그램 관계 UML UML은 Undefined Modeling Language의 약자이다. 1997년 OMG(Object Management Group)에서 표준으로 채택된 통합 모델링 언어이다. 실험해볼 구체적인 것이 있고, 그것을 코드로 시험해보는 것보다 UML로 시험해 보는 쪽이 비용이 덜 들때 주로 사용한다. UML은 구조 다이어그램 7개, 행위 다이어그램 7개로 총 14종류의 다이어그램이 있다. 이 중에서 클래스 다이어그램의 클래스 간 관계에 대해 알아보려한다. 클래스 다이어그램 시스템을 구성하는 클래스 간의 관계를 표현하는 다이어그램이다. 클래스, 스테레오 타입, 추상 클래스로 구성된다. 클래스 간 관계 클래스 간의 관계를 표기하는 방법은 다음과 같다. Generalization (일반화) 슈퍼(부모) 클.. 📚개발지식/디자인패턴 2024. 1. 29. [개념 정리] SSR과 CSR의 차이점 및 장단점 (SPA, MPA) SPA vs MPA 오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 JS 기반 프레임워크를 사용해 SPA를 개발한다. SPA SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 애플리케이션이다. SPA로 개발된 웹 사이트에서는 카테고리에 있는 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인 화면만 바뀐다. MPA MPA란, Multi Page Application의 약자로, 여러 개의 페이지로 구성된 애플리케이션이다. 서버로부터 새로운 HTML을 받아와서 페이지 전체를 렌더링하는 전통적인 웹 페이지 구성 방식이다. CSR vs SSR SPA vs MPA 일반적으로는 SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로.. 📚개발지식/개념정리 2024. 1. 22. [개념 정리] 객체 지향 프로그래밍(OOP) 개인적인 이해이므로 틀린 부분이나 자세한 부분은 댓글로 달아주시면 감사하겠습니다. 객체 지향 프로그래밍 개발을 배우면서 제일 많이 들은 단어가 객체 지향 프로그래밍(OOP)였다. 회사 면접을 가도 기본적으로 물어보는 질문이었고 객체 지향 프로그래밍의 4가지 특징을 서술하라는 질문을 많이 받았다. 그래서 필자가 이해하고 검색해본 것을 바탕으로 객체 지향 언어의 개념을 정리해보려고 한다. * 객체 지향 언어의 개념을 암기하는 것은 기억에 남지 않을 것 같아서 등장 배경부터 설명하고자 한다. 순차적 (비구조적) 프로그래밍의 등장 순차적 프로그래밍이란? 정의한 기능의 흐름에 따라 순차적으로 동작을 추가하며 프로그램을 완성하는 방식이다. 간단한 프로그램을 순차적으로 코드를 작성하면 코드가 매우 직관적이기 때문에 .. 📚개발지식/개념정리 2022. 10. 26. 이전 1 다음