전체 글

이번 포스트는 저번 포스트에 이어 브라우저 렌더링 파이프라인(이하 렌더링 파이프라인)의 Pre-Paint 과정부터 이어 설명해보겠습니다. 포스트 작성이 늦어진 이유는, 여럿 있지만, 우선 제가 여행을 다녀왔고, 코딩테스트 캠프 참여 및 프로그래머스 데브코스 선발 준비 등 여러 일들을 같이 하다 보니 기술 공부 및 포스트 작성이 미뤄졌기 때문입니다.변명은 이 쯤만 하고..ㅜㅜ 시작해 보겠습니다. 먼저 렌더링 파이프라인의 과정을 다시 실펴봅시다.1. Parse: HTML을 파싱하여 DOM 트리 구축2. Style: CSS를 파싱하여 CSSOM 트리 구축 (+ JS 파싱)3. Layout: DOM 트리와 CSSOM 트리를 결합해 Layer Tree 구축4. Pre-Paint: 실제 칠해야 할 노드들만을 추리는..

이번 포스트에서는 웹 페이지에서 렌더링이 이루어지는 과정인 브라우저 렌더링 파이프라인에 대해 자세히 알아보겠습니다. 내용이 많이 길어서 2개 혹은 3개의 포스트로 나누어 작성할 예정입니다. 먼저 브라우저 렌더링 파이프라인에 대해 설명하겠습니다(이하 '렌더링 파이프라인').렌더링 파이프라인은 서버에서 받아온 데이터(HTML, CSS, JS, 미디어 데이터 등)를 화면에 그리는 과정을 말합니다. 예전 포스트에서 브라우저에 네이버나 구글 등의 어떤 홈페이지 주소를 입력했을 때 일어나는 일들을 정리하며 이 내용을 잠시 다뤘던 적이 있었는데, 이번 포스트에서는 렌더링 파이프라인 과정만 좀 더 자세히 다뤄볼 예정입니다. 참고로 크롬에서 동작하는 경우를 기준으로 설명하도록 하겠습니다. 예전 포스트에서 다룰 때는 ..

