프린세스 다이어리

자바스크립트는 기본적으로 한 번의 한 작업만 수행 가능한 싱글 스레드 언어다. 하지만 자바스크립트는 웹 브라우저나 NodeJS와 같은 멀티 스레드 환경에서 실행된다. 자바스크립트가 멀티 스레드로 실행될 수 있도록 도와주는 장치에 대해 정리해보았다. 1. 콜백 함수가 실행되는 순서 console.log('123'); setTimeout(function() { console.log('567'); }, 300); console.log('987'); 123 987 567 여기 콘솔 로그 중간에 setTimeout이라는 함수가 있다. 이 함수는 첫 번째 인자로 들어간 함수를 두 번째 인자로 들어간 숫자만큼의 ms(밀리세컨드)를 기다렸다가 실행하도록 한다. 이 코드에 setTimeout 함수만 놓고 보면, 300m..

1. 브라우저의 구성 요소 브라우저도 OS상에서 실행되는 하나의 애플리케이션이다. 이 애플리케이션을 활용해 사용자는 원하는 사이트에 들어가 정보를 찾고 소통을 하는 등의 행동을 한다. 브라우저가 이렇게 데이터를 주고받고 화면에 띄워주는 역할을 수행할 수 있는 이유는 브라우저를 구성하는 요소들이 다음과 같이 구성되어 있기 때문이다. 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 이루어져 있다. (1) 사용자 인터페이스 브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄, 뒤로 가기 버튼, 플러그인 버튼, 새로고침 버튼 등, 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤할 수 있는 부분이다. (2) 브라우저 엔진 사용자가 주소창에 입력한 UR..

렌더링 엔진은 브라우저 엔진으로부터 사용자가 입력한 URI를 받아서, 해당하는 데이터를 렌더링 하는 역할을 한다. 브라우저마다 렌더링 엔진의 상세한 동작 과정이나 용어는 조금씩 차이가 있지만, 전반적인 원리는 기본적으로 동일하다. 크롬과 iOS의 경우, webkit이라는 렌더링 엔진을 사용한다. 렌더링 하는 과정은 다음과 같다. 객체 모델 생성 -> 렌더링 트리 구축 -> 렌더링 트리는 배치 -> 렌더링 트리 페인팅 1. 객체 모델(Object Model) 생성 브라우저가 페이지를 렌더링하려면, 먼저 HTML 문서를 파싱 하여 DOM트리를 생성하고, CSS 문서를 파싱 하여 CSSOM 트리를 생성해야 한다. DOM과 CSSOM은 서로 독립적인 데이터 객체이며, 나중에 이 두 가지가 병합하여 렌더링 된다...

1. 프록시란 프록시는 클라이언트와 서버 사이에 위치하여, 그들 사이의 HTTP 메시지를 정리하는 중개인의 역할을 한다. '프락시'라고 하는 것이 표준어인 것 같은데, 보편적으로 프록시라는 단어가 더 많이 쓰이고 있고 나도 프록시라는 말이 더 친숙해서 굳이 표준어를 고집하지는 않으려 한다. 프록시라는 단어를 인터넷에 검색한 결과나, 일전에 프록시 우회 프로그램을 활용했던 경험에 비추어 보았을 때, 프록시는 VPN과 비교하여 다소 부정적인 방식으로 활용이 되거나 보안성의 측면에서 떨어진다는 인식이 있는 것 같다. 2. 프록시는 게이트웨이와 어떻게 다를까? 웹 프록시 서버는 클라이언트와 서버 사이에서 트랜잭션을 수행하는 중개인이다. 프록시 서버는 HTTP 클라이언트의 요청을 받기 때문에 클라이언트 입장에서는..

이 글을 임시저장을 하며 조금씩 쓰고 있는 차에, 마침 오늘 코드 리뷰 도중에 경력직 신규 입사자 분께서 질문을 하셨다. "혹시 네트워크 환경이 좋지 않을 때도 대비하여 작업하시는 건가요?" 화면을 공유하시곤, 크롬 네트워크 창에서 있는지도 몰랐던 작은 드롭다운을 열어 '빠른 3G' 탭을 클릭했다. 그리곤 우리가 열심히 작업한 웹뷰 페이지를 새로고침 했더니 안타까운 모습이 나타났다. 기본적인 마크업 화면에 데이터가 받아와지지 않은 휑한 모습으로 뻘쭘하게 몇 초를 기다린 후에야 온전한 페이지가 나왔다. 서비스를 구상하고 실제로 구현할 때 꼭 염두에 두어야 하는 UX 벌집 모형이 있다. 바로 2004년 피터 모빌이 제시한 "User Experience Honeycomb"이다. Useful, Usable, D..