Say Hello to Storybook#

리액트 컴포넌트 트리#

  - Pure Components
  ![2020-12-04-201204-image-0](./images/2020-12-04-201204-image-0.png)


  - Container - Presenter 패턴
  ![2020-12-04-201204-image-1](./images/2020-12-04-201204-image-1.png)




  - Redux
  ![2020-12-04-201204-image-2](./images/2020-12-04-201204-image-2.png)


  - MobX
  ![2020-12-04-201204-image-3](./images/2020-12-04-201204-image-3.png)

뷰가 깊숙히 숨어 있는 경우#

• 깊은 트리, nullable, 라우팅 등으로 인해 하나의 컴포넌트를 수정하기 위해 들여야하는 노력이 너무 크다.

스토리북이 하는 역할#

스토리북은 UI컴포넌트를 위한 간단한 scaffolder이자 UI 테스팅 툴이다.

각종 라우팅과 state들로 연결이 되어있는 React 뷰 컴포넌트들을 nomalize 시켜 isolate 시켜 독립적 환경에서 돌아갈 수 있도록 해주는 UI scaffolding 라이브러리이다.

  ![2020-12-04-201204-image-5](./images/2020-12-04-201204-image-5.png)


  ![2020-12-04-201204-image-6](./images/2020-12-04-201204-image-6.png)


  ![2020-12-04-201204-image-7](./images/2020-12-04-201204-image-7.png)

• 자체 웹팩이 있어서 핫 리로딩 지원

• 디자이너와 개발자, PM을 연결시켜주는 하나의 툴이다.

스토리북은 앱 밖에서 따로 돈다#

addons#

• actions : 이벤트 시 로그를 찍어줌

• links : 스토리에서 다른 스토리로 이동

• knobs : 동적으로 상태 변경

• console : 콘솔 찍어줌

• notes : 다른 사람에게 노트를 보여줄 수 있다.

서드 파티#

• backgrounds

• chapters

ts-node 절대경로#

ts-node 라이브러리 설치

yarn add -D typescript @types/node nodemon ts-node tsconfig-paths

package.json에서 nodemon으로 실행

