개발자 지망생의 블로그

[프론트엔드] 브라우저 렌더링 과정 정리 | 렌더링 엔진, CRP 브라우저 렌더링 과정에서 일어나는 일들을 프론트엔드 위주로 자세히 정리해보았다. 브라우저 먼저 브라우저의 아키텍처를 살펴보자. (⚠️ 브라우저마다 다른 아키텍처로 이루어져 있으므로 각 브라우저의 동작과 완벽하게 일치하지 않을 수 있다.) 브라우저의 주요 구성 요소는 다음과 같다. User Interface : 주소 표시줄, 뒤로/앞으로 가기 버튼, 홈 버튼, 북마크 버튼아 등이 포함된다. 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분을 표시한다. Browser engine : UI와 렌더링 엔진 사이의 Rendering engine : 요청된 콘텐츠 표시를 담당한다. 예를 들어, 요청된 콘텐츠가 HTML인 경우 렌더링 엔진은 ..

[네트워크] 2계층 | MAC 주소, Ethernet 프로토콜, Frame 네트워크 2계층, Data Link Layer에 대해 알아보자. 2계층에서 하는 일 2계층은 하나의 네트워크 대역, 즉 같은 네트워크 상에 존재하는 여러 장비들 중에서 어떤 장비가 어떤 장비에게 보내는 데이터를 전달하는 역할을 한다. 이때 하나의 네트워크 대역에 존재한다는 것은 같은 LAN 대역에 존재함을 의미한다. 추가적으로 오류제어, 흐름제어를 수행한다. 오류제어 : 데이터 전송 중 발생되는 에러를 검출, 보정하는 메커니즘 흐름제어 : 송신측이 수신측의 처리 속도보다 더 빨리 데이터를 보내지 못하도록 제어해 주는 것 2계층만 사용해서 통신하려면 하나의 네트워크(LAN) 대역에 있는 장비들과만 통신할 수 있다. 다른 네트워크(다..

[네트워크] 클라이언트-서버, 프로세스, 소켓, 전송계층, HTTP Client-Server Architecture 서버(Server) 항상 on 상태이다. 고정 IP를 가진다. ex) 데이터센터 클라이언트(Client) 서버와 통신한다. 동적 IP를 가질 수 있다. 클라이언트끼리는 직접 통신할 수 없다. Processes communicating 프로세스(Process) : 호스트 내에서 실행되고 있는 프로그램 같은 호스트라면 OS를 통해 inter-process communication으로 통신한다. 다른 호스트라면 메시지를 교환함으로써 통신한다. Client process : 커뮤니케이션을 시작하는 프로세스 Server process : 연결되기를 기다리는 프로세스 Socket 프로세스는 소켓을 통..

Template Method Pattern 템플릿 메소드 패턴을 사용하면 프로세스를 표준화할 수 있다. 이 패턴은 프로세스는 고정되어 있는데 프로세스 내의 단계는 다를 때 적용하기 좋다. 예를 들어 온라인 쇼핑몰을 생각해보면, 사용자가 물건을 구매하는 큰 프로세스는 표준화되어있다. (항상 동일하다.) 그러나 상품의 종류에 따라 다른 물류 시스템을 통해 보내지는 등, 상황에 따라 프로세스 내의 단계는 달라질 수 있다. 템플릿 메소드 패턴을 사용하면 중간 단계를 너무 많은 boilerplate code*를 더하지 않고도 바꿀 수 있다. * boilerplate code : 거의 또는 전혀 변형 없이 여러 위치에서 반복되는 코드 Example 트레이딩 봇 코드를 예시로 살펴보자. 트레이딩 봇에서는 트레이딩 ..

Observer Pattern Observer Pattern(옵저버 패턴)이란 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 이 패턴의 핵심은 옵저버 또는 리스너라 불리는 하나 이상의 객체를 관찰 대상이 되는 객체에 등록시킨다. 그리고 각각의 옵저버들은 관찰 대상인 객체가 발생시키는 이벤트를 받아 처리한다. 옵저버 패턴에는 2가지 역할이 있다. 하나는 subject, 다른 하나는 observer이다. subject는 이벤트를 발생시키는 주체로, 일을 수행하고(ex. 회원 가입한 유저를 DB에 등록) 일어난 변화를 observer들에게 알린다. observer는 발생..

