본문 바로가기

전체 글

 (113)
Flux (React를 보완하자) Flux는 페이스북에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐다. 이 프로젝트는 파생되는 데이터를 올바르게 다루기 위해 시작되었다. ex) 현재 뷰에서 읽지 않은 메시지가 강조되어 있으면서도 읽지 않은 메시지 수를 상단 바에 표시하고 싶었다. 이런 부분을 MVC에서 다룬다면 메시지를 읽기 위한 단일 스레드에서 메시지 스레드 모델을 갱신해야하고 동시에 읽지 않은 메시지 수 모델을 갱신해야한다. 까다롭다. 대형 MVC 어플리케이션에서 종종 나타나는 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과를 만들어낸다. Flux 어플리케이션은 다음 핵심적인 세가지 부분으로 구성되어있다. Dispatcher Stores Views (React..
컴퓨터 네트워크 개요 컴퓨터 네트워크의 목표는 간단하다. 컴퓨터로부터 다른 컴퓨터로 데이터를 전송하는 것. 하지만 이는 매우 복잡한 과정을 거친다. 전송 계층에서 신뢰성 있는 전송 서비스를 제공. 네트워크 계층에서 네트워크 노드 간의 라우팅 서비스를 제공. 데이터 링크 계층에서 물리적으로 연결된 노드에게 데이터를 전송하는 서비스를 제공. 물리 계층에서 실제로 신호로 비트를 전송하는 서비스를 제공. 이 모든 것이 잘 이뤄져야 비로소 호스트에게 데이터가 전송된다. 먼저 용어를 정리해보자. 컴퓨터 네트워크 (Computer Network) : 컴퓨터와 컴퓨터를 통신망으로 연결한 것 노드 (Node) : 컴퓨터 네트워크 상에 연결된 장치 호스트 (Host) : 고유 IP 주소를 가진 노드 링크 (Link) : 물리적으로 노드와..
외부 API를 사용해서 데이터를 끌어오는 방법 (AJAX, Fetch API & Async/Await) AJAX AJAX는 Asynchronous Javascript and XML의 약자이다. (하지만 요즘 많은 API들이 XML 대신 JSON 데이터를 제공한다.) HTML, CSS, JavaScript, DOM 조작 과 XMLHttpRequest 객체를 활용한 프로그래밍 방식으로 AJAX를 사용하는 가장 큰 목적은 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하기 위해서이다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다. // XHR 객체 생성 let xhr = new XMLHttpRequest; // 요청 초기화 xhr.open('GET', '원하는 주소', true); // XMLHttpRequest 처리가 완료되면 실행 xhr..
브라우저의 작동원리 (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) (How browser works) 브라우저의 주요 기능 사람마다 브라우저를 사용하는 용도는 다를 것이다. 하지만 브라우저가 하는 일은 같다. 사용자가 원하는 자원(HTML, PDF 등.)을 찾아서 보여주는 일을 하는 것이다. 예를 들어서 구글에서 '기리보이'를 검색한다고 가정해보자. 우리가 원하는 것은 무엇일까? 바로 '기리보이'에 대한 정보이다. 일단 사용자는 주소 표시줄에 www.google.com을 입력하고 엔터키를 누를 것이다. 그럼 어떻게 보여주는지는 모르겠지만 브라우저는 구글의 첫 화면을 우리에게 보여줄 것이다. 그리고나서 검색창에 '기리보이'를 입력하고 검색 버튼을 누르면 또 화면이 바뀐다. 주소창에 있는 URL 또한 바뀐다. 주소가 바뀌었다는건 구글 검색 버튼이 어떤 주소로 연결해주었기 때문이라고 짐작할 수 있다. 그런데 ..

티스토리툴바