타입 가드 is를 사용하는 이유 타입 가드의 역할은 변수가 특정 타입인지의 여부를 확인하고, 이를 확실히 한 뒤 해당 타입을 안전하게 사용할 수 있도록 하는 것이다. 주로 is...로 시작하는 함수에서 타입 가드를 많이 사용하며, 이것이 문자열인지, 숫자인지 혹은 배열인지 등의 타입을 명시적으로 하기 위해 사용된다. 예시 코드를 보면서 함께 이해하자. function isNumber(value: any): value is number { return typeof value === 'number'; } function printNumber(value: any) { if (isNumber(value)) { console.log(value + 10); } else { console.log('이것은 숫자가 아닙..

쓰로틀링과 디바운싱이 뭘까?쓰로틀링과 디바운싱, 처음 들어보면 굉장히 낯선 단어일 수밖에 없다. 쓰로틀링과 디바운싱을 모르더라도 우리는 코딩 중에 이러한 개념을 이미 코드에 적용하고 있을 수도 있다. 특히, addEventListener를 사용했다면 말이다. 쓰로틀링과 디바운싱은 이벤트 핸들링에서 이벤트의 빈도를 제어하고, 너무 자주 발생하는 이벤트를 제한하는 목적으로 사용된다. 예를 들어서, 특정 함수를 실행하는 클릭 이벤트를 하나 구현했다고 해보자. 쓰로틀링과 디바운싱을 적용하지 않은 클릭 이벤트는 그냥 클릭할 때마다 특정 함수를 계속 실행하기만 할 것이다. 그런데, 클릭할 때마다 특정 함수를 실행하도록 만든 건데 이게 과연 잘못됐다고 할 수 있을까? (잘못됐다고 할 수 있다.) 만약, 세계에서 클릭..

Image를 쓰는 이유Next.js에서는 이미지를 넣을 때 태그를 사용하기도 하지만, 최적화를 위해 Image 컴포넌트를 주로 사용한다.그렇다면, 어떻게 이미지 최적화를 시켜주고 어떤 기능이 있는지 대표적인 3가지 기능을 살펴보자. 1. 이미지 사이즈 최적화Image 컴포넌트를 통해 이미지를 넣고 개발자 도구로 확인해 보면 img 태그 속성에 'srcset'이 있는 걸 확인할 수 있다.srcset 속성은 Image 컴포넌트가 디바이스 별로 미리 지정해 둔 크기에 맞춰 이미지를 다운로드할 수 있게 도와주는 속성이라고 생각하면 된다. 예를 들어, 우리가 아이폰 미니로 접속한다면 1920px 사이즈의 큰 이미지를 다운로드할 필요가 없다. 즉, 사용자의 디바이스 크기가 작다면 알아서 작은 크기에 맞는 이미지를..

불변성(Immutability)이란? 예전에 리액트 관련 글을 쓸 때 분명 불변성이라는 개념을 언급하며 이것에 대해 정리한 적이 있었다. 하지만, 언제 무슨 글에서 썼는지도 모르겠고 불변성이라는 개념은 리액트 문법을 다루기 위해 반드시 알아야 하는 개념이기 때문에 내가 까먹을 때마다 보기 위해서 이번 기회에 제대로 불변성 개념을 정리하는 글을 쓰려고 한다. 리액트는 데이터(참조값)가 변했을 때, 리렌더링이라는 것을 한다. 리렌더링 과정에는 업데이트된 부분만 가상 DOM에 렌더링 하여 이전 가상 DOM과 비교하고 달라진 부분만 실제 DOM에 반영시킨다. 즉, 성능 최적화를 위해 전체를 다시 렌더링 하는 게 아닌 달라진 부분만 렌더링 한다. 불변성을 이해하기 위해서는 이와 같은 리액트의 렌더링 방식을 이해하..

CSR, SSR, SSG는 뭐가 다를까?우리가 리액트를 공부할 때, CSR(클라이언트 사이드 렌더링)을 배우면서 SSR도 같이 들어본 적이 있을 것이다.CSR은 서버에서 비어있는 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 페이지를 그리는 방식이라면, SSR은 서버에서 렌더링 된 html 파일을 클라이언트에게 주면 클라이언트가 자바스크립트로 동적인 부분만 연결(Hydration)해 주는 방식이다. 그렇다면 SSG는 뭘까? SSR에서는 페이지에 접속할 때마다 html 파일을 렌더링 했지만, SSG는 이미 빌드하는 순간에 모든 페이지를 렌더링 한다. 즉, 클라이언트가 서버에게 페이지를 요청할 때 SSR은 "잠깐만! 렌더링 하고 금방 줄게!"라면, SSG는 "응~ 그럴 줄 알고 미리 만들어놨..