Dev/개발

브라우저 렌더링 과정 및 사이드 이펙트 살펴보기

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite) Par..

모던 웹 브라우저 - 크롬 브라우저 뜯어보기

구글 디벨로퍼 사이트의 글을 참고하여 작성된 글입니다 :) 브라우저가 동작하는 환경을 이해하기 위해서는 CPU, GPU, 메모리, 프로세스에 대한 이해가 있어야 합니다. 컴퓨터나 스마트폰에서 어플리케이션을 시작하면 운영체제의 메커니즘에 따라 CPU와 GPU가 앱을 실행합니다. 앱을 실행하면 프로세스가 생성되고, 프로그램은 해당 작업을 위해 스레드를 생성할 수도 있습니다. OS는 프로세스에 메모리 한 조각을 줘서 앱의 모든 상태 정보를 고유 메모리 공간에 저장할 수 있게 합니다. 앱을 종료하면 프로세스도 사라지고 OS가 메모리를 해제합니다. 프로세스는 다른 프로세스를 돌려서 별도의 작업을 수행하도록 OS에 요청할 수 있습니다. 두 프로세스 간 통신이 필요하다면 IPC(Inter Process Communi..

Typescript에서 undefined 값 다루기

Typescript로 개발할 때, undefined나 null이 예상되는 값일 경우 접근하거나 대입할 때 컴파일 에러를 마주칠 수 있습니다. ~ is possibly 'undefined'. 또는 Type 'undefined' is not assigniable to type ~ . 와 같은 메세지를 종종 마주할 수 있는데요, 5가지의 방법으로 이 상황을 다룰 수 있습니다. const setValue = (value: number) => value; const handleValue = (value?: number) => { setValue(value); }; 와 같은 코드가 있다고 해봅시다. number 타입의 인자만을 받아야 하는 함수에 number|undefined 타입을 넣으려고 하니 당연히 컴파일 에..

호이스팅? TDZ? var과 let/const? 확실하게 짚기

호이스팅이란? 코드에 선언된 변수 및 함수가 코드 상단으로 끌어올려지는 것처럼 동작하는 것을 말합니다. 이는 자바스크립트 파서가 내부적으로 끌어올려서 처리하는 것으로, 실제 메모리에서는 변화가 없습니다. 이러한 호이스팅이 발생하는 이유는 자바스크립트 해석기의 동작 방식 때문입니다. 자바스크립트 코드가 실행되면 파싱을 하게 되는데, 이때 코드를 해석해 전역 컨텍스트에 전역 변수 및 함수를 등록하려하기 때문에 끌어올려지는 듯한 현상이 발생하게 됩니다. 변수 호이스팅 console.log(name); // undefined var name = 'danmin'; 코드 상으로 보기에는 name 변수의 생성과 초기화가 console.log 이후에 이루어졌으니 에러가 발생할 것 같아 보이지만, undefined로 출..

요즘 핫한 SSR 프레임워크, Remix 사용해보기

https://remix.run/ Remix - Build Better Websites Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. remix.run 위의 리믹스 공식 사이트를 둘러봅시다! 세상에.. 공식 사이트가 이렇게 힙할 수 있나요...? 첫인상부터 매우 강렬하게 다가왔습니다. 이번 프로젝트에 Remix를 도입해봐야겠다고 다짐하게 된 이유는 바로 Nested Rout..

Next.js에서 redux toolkit 세팅하기

CSR에서 세팅하는 거랑 뭐가 다른데? Next.js는 서버 사이드에서 렌더링이 이루어집니다(SSR). 그래서 일반적인 CSR 환경에서 리덕스를 사용할 때와 달리 추가적인 작업이 필요합니다. 1. 서버 사이드에서 생성되는 리덕스 store와 이후 클라이언트 사이드에서 생성되는 리덕스 store는 다릅니다. 따라서 이 둘을 합쳐주는 로직이 필요합니다. 서버에서 생성한 store의 상태를 HYDRATE 라는 액션을 통해 client에 합쳐주는 리듀서를 작성해봅시다. action.payload에는 서버에서 생성한 store의 상태가 담겨있어 이 둘을 합쳐 새로운 client 측 store의 상태를 만들게 됩니다. // store/index.tsx import { combineReducers, } from "@..

맥북 마이그레이션이 필요 없을 정도로 간단한 "맥북 + 개발 환경 세팅" | iterm2 + ohmyzsh 테마 설정 (m1 기준)

1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 으로 들어가면 드래그 활성화를 할 수 있습니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다! 앱 expose 로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 비활성화해놓으면 은근 불편하더라고요ㅎㅎ 2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 :) 1. 필수적인 앱 크롬, 카카오톡, 노션, vsc, zo..