0/web (9) 썸네일형 리스트형 Which RENDERING strategy should we take on the Web? 🤔 Background As a part of React migration, I want to know what benefits we can take from SSR and CSR. Rendering Server rendering: generates the full HTML for a page in the server. 👍 A fast FP, FCP, and TTI 👍 Avoid waiting for CPU-bound JS processing time 👎 Generating pages on the server takes time, it results in a slower TTFB 👎 Client can't still avoid third-party JS processing time Content-heavy .. 뒤늦은 React 입문기 정리 (라이프 사이클, 렌더링 과정) render() 함수를 호출할 때 render() 함수는 React에서 사용하는 타입의 컴포넌트를 생성. 이 때 생성하는 컴포넌트는 다음과 같다. ReactCompositeComponent 객체 : DOM이 아닌 컴포넌트를 생성할 때 사용됨. ReactDOMComponent 객체 : DOM을 만들 때 사용하는 컴포넌트. render() 함수가 생성한 컴포넌트를 React 컴포넌트에 마운트하기 위해 ReactReconciler.mountComponent() 메서드를 호출. 이 메서드에서는 ReactCompositeComponent 객체와 ReactDOMComponent 객체의 mountComponent() 메서드를 호출하며, 이 시점에 주요 작업이 시작됨. ReactCompositeComponent 객체의.. Flux (React를 보완하자) Flux는 페이스북에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐다. 이 프로젝트는 파생되는 데이터를 올바르게 다루기 위해 시작되었다. ex) 현재 뷰에서 읽지 않은 메시지가 강조되어 있으면서도 읽지 않은 메시지 수를 상단 바에 표시하고 싶었다. 이런 부분을 MVC에서 다룬다면 메시지를 읽기 위한 단일 스레드에서 메시지 스레드 모델을 갱신해야하고 동시에 읽지 않은 메시지 수 모델을 갱신해야한다. 까다롭다. 대형 MVC 어플리케이션에서 종종 나타나는 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과를 만들어낸다. Flux 어플리케이션은 다음 핵심적인 세가지 부분으로 구성되어있다. Dispatcher Stores Views (React.. 컴퓨터 네트워크 개요 컴퓨터 네트워크의 목표는 간단하다. 컴퓨터로부터 다른 컴퓨터로 데이터를 전송하는 것. 하지만 이는 매우 복잡한 과정을 거친다. 전송 계층에서 신뢰성 있는 전송 서비스를 제공. 네트워크 계층에서 네트워크 노드 간의 라우팅 서비스를 제공. 데이터 링크 계층에서 물리적으로 연결된 노드에게 데이터를 전송하는 서비스를 제공. 물리 계층에서 실제로 신호로 비트를 전송하는 서비스를 제공. 이 모든 것이 잘 이뤄져야 비로소 호스트에게 데이터가 전송된다. 먼저 용어를 정리해보자. 컴퓨터 네트워크 (Computer Network) : 컴퓨터와 컴퓨터를 통신망으로 연결한 것 노드 (Node) : 컴퓨터 네트워크 상에 연결된 장치 호스트 (Host) : 고유 IP 주소를 가진 노드 링크 (Link) : 물리적으로 노드와.. 브라우저의 작동원리 (3) (How browsers work) 다단계 순서에 따라 규칙 적용하기 스타일 객체는 모든 CSS 속성을 포함하고 있는데 어떤 규칙과도 일치하지 않는 일부 속성은 부모 요소의 스타일 객체로 부터 상속받는다. 그 외 다른 속성들은 기본 값으로 설정된다. 문제는 하나 이상의 속성이 정의될 때 시작되고 다단계 순서가 이 문제를 해결한다. 스타일 시트 다단계 순서 스타일 속성 선언은 여러 스타일 시트에서 나타날 수 있고 하나의 스타일 시트 안에서도 여러 번 나타날 수 있는데 이것은 규칙을 적용하는 순서가 매우 중요하다는 것을 의미한다. 이것을 "다단계(cascade)" 순서라고 한다. CSS2 명세에 따르면 다단계 순서는 다음과 같다. (우선순위가 낮음->높음.) 브라우저 선언 사용자 일반 선언 작성자 일반 선언 작성자 중요 선언 사용자 중요 선언.. 브라우저의 작동 원리 (2) (How browsers work) 브라우저의 오류 처리 HTML 페이지에서 "유효하지 않은 구문"이라는 오류를 본 적이 없을 것이다. 이는 브라우저가 모든 오류 구문을 교정하기 때문이다. 참 대단하지 않을가? 아래 오류가 포함된 HTML 예제를 보자. Really lousy HTML 일부러 여러가지 규칙을 위반한 코드이다. "mytag"는 표준 태그가 아니다. "p"태그와 "div"태그는 중첩 오류가 있다. 그러나 브라우저는 투덜거리지 않고 올바르게 표시하는데 이는 파서가 HTML 작성자의 실수를 수정했기 때문이다. 이런 오류 처리 행태는 브라우저에서 꽤나 일반적임에도 불구하고 HTML의 현재 명세가 아니라는 점이 놀랍다. 많은 사이트에서 HTML 오류를 쉽게 발견할 수 있지만 브라우저는 관습적으로 오류를 고치고 있다. HTML5 명세는.. 문맥 자유 문법 (Context Free Grammar, CFG) 개요 브라우저의 동작 과정 중 렌더링 엔진은 사용자에게 요청받은 문서를 파싱해서 화면에 보여주는 역할을 한다. HTML 문서를 파싱할 때 사용되는 파서의 종류는 문법에 따라 크게 두가지로 나뉘는데 이는 HTML을 파싱하는 파서와 CSS 또는 JavaScript를 파싱하는 파서이다. 왜냐하면 HTML은 언어 자체의 너그러운 속성과 사용자의 변경에 의한 재파싱 등 신경써줘야할 부분이 많기 때문에 문맥 자유 문법에 의해 쉽게 정의할 수가 없다. 그렇다면 문맥 자유 문법이란 무엇일까? 문맥 자유 문법 우리가 영어 문장에서 문장의 의미를 이해하기 위해서 영어 문법을 이해하고 있어야 하는 것이 당연하듯이 파서 또한 프로그래밍 언어를 이해하기 위해서는 프로그래밍 언어 정의에 사용된 문법을 이해하고 있어야한다. 대부분.. [Chromium] 멀티 프로세스 아키텍쳐 (Multi-process Architecture) 문제 충돌하거나 멈추지 않는 렌더링 엔진을 만드는 것은 거의 불가능하다. 완벽하게 안전한 렌더링 엔진을 만드는 것도 거의 불가능하다. 어떤 면에서, 2006년 경의 웹브라우저는 단일 사용자, 협업 멀티 태스킹 운영체제와 비슷했다. 이러한 운영체제에서 한 어플리케이션의 오작동은 전체 시스템을 파괴시킬 수도 있었으므로, 이것은 웹 브라우저에서 오작동하는 웹페이지가 될 수도 있다. 하나의 브라우저나 플러그인 버그가 전체 브라우저와 모든 실행중인 탭을 제거할 수 있다는 말이다. 현대의 운영체제는 더욱 견고해졌다. 왜냐하면 그들이 애플리케이션을 서로 분리된 다른 프로세스로 분산시켰기 때문이다. 한 애플리케이션의 충돌은 다른 애플리케이션이나 운영체제의 무결성을 손상시키지 않으며 다른 사용자의 데이터에 대한 접근도 .. 이전 1 2 다음