Strategy Pattern 전략(strategy)은 특정한 목표를 수행하기 위한 행동 계획이다. 전략 패턴(strategy pattern)은 디자인 패턴 중 하나로, 객체가 할 수 있는 행위들 각각을 전략으로 만들어 놓고 사용하며, 동적으로 전략 수정이 가능한 패턴을 일컫는다. 코드에서 뭔가를 하는 데 있어서 여러가지 방법이 존재할 때가 있다. 또한 상황에 따라 그 방법을 변경하고 싶을 수 있다. 예를 들어 고객 지원 소프트웨어를 사용할 때, 사용자가 얼마나 붐비는지 등에 따라 지원 고객 처리 순서를 다르게 처리하고 싶을 수 있다. 또는 VR 애플리케이션을 만들 때, VR 장비에 따라 다른 렌더링 알고리즘을 적용하도록 개발하고 싶을 수 있다. 이럴 때 이 '전략 패턴'을 사용할 수 있다. Exampl..

Dependency Inversion 객체지향 설계 5원칙 중 하나인 SOLID 원칙의 D가 Dependency Inversion을 일컫는다. Dependency Inversion을 포함해 모든 디자인 패턴의 핵심은 abstraction(추상화)이다. 이상적으로는 프로그래밍 언어가 추상화 메커니즘과 type을 모두 제공해야 한다. 파이썬에는 이 두 가지 모두 없다..! 그러나 여전히 Dependency Inversion을 구현할 수 있다. Abstract base class(ABC)라는 모듈을 사용할 수 있고, type hint도 제공한다. (⚠️ type hint는 언어 레벨에서 실질적으로 어떠한 제약 사항도 강요하지 않는다. 즉, type hint에 맞게 코드를 쓰지 않아도 에러를 발생시키지 않는다...

최근 비전공자로서 부족한 부분을 채우고자 CS 공부의 일환으로 네트워크를 공부했다. (대학교 한 학기 수업 분량 수강 완료!) 그러다 프론트엔드 개발자라면 네트워크/운영체제는 알면 좋은 것, 개발 방법론은 알면 안 답답한 것, 디자인 패턴 등은 모르면 답답한 것이라는 (개발 잘하는) 친구의 조언을 듣고 소프트웨어 디자인 패턴 공부를 우선순위에 두고 시작하게 되었다. 특히 ArjanCodes라는 유튜버의 영상이 디자인 패턴 공부하기 좋다고 추천받아 하루에 하나씩 보며 공부할 예정이다. Cohesion and Coupling Cohesion(응집도) : the degree to which elements of a certain class or function belong together 직역하면 cohesi..

1. OSI 7계층 모델이란? OSI 7계층 모델이란 네트워크에서 통신이 일어나는 과정을 7단계로 나눠서 설명한 모델이다. OSI 모델 외에도 TCP/IP 모델이 있는데 현재 인터넷은 TCP/IP 모델(updated)로 구현되어 있다. OSI 모델은 역할에 기반한 모델, TCP/IP 모델은 프로토콜에 기반한 모델이다. OSI 모델은 논리적인 모델, TCP/IP 모델은 실무적인 모델에 가깝다. 예를 들어, HTTP는 OSI 모델에서 7계층으로 분류되긴 하지만 6계층의 역할도 한다. OSI 모델은 실제 프로토콜에서는 나누어지지 않는 역할도 쪼개서 구분한 느낌인 것 같다. OSI 7계층 모델은 다음과 같이 구성되어 있다. TCP/IP 모델에서는 5, 6, 7계층을 묶어 응용 계층으로 칭한다. 7계층 - App..

1. 프로토콜이란? 프로토콜(Protocol)이란 네트워크에서 노드와 노드가 통신할 때 어떤 노드가 어떤 노드에게 어떤 데이터를 어떻게 보내는지 작성하기 위한 양식이다. 다른 사람에게 물건을 보낼 때에 빗대어 생각하면 이해가 쉽다. 상황에 따라 물건을 택배를 통해서 전달할 수도, 퀵 서비스를 통해서 전달할 수도 있다. 또한 물건을 보낼 때는 보내는 사람의 주소와 받는 사람의 주소를 정확히 적어야 한다. 여기서 물건을 데이터, 택배와 퀵 서비스를 프로토콜이라고 생각할 수 있다. 대표적인 전송 계층*의 프로토콜인 TCP, UDP에 대해 알아보자. * 전송 계층 : end point 간 신뢰성 있는 데이터 전송을 담당하는 네트워크의 계층 신뢰성 : 데이터를 순차적, 안정적으로 전달한다. 전송 : 포트 번호에 ..