TIL

Next.js 기초

2022.09.30

Next.js의 Image 컴포넌트

Next.js의 <Image/>는 자체적으로 많은 최적화 기능을 제공한다.

  • 레이지 로딩
  • 이미지 사이즈 최적화
  • placeholder (CLS 방지)

리모트 이미지를 사용할 경우 해당 이미지를 불러오는 cdn의 도메인을 next.config.js 파일에 명시해주어야 한다.

Next.js에서 404 에러 페이지 만들기

pages 경로에 404.js 또는 404.tsx 파일을 만들어주면 된다.

Next.js redirects

next.config.js에서 간단하게 리다이렉트를 설정해줄 수 있다.

async redirects() {
  return [
    {
      source: '/',
      destination: '/about',
      permanent: true,
    },
  ];
}

2022.09.28

React - Context api의 단점 : 불필요한 리렌더링

Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 있다. Context api가 엄연히 존재함에도 불구하고 수많은 상태 관리 라이브러리들이 쓰이는 데에는 이유가 있는 것.

2022.09.25

브라우저 렌더링 과정 (with Critical Rendering Path)

웹 브라우저의 렌더링 엔진은 크게 다음과 같은 단계를 거쳐 화면을 그린다.

  1. 파싱 - HTML을 파싱하여 DOM Tree를 그린다.
  2. 파싱 - CSS와 스타일 요소를 파싱하여 CSSOM Tree를 그린다.
  3. 렌더 트리 생성 - DOM Tree와 CSSOM Tree를 합쳐 렌더 트리를 만든다.
  4. Layout(Reflow) - 요소의 위치와 크기 등을 계산하여 브라우저에 배치한다.
  5. Paint(Repaint) - 배치된 픽셀 정보를 이용하여 실제 화면에 요소를 그린다.

위와 같은 과정을 Critical Rendering Path라고 부른다.

2022.09.14

nodejs 연습

nodejs를 이용해서 간단한 함수나 템플릿 만드는 방법을 연습 중. 순수 node만으로 module 타입의 ES6 자바스크립트를 실행할 경우, import해오는 js파일에도 반드시 확장자명을 붙여줘야 한다.

2022.09.12

Typescript - 타입 가드

런타임 환경에서 실행했을때에만 확인할 수 있는 요소 정보의 경우 type guard를 통해 미연에 방지하는 것이 좋다. unknown은 any와 비슷하게 사용할 수 있지만 에러를 던진다. 즉, 타입 가드를 유도한다.