"scripts": {  "dev": "nodemon -r ts-node src/index.ts" // nodemon src/index.ts로도 실행됨}

tsconfig.json에 baseUrl과 path 설정

"baseUrl": ".","paths": {  "src/*": ["src/*"]}

→ 이제 컴파일은 되지만, 컴파일된 파일을 node, ts-node가 인식하지 못한다.

→ tsconfig-paths 모듈로 가능

"scripts": {  "dev": "nodemon --exec ts-node -r tsconfig-paths/register src/index.ts"}

빌드 후에도 동작하게 하려면

1. ts-node 모듈을 통해 작동시키는 방법이 있다.

   "scripts": {    "start": "ts-node -r tsconfig-paths/register dist/index.js"    // 또는    // "start": "node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/index.js"}

   복사

2. tsconfig-paths의 bootstrap을 사용하는 방법.

   // tsconfig-paths-bootstrap.jsconst tsConfigPathFile = require('./tsconfig.paths.json');const tsConfig = require('./tsconfig.json');const tsConfigPaths = require('tsconfig-paths');
   tsConfigPaths.register({    baseUrl: tsConfig.compilerOptions.outDir,    paths: tsConfigPathFile.compilerOptions.paths,});

   복사

   // package.json"scripts" {  "start": "node -r ./tsconfig-paths-bootstrap.js dist/src/index.js"}

   복사

참고자료#

타입스크립트에서 절대경로 쓰기

typescript + node absolute path

ESLint#

• 포맷팅

• 코드 품질

규칙#

rules 로 추가 가능

• 자동으로 수정할 수 있는 규칙과 그렇지 않은 규칙이 있음.

• 규칙 목록 중 렌치 기호가 붙은 것이 자동으로 수정할 수 있는 규칙

• --fix 옵션으로 수정할 수 있다.

List of available rules

Extends#

• 여러 규칙을 모아놓은 것들

• eslint:recommended , eslint-config-airbnb-base , eslint-config-standard 등이 있다.

init#

--init 옵션으로 대화식으로 설정 가능

npx eslint --init
? How would you like to use ESLint?? What type of modules does your project use?? Which framework does your project use?? Where does your code run?? How would you like to define a style for your project?? Which style guide do you want to follow?? What format do you want your config file to be in?

Prettier와의 통합#

Integrating with Linters · Prettier

Create-React-App with TypeScript, ESLint, Prettier, and Github Actions

쿠키와 인증(Auth)#

쿠키란?#

📌 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억할 수 있는 기술

• 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각

• 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송

• 쿠키는 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용 (사용자의로그인 상태를 유지)

목적#

• 세션 관리

  서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등등의 정보를 관리함

• 개인화

  사용자 선호, 테마 등의 세팅

• 트래킹

  사용자의 행동을 기록하고 분석하는 용도

쿠키 생성하기#

HTTP 응답 헤더의 Set-Cookie key에 값을 설정할 수 있다.

function(req, res) {  res.writeHead(200, {    'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry'],  })}

쿠키 가져오기#

function(req, res) {  console.log(res.headers.cookie); // ['yummy_cookie=choco', 'tasty_cookie=strawberry']}

Session vs Persistent#

Session Cookie#

• 브라우저가 종료되는 경우 삭제 됨.

session storage는 브라우저 탭이 종료되면 삭제되는 반면, 쿠키는 브라우저 탭 간에도 공유되어 브라우저가 완전히 종료되어야 삭제된다. 참조

Persistent Cookie#

• 브라우저를 종료해도 사용자의 하드디스크에 저장.

• 삭제 시기 : Max-Age 속성에 명시된 기간 이후에, 또는 Expires 속성에 명시된날짜에 삭제, 또는 직접 삭제

Secure & HttpOnly#

Secure#

'Set-Cookie': ['hello_secure_cookie=hello-secure; Secure'],

Secure 쿠키는 HTTPS 프로토콜 상에서 암호화된 요청일 경우에만 전송된다. 하지만 이플래그가 실질적인 보안을 제공하는 것은 아니다.

HttpOnly#

'Set-Cookie': ['hello_http_only=hello-http; HttpOnly'],

HttpOnly 쿠키는 JavaScript의 document.cookie API로 접근할 수 없다. 서버에게 전송되기만 한다.

Path & Domain#

path#

path=/subpath 이런 식으로 쿠키를 전송하기 위하여 요청되는 URL 내에 반드시 존재해야 하는 URL 경로를 지정할 수 있다.

domain#

'Set-Cookie': ['hello_domain=hello-domain; Domain=o2.org'],

이렇게 지정하면 subdomain.o2.org 등등의 모든 서브 도메인에 대해서도 쿠키가 저장되게 된다.

Narkdown 프로젝트#

• notion-py 를 사용해서 Python 기반으로진행했었지만 Python을 잘 사용하지 않다보니 유지 보수하기 힘들었다.

• ts 기반 notion-api-worker 가 있어서 이를 사용하려고 한다.

목표#

• CLI로 page url 또는 database url을 입력 받고 notion의 컨텐츠를 파싱하여 md 파일을 생성하자. (CMS를 위해)

• 이후 웹 페이지를 만들 수 있으면 좋을 듯.

fetch vs axios#

프론트엔드에서 fetch, axios는 자주 사용했는데, node 환경에서 api 요청을 해보는것은 처음이라, 어떤 것을 사용할지 고민했다.

• axios는 node 환경에서도 동일하게 사용하는 것이 가능하다.

• fetch는 node-fetch 라는 라이브러리를 사용해야 한다. 이 라이브러리는 NodeJS 런타임 환경에서 window.fetch 를 사용하기 위한 최소한의 코드를 목표로 한다고 한다.

• 프론트엔드 환경에서 fetch 가 라이브러리 설치 없이 사용할 수 있는게 장점이라고생각하는데, 굳이 node-fetch를 사용할 필요는 없을 것 같아서, axios를 사용하기로결정했다. (보안적인 옵션도 axios가 많이 제공한다.)

https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/

ts-node#

• tsconfig 생성 명령어

tsc --init

• tsconfig 옵션 정리

8 Best Practices for Future-Proofing Your TypeScript Code

tsconfig 컴파일 옵션 정리

[TS / Node] TS + Node.js + Express + Babel(option) + eslint로 개발환경 세팅하기

Node.js 시작하기

notion-api-worker#

• get page 리턴

  • 기본 페이지

    {    "847c0e9b-15a1-42c9-9392-ca2f817c4eac": {        "role": "editor",        "value": {            "id": "847c0e9b-15a1-42c9-9392-ca2f817c4eac",            "version": 23,            "type": "page",            "properties": {                "title": [["hello"]]            },            "content": ["cc1dee2e-269d-4cd0-a5a3-b1c3d72edf61"],            "permissions": [                {                    "role": "editor",                    "type": "user_permission",                    "user_id": "b21a69b3-a19b-438c-b599-e850190836a3"                }            ],            "created_time": 1605604740000,            "last_edited_time": 1605604740000,            "parent_id": "ee7c0178-18cf-474e-a665-83f2432f545f",            "parent_table": "space",            "alive": true,            "created_by_table": "notion_user",            "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "last_edited_by_table": "notion_user",            "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "shard_id": 1004639,            "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"        }    },    "cc1dee2e-269d-4cd0-a5a3-b1c3d72edf61": {        "role": "editor",        "value": {            "id": "cc1dee2e-269d-4cd0-a5a3-b1c3d72edf61",            "version": 12,            "type": "text",            "properties": {                "title": [["1234"]]            },            "created_time": 1605604740000,            "last_edited_time": 1605604740000,            "parent_id": "847c0e9b-15a1-42c9-9392-ca2f817c4eac",            "parent_table": "block",            "alive": true,            "created_by_table": "notion_user",            "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "last_edited_by_table": "notion_user",            "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "shard_id": 1004639,            "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"        }    }}

    복사
  • Database 하위 페이지

    {  "15afa14b-8f9c-4b6c-97cc-46375c775cc5": {    "role": "reader",    "value": {      "id": "15afa14b-8f9c-4b6c-97cc-46375c775cc5",      "version": 25,      "type": "page",      "properties": [Object],      "created_time": 1605517260000,      "last_edited_time": 1605602760000,      // 부모 Id      // 데이터베이스의 경우 collection_id      "parent_id": "e543505f-be64-46cd-9c55-07117dc85a92",      // 부모      "parent_table": "collection",      "alive": true,      "created_by_table": "notion_user",      // user_id      "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",      "last_edited_by_table": "notion_user",      "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",      "shard_id": 1004639,      "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"    }  },
      // 부모가 space가 아닌 경우 부모  "acc3dfd0-339e-4cac-b5ba-ae8673fddfad": {    "role": "reader",    "value": {      "id": "acc3dfd0-339e-4cac-b5ba-ae8673fddfad",      "version": 106,      "type": "collection_view_page",      "view_ids": [Array],      "collection_id": "e543505f-be64-46cd-9c55-07117dc85a92",      "format": [Object],      "permissions": [Array],      "created_time": 1600223639505,      "last_edited_time": 1605594780000,      "parent_id": "ee7c0178-18cf-474e-a665-83f2432f545f",      "parent_table": "space",      "alive": true,      "created_by_table": "notion_user",      "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",      "last_edited_by_table": "notion_user",      "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",      "shard_id": 1004639,      "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"    }  }}

    복사
  • 메타데이터가 있는 페이지

    {    "1c7c8eb6-ec3b-42fb-b950-63abd3c9bd61": {        "role": "reader",        "value": {            "id": "1c7c8eb6-ec3b-42fb-b950-63abd3c9bd61",            "version": 6,            "type": "page",            // 데이터베이스 하위에 있는 페이지의 메타데이터 부모 데이터베이스에 접근해서 가져와야 함.            "properties": {                "RXKJ": [                    // 여러 태그 목록이 문자열 ',' 로 구분되어 옴.                    ["hello,bye"]                ],                "fb_;": [["🛠 In Progress"]],                "qS^H": [["Test"]],                "title": [["asdf"], ["의 사본"]]            },            // 전체 페이지, 작은 페이지 사이즈일 때 함께 옴, 없으면 안옴.            "format": {                "page_icon": "🚡",                // link인 경우는 링크                "page_cover": "https://user-images.githubusercontent.com/1440854/79684011-6c948280-822e-11ea-9e23-1644903796fb.png",                // 업로드인 경우 https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d53a69fd-a3e1-4914-b014-63158a1078a2/blue.png                // 기본 제공인 경우 /images/blue.png => https://notion.so/images/blue.png로 접근 가능                "page_cover_position": 0.5,                "page_full_width": true,                "page_small_text": true            },            "created_time": 1605594821014,            "last_edited_time": 1605603000000,            "parent_id": "e543505f-be64-46cd-9c55-07117dc85a92",            "parent_table": "collection",            "alive": true,            "copied_from": "15afa14b-8f9c-4b6c-97cc-46375c775cc5",            "created_by_table": "notion_user",            "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "last_edited_by_table": "notion_user",            "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "shard_id": 1004639,            "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"        }    },    "acc3dfd0-339e-4cac-b5ba-ae8673fddfad": {        "role": "reader",        "value": {            "id": "acc3dfd0-339e-4cac-b5ba-ae8673fddfad",            "version": 106,            "type": "collection_view_page",            "view_ids": [                "be43c1c8-dd64-4cfb-9df9-efd97d8af60a",                "cfabb574-6051-47ed-9c14-ea3a1b6aead7",                "87cdd007-d8d6-464c-82f2-c7a4153bab0d",                "c09c2c36-0419-4bff-8195-bf6c2b897d6f",                "e0d39abd-4d7b-4c5c-9ce9-4984a3315932",                "83b3d2a6-6f63-4940-987d-1142e51da175"            ],            "collection_id": "e543505f-be64-46cd-9c55-07117dc85a92",            "format": {                "page_cover_position": 0.6            },            "permissions": [                {                    "role": "editor",                    "type": "user_permission",                    "user_id": "b21a69b3-a19b-438c-b599-e850190836a3"                },                {                    "role": "reader",                    "type": "public_permission"                }            ],            "created_time": 1600223639505,            "last_edited_time": 1605594780000,            "parent_id": "ee7c0178-18cf-474e-a665-83f2432f545f",            "parent_table": "space",            "alive": true,            "created_by_table": "notion_user",            "created_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "last_edited_by_table": "notion_user",            "last_edited_by_id": "b21a69b3-a19b-438c-b599-e850190836a3",            "shard_id": 1004639,            "space_id": "ee7c0178-18cf-474e-a665-83f2432f545f"        }    }}

    복사

• get table 리턴

  • table로 된 페이지

    [    {        "id": "11acfd54-2ee8-4640-b3fb-1782ce9b8caa",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Basic Blocks"    },    {        "id": "084bbefe-7f25-481a-bfbb-e8aff2152e4f",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Copy of Basic Blocks"    },    {        "id": "24786a8a-3d7d-4dfd-854d-ac40559c9f82",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Code Blocks"    },    {        "id": "74bbb810-9a68-499f-8f12-25dcce846f02",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Embed Blocks"    },    {        "id": "2df7176f-d58f-4c42-921b-55e9bbf0e92e",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Table Blocks"    },    {        "id": "30894478-96e6-4f95-9095-d84be27a82a9",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Page Blocks"    },    {        "id": "cee84696-242a-4f6e-953a-2c7ecb8b1603",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Advanced Blocks"    },    {        "id": "64c69eaf-268a-4076-bf48-d8ee5f2ca8c8",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Linked Page"    },    {        "id": "6a8383c0-0a12-4859-9edc-2fe41e9cbe75",        "Status": "🖨 Published",        "Category": "Test",        "Name": "Recursive embed Image"    },    {        "id": "d10a7885-58f0-4ba9-b9a4-fb357ab796e8",        "Status": "🖨 Published",        "Category": "Example",        "Name": "Example Pages"    },    {        "id": "1c7c8eb6-ec3b-42fb-b950-63abd3c9bd61",        "Tags": ["hello", "bye"],        "Status": "🛠 In Progress",        "Category": "Test",        "Name": "asdf의 사본"    },    // 완전히 안지웠을 때는 빈문자열로 옴.    {        "id": "e8b450e4-f686-4d0b-9212-6241e6099a0b",        "Tags": [""],        "Status": "",        "Category": ""    }]

    복사

• blocks

Accept vs Content-Type#

• Accept : 클라이언트가 받을 수 있는 응답 형식을 지정함.

• Content-Type : 클라이언트가 보내는 콘텐츠의 형식

TypeScript#

목표#

• TypeScript로 타이핑을 잘하면, 런타임 전에 미리 오류를 알 수 있습니다.

• 코드의 구현자가 사용자에게 의도를 전달할 수 있다.

타입 시스템#

• 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템

• 컴파일러가 자동으로 타입을 추론하는 시스템

☝ 타입스크립트는 타입을 명시적으로 지정할 수 있고 명시적으로 지정하지 않으면컴파일러가 자동으로 타입을 추론한다.

명시적 타입 vs 추론#

// 함수의 리턴 타입은 number로 추론된다.// 하지만 매개변수의 타입을 명시적으로 지정하지 않아서, any로 추론된다.function f(a) {    return a * 38;}
// 사용자는 a가 any 이기 때문에 사용법에 맞게 함수를 실행했지만, 사용자는 예측하지 못한 결과를 얻게 된다.console.log(f(10)); // 380console.log(f('Mark')); // NaN

이것은 noImplicitAny 옵션을 통해 방어할 수 있다. 타입을 명시적으로 지정하지 않은 경우 any 로 추론되는 변수가 있으면 컴파일 에러가 발생한다.

// 매개변수의 타입을 명시적으로 지정했다.// 명시적으로 지정하지 않은 리턴 타입은 number로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 사용자는 사용법에 맞게 숫자형을 사용해서 함수를 실행했지만,// 실제로는 함수의 리턴이 undefined로, undefined + 5가 실행되어 NaN이 출력된다.
console.log(f(5)); // 190;console.log(f(-5) + 5); // NaN

strictNullChecks 옵션을 켜면 모든 타입에 자동으로 포함되어 있는 null 과 undefined 를 제거해준다.

// 이 함수의 리턴 타입은 number | undefined로 추론된다.function f(a: number) {    if (a > 0) {        return a * 38;    }}
// 해당 함수의 리턴 타입은 number | undefined 이기 때문에,// 타입에 따르면 컴파일 에러가 발생한다.// 컴파일 에러를 고치기 위해 사용자와 작성자가 의논해야 한다.console.log(f(-5) + 5); // error TS2532: Object is possibly 'undefined'

하지만 가급적이면 명시적으로 리턴 타입을 지정하는 것이 좋다.

noImplicitReturns 옵션을 켜면 함수 내의 모든 코드의 줄기가 값을 리턴하지 않으면 컴파일 에러를 발생시킨다.

// error TS7030: Not all code paths return a valuefunction f(a: number) {    if (a > 0) {        return a * 38;    }}

이로 인해 리턴 타입을 명시하고, 모든 줄기에 return 을 직접 하도록 구현자에게강제할 수 있다.

매개변수에 object가 들어오는 경우#

function f(a) {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
console.log(f({ name: 'Mark', age: 38 })); // 이름은 Mark이고, 연령대는 30대 입니다.console.log(f('Mark')); // 이름은 undefined이고, 연령대는 NaN대 입니다.

JavaScript에서는 제약사항으로 알려주지 않기 때문에 런타임에서 오류를 파악할 수있다.

• Object literal type

function f(a: { name: string, age: number }): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

• 나만의 타입을 만드는 방법

interface PersonInterface {  name: string;  age: number;}
type PersonTypeAlias = {  name: string;  age: number;}
function f1(a: PersonInterface): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}
function f2(a: PersonTypeAlias): string {  return `이름은 ${a.name}이고 연령대는 ${Math.floor(a.age / 10) * 10)}대 입니다.`}

interface vs type alias#

structural vs nominal type system#

타입스크립트는 structural 타입 시스템을 사용한다.

• structural type system : 구조가 같으면, 같은 타입이다.

• nominal type system : 구조가 같아도 이름이 다르면, 다른 타입이다.

interface IPerson {    name: string;    age: number;    speak(): string;}
type PersonType = {    name: string;    age: number;    speak(): string;};

• typescript를 nominal 처럼 쓰는 꼼수 ? - 아직 잘 이해를 못함

  type PersonID = string & {readonly brand: unique symbol};
  function PersonID(id: string): PersonID {    return id as PersonID;}
  function getPersonById(id: PersonID) {}
  getPersonById(PersonID('id-aaaaaa'));getPersonById('id-aaaaaa');

  복사

• function

  type EatType = (food: string) => void;
  interface IEat {    (food: string): void;}

  복사
• array

  type PersonList = string[];
  interface IPersonList {    [index: number]: string;}

  복사
• intersection

  interface ErrorHandling {    success: boolean;    error?: {message: string};}
  interface ArtistsData {    artists: {name: string}[];}
  type ArtistsResponseType = ArtistsData & ErrorHandling;
  interface IArtistsResponse extends ArtistsData, ErrorHandling {}

  복사
• union

  interface Bird {    fly(): void;    layEggs(): void;}
  interface Fish {    swim(): void;    layEggs(): void;}
  type BirdType = {    fly(): void;    layEggs(): void;};
  type FishType = {    swim(): void;    layEggs(): void;};
  // union은 type alias를 사용해야 한다.type PetType = Bird | Fish;
  // 에러 발생interface IPet extends PetType {}class Pet implements PetType {}
  // 가능interface IBird extends BirdType {}class IFish implements FishType {}

  복사

Declaration Merging - interface#

• 중복되는 이름으로 선언되었을 때 머지되는 기능은 interface에서만 제공된다.

• type은 중복시에 에러가 발생한다.

• 이는 외부 유틸에서 사용자가 원하는 타입을 추가해서 사용하는 것이 가능하다.

interface MergingInterface {    a: string;}
interface MergingInterface {    b: string;}
let mi: MergingInterface;// mi: { a: string, b: string }

언제 type을 사용하고 언제 interface를 사용하는가

• 의미적으로, 역할적으로 type alias를 타입에 별칭을 붙일 때 사용한다.

• 즉, 이미 있는 타입에 별칭을 붙여 다른 이름으로 부르고 싶을 때, 이미 있는 타입을 union으로 조합할 때 사용한다.

• 그 외에 새로운 타입을 생성할 때 interface를 사용한다.

  • 실제 동작 상의 차이는 Merging에서의 차이가 가장 중요하다.

서브 타입과 슈퍼 타입#

집합의 관계에서 포함되는 쪽이 서브 타입, 포함하는 쪽이 슈퍼 타입이다.

let sub1: 1 = 1;let sup1: number = sub1;sub1 = sup1; // error! Type 'number' is not assignable to type '1'.
let sub2: number[] = [1];let sup2: object = sub2;sub2 = sup2; // error! Type '{}' is missing the following the properties from type 'number[]': length, pop, push, concat, and 16 more.
let sub3: [number, number] = [1, 2];let sup3: number[] = sub3;sub3 = sup3; // error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.
let sub4: number = 1;let sup4: any = sub4;sub4 = sup4;
let sub5: never = 0 as never;let sup5: number = sub5;sub5 = sup5; // Type 'number' is not assignable to type 'never'.
class Animal {}class Dog extends Animal {    eat() {}}
let sub6: Dog = new Dog();let sup6: Animal = sub6;sub6 = sup6; // Property 'eat' is missing in type 'Animal' but required in type 'Dog'.

☝ any 와 never 는 추후에 다시 학습

같거나 서브 타입인 경우 할당이 가능하다. ⇒ 공변#

let sub7: string = '';let sup7: string | number = sub7;
// object - 각각의 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.let sub8: {a: string; b: number} = {a: '', b: 1};let sup8: {a: string | number; b: number} = sub8;
// array - object와 마찬가지let sub9: Array<{a: string; b: number}> = [{a: '', b: 1}];let sup9: Array<{a: string | number; b: number}> = sub9;

함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다 ⇒ 반병#

class Person {}class Developer extends Person {    coding() {}}class StartupDeveloper extends Developer {    burning() {}}
function tellme(f: (d: Developer) => Developer) {}
// Developer => Developer 에다가 Developer => Developer 를 할당하는 경우tellme(function dToD(d: Developer): Developer {    return new Developer();});
// Developer => Developer 에다가 Person => Developer 를 할당하는 경우// 반병tellme(function pToD(d: Person): Developer {    return new Developer();});
// Developer => Developer 에다가 StartupDeveloper => Developer 를 할당하는 경우// strictFunctionType으로 에러 표시 가능tellme(function sToD(d: StartupDeveloper): Developer {    return new Developer();});

any#

• 입력은 마음대로

• 함수 구현이 자유롭게 ⇒ 자유가 항상 좋은 건 아니다.

unknown#

• 입력은 마음대로

• 함수 구현은 문제 없도록

타입 추론 이해하기#

• let과 const의 타입 추론 (+ as const)

• as const

let a = 'Mark'; // stringconst b = 'Mark'; // 'Mark' => literal type
let c = 38; // numberconst d = 38; // 38 => literal type
let e = false; // booleanconst f = false; // false => literal type
let g = ['Mark', 'Haeun']; // string[]const h = ['Mark', 'Haeun']; // string[]
const i = ['Mark', 'Haeun', 'Bokdang'] as const; // readonly ['Mark', 'Haeun', 'Bokdang']

• best common type (가장 공통적인 타입을 추론해낸다)

let j = [0, 1, null]; // (number | null)[]const k = [0, 1, null]; // (number | null)[]
class Animal {}class Rhino extends Animal {}class Elephant extends Animal {}class Snake extends Animal {}
let l = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const m = [new Rhino(), new Elephant(), new Snake()]; // (Rhino | Elephant | Snake)[]const n = [new Animal(), new Rhino(), new Elephant(), new Snake()]; // Animal[]const o: Animal[] = [new Rhino(), new Elephant(), new Snake()]; // Animal[]

• Contextual Typing - 위치에 따라 추론이 다름

// Parameter 'e' implicitly has an 'any' type.const click = (e) => {    e; // any};
document.addEventListener('click', click);document.addEventListener('click', (e) => {    e; // MouseEvent});

Type Guard로 안전함을 파악하기#

typeof Type Guard - 보통 Primitive 타입일 경우#

• typeof로 primitive 타입을 걸러낼 수 있다.

function getNumber(value: number | string): number {    value; // number | string    if (typeof value == 'number') {        return value;    }    value; // string    return -1;}

instanceof Type Guard - Error 객체 구분에 많이 쓰인다.#

class NegativeNumberError extends Error {}
function getNumber(value: number): number | NegativeNumberError {    if (value < 0) return new NegativeNumberError();
    return value;}
function main() {    const num = getNumber(-10);
    if (num instanceof NegativeNumberError) {        return;    }
    num; // number}

in operator Type Guard - object의 프로퍼티 유무로 처리하는 경우#

interface Admin {    id: string;    role: string;}
interface User {    id: string;    emain: string;}
function redirect(user: Admin | User) {    if ('role' in user) {        routeToAdminPage(user.role);    } else {        routeToHomePage(user.email);    }}

literal Type Guard - object의 프로퍼티가 같고, 타입이 다른 경우#

interface IMachine {    type: string;}
class Car implements IMachine {    type: 'CAR';    wheel: number;}
class Boat implements IMachine {    type: 'BOAT';    motor: number;}
function getWheelOrMotor(machine: Car | Boat): number {    if (machine.type === 'CAR') {        return machine.wheel;    } else {        return machine.motor;    }}

custom Type Guard#

function getWheelOrMoter(machine: any): number {    if (isCar(machine)) {        return machine.wheel;    } else if (isBoat(machine)) {        return machine.motor;    } else {        return -1;    }}
function isCar(arg: any): arg is Car {    return arg.type === 'CAR';}
function isBoat(arg: any): arg is Boat {    return arg.type === 'BOAT';}

Conditional Type#

• `Item T`

  interface StringContainer {    value: string;    format(): string;    split(): string[];}
  interface NumberContainer {    value: number;    nearestPrime: number;    round(): number;}
  type Item1<T> = {    id: T;    container: any;};
  const item1: Item1<string> = {    id: 'aaaaaa',    container: null, // container type에 any를 사용했기 때문에 null을 넣는 것도 가능하다.};

  복사
• `Item T` - T가 string이면 StringContainer, 아니면 NumberContainer

  type Item2<T> = {    id: T;    container: T extends string ? StringContainer : NumberContainer;};
  const item2: Item2<string> = {    id: 'aaaaaa',    container: null, // Type 'null' is not assignable to type 'StringContainer'.};

  복사
• `Item T` - T가 string이면 StringContainer, number면 NumberContainer, 아니면 사용 불가

  type Item3<T> = {    id: T extends string | number ? T : never;    container: T extends string        ? StringContainer        : T extends number        ? NumberContainer        : never;};
  const item3: Item3<boolean> = {    id: true, // Type 'boolean' is not assignable to type 'never'.    container: null, // Type 'null' is not assignable to type 'never'.};

  복사
• `ArrayFilter T`

  type ArrayFilter<T> = T extends any[] ? T : never;type StringsOrNumbers = ArrayFilter<string | number | string[] | number[]>;

  복사

  
  

1:11:12 까지 시청 ...

SSR and Next.js#

서버 사이드 렌더링(SSR)이란 서버에서 코드를 실행해서 렌더링하는 것을 말한다.

다음의 장점을 가진다.

• 검색 엔진 최적화(SEO)

• 빠른 첫 페이지 렌더링

짧은 히스토리#

• (AJAX가 없던 시절) 서버에서 전체 HTML을 만드는 방식

• AJAX의 등장

  • 비동기적으로 서버와 브라우저가 데이터를 교환하여 페이지 전체를 다시 렌더링하지 않고, 갱신이 필요한 일부만 렌더링할 수 있게 됨.

  • 동적으로 HTML을 만들면서 JavaScript의 역할이 늘어나게 됨.

• SPA로..

• JavaScript MVC Framework의 등장

  • Backbone.js, Ember, Knockout ...

  • MVC Framework의 끝판왕 AngularJS

• React의 등장

  • Virtual DOM을 이용

  • Flux 아키텍쳐

  • 서버 사이드 렌더링 지원

    • (배경) V8 엔진, Node.js 등으로 서버에서도 JS 기반의 클라이언트의 라이브러리를 동작할 수 있음

서버 사이드 렌더링은 두 번 렌더링 한다. 서버 사이드에서 생성된 HTML에는 이벤트 속성이 없다. 두 번째 렌더링할 때 이미 서버 사이드 렌더링이 되어 있다면, 생성된 DOM에 오직 이벤트 속성만 추가한다.

왜 React와 서버 사이드 렌더링인가?

리액트와 서버 사이드 렌더링#

• renderToString : 문자열을 반환하여 HTML에 DOM을 추가한다.

• hydrate : 돔 요소에 필요한 이벤트 처리 함수를 연결한다.

📌 나중에 직접 해봐야겠다..!

Next.js#

Next는 서버사이드 렌더링에 특화된 프레임워크다.

• 서버사이드 렌더링의 장점

  • SEO

  • 초기 로딩 성능 개선

• 이미지 리소스 최적화

• 정적 파일 서빙

  • 배너 이미지, 아이콘 등등에서 사용함

• 코드 스플리팅 자동화

• 웹팩 기반 환경 (create-react-app과 달리 웹팩 설정 변경이 쉽다.)

서버에서 생성된 데이터 전달하기#

• getInitialProps : 구버전에서 사용한 data fetching 방식

• getStaticProps : 빌드 시 고정되는 값으로 빌드 이후에는 변경이 불가능하다.

  • static data를 위해 (변경되지 않을 데이터. 블로그 포스트 등등 ...)

• getServerSideProps : 빌드와 상관없이 매 요청마다 데이터를 서버로부터 가져온다.

  • 매번 변경될 수 있는 데이터를 위해 (상품 목록. 실시간 뉴스 등등 ...)

• getStaticPaths : 빌드 타임 때 정적으로 렌더링할 경로 설정.

모바일 사파리 디버깅#

• 아이폰을 맥북에 연결한다.

• 아이폰에서 디버깅하고자 하는 웹페이지를 Safari에 띄운다.

• 맥북에서 Safari를 실행한다.

• 개발자용 > iPhone > Safari 웹 페이지 선택

  

• 요소, 콘솔, 소스, 네트워크 등 사파리의 개발자 도구로 디버깅할 수 있다.

  

Debugging Your iPhone Mobile Web App With Safari Dev Tools

모바일 사파리를 맥의 Chrome에서 디버깅하기#

모바일 Safari를 맥의 Chrome에서 디버깅하는 방법은 다음에 알아봐야겠다.

Jon Sadka - How to debug an issue in Chrome for iOS using remote debugging

리액트#

• 리액트는 내부적으로 컴포넌트가 반환하는 엘리먼트들을 트리 형태로 관리하고 표현한다.

• 이를 Virtual-DOM으로 부르는데, 이는 JavaScript 일반 객체이다. (Plain Object)

• 기존 VanillaJS는 UI를 명령형으로 작성해야 하지만, React는 선언형으로 UI를 작성할 수 있다.

컴포넌트#

• 컴포넌트는 내부에서 관리하는 상태 값인 state 와 부모 컴포넌트에서 내려 주는속성 값 props 를 가진다.

• 컴포넌트는 state , props 가 변경되면 render() 함수가 실행되어 화면을 갱신한다.

• UI 데이터(상태값과 속성값)로 뷰를 렌더링하는 것이 리액트의 핵심이다.

• setState 는 비동기로 동작한다.

리액트의 렌더링 과정#

• 컴포넌트의 Props나 State의 변경이 있을 때, 컴포넌트의 이전 상태 엘리먼트와 새로 만들어진 엘리먼트를 비교하고 실제 DOM의 업데이트 여부를 결정한다. 비교하여찾은 변경 점에 대해서만 갱신한다.

• 컴포넌트의 setState 메서드가 수행되면, 해당 컴포넌트를 Dirty 체크하고, 다음이벤트 루프에서 배치 작업으로 대상 컴포넌트들의 엘리먼트를 렌더링한다. (비동기 )

• 이러한 리액트의 렌더링 과정을 다음과 같이 쪼갤 수 있다.

  • 변경 점을 찾는 Reconciliation의 Diffing 알고리즘 (render or reconciliation phase)

  • 변경 점을 실제 UI에 적용하는 ReactDOMComponent.updateComponent (commit phase)

Reconciliation: The diffing algorithm#

Reconciliation은 어떤 변경에 대한 전/후 엘리먼트 트리를 비교(Diff)하여, 갱신이필요한 부분만을 찾아 업데이트하는 것을 의미한다. 이를 통해 브라우저의 DOM 조작을최소화시킨다.

다시 정리

• render() 에서 새로운 엘리먼트 트리를 생성

• 이전 엘리먼트 트리와 비교하여 변경 점을 찾아 업데이트

그런데 Diff 알고리즘은 O(n^3)의 시간복잡도를 가지고 있다. 리액트는 다음의 방법으로 O(n)에 근사한 휴리스틱 알고리즘을 구현하였다.

• 다른 타입의 두 엘리먼트는 다른 트리를 만들 것이다.

• 같은 레벨의 엘리먼트에 key 프로퍼티를 통해 변경되지 않아야 할 엘리먼트를 표시한다.

☝ 휴리스틱 알고리즘 : 직관에 의존하는 알고리즘. 즉 휴리스틱은 보통 합리적인실행 시간을 가지지만 그것이 항상 그렇다는 어떠한 추론 과정이나 증명이 없다.

같은 위치에서 엘리먼트의 타입이 다른 경우

1. 기존 트리를 제거 후 새로운 트리를 만든다.

2. 기존 트리 제거 시 트리 내부(하위)의 엘리먼트/컴포넌트들은 모두 제거한다. (컴포넌트의 경우 제거되면서 componentWillUnmount() 가 실행됨.) 이전 트리의 모든 state가 사라진다.

3. 새로운 트리를 만들 때 내부 엘리먼트/컴포넌트들도 모두 새로 만든다. (컴포넌트의 경우 componentDidMount() 가 실행됨.)

같은 위치에서 엘리먼트의 타입이 같은 경우

1. 엘리먼트의 attributes 를 비교한다.

2. 변경된 attributes 만 업데이트한다.

3. 자식 엘리먼트들에 diff 알고리즘을 재귀적으로 적용한다.

같은 위치에서 엘리먼트가 컴포넌트를 표현하고 그 타입이 같은 경우

1. 컴포넌트 인스턴스 자체는 변하지 않는다. (state가 유지된다.)

2. 컴포넌트 인스턴스의 업데이트 전 라이프사이클 메서드 들이 호출되며 props가 업데이트 된다.

3. render() 를 호출하고 컴포넌트의 이전 엘리먼트 트리와 다음 엘리먼트 트리에대해 diff 알고리즘을 재귀적으로 적용한다.

자식 엘리먼트 재귀

• 리액트는 자식 엘리먼트에 대한 반복적인 비교를 할 때 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.

• 정렬과 같은 상황에 취약하다.

keys

• 이를 해결하기 위해 자식 엘리먼트들이 key를 가지고 있다면 key를 통해 기존 트리와 이후 트리의 자식 들이 일치하는지 확인한다.

Avoid Reconciliation#

• 컴포넌트의 불필요한 렌더링을 피하기 위해 사용한다.

  • ShouldComponentUpdate 함수가 return false 하도록 한다.

  • 컴포넌트가 PureComponent 를 상속받도록 한다.

  • 함수형 컴포넌트를 React.memo() 로 감싸서 export 한다.

☝ 핵심은 해당 컴포넌트가 state , props 가 변경 되었을 때만 렌더링하도록하는 것이다. 이것이 가능한 것은 리액트가 컴포넌트 렌더링 결과를 메모이징하는것이다.

가장 좋은 케이스는 같은 부모 컴포넌트에 의해 같은 props 로 자주 렌더링 될때이다. 이전 메모이징 결과와 props 가 같다면 내부를 비교하지 않고 메모이징된결과를 사용한다.

하지만 반대로 props 가 다른 경우가 대부분이라면, 이전 props 와 다음 props 비교를 하고, 컴포넌트 렌더링을 하기 때문에 불필요한 props 비교를 하게 만든다. 또한 메모이징은 메모리를 사용하기 때문에 남용해선 안된다.

처음부터 성능에 최적화된 애플리케이션을 설계하는 것 자체가 비효율적이다. 하지만 컴포넌트를 적절히 분리하는 것은 중요하다. 컴포넌트를 적절히 분리하여 이슈를빠르게 파악하고 대응할 수 있도록 하는 것이 전략이다.

UI 런타임으로서의 React

재조정 (Reconciliation) - React

성능 최적화 - React

React 렌더링과 성능 알아보기 : TOAST Meetup

React.memo() 현명하게 사용하기

리액트 훅(Hook)#

훅(Hook)이란?#

• 함수 컴포넌트에서 React state를 연동(hook into)할 수 있게 해주는 함수.

• 즉 상태를 함수 컴포넌트에 동기화 해준다. (이 말은 상태가 함수 컴포넌트 외부에서 관리되고 있다는 의미를 내포함.)

동기#

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

  • render props, HOC와 같은 패턴은 래퍼를 깊게 만든다.

• 라이프사이클 메서드 들이 컴포넌트를 복잡하고 이해하기 어렵게 만든다.

• 클래스보다 함수가 직관적이다. this 바인딩

훅의 규칙#

☝ 리액트는 훅이 호출되는 순서에 의존한다. (상태를 식별하기 위해 호출 순서를 사용하는 것으로 보인다.)

• 최상위(at the Top Level)에서만 훅을 호출해야 한다. (반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하지 말라)

  // 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다if (name !== '') {    useEffect(function persistForm() {        localStorage.setItem('formData', name);    });}

  복사

• 오직 React 함수 내에서 Hook을 호출해야 한다. (일반 JS 함수에서 호출하지 말라)

☝ 리액트의 훅은 렌더링 되는 개별 컴포넌트의 한 수준 위의 외부 공간(실행 컨텍스트)에 연결 리스트(배열)형태로 저장되는 데이터( state , setter )이다. 다른 컴포넌트와 공유되지 않고, 리렌더링되는 컴포넌트에서 엑세스할 수 있다.

useState#

useState에서 반환된 setter 함수를 사용하면, React에게 내부적으로 액션을 dispatch 하게 되고, 이 컴포넌트가 new state를 가지고 있고, 업데이트 해야 된다는 것을 알린다.

React hooks: not magic, just arrays

useEffect#

• 렌더링 이후(DOM 업데이트 후)에 수행할 "side effect"를 수행할 수 있다.

Fiber#

• virtualDOM의 증분 렌더링을 활성화하기 위함.

• requestIdleCallback 을 활용.

• 컴포넌트 트리에 대한 추가 정보를 포함하기 위한 내부 객체

• 내장 스택에 의존한 동기식 재귀 모델에서 링크드 리스트와 포인터가 있는 비동기식모델로 알고리즘을 재구현함.

  • 호출 스택을 마음대로 중단하고 스택 프레임을 수동으로 조작하기 위해

React Fiber Architecture - A Deep Dive

웹팩#

• 웹팩은 static module bundler이다.

• 웹팩은 엔트리 포인트부터 프로세스하여, 의존하고 있는 모듈에 대해 내부적으로 dependency graph를 구성하고, 최종적으로 하나의 번들 파일을 구성한다 .

  • Entry : dependency graph를 구성하기 시작할 진입점

  • Output : 번들된 결과 파일

  • Loader : 기본적으로 js, json 파일만 가져올 수 있지만, loader는 웹팩이 다른유형의 파일도 모듈로서 가져오고 dependency graph를 구성할 수 있도록 해준다. ex) jpg 이미지, 폰트, ...

  • Plugin : 번들링 최적화, 자원 관리, 환경 변수의 주입 등 다양한 목적의 환경 설정을 위해 사용.

  • Mode : production | development 등 환경에 따라 웹팩을 설정할 수 있다.

HTTP#

HTTP 버전별 차이점#

HTTP의 진화

HTTP/0.9#

• 초기 버전

• GET 이 유일한 메서드

• HTTP 헤더가 없었고 HTML 파일만 전송될 수 있었음.

• 상태나 오류 코드도 없었다.

HTTP/1.0#

• 버전 정보가 요청으로 전송되기 시작 ex) GET /mypage.html HTTP/1.0

• 상태 코드가 응답의 시작 부분에 붙어 전송됨.

• HTTP 헤더 개념이 도입됨.

  • HTML 파일 외에 다른 문서를 전송할 수 있게 됨.

HTTP/1.1#

• HTTP의 첫 번째 표준 버전

• 커넥션을 재사용할 수 있게 됨.

  • 원본 문서 내에 임베드된 리소스를 위해서, 기존에 연결된 커넥션을 다시 사용할수 있음.

• 파이프라이닝으로 첫 번째 요청에 대한 응답이 완전히 전송되기 전에 두 번째 요청전송을 가능하게 했다.

HTTP/2#

• 이진 프로토콜 (1.1은 텍스트 프로토콜)

• Multiplexing

☝ multiplexing vs pipelining

• pipelining은 순서가 중요하다 → Head Of Line blocking 문제

• multiplexing은 순서가 중요하지 않다.

HTTP 1.1 vs HTTP.2 vs HTTP/2 with Push - Manning

HTTP 상태 코드#

1xx : 정보 응답#

2xx : 성공 응답#

• 200 : OK. 요청 성공

• 201 : Created. 생성 요청 성공

• 202 : Accepted. 요청 수락

• 204 : 성공했으나 반환할 것이 없음

3xx : 리다이렉션 메시지#

• 300 : Multiple choices. 여러 리소스에 대한 요청 결과 목록

• 301 , 302 , 303 : Redirect. 리소스 위치가 변경된 상태

• 304 : Not modified. 리소스가 수정되지 않았음

4xx : 클라이언트 에러 응답#

• 400 : Bad Request. 요청 오류

• 401 : Unauthorized. 권한 없음

• 403 : Forbidden. 요청 거부

• 404 : Not Fount. 리소스가 없는 상태

5xx : 서버 에러 응답#

• 500 : 서버가 요청을 처리 못함

• 501 : Not Implemented. 서버가 지원하지 않는 요청

• 503 : Service Unavailable. 과부하 등으로 당장 서비스가 불가능한 상태

브라우저 렌더링 과정#

• DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.

• 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만( 메타 태그, 스크립트태그, display: none 등이 제외됨. )포함됩니다.

  ☝ visibility: hidden , display: none 은 다르다.

• 레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다. (경우에 따라 "리플로우" 라고도 한다.)

• 마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다. (경우에 따라 "리페인트"라고도 한다.)

브라우저 렌더링 최적화#

오늘날 대부분의 기기는 초당 60회(60fps)의 빈도로 화면을 새로 고친다. 따라서각 프레임에는 16ms 가량의 시간만 할당된다. (1초 / 60 = 16.66ms) 실제로 브라우저가 실행 준비를 하는 시간이 있기 때문에 10ms 내에 모든 작업을 완료해야 한다.

픽셀 파이프라인#

• 자바스크립트 : 자바스크립트로 시각적 변화를 일으키는 작업. CSS Animation, Transitions, Web Animation API 역시 포함.

• 스타일 계산 : 어떤 스타일 규칙(CSS)을 어떤 요소에 적용할지 계산하는 프로세스

• 레이아웃 : 화면에서 얼마의 공간을 차지하고 어디에 배치되는지 계산하기 시작할 수 있다.

• 페인트 : 픽셀을 채우는 프로세스. 텍스트, 색, 이미지, 경계 및 그림자 등 모든 시각적 부분을 그리는 작업. 레이어라고 하는 다수의 표면에서 수행

• 합성 : 페이지의 여러 부분이 여러 레이어로 그려졌기 때문에 페이지가 정확히렌더링 되려면 정확한 순서로 화면에 그려야 한다.

☝ 코드가 파이프라인의 어떤 부분을 트리거 하는지 정확히 이해하는 것이 중요

1. JS / CSS > 스타일 > 레이아웃 > 페인트 > 합성#

레이아웃 너비, 높이, 왼쪽 또는 상단 위치 등 요소의 기하학적 형태에 영향을 주는 "layout" 속성을 변경하면 브라우저가 다른 모든 요소를 확인하고 페이지에 대해 "리플로우"를 수행해야 한다. 영향을 받은 영역이 있으면 다시 페인트하고, 다시합성해야 한다.

2. JS / CSS > 스타일 > 페인트 > 합성#

페이지의 레이아웃에 영향을 주지 않는 배경 이미지, 텍스트 색상, 그림자 등의 "paint only" 속성을 변경하면 브라우저가 레이아웃을 건너뛰고 페인트 작업, 합성 작업을 수행한다.

3. JS / CSS > 스타일 > 합성#

레이아웃과 페인트가 필요 없는 속성을 변경하면 브라우저가 합성 단계로 건너 뛴다. 가장 이상적이고 비용이 가장 적게 드는 버전이다. ( 현재 부합되는 속성은 transform , opacity 2가지 뿐이다. )

☝ CSS 속성이 어떤 버전을 트리거할 지 알고 싶은 경우 CSS 트리거를 참조. 또는 이 링크 참조

참고자료#

• https://twitter.com/lydiahallie/status/1231255327032541185

Rendering Performance | Web Fundamentals | Google Developers

이미지 레이지로드#

Lazy-loading images

The Complete Guide to Lazy Loading Images | CSS-Tricks

성능 측정#

브라우저 기준#

DOMContentLoaded 이벤트#

• HTML과 CSS 파싱이 끝나는 시점

• 렌더 트리를 구성할 준비가 된(DOM 및 CSSOM 구성이 끝난) 상황

load 이벤트#

• HTML 상에 필요한 모든 리소스가 로드된 시점

그리고 이 두 이벤트가 발생하는 시점은 내비게이션 타이밍 API를 사용하거나 크롬 개발자 도구를 통해 확인할 수 있다.

사용자 기준#

FP(First Paint)#

• 흰 화면에서 화면에 무언가가 처음으로 그려지기 시작하는 순간이다.

FCP(First Contentful Paint)#

• 텍스트나 이미지가 출력되기 시작하는 순간이다.

FMP(First Meaningful Paint)#

• 사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간이다. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고 스타일이 적용되어 주요 콘텐츠를 읽을 수 있다.

TTI(Time to Interactive)#

• 자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간이다.

성능 최적화

로딩 최적화#

블록 리소스(또는 렌더링 차단 리소스) 최적화#

브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있다. 블록 리소스에는 CSS 와 JavaScript가 포함된다.

CSS 최적화#

• DOM 트리는 파싱하면서 순차적으로 구성된다.

• CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다.

• 즉 CSSOM 트리가 구성되지 않으면 렌더 트리를 만들지 못하고, 렌더링이 차단되어있다.

• 따라서 CSS는 항상 HTML 문서 최상단에 배치하는 것이 좋다.

• 또한 특정 조건(세로 모드, 인쇄 모드 등)에서만 필요한 CSS는, 해당 경우에만 로드할 수 있도록 미디어 쿼리를 사용하여 최적화한다.

  미디어 쿼리를 사용하지 않는 경우 (최적화 전)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" /><link href="portrait.css" rel="stylesheet" />

  복사

  미디어 쿼리를 사용하는 경우 (최적화 후)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" media="print" /><link href="portrait.css" rel="stylesheet" media="orientation:portrait" />

  복사

• 외부 스타일시트를 가져올 때 사용하는 @import 문은 스타일시트를 병렬로 다운로드 할 수 없기 때문에 로드 시간이 늘어날 수 있다.

JavaScript 최적화#

• JavaScript는 DOM트리와 CSSOM 트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을차단하는 블록 리소스이다.

• <script> 태그를 만나면 스크립트가 실행되며 그 이전까지 생성된 DOM에만 접근할수 있다.

• 그리고 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단된다.

• 이러한 이유로 JavaScript를 렌더링 차단 리소스라고 한다.

리소스 요청 수 줄이기#

이미지 스프라이트#

• 웹 페이지에서 아이콘 마다 다른 이미지를 사용할 경우 리소스 요청이 아이콘 마다발생

• 여러 아이콘을 묶어 하나의 이미지로 만들고, CSS의 background-position 속성을사용해 부분 이미지를 사용하는 방법으로 리소스 요청 수를 줄일 수 있다.

CSS, JavaScript 번들링#

• 모듈 기반 개발 이전에는 여러 리소스 파일을 분리해서 가져왔었다.

• Webpack, Rollup 등의 번들러를 사용하여 여러 개의 모듈 파일을 하나로 묶어서 1개파일로 만들어 리소스 요청 수를 줄일 수 있다.

내부 스타일 시트 ?#

☝ 내부 스타일 시트는 리소스 요청 횟수를 줄일 수 있는 방법이지만, 리소스 캐시를 사용할 수 없어서 HTML에 CSS가 매번 포함된다.

작은 이미지를 HTML, CSS로 대체#

• 아이콘 이미지 개수가 적은 경우, 이미지를 Base64로 변환한 URI를 사용하여 HTML, CSS에 포함해서 사용할 수 있다.

  <img    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAAHBJREFUKBVjYBimICwsLAaEsXmPGV0QqnAeUNxfW1v7/tWrVy8hq0HRgKQ4CahoIxDPQ9cE14CseNWqVUtAJoMUo2tiBFkXGRmp9/fv3zNAZhJIMUgMBmAGMTMzmyxfvhzhPJAmmCJ0Gp8cutqhwAcASWgwk+79LiQAAAAASUVORK5CYII="/>

  복사

라이브러리의 필요한 함수만 가져오기#

import _ from 'lodash';
_.array(...);_.object(...);

⇒

import array from 'lodash/array';import object from 'lodash/fp/object';
array(...);object(...);

HTML 마크업 최적화#

• 중첩을 단순하게 구성한다.

Avoid an excessive DOM size

압축(Minify)하여 사용#

• 웹팩 플러그인과 같은 도구의 도움으로 불필요한 주석이나 공백을 모두 삭제하고, 난독화 하는 등 코드의 용량을 압축할 수 있다.

렌더링 최적화#

requestAnimationFrame#

• 시각적 변화가 브라우저에서 정확한 시간(프레임 시작 시)에 수행되길 원한다.

• 이를 보장하는 유일한 방법은 requestAnimationFrame 을 사용하는 것이다.

• setTimeout 또는 setInterval 은 콜백이 정확한 시간에 수행되는 것을 보장하지않는다.

☝ setTimeout 과 setInterval 의 콜백은 (macro)Task queue 를 사용. requestAnimationFrame 은 AnimationFrame 사용.

스타일 계산의 범위와 복잡성 줄이기#

• DOM 변경, 요소 추가 및 제거, 속성 변경, 클래스 또는 애니메이션은 모두 브라우저가 요소 스타일을 재계산하고 많은 경우에 레이아웃 단계(리플로우)를 거치게 만든다.

• 스타일 계산 단계의 첫 부분은 매칭 선택기 집합을 생성하는 것이다. (요소, 클래스 , ID, pseudo 선택자 등등)

• 스타일 계산의 두 번째 단계는 매칭된 선택기에서 스타일 규칙을 가져와서 요소의마지막 스타일을 계산하는 과정이 포함된다.

• 따라서 선택기의 복잡성을 줄이고 (BEM 등의 방법론 적용) 스타일을 계산해야 하는요소의 수를 줄여야 한다.

크고 복잡한 레이아웃 및 스래싱 피하기#

• 레이아웃의 범위는 일반적으로 전체 문서로 지정된다.

  • 너비, 높이, 왼쪽 또는 상단 등 "기하학적 속성"의 변경은 모두 레이아웃이필요하다.

  • flexbox 를 사용한 레이아웃이 float 를 사용한 레이아웃 보다 비용이 적다.

• DOM 요소의 수는 성능에 영향을 주므로 가급적 레이아웃 트리거를 피해야 한다.

• 강제 동기식 레이아웃 및 레이아웃 스래싱을 피해야 한다.

  ☝ 원래 레이아웃은 비동기이나, 특정 상황에서 동기적으로 레이아웃이 발생할 수있다. 이것을 강제 동기식 레이아웃 이라 한다.

  function logBoxHeight() {    box.classList.add('super-big');
      // Gets the height of the box in pixels    // and logs it out.    console.log(box.offsetHeight);}

  복사

  • 위의 함수는 스타일을 변경한 후에, 높이를 요청한다.

  • 높이를 구하는 것 역시 레이아웃을 실행해야 하는 것이다.

  • 스타일 계산과 레이아웃을 동시에 실행하면 잠재적 병목 현상이 발생할 수 있으므로 일반적으로 바람직하지 않다.

  function resizeAllParagraphsToMatchBlockWidth() {    // Puts the browser into a read-write-read-write cycle.    for (var i = 0; i < paragraphs.length; i++) {        paragraphs[i].style.width = box.offsetWidth + 'px';    }}

  복사

  • 위의 함수는 각 루프의 반복이 스타일 값 box.offsetWidth 를 읽은 다음, 즉시 paragraphs[i].style.width 를 업데이트 한다.

  • 이전 반복에서 레이아웃이 변경되었기 때문에 box.offsetWidth 을 조회하는 것역시 강제 동기식 레이아웃을 유발한다. 이를 아래와 같이 수정할 수 있다.

  // Read.var width = box.offsetWidth;
  function resizeAllParagraphsToMatchBlockWidth() {    for (var i = 0; i < paragraphs.length; i++) {        // Now write.        paragraphs[i].style.width = width + 'px';    }}

  복사

페인트 복잡성 단순화 및 페인트 영역 줄이기#

• transform 또는 opacity 를 제외한 모든 속성 변경은 항상 페인트를 트리거 한다.

• 가능한 하위 노드의 DOM을 조작하고 스타일을 변경

  • DOM이 작고 깊이가 얕을수록 계산이 빠르다.

  • 불필요한 래퍼 엘리먼트를 제거한다.

• 영향 받는 엘리먼트 제한