이번 포스트에서는 자바스크립트의 동작원리와 밀접한 관련이 있는 개념인 실행 컨텍스트에 대해 설명해 보겠습니다. 실행 컨텍스트를 잘 이해하면 호이스팅의 개념도 자연스럽게 이해할 수 있으며, 클로저의 동작 방식도 이해하기 쉬워집니다. 실행 컨텍스트는 자바스크립트 소스 코드를 실행하기 위해 생성되는 환경입니다. 좀 더 구체적으로 말하면, 소스 코드가 실행되는데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역입니다. 실행 컨텍스트는 스코프 내의 식별자들을 등록 및 관리하고, 코드의 실행 흐름을 제어한다는 2가지 큰 역할을 수행합니다. 아래에서 실행 컨택스트의 구성 요소와 역할에 대해 더욱 자세히 설명하겠습니다. 실행 컨텍스트는 크게 3가지 구성 요소를 가지고 있습니다. 바로 환경 레코드(Environm..

이번 포스트에서는 자바스크립트의 클로저에 대해 제가 이해한 내용을 설명해보려 합니다. 우선 클로저를 쉽게 설명하면, 함수가 자신이 탄생한 환경(스코프)을 기억하는 것을 말합니다. 이로 인해 자신이 탄생한 외부 함수의 스코프가 콜 스택에서 정리되어도 그 값을 기억하고 접근할 수 있습니다. 좀 더 깊이 있게 설명하면, 클로저는 특정 함수와 그 함수가 선언될 당시의 렉시컬 환경이 함께 기억되는 구조를 말합니다. 이 정의에는 헷갈리는 개념들이 다수 포함되어 있기 때문에, 아래에 좀 더 쉽게 풀어서 설명해 보겠습니다. 우선 예시 코드부터 살펴보겠습니다.function outerFunction(outerVariable) { return function innerFunction(innerVariable) { ..

정말 오랜만에 블로그에 글을 쓰러 나왔다.그 사이 참 많은 일이 있었다. 대학교 4학년을 마치고 졸업 유예를 신청하고 코드스쿼드에 다니면서 프론트엔드 개발자로 취업 준비를 했다. 지금도 취준은 현재진행형이다. 방탈출 작업 쪽으로는, 작년에 작은 규모의 신작 미궁게임을 하나 냈고 지금은 이벤트 형식의 오프라인 방탈출 테마를 하나 준비하고 있다. 퍼즐북도 하나 기획하고 있다. 바쁘게, 때로는 게으르게 살면서 늘 그렇듯이 다양한 일들을 겪었고, 이를 통해 아직도 나는 참 부족하구나, 갈 길이 멀구나 하는 생각이 들었다. 그렇지만 더 나은 미래를 위해, 그리고 내가 원하는 미래에 다가가기 위해 준비하는 이 과정이 마냥 힘들고 고통스러운 것만은 아니다. 나름 즐거움이 있기에 버틸 수 있다. 물론 마음은 불안하다...

1. 블록 범위 변수를 다시 선언할 수 없습니다타입스크립트 실습 도중 TS 파일을 JS로 변환했더니 블록 범위 변수 'a'을(를) 다시 선언할 수 없습니다라는 문구와 함께 오류가 발생하였습니다. 분명 변수를 다시 선언한 적이 없는데 왜 이런 오류가 나는지 검색해보니 원인은 다음과 같았습니다. 자바스크립트에선 JS 파일 각각이 하나의 모듈로 인식되므로, 서로 다른 JS 파일에 동일한 이름의 변수를 선언할 수 있습니다. 그러나 타입스크입트는 모든 TS 파일을 하나의 모듈로 보기 때문에 비록 다른 파일이라 하더라도 동일한 변수의 이름을 선언할 수 없다고 합니다. 이를 해결하는 방법은 파일 끝에 export {};코드를 추가하여 해당 파일을 독립된 모듈로 인식하도록 하거나, tsconfig.json 파일에"m..

MDN Web Docs에서 자바스크립트 언어에 대한 소개를 보면 첫 문장은 다음과 같다.JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다.우선 인터프리터, just-in-time 컴파일 언어는 나중에 살펴보기로 하고, 이번 포스트에서는 이 '일급 함수'라는 개념에 집중하고자 한다. 자바스크립트는 일급 함수를 지원하는 언어인데, 이게 무슨 말일까? 일급 함수란 무엇을 뜻하는 용어일까? 일급 함수란?먼저, MDN Web Docs에서 일급 함수에 대한 설명을 참고하면 다음과 같다.프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 합니다. 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들..

방탈출을 좋아하는 사람으로서 나조토키(謎解き)는 몇 년 전부터 쓰고 싶었던 글의 소재였으나, 미루다가 이제서야 써보게 됩니다. 글을 쓰기 전에 미리 밝힑 점은, 이 글의 모든 내용이 100프로 정확하다고 말할 순 없다는 점입니다. 필지는 일본에 살아본 적이 없어 나조토기 문화를 실제 피부로 느껴본 적이 없기에, 그저 인터넷과 관련 책 등 여러 매체를 통해 어렴풋이 알게 된 외국 문화를 제 언어로 정리하여 간단히 설명하는 것임을 감안해주셨으면 좋겠습니다. 잘못된 지식이 있다면 지적도 달게 받겠습니다. 그럼 지금부터는 편의상 반말로 적겠습니다.   우선 나조토키(謎解き)란 무엇일까?일본어를 그대로 직역하면 '수수께끼 풀이'라는 의미를 가진 이 단어는 말 그대로 수수께끼를 푸는 것을 말한다.좀 더 구체적으로 ..

올해 여름방학부터 독서를 꾸준히 해보기로 결정했다.그 동안 '독서를 해야하는데..' 라는 생각만 하고 계속 미뤄왔는데, 어떠한 일로 인해 지친 심신을 달래보고자 본격적으로 책을 읽어보기로 결심하고 매일 꾸준히 독서를 시작하였다. 확실히 책을 읽으니 전보다 마음에 여유가 늘어난 느낌이다. 그리고 완독한 책들을 간단하게 독후감으로 남겨보고자 '독후감' 카테고리를 새로 만들게 되었다. ⌜습관적인 생각을 깨는 생각의 습관 이야기 생각하는 타스케⌟ 독후감 가장 먼저 완독한 책이다. 이 책을 읽게 된 경위는, 오랜만에 코드숨 커뮤니티를 둘러보다가 어떤 분이 이 책의 내용의 일부를 공유해주신 것을 보고 흥미가 생겼기 때문이다. 이 책은 독자들의 기획력을 근본적으로 높여주기 위해 쓰여진 책으로, 습관적인 생각, 즉 고..

지금까지 나는 이 블로그를 개발자를 위한 '기술 블로그'로써 운영해왔다.그러다 보니 내 일상이나 취미에 관련된 이야기 등등 생각해둔 글의 소재가 많음에도 불구하고 지금까지 여러 핑계를 대며 글을 잘 포스팅하지 않는 내 모습을 보게 되었다. 사실 개발 외의 목적을 가진 개인용 블로그를 새로 만들어볼 생각도 해보았지만, 아무래도 하나의 블로그만을 사용하는 것이 나라는 사람을 더욱 잘 드러낼 수 있을 것 같아서, 새 개인용 블로그는 만들지 않기로 결론을 내렸다. 나는 미궁 게임 및 방탈출 문제 제작자로 3년간 활동을 이어오고 있다. 즉, 나는 취미로 방탈출 문제 및 퍼즐을 만들고, 이를 하나의 작품으로 묶어 사람들에게 지속적으로 공개하고 있다. 최근 '방탈출고사'가 많은 방탈출러와 업계 사람들에게 알려지면서 ..