Joon Blog RSS Feed

Simple Feature Flag

Mon, 23 Oct 2023 00:00:00 GMT

0. 작성하게 된이유

(배경) 회사에서는 AWS AppConfig를 통해 Feature Flag를 사용하고 있음
(계기) 사이드 프로젝트를 하던 와중, 일정 시간이 지나면 배포없이 뷰를 변경하고 싶었다.
Object Storage(ncloud)를 통해 Feature Flag(only Boolean)를 만들고, 프로젝트에 적용한 경험을 공유하고 싶어서

TL;DR

Object Storage를 활용해서 Flag Store를 만들어서 사용하자

children Props 활용해서 FeatureFlagWrapper 만들자

<FeatureFlagWrapper flagKey={FLAG_KEY}>
  {({ flagValue }) => {
    if (flagValue) return <True />;
    return <False />;
  }}
</FeatureFlagWrapper>

1. Feature Flag란?

Feature Flag는 소프트웨어 개발 및 운영에서 사용되는 기술적인 개념입니다.
Feature Flag는 Prod 환경에서 실시간으로 소프트웨어의 기능을 활성화 또는 비활성화하거나, 다양한 조건에 따라 특정 사용자 또는 그룹에게 특정 기능을 표시하도록 하는 기능을 제공합니다. 이것은 소프트웨어 업데이트, 테스트, 배포, 사용자 경험 관리, A/B 테스트 및 롤아웃 전략을 관리하는 데 사용됩니다.
간단히 말하면, Toggle 기능이라고 생각하면 된다 (기능 On/Off)

2. Flag Store 만들기

다른 플랫폼(AWS, 핵클)의 기능을 사용하면, 쉽게 적용할 수 있었지만, 사이드 프로젝트에 적용하기에는 공수 / 비용이 많이 들어 간단하게 Object Storage에 Bucket Store(flag.json)을 만든다.
```
// /test-bucket/feature-flag/flag.json

{
  "main-show" : true
}
```

3. Flag 값을 가지고 오기 위해(S3 연동) Node API 생성

Browser에서 Client를 통해 가져오지 않는 이유는 Cloud Access/Secret 키가 노출되기 때문에, 이러한 작업은 서버에서 처리

NextJs - Page(App) API를 활용해서 S3 접근해서 가져오기

// Client 생성
const s3 = new S3Client({
  endpoint: endpoint,
  region: region,
  credentials: {
    accessKeyId: access_key,
    secretAccessKey: secret_key,
  },
});

// Bucket 접근
const getFeatureFlg = async () => {
  const response = await s3.send(
    new GetObjectCommand({
      Bucket: bucket,
      Key: `${FEATURE_FLAG_FOLDER}/${FLAG_FILE_NAME}`,
    }),
  );

  const str = (await response.Body?.transformToString()) || "";

  return JSON.parse(str);
};

// API (/feature-flag - GET METHOD)
const { flagKey } = req.query;
const data = await getFeatureFlg();

const flagValue = data[flagKey];

return res.json({
  data: {
    flagValue,
  },
});

4. Browser Component에서 Flag 값 사용하기

React-Query를 통해 FeatureFlag Hook를 만들어서 재사용한다.

export interface FeatureFlagProps {
  flagKey: FLAG_KEY_TYPE;
}

export const useFeatureFlag = ({ flagKey }: FeatureFlagProps) => {
  return useQuery({
    queryKey: ["featureFlag"],
    queryFn: () => getFeatureFlg({ flagKey }),
    select: (response) => response.data?.flagValue,
    refetchOnWindowFocus: false,
    refetchInterval: false,
  });
};

5. 원하는것은 Flag값이 True/False에 따라 컴포넌트를 보여주고 싶다

children Props를 활용해서 Wrapper를 만들어보자!!!

interface FeatureFlagProps {
  flagValue: boolean;
}
interface FeatureFlagWrapperProps {
  flagKey: FLAG_KEY_TYPE;
  children: (props: FeatureFlagProps) => ReactNode;
}

const FeatureFlagWrapper = ({ flagKey, children }: FeatureFlagWrapperProps) => {
  const { data = false, isLoading } = useFeatureFlag({
    flagKey,
  });

  if (isLoading) {
    return <Loader />;
  }

  if (typeof children !== "function") {
    throw new Error("children must be a function");
  }

  return (
    <>
      {children({
        flagValue: data,
      })}
    </>
  );
};

export default FeatureFlagWrapper;

6. FlagWrapper 사용하기

Key를 Props를 받아 flagValue를 사용할 수 있다.

<FeatureFlagWrapper flagKey={FLAG_KEY.MAIN_SHOW}>
  {({ flagValue }) => {
    if (flagValue) return <True />;
    return <False />;
  }}
</FeatureFlagWrapper>

Next WebServer가 죽는 이슈

Fri, 30 Jun 2023 00:00:00 GMT

0. 작성하게 된이유

Next 13.4.x 버전에서 WebServer가 죽는 이슈가 있었다.
해결하는 과정을 정리하기전에 누군가 도움이 되었으면 좋겠다는 생각에 작성하게 되었다.

1. 문제 발생

Nextjs Package Update (13.4.x 버전)
Feature 배포 후, 5 ~ 12시간 시간 경과 후, 갑자기 WebServer가 느려지면서 죽는 현상이 발생했다.
쿠버네티스가 재시작을 하지 못한다?(링크)

2. 해결방법

// next.config.js
{
...
  experimental: {
    appDir: false 
    // this also controls running workers https://github.com/vercel/next.js/issues/45508#issuecomment-1597087133, which is causing
    // memory issues in 13.4.4 so until that's fixed, we don't want this.
  },
}

3. 로그

1. 에러 로그

Error: connect ETIMEDOUT 127.0.0.1:57665
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
  errno: -60,
  code: 'ETIMEDOUT',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 57665
}

2. 에러 로그

Uncaught Exception 	
{
  errorType: 'Error',
  errorMessage: 'socket hang up',
  code: 'ECONNRESET',
  stack: [
    'Error: socket hang up',
    '    at connResetException (node:internal/errors:717:14)',
    '    at TLSSocket.socketOnEnd (node:_http_client:526:23)',
    '    at TLSSocket.emit (node:events:525:35)',
    '    at TLSSocket.emit (node:domain:489:12)',
    '    at endReadableNT (node:internal/streams/readable:1359:12)',
    '    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)',
  ],
}
 Unknown application error occurred Runtime.Unknown

문제 원인(추정)

CPU / Memory 사용량이 급격히 증가하다가, WebServer가 죽는 현상이 발생했다.
주요한 원인은 과도하게 processChild.js 프로세스가 생성되기 때문이다.
- 부모 프로세스와 processChild.js 프로세스 사이에 TCP 연결이 설정
- 부모 프로세스가 내부에 대기 중인 요청을 processChild.js 프로세스로 재전송/재시도

참고

이미지 업로드시, 회전하는 이슈

Tue, 30 May 2023 00:00:00 GMT

0. 작성하게 된이유

AI로 이미지를 보냈는데…? 이미지가 돌아가서 왔다…
이미지에는 여러가지의 정보가 들어있구나..

TL;DR

모바일(or 디지털 카메라)로 찍은 이미지는 여러 Meta(촬영 일시 및 시간)정보가 들어있다.
- Orientation 값으로 인해 이미지가 돌아가는것이다.
이미지 MetaData를 바꿔주자
- blueimp-load-image 이용하여 MetaData를 수정할 경우, Image 손실이 크다(약 50%이상)
- File → Blob → File 같은 Flow Image 손실 적게 MetaData를 Reset 할 수 있다.

1. 이미지 Exif 정보란?

정의 : Exif는 "Exchangeable Image File Format"의 약자로, 디지털 카메라와 다른 디지털 이미지 캡처 장치에서 이미지와 함께 추가 정보를 저장하기 위해 사용되는 표준 형식
Exif의 정보
- 촬영 일시 및 시간
- 카메라 모델 및 제조사
- 렌즈 정보
- 노출 시간 및 조리개 값
- 촬영 모드 (자동, 수동 등)
- 화이트 밸런스 설정
- GPS 위치 정보
- 이미지 해상도 및 크기
문제의 Exif - orientation
- 사진을 어떻게 찍던 모바일에서는 찰떡같이 바로 보여준다.
- 이미지를 업로드하면, S3/Image 서버는 아래의 정보를 읽어서 이미지를 저장하는것같다…?

2. 이미지 Exif(Orientation)를 수정하자

이미지 MetaData데이터를 읽기 위해서는 라이브러리(blueimp-load-image)를 이용하자
문제의 이미지 Exif 정보 (274 = Orientationn 정보)

코드

let file = e.target.files[0];

loadImage(
  file,
  function (img, data) {
    if (data.imageHead && data.exif) {
			// Orientation 정보를 Reset
      loadImage.writeExifData(data.imageHead, data, 'Orientation', 1)
      img.toBlob(function (blob) {
        loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
						// newBlob(Orientation 정보 reset)
        })
      }, 'image/jpeg', 1 // 이미지 Quality)
    }
  },
  { meta: true, orientation: true }
)

3. Exif 메타정보가 변경된 이미지는 화질이 너무 떨어진다

이미지 손실(2.7MB → 968KB)이 너무 심각해서.. 이미지를 다루는 서비스에서는 사용하기 어렵다.
간단한 프로필 이미지같은 경우에는 충분히 사용가능

4. Meta 정보가 필요없다면, Reset

이미지 Meta정보가 필요없다면, 아래와 같이 변경 할 수 도 있다.

File → Blob → File로 변경하면 손실 없이 Meta정보를 변경(Reset)할 수 도 있다.

export const convertToNewFile = (file: File) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    const image = new Image();

    const handleError = (error: unknown) => {
      reject(error);
    };

    const handleBlob: BlobCallback = (blob) => {
      if (!blob) return resolve(file);

      const newFile = new File([blob], file.name, { type: blob.type });
      resolve(newFile);
    };

    const handleLoad = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d")!;

      canvas.width = image.width;
      canvas.height = image.height;

      ctx.drawImage(image, 0, 0);

      canvas.toBlob(handleBlob, file.type, 1);
    };

    reader.addEventListener("load", (event) => {
      image.addEventListener("load", handleLoad);
      image.addEventListener("error", handleError);

      image.src = event.target!.result as string;
    });
    reader.addEventListener("error", handleError);

    reader.readAsDataURL(file);
  });
};

참고

Jest 테스트 코드 작성 시 겪었던 문제들

Sat, 20 May 2023 00:00:00 GMT

글을 작성하게 된 이유

test 코드 작성하면서 겪었던 문제들을 정리하고자 한다.

Image onLoad/onError 비동기 테스트

기능 : Image 태그를 활용하여 이미지 크기를 구한다
flow :
- Image를 생성한다.
- Image의 src를 설정한다.
- onLoad와 onError를 테스트한다.

const getImageSize = (url: string): Promise<ImageSize> => {
  return new Promise((resolve, reject) => {
    const img = new Image();

    const handleImageLoad = () => {
      const { width, height } = img;

      resolve({ width, height });
    };

    const handleError = (err: ErrorEvent) => {
      reject(new Error("invalid url"));
    };

    img.addEventListener("load", handleImageLoad);
    img.addEventListener("error", handleError);

    img.src = url;
  });
};

테스트 코드
- Image를 MockImage로 대체한다.
- MockImage의 src를 설정하면 path에 따라 onLoad와 onError가 호출된다.

const MOCK_IMAGE_SIZE = { width: 100, height: 100 };
const InvalidUrlError = new Error("invalid url");
class MockImage {
   onload: (() => void) | null = null;
   onerror: (() => void) | null = null;
   width = 0;
   height = 0;

   set src(url: string) {
      if (url === "invalid-url") {
         this.triggerError();
         return;
      }

      this.triggerLoad();
   }

   addEventListener(event: string, callback: () => void) {
      if (event === "error") {
         this.onerror = callback;
         return;
      }

      this.onload = callback;
   }

   triggerLoad() {
      this.width = MOCK_IMAGE_SIZE.width;
      this.height = MOCK_IMAGE_SIZE.height;
      this.onload?.();
   }

   triggerError() {
      this.onerror?.();
   }
}
global.Image = MockImage as unknown as typeof Image;

describe("getImage", () => {
   it("image에 src를 넣으면 width와 height를 반환한다.", async () => {
      const size = await getImageSize("valid-url");

      expect(size).toEqual(MOCK_IMAGE_SIZE);
   });

   it("invalid한 url을 넣으면 에러를 반환한다.", async () => {
      try {
         await getImageSize("invalid-url");
      } catch (err) {
         expect(err).toEqual(InvalidUrlError);
      }
   });
});

ENV 테스트

기능 : Prod 환경에서는 새창을 띄우고, Dev 환경에서는 현재창에서 띄운다.
flow :
- process.env.NODE_ENV를 사용하여 환경변수를 확인한다.
- process.env.NODE_ENV가 production이면 _blank로, development이면 _self로 설정한다.

<Link target={process.env.NODE_ENV === 'production' ? '_blank' : '_self'}>link</Link>

테스트 코드
- process.env.NODE_ENV를 OldEnv로 대체한다.

describe('link', () => {
    it("production", () => {
        const oldEnv = process.env.NODE_ENV;
        process.env = {
            ...process.env,
            NODE_ENV: 'production'
        }
        
        const { getByText } = render(<Link />);
      
        expect(getByText("Link")).toHaveAttribute("target", "_blank");
    })
   
   it("development", () => {
        const oldEnv = process.env.NODE_ENV;
        process.env = {
            ...process.env,
            NODE_ENV: 'development'
        }
        
        const { getByText } = render(<Link />);
      
        expect(getByText("Link")).toHaveAttribute("target", "_self");
    })
   
});

Git WorkFlow 중복 개선

Fri, 31 Mar 2023 00:00:00 GMT

0. 작성하는 이유

현재 회사에서 모노레포 환경(프론트, 백)에서 git Action을 이용하여 CI/CD 구성하고 있다.
CI 같은 경우, 프로젝트명만 다르고 동일한 Workflow동작한다.
프로젝트가 많아질수록 중복되는 Workflow가 생성되고 있다.

TL;DR

dorny/paths-filter@2 plugIn을 이용하여 path를 filter하자
workflow_call 이벤트를 활용하여 WorkFlow를 재사용할 수 있다.
- workflow_call Job이다.. 제약사항을 확인하자
WorkFlow 적용 레포(링크)

1. Git Action란?

Git 이벤트를 Hooking 하여, 정의된 Workflow를 실행시켜준다.(링크)

해당 워크 플로우는 Main 브런치로 Pull_Request 이벤트가 발생하면 jobs test job이 실행하여 1을 보여준다.

name: A Service CI
on:
  pull_request:
    branches:
      - main

jobs:
  test:
		runs-on: ubuntu-latest
		steps:
		- name: echo number
			run: echo 1

2. Workflow실행시, 프로젝트명을 알 수 없을까?

workflow trigger 환경을 branch 뿐만 아니라 paths 조건을 추가 할 수 있다.
- 아래 workflow는 service/** 변경시에만 작동된다
- 하지만 service의 foo/bar 폴더가 바뀌었는지는 확인하지 못한다.
```
name: A Service CI
on:
  pull_request:
    branches:
      - main
		paths:
			- service/**
```
dorny/paths-filter@2 action plugin을 사용하자

paths-filter를 사용하면 filter의 output으로 관리 할 수 있다.


---
jobs:
    path:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: dorny/paths-filter@v2
              id: filter
              with:
                  filters: |
                      foo:
                        - service/foo/**
                      bar:
                        - service/bar/**
            - if: steps.filter.outputs.foo == 'true'
              run: echo foo

            - if: steps.filter.outputs.bar == 'true'
              run: echo bar

if step에서 환경변수를 정해주자

set-output을 사용하고 싶었지만, git workflow에서는 권장하지 않는다(링크)


---
env:
    SERVICE: ''
---
- if: steps.filter.outputs.foo == 'true'
  run: echo "SERVICE=foo" >> $GITHUB_ENV

- name: echo service
  run: echo ${{ env.SERVICE }}

3. 공통 패키지가 변경된다면, 모든 Workflow를 실행 시켜줘야 한다..

dorny/paths-filter@2 로는 문제를 해결하지 못한다.

- path 필터는 결국 하나의 액션에 하나의 워크플로우 실행시켜주는것 (1 -> 1)
- 공통 패키지가 변경된다면, 하나의 액션에 여러 워크플로우를 실행시켜줘야한다 (1 -> N)

4. Reusing workflows .. workflow를 재사용하자

on 이벤트 trigger workflow_call 이용해보자

caller(호출하는 workflow)

jobs:
  로컬-Repo-Workflow-호출:
    uses: octo-org/this-repo/.github/workflows/workflow-1.yml@172239021f7ba04fe7327647b213799853a9eb89
        with:
            foo: 'local-repo'
  프로젝트-workflows폴더-workflow호출:
    uses: ./.github/workflows/workflow-2.yml
        with:
            foo: 'my-repo'
  다른사람이-정의한-레포-Workflow-호출:
    uses: octo-org/another-repo/.github/workflows/workflow.yml@v1
        with:
            foo: 'remote-repo'

callee(호출당하는 workflow === Reusing workflows )

name: Reusable workflow example

on:
  workflow_call:
    inputs:
      foo:
        required: true
        type: string

jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
    - name: echo input foo
            run: echo ${{ inputs.foo }}

5. Reusing Workflow가 안된다면?

RepoSettion → Actions → Actions permissions 확인해보자.
Reusing Workflow는 Job이다!! step에서 호출 할 수 없다.
Reusing Workflow에 대한 제한사항을 확인하자.

출처 및 참고

공통 컴포넌트에 대해서

Sun, 05 Mar 2023 00:00:00 GMT

0. 작성하게 된이유

공통 컴포넌트란 어떻게 구성해야 하는걸까?
공통 컴포넌트지만, 디자인이 다르다.. 방법을 찾기 위해..
Headless Component에 대해서 정리

TL;DR

공통 컴포넌트를 만들때
- UI Component : UI 변경 여부가 적다면,
- HeadLess Component: UI 변경이 많고, 기능이 동일하다면
HeadLess Component란?
- UI가 없이 기능만 있는 컴포넌트
- 라이브러리 : headlessui, React Aria, radix-ui, Reach UI
React-Window도 HeadLess Component다…

1. 공통 Component란?

재사용 가능 컴포넌트(소프트웨어 요소)
장점 : 재사용성이 향상되어 개발기간이 단축된다(반복적인 작업 x)
주의사항
- 컴포넌트 설계시, Props에 대한 의존성이 생길 수 있으므로, 단순하게 해야 한다.
  - 기능은 단순하게!
  - Props는 필수적인것만!
- 재사용이라고 공통 컴포넌트를 만들었지만, 재사용이 안될수도 있다(코드 파편화..?)
  - 문서화를 통해(팀원들에게 공유 필수), 만들지말고, 있는걸 사용하도록 하자!!
- 만약, 공통 컴포넌트를 수정하게 된다면, 기존의 코드를 전부 테스트해야 한다.

2. 공통 UI Component랑... 스타일이 다르다.. 💩

1) 문제 발생

공통 UI 컴포넌트에서 스타일을 수정해야 한다..

const CheckBox = ({ checked, onChange, label }: CheckBoxProps) => {
    return (
        <S.Label>
            <S.Input
                type="checkbox"
                checked={checked}
                onChange={onChange}
            />
            <S.Check />
            {label && <span>{label}</span>}
        </S.Label>
    )
}

2) 해결책??

CheckBoxWrapper를 통해 Style을 수정해주자!

;<S.CheckBoxWrapper>
    <CheckBox checked={checked} onChange={onChange} label="!21121" />
</S.CheckBoxWrapper>

const CheckBoxWrapper = styled.div`
  input[type="checkbox"] {...}
  label {...}
`

3. 만약.. 공통 컴포넌트의 구조(MarkUp) / 스타일(css)가 달라진다면…?

1) 우리가 해야 할일…?

StoryBook, Test Code가 있다면.. Quick하게 할것 같은데..?
- 스타일 적용여부(storybook)
- 기능 작동 여부(jest)
하지만.. 우리회사는 StoryBook은 사용 X ..(눈으로 확인해야지)

2) 공통 컴포넌트라고 만들었지만.. 재사용성이 ⬇️

이슈가 쌓인다면.. 공통 컴포넌트의 신뢰가 떨어질 것같다.

4. UI 컴포넌트는 재사용성과 효율성 높지만, 스타일 변화에 취약하다

1) UI 컴포넌트는 재사용성과 효율성 높인다(무조건 문제 ❌)

Wrapper를 통해 스타일 문제를 해결 있다!
Style 관련 Props를 추가하여 스타일을 동적으로 추가하여 문제를 해결 할 수 있다.

2) 스타일 변화가 많은 컴포넌트는 별도로 만들까?

기능은 있고, 스타일만 내가 만들어서 쓰면 안될까?
물론.. 이러한 문제를 해결하기 위해.. Headless Component 가 이미 있다
라이브러리 (headlessui, React Aria, radix-ui, Reach UI)

5. Headless Component란?

1) 정의

Headless Component는 UI가 없이 기능만 있는 컴포넌트입니다.
Headless Component를 사용하면 마크업과 스타일을 자유롭게 할 수 있습니다.
Headless Component는 디자인 없이 기능만 필요한 경우에 사용됩니다.

2) 코드

기능만 있다 → 상태와 상태를 제어하는 함수만 제공한다

간단하게 Hook을 통해서 구현 할 수도 있다.

const useCheckbox = () => {
    const [isChecked, setIsChecked] = useState(false)

    return {
        isChecked,
        onChange: () => setIsChecked(!isChecked),
    }
}

function App() {
    const { isChecked, onChange } = useCheckbox()
    return (
        <label>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={onChange}
            />
            <span>체크박스 만들기</span>
        </label>
    )
}

3) 여러가지 패턴의 Headless Component

Compound Component

같이 사용되는 컴포넌트 상태를 공유할 수 있게 만들어주는 컴포넌트

const ToggleContext = React.createContext()

function Toggle({ children }) {
    const [on, setOn] = useState(false)

    const toggle = () => setOn(!on)

    return (
        <ToggleContext.Provider value={{ on, toggle }}>
            {children}
        </ToggleContext.Provider>
    )
}

function ToggleButton() {
    return (
        <ToggleContext.Consumer>
            {({ on, toggle }) => (
                <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>
            )}
        </ToggleContext.Consumer>
    )
}

Children Prop Pattern

type CheckBoxProps = {
    isChecked: boolean
    onChange: (e: ChangeEvent<HTMLInputElement>) => void
}
const CheckBox = (props: {
    children: (props: CheckBoxProps) => JSX.Element
}) => {
    const [checked, setChecked] = useState(false)

    if (typeof props.children !== 'function') {
        throw new Error('children must be a function')
    }

    return (
        <>
            {props.children({
                isChecked: checked,
                onChange: () => setChecked(!checked),
            })}
        </>
    )
}

;<CheckBox>
    {({ isChecked, onChange }) => (
        <div>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={onChange}
            />
            <span>약관에 동의합니다.</span>
        </div>
    )}
</CheckBox>

6. 기존에 모르고 사용했던 Headless Component

React-Window

Virtuallized 기능만 제공할뿐 UI는 없다

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);
Column 0Column 1Column 2Column 3Column 4Column 5
Try it on CodeSandbox
import { FixedSizeList as List } from 'react-window';

const Column = ({ index, style }) => (
  <div style={style}>Column {index}</div>
);

const Example = () => (
  <List
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
  >
    {Column}
  </List>
);

참고

구글 Sheet JSON 파일로 로컬 저장

Tue, 10 Jan 2023 00:00:00 GMT

1. 문제

Sheet 버전이 V3 -> V4로 변경되면서, 기존에 사용하던 방법이 안되는 문제가 발생

const url =
    'https://spreadsheets.google.com/feeds/cells/SPREAD_SHEET_ID/1/public/full?alt=json'

AppScript(구글 sheet 플러그인)는 redirect 발생

curl -s  "https://spreadsheets.google.com/feeds/cells/SPREAD_SHEET_ID/1/public/full?alt=json" > data.json

<html>
    <head>
        <title>Moved Temporarily</title>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
        <h1>Moved Temporarily</h1>
        The document has moved <a href="REDIRECT_URL">here</a>.
    </body>
</html>

2. 해결책

curl -L((redirect follow) 플래그를 사용해서, AppScript 사용하자

 curl -s -L  "https://spreadsheets.google.com/feeds/cells/SPREAD_SHEET_ID/1/public/full?alt=json" > data.json

V4 API를 사용하여, JSON 형태로 데이터를 가져오자
```
const url =
    'https://sheets.googleapis.com/v4/spreadsheets/SPREAD_SHEET_ID/values/TAB_NAME?alt=json&key=API_KEY'
```
- SPREAD_SHEET_ID: 구글 Sheet의 고유 ID
- TAB_NAME: Sheet의 탭 이름
- API_KEY: 구글 API Key(링크)
  - 조건) spreadsheets API 사용등록 해야함(링크)

3. JSON 파일을 다운받아, 로컬에 저장

shell script를 실행하여, spreadsheets를 다운받아 json으로 만들기

# make json 파일
#!/bin/bash

curl -s "https://sheets.googleapis.com/v4/spreadsheets/SPREAD_SHEET_ID/values/TAB_NAME?alt=json&key=API_KEY"

  # data.json
{
  "range": "test!A1:Z1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "hello",
      "world"
    ],
    [
      "foo",
      "bar"
    ]
  ]
}

출처 및 참고

채팅 서비스 Webview 이슈

Mon, 09 Jan 2023 00:00:00 GMT

0. 작성이유

Webview는 경험이다!
다시한번 정리하기 위해

TL;DR

Visual Viewport : 디스플레이에서 보여지는 부분
IOS 이슈
- 키패드 이슈 : window.visualViewport.onresize 이벤트 활용!
- input 버퍼 : hidden input을 만들어 버퍼를 지워주자!
IOS/Android 이슈
- Force Touch 이슈 : window.visualViewport.onscroll 이벤트 활용!

1. Layout Viewport vs Visual Viewport

Layout Viewport
- 방향이나, 확대/축소랑 상관없이 항상 동일
- 크기나 모양이 변경되지 않는 큰 이미지

Visual Viewport
- 방향이나, 확대/축소에 따라 달라짐
- 큰 이미지의 일부분만 보여짐

2. 모바일 키패드(소프트 키보드) 이슈

IOS의 사파리에서 키보드가 표시되면 레이아웃 뷰포트는 같은 크기로 유지, 시각적 뷰포트 는 축소
- Android는 해당 키패드만큼 자동으로 줄여준다
해당 키패드 만큼 body 태그가 올라간다고 생각하면 된다.
- 키보드를 열기전 : 화면의 높이
- 키보드를 열었을 때 : 화면의 높이 + 키보드의 높이

2. Trouble Shooting

채팅기능을 Webview로 제공…플랫폼(ios, androd, 모바일)에서 문제 발생…

0. Code

// css
.message-list {
  background: red;
  overflow-y: auto;
  height: calc(100vh - 30px);
}

.input-container {
  display: flex;
  height: 30px;
}

// jsx
<div className="container">
  <div className="message-list" ref={ref}>
        {Array(50).fill(0).map((_, i) => <div key={i}>{i}</div>)}
  </div>
	<div className="input-container">
        <input className="input" onChange={handleChangeInput} value={Message}/>
        <button className="button" onClick={handleClick}>전송</button>
  </div>
</div>

1. 모바일 키패드(소프트 키보드) 이슈(IOS)

문제 : 키패드가 열렸을때 스크롤 하면 input 창이 밀려버린다…
동영상

해결책

visialViewport API를 통해 메시지 리스트 영역의 크기를 input 제외하고 줄여주자

useEffect(() => {
    function handleVisualViewportResize() {
        if (window.visualViewport && ref.current) {
            const currentVisualViewport = window.visualViewport.height

            ref.current.style.height = `${currentVisualViewport - 30}px`
            window.scrollTo(0, 0)
        }
    }

    if (window.visualViewport) {
        window.visualViewport.onresize = handleVisualViewportResize
    }
}, [])

동영상

2. Force Touch 이슈

touch의 종류가 다양…

문제: force touch를 사용하면 해당 지점으로 스크롤이 이동하기 떄문에.. 안좋은 UX를 제공한다.
동영상
해결책
- window.visualViewport.onscroll를 이용하여 scroll을 강제로 고정!
```
window.visualViewport.onscroll = () => {
    window.scrollTo(0, 0)
}
```
동영상

3. Input buffer 문제(IOS)

문제: Input에 각각각 을 입력하고 ㅏ 를 입력하여 가 가 나오는문제

해결

hidden input을 통해 focus를 이동시켜서, buffer를 지워준다

function handleClickSendButton() {
    inputRef.current.focus()
    hiddenInputRef.current.focus()

    sendMessage(message)
}

;<div>
    <input ref={inputRef} />
    <input ref={hiddenInputRef} />
</div>

출처 및 참고

Package Versioning

Mon, 26 Dec 2022 00:00:00 GMT

0. 작성하는 이유

답변하지 못했다…
- 찾아서 답변했지만, 이해하지 못했다.

TLDR

X(Major).Y(Minor).Z(Patch) 버전
v1.2.3 은 태깅 버전, 1.2.3 버전
~ 틸트는 최신 패치 버전만 설처
- ~1.2.3 ⇒ 1.2.3 ≤ x < 1.3.0
^ 캐럿은 최신의 마이너 버전만 설치
- ^1.2.3 ⇒ 1.2.3 ≤ x < 2.0.0
@ 앳은 특정 버전만 설치
- 단, 설치하고 나서, package.json에서 버전외 Symbol 삭제
- 삭제후, 모듈 전체 설치해야지, yarn.lock 변경됨

1. 버전은 어떻게 만들까?

1. Backus–Naur Form Grammar for Valid SemVer Versions

Semantic Versioning 규칙

<version core> ::= <major> "." <minor> "." <patch>

버전 번호는 X.Y.Z 형식으로 음수가 아닌 정수이며, 선행은 0을 포함해서는 안된다
X === 0 일 경우, 초기 개발용!(언제든지 변경되도 상관없다)
1.0.0 은 공식적인 버전 (릴리즈 이후에는 버전 번호가 증가하는 방식을 따라야 한다)
Z 버전이 변경되면, 버그 패치
Y 버전이 변경되면, 새기능을 추가하거나, 개선사항 도입
- Y 버전이 변경되면, Z 버전은 0 으로 초기화 된다.
- deprecated 를 표시해주거나, 하위호환성을 유지해야 한다.
X 버전이 변경되면, 이전버전과 호환이 되지 변경 및 신규사항 추가
- X 버전이 변경되면, Y, Z 은 0 으로 초기화 된다.

2. 우선 순위

메이저, 마이너, 패치 순으로 우선순위를 정한다.

문자 또는 하이픈이 있는 식별자는 ASCII 정렬 순서로 어휘적으로 비교됩니다.

1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta
< 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0- rc.1 < 1.0.0.

3. `v1.2.3`은 시맨틱 버전일까?

버전은 1.2.3 태깅이 v1.2.3 다!

2. 버전 Range Symbol

1. `-`

1.2.3 - 2.3.4 := >=1.2.3 <=2.3.4

2. `x or X or *`

- *:= >=0.0.0(모든 버전 만족)
- 1.x:= >=1.0.0 <2.0.0(major 버전 일치)
- 1.2.x:= >=1.2.0 <1.3.0(major 버전과 minor 버전 일치)

3. `~` (틸트/ Tilde)

major version과 minor version은 변경되지 않는다.
~ 를 사용하면, 가장 최근의 minor 버전을 다운받는다(즉, patch 마지막 버전)
목적은 버그 fix

4. `^` (캐럿 / Caret)

major version이 변경되지 않는다.
^ 를 사용하면, 가장 최근의 major 버전을 다운받는다(즉, minior 마지막 버전)
하위호완성 및 새로운 API를 사용할 수 있다.

3. 노드 환경에서 패키치 설치시 어떻게 될까?

1. pachage.json

axios 설치

"dependencies": {
    "axios": "^1.2.1",
		 ...
  },

^ (캐럿 / Caret)으로 해당 모듈이 설치된다.

2. yarn.lock or package-lock.json

의존성 모듈에도 동일하게 버전이 표시된다.

axios@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
  integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
  dependencies:
    follow-redirects "^1.15.0"
    form-data "^4.0.0"
    proxy-from-env "^1.1.0"

follow-redirects 를 검색해보자
- 모듈이름과 version이 동일하지 않는다.
- ^ (캐럿 / Caret)일 경우, 의존성 모듈에서 다르게
- 모듈을 개발할때는, 해당 버전이 최신이었지만, 계속해서 버전이 올라가고 있다.
- 패키지 설치시, 심볼을 확인하여 가장 최신 버전을 다운받는다.
```
follow-redirects@^1.0.0, follow-redirects@^1.15.0:
  version "1.15.2"
  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
```

3. `follow-redirects` 모듈은 왜 두개가 나오고 잇지??

해당 모듈을 사용하는 곳이 두곳이라는것!!

해당 모듈에 의존성 있는 것, 버전을 따라간다.

순서는 버전닝 순서를 따른다
같은 범위에 있는 버전은 한 모듈만 바로보게 한다.

1. http-proxy@^1.18.1:
  version "1.18.1"
  resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"
  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
  dependencies:
    eventemitter3 "^4.0.0"
    follow-redirects "^1.0.0"

2. axios@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
  integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
  dependencies:
    follow-redirects "^1.15.0"

4. 만약 특정 버전을 설치하고 싶을 경우, `@`

@ 심볼을 이용하여, 특정 버전을 설치하고 싶은 경우
```
yarn add axios@1.2.0
```

package.json과 yarn.lock은 특정 버전을 가르키고 있지 않는다.

"axios": "^1.2.0",

axios@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.0.tgz#1cb65bd75162c70e9f8d118a905126c4a201d383"
  integrity sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==
  dependencies:
    follow-redirects "^1.15.0"
    form-data "^4.0.0"
    proxy-from-env "^1.1.0"

특정버전만 사용하고 싶다면!!! package.json을 변경하고 모듈을 다시 설치하자

"axios": "1.2.0",

axios@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.0.tgz#1cb65bd75162c70e9f8d118a905126c4a201d383"
  integrity sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==
  dependencies:
    follow-redirects "^1.15.0"
    form-data "^4.0.0"
    proxy-from-env "^1.1.0"

참고

Error와 Error Handling

Sat, 03 Dec 2022 00:00:00 GMT

작성이유

JS Error는 무엇이 있을까..? Error 핸들링에 대한 궁금증 해소
매번 중복되는 try-catch 코드
React ErrorBoundary에 대해서 궁금하다.

TL;DR

Exception vs Error
- Exception
  - 프로그램에서 발생한다
  - 복구 할 수 있다 (에러 핸들링!)
- Error
  - 시스템의 자원이 부족해서 발생(Overflow, OutofMemory)
  - 복구 할 수 없다.
JS 정의된 Error는 총 7개의 에러가 있다.(InternalError 에러제외)
- ReferenceError : 사용할 값이 없거나, 아직 초기화 안될 경우
- SyntaxError : 문법적인 오류(Parsing 중에 Error 발생)
- TypeError : 기본형, 참조형 Type의 Method가 없거나, 잘못 사용할 경우(const인데, 재할당)
Try-catch는 SyntaxError, PromiseError는 에러 핸들링하지 못한다.
React 16부터는 에러를 선언전으로 관리하기 위해 ErrorBoundary를 사용
- static getDerivedStateFromError
- componentDidCatch

JS Error

1. Error vs Exception

Error
- 프로램에서 발생하지 않으며 시스템의 자원이 부족해서 발생
- 복구 할 수 없다(outofmemory)
- 다른 언어에서는 Unchecked Type이라고 정의
  - StackOverflowError
  - OutofMemoryError
  - IOError
Exception
- 작성한 프로그램에서 발생(에러가 발생하여 Flow가 멈춘다)
- 복구 할 수 있다(try-catch… Error handling)
- 다른 언어에서는 Checked, Unchecked Type 정의
  - Checked - SQLException, IOException
  - UnChecked - CalssCastException, NullPointException

2. JS Error Type

정의 : 런타임 환경에서 에러 오브젝트를 Throw
- 커스텀 Exception을 정의하여 에러로 사용할 수 있다
```
new Error('Custom Error')
```

EvalError
- eval() 발생하는것이나, 현재 ECMAScript에서는 더 이상 thrown 되지 않는다.
- 하위 버전 지원을 남아져 있다.

RangeError

허용되는 값의 집합(argument로 올수 있는 값) 또는 범위에 있지 않을때 오류 발생

new Array(-1)
// RangeError: Invalid array length
String().normalize(NaN)
// RangeError: The normalization form should be one of NFC, NFD, NFKC, NFKD.
Number().toExponential(101)
// RangeError: toExponential() argument must be between 0 and 100
Number().toFixed(101)
// RangeError: toFixed() digits argument must be between 0 and 100
Number().toPrecision(101)
// RangeError: toPrecision() argument must be between 1 and 100

ReferenceError
- 사용할 변수의 값이 아직 초기화가 안되거나, 없을경우
```
console.log(foo)
// ReferenceError: foo is not defined
const foo = [1]
```
- 하지만 우리의 var 는 그런게 없다.. 함수형 스코프이기 때문에 호이스팅…
```
console.log(foo) // undefined
var foo = [1] // or foo = [1] (var 키워드 없음)
```
- 위 코드에서 TDZ가 발생하지 않는 경우? 전역 스코프이기 때문에 const, let은 block 스코프이다
```
{
    console.log(foo)
    // ReferenceError: Cannot access 'foo' before initialization
    const foo = [1]
}
```
SyntaxError
- 잘못된 문법(토큰 순서 등)으로 인해 code parsing중에 발생(JS언어 컴파일러 - 인터프리터)
- 자바스크립트는 친절해서 Error가 발생한 위치까지도 알려준다.
```
break function () {

}
// SyntaxError: Unexpected keyword 'function'. (1:6)

le foo = 1;
// SyntaxError: Missing semicolon. (1:2)
```

TypeError

값이 가지고 있는 타입대로 사용하지 않을때 발생

const foo = 1
foo = 2
// TypeError: Assignment to constant variable.

const obj = {}
obj()
// TypeError: obj is not a function

Object.unknownProp.method()
// TypeError: Cannot read properties of undefined (reading 'method')

URIError

유효하지 않는 문자가 포함된 문자열을 encode/decode 발생

decodeURIComponent('%')
// URIError: URI malformed

encodeURI('\uD800') '�'
// URIError: URI malformed

encodeURI('\uD800\uDFFF') '𐏿'
// error 발생하지 않음
// 위 유니코드는 두개의 쌍으로 이루어져 있는데 하이-로우 쌍의 쌍 중 하나가 누락되서 에러

AggregteError

여러 오류를 하나의 오류로 표현하기 위해 사용

Promise.any([Promise.reject('1')])
// Uncaught (in promise) AggregateError: All promises were rejected

3. 에러 핸들링(Try-Catch)

try-catch, try-catch-finally

try 문에서 exception이 throw되면 catch블록이 실행 되면서 error 객체를 받아온다

try {
    throw new Error('oops')
} catch (ex) {
    console.error('outer', ex.message)
}
// "outer" "oops"

finally 블록에서 return이 되면 해당 try-catch-finally statement의 try-catch 에서 어떠한 값이 return이 되더라도 그 값으로 리턴된다

;(function () {
    try {
        try {
            throw new Error('oops')
        } catch (ex) {
            console.error('inner', ex.message)
            throw ex
        } finally {
            console.log('finally')
            return
        }
    } catch (ex) {
        console.error('outer', ex.message)
    }
})()

// Output:
// "inner" "oops"
// "finally"

JS Error를 막아보자!!!!

RangeError, ReferenceError, TypeError, URIError는 try-catch 핸들링 가능!

function foo() {
    try {
        // RangeError
        new Array(-1)
        String().normalize(NaN)
        // ReferenceError
        console.log(foo)
        const foo = [1]
        // TypeError
        Object.unknownProp.method()
        // URIError
        decodeURIComponent('%')
    } catch (err) {
        return 'catch the exception'
    }
}

foo()
// 'catch the exception'

Syntax Error와 Aggregte Error는 그대로 에러 노출
- Syntax Error는 parsing 단계에서 에러가 발생하는거라서 try-catch문을 실행시키지 못한다

Promise 에러는 Promise 의 catch method로 자체적으로 처리하기 때문에, 에러가 발생하지 않는다.

암묵적으로 try -catch 블록으로 쌓여져 있다라고 생각하면 된다.
then 메소드 뒤에 있는 catch 메소드가 앞에 있는 Error를 핸들링 할 수 있다.

catch method 뒤에 있는 then 메소드로 추가적인 flow를 이어 갈 수 있다.

function foo() {
    new Promise((resolve, reject) => {
        throw new Error('에러 발생!')
    })
        .catch(function (error) {
            console.log(
                '에러가 잘 처리되었습니다. 정상적으로 실행이 이어집니다.'
            )
        })
        .then(() => console.log('다음 핸들러가 실행됩니다.'))
}

foo()

async - await에서는 에러가 어떻게 잡힐까?
- await 키워드를 사용하면 Promise의 result값을 반환한다.
- Error 라면 throw Error를 호출한것과 동일하므로 try-catch로 잡을 수 있다.

4. try - catch를 중복적으로 사용할때가 있다 공통화 처리 할 수 없을까?

try block 안에서 함수가 실행되어야 catch가 잡을 수 있다.

function wrappingLog(fn) {
    return (...args) => {
        try {
            return fn(...args)
        } catch (err) {
            console.log(err)
        }
    }
}

function foo() {
    throw new Error(2)
}

function bar() {
    throw new Error(1)
}

wrappingLog(foo)()
wrappingLog(bar)()

리엑트에서 에러 관리는 어떻게 할까?(React ErrorBoundary)

1. 정의

react 16에서 에러를 선언적으로 처리하기 위해 ErrorBoundary라는 개념을 도입
- try - catch 처럼 에러가 발생한다면 catch 에서 값을 리턴하는 것처럼 fallback UI를 노출
컴포넌트에서 에러가 발생한다면, 빈화면이나, 에러 로그를 출력(별 다른 조치를 취할 수 없었다)

2. ErrorBoundary에서 처리할 수 없는 에러

이벤트 핸들러
비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
서버 사이드 렌더링
자식에서가 아닌 에러 경계 자체에서 발생하는 에러

3. ErrorBoundary 관련 Method

Class Component만 해당 Method로 구현되어 있으면, 함수형으로 사용하지 못한다.

static getDerivedStateFromError
- 렌더단계에서 발생
- 렌더링 결과로 수집한 내용으로 Virtual DOM을 생성하고 이전 Virtual DOM과 비교하는 단계까지를 말한다.

componentDidCatch
- Commit 단계에서 발생
- 렌더단계의 결과물인 Virtual DOM을 이용해 계산된 모든 변경사항 실제 DOM에 적용하는 단계를 말한다.

4. Custom ErrorBoundary

Reset Method를 통해 ErrorBounary안에서 컴포넌트를 다시 Recovery 할 수 잇음

상위 State가 변하니까, 하위 컴포넌트가 다시 렌더링..

interface Props {
    children?: ReactNode
    fallback: React.ElementType
}

interface State {
    hasError: boolean
    info: Error | null
}

class ErrorBoundary extends React.Component<Props, State> {
    public state: State = {hasError: false, info: null};

    static getDerivedStateFromError(error: Error): State {
        return {hasError: true, info: error};
    }

    componentDidCatch(error: Error) {
        // send error to Server(like sentry)
    }

    reset = () => {
        this.setState({hasError: false, info: null})
    }

    render() {
        const { children } = this.props
        const { hasError, info } = this.state
        if (this.state.hasError) {
            return <this.props.fallback reset={this.reset} error={info} />
        }

        return children;
    }
}

function ErrorCard({error, reset}: { error: Error, reset: () => void }) {
    return <div>Error <button onClick={reset}>reset</button></div>
}

function App() {
    return (
        <ErrorBoundary fallback={(error, reset) => <ErrorCard error={error} reset={reset}/>}>
           <Foo/>  // throws Error
        </ErrorBoundary>

    );
}

5. 에러의 종류가 다르다.. 에러를 나눠서 관리하자 → 에러 바운더리를 하나더 만들자

한곳에서 에러를 관리한다면 좋다

하지만 layer를 나누면 에러를 구분하기에 더 좋지 않을까?

class ErrorBoundary extends CommonErrorBoundary {
    constructor(props: Props) {
        super(props)
    }
    render() {
        const { children } = this.props
        const { hasError, info } = this.state

        if (info?.message === GlobalError) {
            throw new Error(info) // 상위 에러 바운더리로 호출
        }
        if (this.state.hasError) {
            return <this.props.fallback reset={this.reset} />
        }

        return children
    }
}

class GlobalErrorBoundary extends CommonErrorBoundary {
    constructor(props: Props) {
        super(props)
    }
    render() {
        const { children } = this.props
        if (this.state.hasError) {
            return <div>This is global Error</div>
        }

        return children
    }
}

;<GlobalErrorBound>
    <ErrorBoundary fallback={ErrorCard}>
        <Foo />
    </ErrorBoundary>
</GlobalErrorBound>

출처

Windowing 기법

Wed, 30 Nov 2022 00:00:00 GMT

작성이유

초기속도 로딩 향상을 위해(코인리스트, 체결내역...)
Windowing 기법에 대해서 정리

TL;DR

Windowing 기법이란?
- 보여지는 부분만 렌더링만 시키자
방법
- Intersection Observer API
- react-window 와 react-virtualized
개선결과 (테스트 조건 : 5,000개 이미지)
- Dom Content Loaded (0.45초 → 0.13초)
- First Contentful Paint ( 2.13초 → 0.47초)
- Loaded(241ms → 193ms)
- Request Count(5006개 → 18개)

Windowing 기법이란?

스크롤 영역이나, 리스트가 화면을 다 넘어가면 다 보여줄 필요가 있을까?
보여지는 부분만 렌더링 시키고, 안보이는 부분은 데이터만 가지고 있자!
Intersection Observer API를 사용하면 보이는 부분 렌더링되게 처리할 수 있다.

Intersection Observer API

HTML 요소가 부모 요소 또는 브라우저 뷰포트 자체와 교차할 때 콜백을 실행하는 방법

간단히 말해서 사용자가 페이지를 아래로 스크롤할 때 목록 항목이 화면에(또는 근처에) 있을 때 알려줍니다

interface Args extends IntersectionObserverInit {
  freezeOnceVisible?: boolean
}

function useIntersectionObserver(
  elementRef: RefObject<Element>,
  {
    threshold = 0,
    root = null,
    rootMargin = '0%',
    freezeOnceVisible = false,
  }: Args,
): IntersectionObserverEntry | undefined {
  const [entry, setEntry] = useState<IntersectionObserverEntry>()

  const frozen = entry?.isIntersecting && freezeOnceVisible

  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
    setEntry(entry)
  }

  useEffect(() => {
    const node = elementRef?.current // DOM Ref
    const hasIOSupport = !!window.IntersectionObserver

    if (!hasIOSupport || frozen || !node) return

    const observerParams = { threshold, root, rootMargin }
    const observer = new IntersectionObserver(updateEntry, observerParams)

    observer.observe(node)

    return () => observer.disconnect()

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [elementRef?.current, JSON.stringify(threshold), root, rootMargin, frozen])

  return entry
}

const Section = (props: { title: string }) => {
  const ref = useRef<HTMLDivElement | null>(null)
  const entry = useIntersectionObserver(ref, {})
  const isVisible = !!entry?.isIntersecting

  console.log(`Render Section ${props.title}`, { isVisible })

  return (
    <div
      ref={ref}
      style={{
        minHeight: '100vh',
        display: 'flex',
        border: '1px dashed #000',
        fontSize: '2rem',
      }}
    >
      <div style={{ margin: 'auto' }}>{props.title}</div>
    </div>
  )
}

export default function Component() {
  return (
    <>
      {Array.from({ length: 5 }).map((_, index) => (
        <Section key={index + 1} title={`${index + 1}`} />
      ))}
    </>
  )
}

간단하게 라이브러리를 사용해보자(react-window)

react-virtualized의 경량화 버전(27.4KB → 6.4 KB)

개발자(Brian Vaughn)가 같다.. 조금 더 쉽고 편하게 쓰기 위해

const App = () => {
    const [images, setImages] = useState<IMG[]>([]);
    const getImages = useCallback(
        async () => {
            const result = await fetch("https://jsonplaceholder.typicode.com/photos");
            const data = await result.json()
            setImages(data);
        },
        [],
    );

    useEffect(() => {
        void getImages();
    }, [])

    const Row = ({index, style}: { index: number, style: React.CSSProperties }) => {

        const image = images[index];
        return (
            <div style={style} key={image.id}>
                    <h5>{image.title}</h5>
                    <img src={image.thumbnailUrl} alt={image.title}/>
                    <a href={image.url}>Link</a>
            </div>)
    }

    return (
        <div>
            {images.length > 0 &&
                <List itemSize={193} height={1000} itemCount={35} width={836}>
                    {Row}
                </List>}
        </div>
    );
};

출처

Service Worker?

Sun, 04 Sep 2022 00:00:00 GMT

0. 작성이유

브라우저 캐시… 2탄?
회사에서 Service Worker를 통해 리소스를 캐싱했는데... 정리
Service Worker 라이프사이클은 무엇이며, 어떻게 업데이트 될까?

TL;DR

Service Worker란?
- 네트워크 요청을 가로채 수정하거나 캐싱할 수 있는 API
Service Worker의 LifeCycle
- Install : Service Worker 처음 실행시
- (Waiting : 업데이트시만 발생) : Service Worker가 교체되기전 대기
- Actice : Service Worker가 실행되어 Client를 제어할때

1. 서비스 워커란?

웹 응용 프로그램(브라우저) ↔ 네트워크 사이의 프록시 서버의 일종
주요한 기능
- 네트워크 요청을 가로채서 수정하거나 리소스를 캐싱할수 있다!
- 오프라인시, 캐싱된 자원 전송(서비스 워커에서 미리 캐싱한 자원)하여 UX 향상
- Push API… Background Fetch API.. 다양한 작업을 할 수 있다..
Worker / Web Workers / Shared Worker랑은 다르다!!
- Worker는 Main Thread의 짐을 덜어준다고 생각하면 된다

2. 서비스 워커 용어

Service Worker에 의해 제어되는 페이지(네트워크 요청을 가로 챌 수 있는 페이지)

Scope

Service Worker 등록되면 Control 할 수 있는 범위

Service Worker 호출 html 및 js path
html: jooonho.com/foo/index.html
swjs: jooonho.com/foo/sw.js

서버스 워커 작동 범위
1. jooonho.com (X)
2. jooonho.com/foo (O)
3. jooonho.com/foo/bar(O)

Client

Service Worker가 제어하는 페이지 === Client(like Window)

서비스 워커에서 Cient에 접근하는 방법은 WindowClient

해당 서비스워커가 작동하면 index.html → foo.html로 redirect된다!! (example)

self.addEventListener('activate', (event) => {
    event.waitUntil(
        self.clients
            .claim()
            .then(() => {
                return self.clients.matchAll({ type: 'window' })
            })
            .then((clients) => {
                return clients.map((client) => {
                    // Check to make sure WindowClient.navigate() is supported.
                    if ('navigate' in client) {
                        return client.navigate('foo.html')
                    }
                })
            })
    )
})

3. Life Cycle

서비스 워커를 등록할때

register

window.addEventListener('load', () => {
    // Is service worker available?
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('/sw.js')
            .then(() => {
                console.log('Service worker registered!')
            })
            .catch((error) => {
                console.warn('Error registering service worker:')
                console.warn(error)
            })
    }
})

bandwidth contention 방지하기 위해 … 같은 자원을 서로 요청할려고 할때..

처음 Service Woker가 작동할때

Install

register된 Service Woker가 execute 될때

클라이언트를 제어하기 전 리소스 미리 캐싱할 수 있다!

self.addEventListener('install', (event) => {
    const cacheKey = 'MyFancyCacheName_v1'

    event.waitUntil(
        caches.open(cacheKey).then((cache) => {
            // Add all the assets in the array to the 'MyFancyCacheName_v1'
            // `Cache` instance for later use.
            return cache.addAll([
                '/css/global.bc7b80b7.css',
                '/css/home.fe5d0b23.css',
                '/js/home.d3cc4ba4.js',
                '/js/jquery.43ca4933.js',
            ])
        })
    )
})

Activate

Service Worker가 정상적으로 등록이 되었다면 activate 이벤트가 발생 (아직.. 작동되는게 아니다)
해당 페이지로 다시 접근한다면(리로드) 등록된 Service Worker가 작동할것!
우리는 등록이 되면 바로 사용하고 싶으니까!! clients.claim() 호출
- 이렇게 바로 실행하게 된다면, 네트워크를 통해 로드하는것과 다를 수 있기때문에..
- 첫페이지에는 네트워크를 통해서 캐싱… 재방문시, 서비스워커를 통해 빠르게!!!!
```
self.addEventListener('activate', (event) => {
    event.waitUntil(clients.claim())
})
```

Service Worker가 업데이트 될때, 변경될때

업데이트 조건 (1번 제외하고 자동)
- 등록할때 update하라고 알려준다!! (수동)
```
navigator.serviceWorker.ready.then((registration) => {
    registration.update()
})
```
- 해당 페이지로 들어올때(기존 ServiceWorker와 byte-different를 통해 업데이트 처리)
- push sync 같은 이벤트가 24시간 동안 동작안했을 경우…
- ServiceWorker 파일명이 변경되었다면…? (동기화 x 기존 ServiceWorker 처리)

Install : 초기 Service Worker 등록과 동일
Waiting
- Install이 완료되고, 기존 Service Worker가 종료될때까지(더이상 Client Control 하지 않을때)
- 크롬 업데이트도 동일하다…. 탭을 다 닫을때까지… 기존버전을 유지 ㅠㅠ

Activate : 초기 Service Worker 등록과 동일

기존 서비스 워커를 통해 캐싱된 리소스를 삭제해주자!

self.addEventListener('activate', (event) => {
    // Specify allowed cache keys
    const cacheAllowList = ['MyFancyCacheName_v2']

    // Get all the currently active `Cache` instances.
    event.waitUntil(
        caches.keys().then((keys) => {
            // Delete all caches that aren't in the allow list:
            return Promise.all(
                keys.map((key) => {
                    if (!cacheAllowList.includes(key)) {
                        return caches.delete(key)
                    }
                })
            )
        })
    )
})

우리가 원하는거는 업데이트 됬으면 Service Worker가 업데이트 되야한다!
install 이벤트에서 처리해주면, Waiting 없이 Service Worker가 교체된다.
```
self.addEventListener('install', (event) => {
    self.skipWaiting()
})
```

참고

브라우저 로컬 캐시(memory, disk, prefetch)

Thu, 25 Aug 2022 00:00:00 GMT

0. 작성하는 이유

빠른 서비스를 제공하기 위해 Cache를 잘 이용하자
memory cache disk cache prefetch cache 차이점은 무엇일까?

TL;DR

memory cache : 현재 메모리(현재 페이지) 데이터
disk cache : 저장된 데이터(방문한 페이지) 데이터
prefetch cache : 서브 페이지 데이터를 캐싱 처리

1. 컴퓨터가 더 빠르게 계산하려면 → 화면을 더 빠르게 그릴려면?

빨리 가져올려면 어떻게 해야할까? 가까워야 한다.

브라우저(프로세스)의 실행주체 CPU → 브라우저가 빠르게 작동할려면?
연산을 빨리 할려면 CPU와 가까운 곳에서 데이터(HTML, CSS, JS)를 가지고 와야한다.
HTTP Cache 정책(Cache에 대한 설명)에 따라 브라우저는 요청한 자원을 저장(캐싱)
네트워크를 통해 요청된 자원보다 캐싱된 자원을 사용하면 시간을 줄일 수 있다

2. 브라우저의 Cache

memory cache(from ram) (AKA Blink Cache)

새로고침하면 **현재 실행되고 있는 페이지 데이터(Memory에 저장된 값)**을 사용한다.
Non Persistent이기 때문에, 페이지가 변경이 되거나 창이 닫히면 데이터가 사라진다.

disk cache(from HDD or SSD)

~/Library/Caches/Google/Chrome/Default/Cache/Cache_Dat 캐시 위치다…

브라우저 창을 닫고 방문했던 페이지로 들어가면 저장되있는(disk에 있는 Cache) 페이지 데이터를 사용한다
Persistent (단, 캐시가 만료가 된다면, eviction algorithm을 통해 자동으로 삭제)

prefetch cache

<link rel="prefetch" href="/style.css" as="style" />

현재 페이지에서는 사용되지 않지만, 서브페이지를 필요한 리소스를 다운받아 Cache한다.
우선순위가 낮아 현재 페이지 리소스를 방해하지 않고, 리소스가 다운로드 한 후 실행되지 않는다.

3. Link 태그의 rel 속성에 대해 알아보자

해야될 작업? 할 것같은 작업?을 미리하자

웹성능을 향상시키는 방법에는 여러가지 있지만 가장 간단하게 적용할 수 있는 방법이다.
```
<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />
```
1. preload
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
- 가능한 한 빨리 리소스를 다운로드하고 캐시하도록 브라우저에 지시
- 브라우저는 리소스를 다운로드한 후 리소스에 대해 아무 작업도 수행 X
- 스크립트가 실행되지 않고 스타일시트가 적용되지 않는다.
- 기본 플로우 : index.html → index.css → comic-sans.woff2
```

<link rel="stylesheet" href="index.css" />

/* index.css */
@font-face {
    src: url('comic-sans.woff2') format('woff2'); // 다운로드 하지않고 캐싱 데이터 사용
}
```
2. prefetch
```
<link rel="prefetch" href="/style.css" as="style" />
```
- 백그라운드에서 리소스를 다운로드하고 캐시하도록 브라우저에 요청
- 다운로드는 낮은 우선 순위로 발생하므로 더 중요한 리소스를 방해 X
- 후속 페이지에서 해당 리소스가 필요하고 미리 캐시하려는 경우에 유용(이커머스 - 서브페이지)
3. preconnect
```
<link rel="preconnect" href="https://api.my-app.com" />
```
- 브라우저에 사전에 도메인에 대한 연결을 수행하도록 요청
- 단, 연결을 열고 유지하는 데 비용이 많이 드는 작업(4-6개 이상의 도메인 추천)
- 기본플로우: DNS → TCP handshake → TLS handshake (이 단계를 미리 하자…)
4. DNS-prefetch
```
<link rel="dns-prefetch" href="https://api.my-app.com" />
```
- 사전에 도메인의 DNS 확인을 수행하도록 브라우저에 요청
5. prerender
```
<link rel="prerender" href="https://my-app.com/pricing" />
```
- 브라우저에 URL을 로드하고 보이지 않는 탭에서 렌더링하도록 요청
- 사용자가 다음에 특정 페이지를 방문할 것이 확실하고 더 빠르게 렌더링하려는 경우에 유용
6. modulepreload
```
<link rel="modulepreload" href="/static/Header.js" />
<link rel="modulepreload" href="/static/Logo.js" />
<link rel="modulepreload" href="/static/Image.js" />

<link rel="modulepreload" href="/static/Header.js" as="serviceworker"
```
- 가능한 한 빨리 JS 모듈 스크립트를 다운로드, 캐시 및 컴파일하도록 브라우저에 지시
- 기본 플로우 : main.js → header.js → logo.js …
```
// /static/main.js
import Header from '/static/Header.js';
...

// /static/Header.js
import Logo from '/static/Logo.js';
import Link from '/static/Link.js';
...

// /static/Logo.js
import Img from '/static/Img.js';
...
```

4. 참고

How to work Webpack

Sun, 03 Jul 2022 00:00:00 GMT

TL;DR

번들러의 역할, 의존성 해결 및 패킹(하나의 파일로 만들기)
WebPack vs Rollup
- Webpack은 Module Map을 생성
- Rollup은 Bundle 사이즈가 작으며, 변수/함수명 중복 방지를 위해 변경

1. Module bundler는 어떤 문제를 해결하기 위해 등장했을까?

여러 개의 Script file을 로딩하는데, 하나의 script만 로딩하고 싶다.
Script 파일별로 의존성이 있는데 순서에 맞게 불러낼 수 있을까?
- foo ← bar ← test (의존성 순서대로 호출하지 않는다면, 에러 발생)

동일한 변수/함수가 있다면?

<html>
  <script src="/src/foo.js"></script>
  <script src="/src/bar.js"></script>
  <script src="/src/baz.js"></script>
  <script src="/src/qux.js"></script>
  <script src="/src/quux.js"></script>
</html>

<html>
  <script src="/dist/bundle.js"></script>
</html>

2. Module bundler란?

역할은 2가지 Dependency Resolution, Packing

1. Dependency Resolution

의존성 해결을 해결하기 위해 의존성 그래프를 만든다!
- 의존성을 해결하기 위해 필요한 Module 정보(이름, 위치, 코드, 다른 파일과의 의존성) 파악
- Module의 정보를 가지고 의존성 그래프를 생성

Module의 정보를 가지고 Module Object 만든다.

모듈 오브젝트를 만들때 AST를 활용한다(참고 : Detective )
Document → Dom 으로 만드는것과 비슷한것 같다..

let ID = 0
function createModuleObject(filepath) {
    const source = fs.readFileSync(filepath, 'utf-8')
    const requires = detective(source)
    const id = ID++

    return { id, filepath, source, requires }
}

Module Map(hash 구조)을 활용하여 key : path or name, value: unique key를 만든다.

Module Map을 가지고 의존성을 해결한다

entry / root 모듈을 시작으로 재귀적으로 하위 모듈의 의존성을 탐색하여 Module Map을 만든다.

require시, 상대경로인지 / node_modules 인지는 어떻게 알까?

resolve 모듈의 활용한다면.. 손쉽게 해당 모듈을 불러올수 있다.

function getModules(entry) {
    const rootModule = createModuleObject(entry)
    const modules = [rootModule]

    // Iterate over the modules, even when new
    // ones are being added
    for (const module of modules) {
        module.map = {} // Where we will keep the module maps

        module.requires.forEach((dependency) => {
            const basedir = path.dirname(module.filepath)
            const dependencyPath = resolve(dependency, { basedir })

            const dependencyObject = createModuleObject(dependencyPath)

            module.map[dependency] = dependencyObject.id
            modules.push(dependencyObject)
        })
    }

    return modules
}

2. Packing

브라우저 내에서는 require , moduel.exports를 사용할 수 없는때문 팩토리 함수를 활용
- 의존성을 외부에서 주입 === requrie 함수를 만들어서 주입

이렇게 만든 함수를 브라우저에서 IIFE로 실행해준다 (scope 오염방지)

function pack(modules) {
    const modulesSource = modules
        .map(
            (module) =>
                `${module.id}: {
      factory: (module, require) => {
        ${module.source}
      },
      map: ${JSON.stringify(module.map)}
    }`
        )
        .join()

    return `(modules => {
    const require = id => {
      const { factory, map } = modules[id]
      const localRequire = name => require(map[name])
      const module = { exports: {} }
      factory(module, localRequire)
      return module.exports
    }
    require(0)
  })({ ${modulesSource} })`
}

3. 예제 코드 및 결과

예제 코드

// entry
const { printHello, hello } = require('./message')
const { name } = require('./name')

printHello(hello + name)

// message
module.exports = {
    hello: 'world',
    printHello: (input) => console.log(input),
}

//name
module.exports = {
    name: 'junho',
}

// index
const graph = getModules('./entry.js')
const result = pack(graph)

Bundle.js

;((modules) => {
    const require = (id) => {
        const { factory, map } = modules[id]
        const localRequire = (name) => require(map[name])
        const module = { exports: {} }

        factory(module, localRequire)

        return module.exports
    }

    require(0)
})({
    0: {
        factory: (module, require) => {
            const { printHello, hello } = require('./message')
            const { name } = require('./name')

            printHello(hello + name)
        },
        map: { './message': 1, './name': 2 },
    },
    1: {
        factory: (module, require) => {
            module.exports = {
                hello: 'world',
                printHello: (input) => console.log(input),
            }
        },
        map: {},
    },
    2: {
        factory: (module, require) => {
            module.exports = {
                name: 'junho',
            }
        },
        map: {},
    },
})

3. Webpack vs Rollup 번들 차이

"webpack way"
- 모듈 맵을 사용한다
- 각 모듈별로 함수로 랩핑하기 때문에 고유의 Scope를 가진다.
- 모든 모듈이 런타임 상에 올라간다.
"rollup way"
- 모든 모듈이 전역 스코프에 위치하며, 모듈을 함수에 감싸지 않는다.
- 스코프로 인해 변수가 중복이 되기떄문에, 번들시, 변수와 함수 이름을 변경한다.
- 의존성 순서문제가 있다(순환 의존성 )

예제 코드

// circle.js
const PI = 3.141;
export default function area(radius) {
  return PI * radius * radius;
}

// square.js
export default function area(side) {
  return side * side;
}

//index.js
import squareArea from './square';
import circleArea from './circle';
console.log('Area of square: ', squareArea(5));
console.log('Area of circle', circleArea(5));

Webpack Way

const modules = {
    'circle.js': function (exports, require) {
        const PI = 3.141
        exports.default = function area(radius) {
            return PI * radius * radius
        }
    },
    'square.js': function (exports, require) {
        exports.default = function area(side) {
            return side * side
        }
    },
    'app.js': function (exports, require) {
        const squareArea = require('square.js').default
        const circleArea = require('circle.js').default
        console.log('Area of square: ', squareArea(5))
        console.log('Area of circle', circleArea(5))
    },
}

webpackStart({
    modules,
    entry: 'app.js',
})

function webpackStart({ modules, entry }) {
    const moduleCache = {}
    const require = (moduleName) => {
        // if in cache, return the cached version
        if (moduleCache[moduleName]) {
            return moduleCache[moduleName]
        }
        const exports = {}
        // this will prevent infinite "require" loop
        // from circular dependencies
        moduleCache[moduleName] = exports

        // "require"-ing the module,
        // exported stuff will assigned to "exports"
        modules[moduleName](exports, require)
        return moduleCache[moduleName]
    }

    // start the program
    require(entry)
}

Rollup Way

const PI = 3.141

function circle$area(radius) {
    return PI * radius * radius
}

function square$area(side) {
    return side * side
}

console.log('Area of square: ', square$area(5))
console.log('Area of circle', circle$area(5))

참고

TLS/SSL HandShake

Sun, 19 Jun 2022 00:00:00 GMT

작성하는 이유

브라우저는 인증서를 언제 체크를 할까?
TLS HandShake 정리

TL;DR

HTTPS
- 보안이 강화된 HTTP
- TLS는 SSL의 발전 형태(동의어로 사용된다)
TLS Handshake
- HTTPS 암호화 통신을 하기 위해(TCP 이후에 작동) 검증하는 과정
- Flow (Packet 메시지)
  - Clinet Hello : 가능한 알고리즘 전달
  - Server Hello : 알고리즘 선택
  - Server Hello Done: 인증서 전달 및 인증서 확인
  - Client Key Exchange : 대칭키 전달
  - Change Cipher Spec : 대칭키 변경

1. HTTPS란?

보안이 강화된 HTTP(HTTP over TLS, HTTP over SSL)
HTTPS 암호화 통신을 하기 위해 TLS Handshake로 협상을 한다.
HTTPS는 소켓통신에서 텍스트를 이용하는 대신, TLS 프로토콜을 통해 세션 데이터를 암호화

1-1. IP / TCP란

IP(Internet Protocal) - Network / Internet Layer
- 관심사: 목적지까지 정보 패킷을 보내는 것
TCP(Transmission Control Protocol) - Transport Layer
- 관심사: 패킷의 순서 및 누락여부
- TCP 연결과정(TCP 제어 플래그는 여러개가 있다… 참고)
  - 클라이언트가 “SYN” 최초요청 패킷을 대상 서버로 호출
  - 대상서버는 이 연결을 동의하기 위해 “SYC/ACK” 패킷을 보낸다
  - 클라이언트는 “ACK” 패킷을 보내고 서버와 연결
  - 도착한 패킷들의 정리(순서, 누락데이터 여부 및 끝까지 왔는지)를 TCP가 관리
예시) TCP/IP를 이용해서 이메일을 보내면?
- 편재를 잘개 쪼개서 조각들을 해당 목적지로 보낸다 - (IP)
- 도착한 조각들을 순서대로 맞추고, 누락여부를 확인하여 재 요청 - (TCP)
- 마지막 조각이 올때까지 발신자와 접속을 유지 - (TCP)

1-2. TLS/SSL

TLS란?
- 인터넷 상의 커뮤니케이션을 위한 개인정보와 데이터 보안을 용이하기 위해 설계된 보안 프로토콜
- 웹사이트를 로드하는 웹브라우저(응용프로그램)와 서버간의 커뮤니케이션을 암호화하는 것
- 암호화 대상 : HTTP 데이터 및 이메일, 메시지, 보이스오버(Voip) 포함
TLS / SSL의 차이점
- TLS는 SSL의 발전 형태 (TLS 1.0은 SSL 3.1으로 부터 개발)

2. 먼저, 서버는 TLS(SSL)인증서를 발급받아야 한다.

(서버) 서버는 Publick Key와 Private Key를 생성
(서버 → CA) 서버는 CA에게 인증서를 발급받기 위해 Publick Key와 서버 정보들 제공
(CA) CA는 서버로 부터 받은 정보를 가지고 TLS 인증서를 발급 및 암호화
- CA는 발급한 인증서를 CA Private Key를 가지고 암호화
- (CA → 서버) 암호화화 TLS 인증서를 서버에게 전달

2-1 대칭 vs 비대칭 암호 알고리즘

대칭키 : 암호화/복호화 할때 사용되는 키가 동일

비대칭키(공개키, 비밀키)

정의: 암호화하는 키와 복호화하는 키가 다름
공개키(Publick Key): 사람들에게 공개된 키
- 공개키로 암호할 경우, Data의 보안을 중점
개인키(Private Key): 사용자만 알고 있는 키
- 개인키로 암호할 경우, 인증과정의 중점(HTTPS 인증서)
- 개인키로 암호화한 인증서를 공개키로 해독할 수 있으면, 메시지의 발신자의 보증

2-2 단방향/양방향 SSL

단방향 / Server Certificate Authentication

클라이언트만 서버를 확인한다.
서버는 클라이언트가 누군지 중요하지 않는다.

양방향 / Client Authentication (공인인증서랑 비슷…)

서버는 클라인트를 확인하고, 클라이언트는 서버를 확인한다.
FLOW
- Client → Server 요청
- Server → Clinet Server 인증서를 보냄
- Clinet가 서버 SSL 인증서를 확인합니다.
- Clinet가 Server로 Clinet 인증서를 보냄
- Server가 Clinet 인증서를 확인
- Server가 Clinet 인증서의 사용자 이름을 참조하여 사용자 인증

3. TLS Handshake

서버와 클라이언트가 주고받을 데이터 암호화 알고리즘 결정
서버와 클라이언트가 주고받을 데이터 암호화를 위한 대칭키를 얻는 과정

1) Client → Server (Client Hello)

클라이언트에서 서버에게 연결을 시도
해당 패킷에는 세션ID, 프로토콜 버전, 사용가능한 Cipher suite 목록 등이 포함되어 있다.

2) Server→ Client (Server Hello)

Client Hello의 대한 응답
Client에서 보내온 Cipher 목록 중에 하나를 선택하여 보내준다

3) Server → Client (Certificate, Server Key Exchange, Server Hello Done)

Certificate
- Server가 자신의 SSL 인증서(Server의 Publick 포함 Server Key Exchange)를 Client를 전달
- Client는 SSL 인증서를 CA의 공개키를 통해 복호화해서 성공하면 인증서를 검증

Server Key Exchange
- SSL 인증서에 서버의 공개키가 없을 경우만 해당하며, 있다면 해당 프로토콜은 진행하지 않는다!

4) Client → Server 대칭키 전달 (Client Key Exchange)

Client와 Server와 데이터를 안전하게 전달하기 위해 대칭키를 생성한다.
Client는 생성한 대칭키를 SSL의 포함된 공개키로 암호화해서 서버에게 전달한다

5) Server → Client (Change Cipher Spec)

Server에서 암호화된 대칭키를 받아 Client/Server 모두 동일한 대칭키를 갖게 됨
통신 준비가 완료되면, Change Cipher Spec을 보내고 SSL Handshake 완료의 의미

참고

https://www.cloudflare.com/ko-kr/learning/ssl/what-is-ssl/

https://www.cloudflare.com/ko-kr/learning/ssl/transport-layer-security-tls/

https://docs.solace.com/Security/Two-Way-SSL-Authentication.htm

https://sectigo.com/resource-library/public-key-vs-private-key

https://ko.wikipedia.org/wiki/전송제어프로토콜

https://nuritech.tistory.com/25

Form이벤트 및 React의 이벤트 시스템

Sun, 29 May 2022 00:00:00 GMT

0. 글을 작성하는 이유

채팅 입력창을 구현하다 requestSubmit 을 알게되어서 정리
react는 stopImmediatePropagation이 없다?

TL;DR

Form.requestSubmit으로 submit handler를 호출
React에서 stopImmediatePropagation 를 쓰고 싶다면
- e.nativeEvent.stopImmediatePropagation()
React 이벤트 시스템은 EventPlugin, EventPluginHub으로 구성
- Native Event처럼 동작되는것 같지만, 아니다
- 이벤트에 대한 콜백들의 결과(배열)로 받아와 실행

1. 문제의 상황

채팅 입력창을 구현 중 Enter 를 누르면 handleSubmit tigger 구현중..

문제 : 당연히 Enter 키를 누르면… handleSubmit 함수를 tirgger 할줄 알았지만, 새로고침..

form태그의 submit 함수가 내가 알고 있던 기능대로 동작하지 않는다

const formRef = useRef<HTMLFormElement>(null)

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    console.log('submit')
}

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.code === 'Enter') {
        formRef.current!.submit()
    }
}

return (
    <form ref={formRef} onSubmit={handleSubmit}>
        <input onKeyDown={handleKeyDown} />
    </form>
)

2. HTMLFormElement.requestSubmit()

MDN에서 친절하게 설명해주고 있었다…

1. HTMLFormElement.submit()

sumit 메소드는 submit 이벤트를 발생하지 않는다(즉 onSubmit함수를 trigger 하지 않음)

Constraint validation가 작동하지 않는다. (type=”URL | email”, pattern, min)

<input type="email" onKeyDown={handleKeyDown} />
// email 형식을 체크하는 validation이 작동하지 않는다.

2. HTMLFormElement.requestSubmit()

submit이벤트를 발생한다!

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.code === 'Enter') {
        formRef.current!.requestSubmit()
    }
}

3. React는 NativeEvent가 아니라 SyntheticEvent ??

1.리엑트의 SyntheticEvent란?

리엑트는 모든 브라우저에서 동일한 이벤트를 구현하기 위해 **SyntheticEvent 객체를 이용해서 NativeEvent를 감싸는 방식으로 한다.**

nativeEvent를 사용하고 싶다면? e.nativeEvent.stopImmediatePropagation()

interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E
    currentTarget: C
    target: T
    bubbles: boolean
    cancelable: boolean
    defaultPrevented: boolean
    eventPhase: number
    isTrusted: boolean
    preventDefault(): void
    isDefaultPrevented(): boolean
    stopPropagation(): void
    isPropagationStopped(): boolean
    persist(): void
    timeStamp: number
    type: string
}

2. 리엑트의 이벤트 전파 방

리엑트 17부터 RootElement에서 모든 이벤트를 감지한다(18은 root별로 지원..?)

4. 리엑트의 이벤트 시스템은 EventPlugin, EventPluginHub

1. EventPlugin

컴포넌트에 등록된 이벤트와 이벤트 콜백

<button onClick={handleClick}/>

//types
onClick?: MouseEventHandler<T> | undefined;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;
type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }["bivarianceHack"];

2. EventPluginHub

앱/웹이 실행될때, 컴포넌트에 등록된 EventPlugine들이 주입되며 이벤트 대기열을 관리(수집, 저장, 삭제)
이벤트가 수신되면, 노드를 순회하면서 (버블링, 캡처링)
각 플러그인에 대해 SyntheticEvent를 수집하여 대기열에 저장하고 실행후 삭제한다.

3. `stopPropagation`

이벤트의 전파를 막는게 아니다. SyntheticEvent Array를 비워주는것 뿐이다.

참고

WebWorker를 이용한 병렬처리 - 개선

Mon, 16 May 2022 00:00:00 GMT

0. 글을 작성하는 이유

약 10,000개의 데이터를 가지고 계산하는 로직을... 개선하고 싶어서
- 모바일 팀은 해당 로직을 백그라운드 쓰레드를 사용한다고 한다!
- Front도 WebWorker를 사용하면 Main 스레드와 분리해서 병렬처리 할 수 있다!
WebWorker에 대해서 조금 더 정리하기 위해

1. 개선 결과

Web Worker를 통해 UX를 개선할 수 있었다.
- Total Bloking Time 10% 감소
데이터량이 증가해도 Bloking 걱정이 없어졌다.

2. WebWorker

0. When use Web Worker

UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업
매우 복잡한 수학적 계산 작업 (D3, graphic)

1. Web Worder에서 할 수 있는 것

XMLHttpRequest 를 사용하여 I/O작업을 수행
WebSockets과 IndexedDB 등.

2. 제약사항

Worker는 Parent와 메모리 공유하지 않는다
- Message Data 타입 : 어떠한 데이터 타입도 전달가능 (참고)
- WebWorker는 전달받은 data를 해당 쓰레드 메모리에 저장
Worker는 Dom에 접근할 수 없다.
- Dom API(getElementID, querySelector .. )를 사용불가
Worker는 Parent Page에 직접 접근 할 수 없다
- postMessage, onmessage를 활용하여 통신할 수 있다.
  
  메모리를 공유할수 있게 SharedArrayBuffer 사용하면 되지만 레이스 컨디션(race condition)이 발생한다. 추천하지 않는다. 관련해서 궁금하다면, Atomics 객체를 확인해보길 바란다.

3. 사용법 (예시)

메인 스레드와 웹 워커로 생성된 쓰레드 사이에는 MessageEvent 를 통해 데이터를 주고 받을 수 있다.

message에서 알아서 serialize해서 전달해주면 deserialize해서 데이터를 복사한다.

// worker.js

onmessage = function (e) {
    console.log('Worker: Message received from main script')
    postMessage(`from: ${e.data[1]}, to:main`)
}

// main.js

const myWorker = new Worker('worker.js')

myWorker.postMessage(['hello worder', 'worker'])

myWorker.onmessage = function ({ data }) {
    console.log(data) // from : worker, to: main
}

4. IMG Main Color 계산

복잡한 계산 주체는 Worker로 전달하여 Main 스레드의 일을 줄여준다 🙂

Worker.js Image Data를 전달받아 계산 후 결과값을 전달

self.onmessage = function (e) {
    const result = getAverageColor(e.data)
    postMessage(result)
}

function getAverageColor(imageData) {
    const data = imageData.data
    let r = 0
    let g = 0
    let b = 0

    for (let i = 0, l = data.length; i < l; i += 4) {
        r += data[i]
        g += data[i + 1]
        b += data[i + 2]
    }

    r = Math.floor(r / (data.length / 4))
    g = Math.floor(g / (data.length / 4))
    b = Math.floor(b / (data.length / 4))

    return { r: r, g: g, b: b }
}

Main.js Image Data를 생성하여 Worker에게 전달

<img
	id="img"
	src="https://source.unsplash.com/user/erondu/1000x960"
	onload="load()"
	crossOrigin="anonymous"/>
<div id="main-color"></div>

// script
const myWorker = new Worker("worker.js");

const load =  async () => {
    const img = document.getElementById('img');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
		ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, 100,100);
}

myWorker.onmessage = (e) =>{
    const {r,g,b} = e.data;
    document.querySelector('#main-color').style.backgroundColor = `rgba(${r}, ${g}, ${b})`
}

3. ShareWorker

하나의 워커로 message를 수신하고 싶다면 SharedWorker를 사용하면 된다.

단!!! SharedWorker는 safari, webviews는 지원하지 않는다.

/// A.html
const worker = new SharedWorker('worker.js')
const log = document.getElementById('log')
worker.port.addEventListener(
    'message',
    function (e) {
        log.textContent += '\n' + e.data
    },
    false
)
worker.port.start()
worker.port.postMessage('ping')

// B.html
const worker = new SharedWorker('worker.js')
const log = document.getElementById('log')
worker.port.onmessage = function (e) {
    log.textContent += '\n' + e.data
}

// worker.js
onconnect = function (e) {
    var port = e.ports[0]
    port.postMessage('Hello World!')
}

4. Worker.js 파일을 별도로 만들지 않고 싶다면...

Blob URL.createObjectURL 을 활용하면 된다!

const workerCode = `self.onmessage = function (e) {
                            const result = getAverageColor(e.data)
                            postMessage(result)
                    
                        }
                   .... 
                   }`

const workerBlob = new Blob([workerCode], {
    type: 'application/javascript',
})
const workerUrl = URL.createObjectURL(workerBlob)
const myWorker = new Worker(workerUrl)

5. 참고

build 후 tag 속성이 동적으로 반영되지 않는 문제

Sun, 24 Apr 2022 00:00:00 GMT

TL;DR

hyration 이슈로 a 태그의 href 속성 동적으로 반영되지 않는다.
- gatsby는 hydration error가 미노출
- Nextjs같은 경우 hydration error가 개발환경에서 노출되기 때문, 사전방지
onClick 이벤트를 활용하여 location.href 강제로 시켜준다
- 단점, href 고유의 속성 (새창열기 command + click 못함)

문제의 조건

페이지별로 migration 하고 있어 기존 페이지를 이용해야 한다.
- Repo가 달라.. Link태그를 사용하지 못함..
<a> 태그를 활용하여 redirect를 시켜줘야하는 상황

문제의 컴포넌트(by Gatsby..)

개발환경에서는 문제없이 작동이 된다.

// .env
// LANG=KO

// index.js
const { LANG } = process.env

const getPath = () => {
    if (LANG === 'KO') return 'ko'
    if (LANG === 'EN') return 'en'
    return ''
}

const IndexPage = () => {
    const handleClick = () => {
        console.log(getPath(), LANG)
    }

    return (
        <p>
            <a href={getPath()}>Go to "LANG" {getPath()}</a>
            <button onClick={handleClick}>lang</button>
        </p>
    )
}

// output
;<p>
    <a href="/ko">Go to "LANG" ko</a>
    <button>lang</button>
</p>

Build 하고 Deploy 하면??

이상하다??? 왜 개발환경에서는 됬는데 빌드하고 나서는 없어졋지?

// 빌드된 결과물...
<p>
    <a href>Go to "LANG" ko</a>
    <button>lang</button>
</p>

왜 개발환경에서 확인하지 못했을까?(html을 확인해보자)

개발환경
- SSR이지만, 개발환경에서는 JS를 로딩해서 실행한다.(Markup x)
빌드 후 배포
- SSR이기 때문에, 기본적인 MarkUp 생성(index.html 생성 / 상태값 없을때)
- SSR의 결과물인 HTML + JS ⇒ hydration 발생

// devlop
<div id="___gatsby"></div>

// deploy
<p>
    <a href="">Go to &quot;LANG &quot;</a>
    <button>lang</button>
</p>

Hydration으로 생긴 문제

Hydraion의 역할은 HTML ↔ ReactDom을 비교하여 Event를 달아준다!!
React Dom과 **attribute(href, style, dataset)**가 달라도 변경되지 않는다.
이러한 문제로 인해 href가 변경되도 반영이 안되는 이슈 발생

문제 해결 방법

onClick Method를 활용하여 함수를 호출하여 redirect 시켜준다!!
단점! href 고유의 속성인 새창열기 는 되지 않는다.

DI, DIP

Sun, 17 Apr 2022 00:00:00 GMT

0. 글을 작성하는 이유

클린아키텍처 책을 읽다가.. DIP가 궁금해서
DI, DIP 대해 정의만이라도 정확히 알고 싶어서

TL;DR

Case1
- User 객체는 MySQLDAL 의존하고 있다.
- 문제 : MySQLDAL이 바뀌면, 의존하고 있는 User도 수정해야 된다
Case2
- Case1 해결 : 해당 의존 관계를 외부로 부터 주입받아 Case1 문제를 해결할 수 있다.
- 문제: DB가 바뀌었다면(MySQL → Oracle 변경) User가 수정되어야 한다.
Case3
- 해결: Interface 주입함으로써, DB가 어떤 종류 인지 알 필요가 없다(결합도 ↓)

1. 의존성이란?

두 모듈(컴포넌트) 관계(객체지향에서는 두 클래스 간의 관계)
둘 중 하나가 다른 하나를 어떤 용도를 위해 사용함

1) 기본적인 소스코드 의존성 및 제어흐름

전형적인 호출 트리의 경우 main 함수가 고수준 함수 호출
- 고수준 함수 → 중간함수 → 저수준 함수 호출
소스 코드 의존성의 방향은 반드시 제어 흐름을 따르게 된다.

Source code dependencies vs flow of control — Martin, Robert C. 2017. Clean Architecture — A Craftsman’s Guide to Software Structure and Design. Prentice Hall. Ch. 5. Figure 5.1.

2. 의존성 문제

User는 MySQLDAL 의존하고 있는 상태

MySQLDAL 변경된다면, 의존하고 있는 User도 수정해야 되는 문제!!

class MySqlDal {}

class User {
    protected $dal

    constructor() {
        this.$dal = new MySqlDal()
    }
}

1) DI - 의존성 주입

외부로 부터 의존성을 주입받아 의존성 문제를 해결 할 수 있다.

단, 해당 User는 Mysql에 의존되고 있는 상황... 만약 DB가 Oracle로 변경된다면?

class MySqlDal {}

class User {
    protected $dal

    constructor(MySqlDal: MySqlDal) {
        this.$dal = MySqlDal
    }
}

2) DIP - 의존성 역전

인터페이스 주입을 통해 User는 Oracle, MySql인지 알 필요가 없어졌다.(결합도 ↓)

인터페이스를 기준으로 기능 구현을 강제하기 때문, 어떤 DB든지 상관없다.

interface DBConnnect {
    connect: () => void
}

class MySql implements DBConnnect {
    connect() {
        console.log('connet')
    }
}
class Oracle implements DBConnnect {
    connect() {
        console.log('connet')
    }
}

class User {
    protected $dal

    constructor(dal: DBConnnect) {
        this.$dal = dal
    }
}

참고

Array Fill 함수 이상하다?

Sun, 10 Apr 2022 00:00:00 GMT

글을 작성하게 된 이유

fill 함수가 이상하게 동작해서..

2차원 배열(5 * 5)을 만들자

const matrix = Array(5).fill(new Array())[
    // output
    ([], [], [], [], [])
]

0번재 배열 요소에 1을 할당해보자

나는... 0번째 배열에만 1을 할당했는데... 모든 배열에 1일 할당 됬다.

matrix[0][0] = 1

// output
// [ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ]

문제의 원인

Array.prototype.fill Polyfill을 찾아보면 원인을 쉽게 찾을 수 있었다.
같은 배열(즉, 같은 referece 참조)이기 때문에 문제가 발생하였다.

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {
      ...
      // Step 12.
      while (k < finalValue) {
        O[k] = value;
        k++;
      }

      // Step 13.
      return O;
    }
  });
}

해결방법

Array.from 를 활용하여 매번 새롭게 배열을 생성

const matrix = Array.from({ length: 5 }, (_) => [])
matrix[0][0] = 1

// output
// [ [ 1 ], [], [], [], [] ]

Component 구성 기준

Sun, 03 Apr 2022 00:00:00 GMT

TL;DR

리엑트의 특징을 가지는 Component
- 단일책임원칙 - 한가지의 기능/역할을 가진다
의미있는 테스트를 할 정도의 Component
- UI라면, Ul 기준
- 기능이라면, 기능 기준

0. 글을 작성하는 이유?

Q. 컴포넌트는 어떤 단위로 작성되는게 좋을까?
- A. 테스트를 할 정도의 크기라는 답변을 받았다.
의미있는 테스트를 할 정도의 크기 -> UI / 기능
- 리엑트 컴포넌트의 특징을 가지는 컴포넌트 단위(재사용)

1. 리엑트의 특징

Declarative
Component-Based

1) Imperative vs Declarative (명령형 vs 선언형)

- 예제

// 식당
명령형: 12번 테이블이 비어 있습니다. 나는 저 자리로 걸어가서 않을 겁니다.
선언형: 1명이요!

// 대리운전
명령형: 주차장 북쪽출구로 나와 좌회전. 12번가 출구가 나올 때까지 I-15 North를 타십시오.
      이케아에 가듯이 출구에서 우회전하세요. 직진하여 첫 번째 신호등에서 우회전하십시오.
      다음 신호등을 지나 계속해서 다음 신호등에서 좌회전하세요. 내 집은 # 298입니다
선언형: 내 주소는 ㅇㅇ 아파트입니다

Declarative 같은 경우, Imperative 방식(구현)이 추상화 된것을 알 수있다.
- 식당 : 식당의 직원은 빈 자리를 찾아 인원수에 맞는 자리를 안내할것
- 대링운전: 해당 목적이를 GPS or 경험을 통해 갈것
Declarative을 수행/사용하기 위해서는 먼저 Imperative이 구성되어 있어야한다.
- 단, 어떻게 구현되었는지, 작동하는지 모를뿐이다

- Code Base 예제

명령형

function double(arr) {
    let results = []
    for (let i = 0; i < arr.length; i++) {
        results.push(arr[i] * 2)
    }
    return results
}

function add(arr) {
    let result = 0
    for (let i = 0; i < arr.length; i++) {
        result += arr[i]
    }
    return result
}

$('#btn').click(function () {
    $(this).toggleClass('highlight')
    $(this).text() === 'Add Highlight'
        ? $(this).text('Remove Highlight')
        : $(this).text('Add Highlight')
})

선언형

function double(arr) {
    return arr.map((item) => item * 2)
}

function add(arr) {
    return arr.reduce((prev, current) => prev + current, 0)
}

;<Btn
    onToggleHighlight={this.handleToggleHighlight}
    highlight={this.state.highlight}
>
    {this.state.buttonText}
</Btn>

Declarative을 통해 코드는 더 읽기 쉬어졌다
- map/ruduce가 어떻게 동작하는지 모른다
- react가 state가 변경되면 어떻게 UI를 바꿔줄지는 모른다.
Declarative 프로그래밍의 또 다른 장정은 프로그램의 컨텍스트가 독립적이라는 것이다.
- 명령형 같은 경우 현재 프로그램의 컨텍스트를 의존하는 경우가 많기 때문이다.
함수형 프로그랭이 선언적 프로그래밍의 하위집합니다.

2) Component?

- 프로그래밍

하나 이상 함수를 모아 하나의 특정한 기능을 수행하는 작은 기능적 단위를 말한다.
특징은 응집도는 높게 결합도를 낮게 → 관심사 분리를 강조 (종속 X, 재사용/교체가 가능)
컴포넌트는 제공된 인터페이스를 통해 사용될뿐, 어떻게 작동/구현되는지 알 필요가 없다(캡슐화)
이러한 컴포넌트를 활용한 프로그래밍 방법론을 CBSE / CBD (Component-based software engineering / component-based development)라고 부른다.

- React

컴포넌트란 독립적이며, 재활용가능한 코드의 조각 ⇒ Component - Based
응집도는 높게 결합도를 낮게 → 관심사 분리를 강조 (종속 X, 재사용/교체가 가능)
컴포넌트는 제공된 인터페이스를 통해 사용될뿐, 어떻게 작동/구현되는지 알 필요가 없다(캡슐화)
- State, Props를 사용하여 UI를 보여준다.
- 상태가 변경되면, 해당 UI도 변경된다.
자바스크립트의 함수 역할이 동일하지만, JSX(HTML)를 리턴한다.

2. Test를 통해 컴포넌트 단위를 생각해보자

컴포넌트를 테스트하는 이유
- 확장 가능성 있는 코드 작성 및 코드의 질을 올리기 위해
- 리펙토링을 했는데 기존 기능이 정상 작동하는지 확인하기 위해
- 컴포넌트 크기를 조절하기 위해 → 의미있는 Test를 할 정도
CRA는 기본적으로 React Testing Library 를 지원하며, 이를 활용해 UI Test를 진행한다.
- data-testId를 통해 DOM에 접근하여 테스트를 진행한다 하지만 이러한 test 속성이 production 코드를 들어가는걸 방지하기 위해 바벨 플러그인을 제공한다
- cypress 같은 경우 React Testing Library 처럼 data-cy 속성을 사용 (링크)

function ProductCategoryRow({ category }: ProductCategoryRowProps) {
    return (
        <tr>
            <th colSpan={2}>{category}</th>
        </tr>
    )
}

function ProductRow({ product }: ProductRowProps) {
    const name = product.stocked ? (
        product.name
    ) : (
        <span style={{ color: 'red' }} data-testid="stocked-element">
            {product.name}
        </span>
    )

    return (
        <tr>
            <td>{name}</td>
            <td>{product.price}</td>
        </tr>
    )
}

function ProductTable({
    products,
    filterText,
    inStockOnly,
}: ProductTableProps) {
    const rows: ReactNode[] = []
    let lastCategory: string

    products.forEach((product) => {
        if (product.name.indexOf(filterText) === -1) {
            return
        }
        if (inStockOnly && !product.stocked) {
            return
        }
        if (product.category !== lastCategory) {
            rows.push(
                <ProductCategoryRow
                    category={product.category}
                    key={product.category}
                />
            )
        }
        rows.push(<ProductRow product={product} key={product.name} />)
        lastCategory = product.category
    })

    return (
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>{rows}</tbody>
        </table>
    )
}

function FilterableProductTable() {
    const [filterText, setFilterText] = useState('')
    const [inStockOnly, setInStockOnly] = useState(false)

    return (
        <div>
            <ProductTable
                products={PRODUCTS}
                filterText={filterText}
                inStockOnly={inStockOnly}
            />
        </div>
    )
}

describe('fullTest', () => {
    test('ProductTable', () => {
        render(
            <ProductTable
                products={PRODUCTS}
                filterText={''}
                inStockOnly={false}
            />
        )
        const category = screen.getByText(PRODUCTS[0].category)
        expect(category).toBeInTheDocument()
    })

    test('ProductRow', () => {
        const product = PRODUCTS[0]
        render(<ProductRow product={product} />)
        const price = screen.getByText(product.price)
        expect(price).toBeInTheDocument()
    })

    test('StockedProductRow', () => {
        const stockedProduct = PRODUCTS[2]
        render(<ProductRow product={stockedProduct} />)
        const stockElement = screen.getByTestId('stocked-element')
        expect(stockElement).toBeInTheDocument()
    })

    test('ProductCategoryRow', () => {
        const category = PRODUCTS[0].category
        render(<ProductCategoryRow category={category} />)
        const element = screen.getByText(category)
        expect(element).toBeInTheDocument()
    })
})

3. API, CustomHook, Redux Test 방법

api 관련 테스트(msw을 활용 - Mock API)

// msw/index.ts

import {rest} from 'msw'
import {setupServer} from 'msw/node'

const server = setupServer(
    rest.get('/greeting', (req, res, ctx) => {
        return res(ctx.json({greeting: 'hello there'}))
    })
)

export default server

// index.tsx
const initialState = {
    error: null,
    greeting: null,
}

function greetingReducer(state: typeof initialState
    , action: any) {
    switch (action.type) {
        case 'SUCCESS': {
            return {
                error: null,
                greeting: action.greeting,
            }
        }
        case 'ERROR': {
            return {
                error: action.error,
                greeting: null,
            }
        }
        default: {
            return state
        }
    }
}

type Props = {
    url: string
}

export default function Fetch({url}: Props) {
    const [{error, greeting}, dispatch] = useReducer(
        greetingReducer,
        initialState,
    )
    const [buttonClicked, setButtonClicked] = useState(false)

    const fetchGreeting = async (url: string) =>
        axios
            .get(url)
            .then(response => {
                const {data} = response
                const {greeting} = data
                dispatch({type: 'SUCCESS', greeting})
                setButtonClicked(true)
            })
            .catch(error => {
                dispatch({type: 'ERROR', error})
            })

    const buttonText = buttonClicked ? 'Ok' : 'Load Greeting'

    return (
        <div>
            <button onClick={() => fetchGreeting(url)} disabled={buttonClicked}>
                {buttonText}
            </button>
            {greeting && <h1>{greeting}</h1>}
            {error && <p role="alert">Oops, failed to fetch!</p>}
        </div>
    )
}

// index.test.tsx
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('loads and displays greeting', async () => {
    render(<Fetch url="/greeting" />)

    fireEvent.click(screen.getByText('Load Greeting'))

    await waitFor(() => screen.getByRole('heading'))

    expect(screen.getByRole('heading')).toHaveTextContent('hello there')
    expect(screen.getByRole('button')).toBeDisabled()
})

test('handles server error', async () => {
    server.use(
        rest.get('/greeting', (req, res, ctx) => {
            return res(ctx.status(500))
        }),
    )

    render(<Fetch url="/greeting" />)

    fireEvent.click(screen.getByText('Load Greeting'))

    await waitFor(() => screen.getByRole('alert'))

    expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!')
    expect(screen.getByRole('button')).not.toBeDisabled()
})

CustomHooks Test

// usePage.ts
const usePage = (url: string) => {
    const [data, setData] = useState('')
    const [isLoading, setLoading] = useState(true)

    useEffect(() => {
        axios
            .get(url)
            .then((response) => {
                const { data } = response
                const { greeting } = data
                setLoading((prev) => !prev)
                console.log({ isLoading })
                setData(greeting)
            })
            .catch((error) => {
                console.log('erroe')
                setLoading(false)
                setData(error)
            })
    }, [])

    return [data, isLoading]
}

// usePage.test.ts
const setupRenderCustomHook = () => {
    return renderHook(({ url }) => usePage(url), {
        initialProps: {
            url: '/greeting',
        },
    })
}

describe('usePage', () => {
    it('usePage를 새로운 pageId와 호출하면 isLoading은 true이다.', async () => {
        const { result, waitForNextUpdate, rerender } =
            setupRenderCustomHook()
        await waitForNextUpdate()
        const [data1, isLoading2] = result.current
        console.log(result.current)

        rerender()
        const [data, isLoading] = result.current

        console.log({ data1, isLoading2, data, isLoading })

        expect(data).toBe('hello there')
        expect(isLoading).not.toBe(true)
        rerender()
        expect(isLoading).not.toBe(true)
    })
})

Store Test

// store/index.ts
export const initialState = [
    {
        text: 'Use Redux',
        completed: false,
        id: 0,
    },
]

const todosSlice = createSlice({
    name: 'todos',
    initialState,
    reducers: {
        todoAdded(state, action: PayloadAction<string>) {
            state.push({
                id:
                    state.reduce(
                        (maxId, todo) => Math.max(todo.id, maxId),
                        -1
                    ) + 1,
                completed: false,
                text: action.payload,
            })
        },
    },
})

// store/index.test.ts

test('should return the initial state', () => {
    const foo = reducer(undefined, {})
    console.log(foo)

    expect(foo).toEqual([
        {
            text: 'Use Redux',
            completed: false,
            id: 0,
        },
    ])
})

test('should handle a todo being added to an empty list', () => {
    const previousState: typeof initialState = []
    expect(reducer(previousState, todoAdded('Run the tests'))).toEqual([
        {
            text: 'Run the tests',
            completed: false,
            id: 0,
        },
    ])
})

test('should handle a todo being added to an existing list', () => {
    const previousState = [
        {
            text: 'Run the tests',
            completed: true,
            id: 0,
        },
    ]
    expect(reducer(previousState, todoAdded('Use Redux'))).toEqual([
        {
            text: 'Run the tests',
            completed: true,
            id: 0,
        },
        {
            text: 'Use Redux',
            completed: false,
            id: 1,
        },
    ])
})

참고

RN ↔ React(JS) Webview 통신

Sun, 20 Mar 2022 00:00:00 GMT

~~앱을 못 만드니까 WebView라도 만들자 : )~~

TL;DR

postMessage onMessage를 활용해서 통신하자
- RN → Web : RN에서 Web JS 실행 방법
  1. injectedJavaScript : WebView Loading js코드 실행
  2. injectJavaScript : RN에서 WebView로 JS코드 실행시킬때
- Send/Receive Message (Only String type!!!)
  1. Send (Web ←→ RN)
    - postMessage : method를 활용해서 Message를 보낼 수 있다
  2. Receive
    - onMessage (RN)
    - window.addEventListener('message') (Web)
<Iframe> ,window.open 통신하는 방법이랑 유사하다!!!

1. React(JS) ↔ Native

기존 Webview(v0.60부터 Deprecated) 대신 `react-native-webview` 를 사용

이쁘게 위치 시키기 위해 <SafeAreaView/> 를 사용하자

yarn add react-native-webview
pod install //ios

WebView에 js를 주입(실행) 시켜주려면

스크립트 끝에 true;?!! 오류 발생하는것을 방지(공식 문서)

injectedJavaScript Props활용하면, WebView를 실행하기전에 스크립트를 실행!

// RN
const App = () => {
    const runFirst = `
      window.isNativeApp = true;
      true;
    `

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <WebView
                source={{
                    uri: 'http://localhost:3000/',
                }}
                injectedJavaScript={runFirst}
            />
        </SafeAreaView>
    )
}

// Web
const Web = () => {
    return <div>{window.isNativeApp && 'Hello WebView'}</div>
}

injectJavaScript Method를 활용하면 실행중인 WebView를 확인 할 수 있다.

// RN
const App = () => {
    const runJS = `
      document.body.style.backgroundColor = 'red';
      true;
    `

    const handleClick = () => {
        ref.current.injectJavaScript(runJS)
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Button title="injectJavaScript" onPress={handleClick} />
            <WebView
                source={{
                    uri: 'http://localhost:3000/',
                }}
            />
        </SafeAreaView>
    )
}

// Web
const Web = () => {
    return <div></div>
}

Web에서 보낸 메세지를 받아보자

onMessage Props를 활용해서 Messge를 수신

const App = () => {
    const handleMessage = (event) => {
        const {
            nativeEvent: { data },
        } = event
        Alert.alert(data)
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <WebView
                source={{
                    uri: 'http://localhost:3000/',
                }}
                onMessage={handleMessage}
            />
        </SafeAreaView>
    )
}

WebView가 호출되면서, window 네임스페이스에 WebView객체가 추가(window.ReactNativeWebView)

postMessage Method를 활용해서 Message를 보낸다
중요!! 보낼 수 있는 Message의 타입은 string 뿐이다

const Web = () => {
  const [input, setInput] = useState('');

	const handleChange = ({ target: {value} } ) => {
    setInput(value)
  }

  const handleSubmit = () => {
    if(window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(JSON.stringify(input))
    }
  }
  return (
    <div>
      <h1>Input Message</h1>
      <input value={input} onChange={handleChange}/>
      <button onClick={handleSubmit}>submit</button>
    </div>
  )

RN에서 보낸 메세지를 받아보자

postMessage를 통해 WebView로 발신

const App = () => {
    const ref = useRef()
    const handleClick = () => {
        ref.current.postMessage('This Message from RN')
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Button title="sendMessageToWebView" onPress={handleClick} />
            <WebView
                ref={ref}
                source={{
                    uri: 'http://localhost:3000/',
                }}
            />
        </SafeAreaView>
    )
}

window.addEventListener('message')를 활용해서 Message를 수신

const Web = () => {
    const [message, setMessage] = useState('')

    useEffect(() => {
        window.addEventListener('message', ({ data }) => {
            setMessage(data)
        })
    }, [])

    return (
        <div>
            <h3>Receive Message : {message}</h3>
        </div>
    )
}

2. Iframe / window open 통신방법

Iframe

// 발신
$iframe.contentWindow.postMessage(value, 'http://localhost:3000')

// 수신
window.addEventListener('message', (e) => {
    if (e.origin !== 'http://localhost:3000') return
    console.log(e.data)
})

popup(window.open)

// 발신
const openPopup = window.open(
    'http://localhost:3000/child',
    'popupWindowName',
    'popup=1'
)
openPopup.postMessage(value, 'http://localhost:3000')

// 수신
window.addEventListener('message', (e) => {
    if (e.origin !== 'http://localhost:3000') return
    console.log(e.data)
})

참고

Event Loop

Sun, 13 Mar 2022 00:00:00 GMT

브라우저 내에는 여러가지의 Event Loop가 있으며, 각 Event Loop들 끼리 협력한다?

TL;DR

MicroTaskQueue는 우선순위가 높은게 아니다
- Event Loop의 실행 순서가 정해져 있다.
JS Event Loop는 동시성을 지원한다
- NonBlocking 특징으로 동시에 여러가지의 task 처리

1. JS Event Loop란?

JS Spec이 아니라 HTML Spec이다...

자바스크립트의 런타임 모델은 Event Loop 기반이다
특징
1. 싱글쓰레드이다 (One Thread = One call stack = One thing at a time)
  - Render Process의 Main쓰레드가 JS Engine이다
  - 하나의 콜스택을 가지고 있다.
  - 한번에 하나의 일만 처리 할 수 있다.
2. Queue(Task, MicroTask)를 가지고 있다.
  
  이름만.. Queue ... Set의 형태이다..
  - TaskQueue와 MicroTaskQueue는 다르지만, 같은 방법으로 생성된다(참고)
  - MicroTaskQueue는 performing a microtask checkpoint를 통해 실행된다.
3. perform a Microtask checkpoint의 초기값을 False
```
while (microtaskQueue.waitForMessage()) {
    //P**erform a Microtask checkpoint = true;**
    microtaskQueue.processNextMessage()
}
```
  1. MicrotaskQueue가 있다면?
  2. Perform a Microtask checkpoint = true
  3. 가장 오래되면서 실행가능한 Microtask를 실행
  4. MicrotaskQueue가 비워질때까지 반복
  5. Perform a Microtask checkpoint = false
FLOW
1. UI or Interaction
2. Call Stack Running OrQueuing Message(Asyncronous Logic)
  - Timer(setTimout/setInterfal)의 경우, 해당 시간이 지나고 난 다음, Queueing 한다.
  - Promise, MutationObserver 경우, MicroTaskQueue로 진입한다.(async는 Promise의 syntactic sugar)
```
const response = await fetch(…);
const json = await response.json();
const foo = JSON.parse(json)

// syntactic sugar
fetch(…)
  .then(response => response.json())
  .then(json => {
    const foo = JSON.parse(json);
  });
```
3. Call Stack Empty (currently running task === null)
4. Perform a microtask checkpoint 실행
  - Perform a Microtask checkpoint = true면, MicroTaskQueue 실행
5. TaskQueue 실행
  - Task 실행 후, 3번 ~ 5번 반복
6. Update the rendering

2. Event Loop는 동시성이다??

JavaScript는 단일 스레드이므로 동시성이 아니다..???

동시성(Cuccent) vs 병렬성(Paraller)
- 동시성 : 여러개의 쓰레드를 번갈아 가면서 실행하는것
- 병렬성 : 여러개의 쓰레드를 각 자 실행하는 것

JS engine의 특징
- “Run to Completion”:
  - 실행한 함수가 다른 작업에 의해 선점될 일 없고, 다른 모든 코드의 실행이 우선이며, 중단될 일 없다.
  - 이러한 특징은 하나의 함수가 너무 크면, UI가 멈추는 일이 있다.
- “Non Blocking”
  - Event 및 CallBack을 이용하여 Blocking 되지않고, 작업을 처리할수 있기 때문!
- 이러한 특징으로 인해 Concurrency(동시성)을 지원한다.
```
console.log('before')
setTimeout(() => {
    console.log('Inside SetTimeout')
}, 3000)
console.log('after')
```

3. 용어 설명

1. Stack === Call Stack

콜 스택이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다.
사용목적
- 현재 실행중인 서브루틴의 실행이 끝났을때, 제어를 반환할 지점을 보관하기 위해
- 서브 루틴별 컨텐스트를 가지고 있으며, 해당 컨텐스트 안에는 실행, 제어, 런타임 스택이 있다.

2. Heap

런타임 환경에서 사용되는 변수(reference)의 영역
사용자가 관리하는 영역이라, 자유럽게 메모리를 할당/해제 할 수 있으나, 이러한 자유도로 인해 메모리 누수가 생길 영향이 놓다.

3. Queue(Task Queue)

메서지의 대기열..?
기본적으로 비동기적인 작업을 Task라 부르며, 이러한 Task의 집합을 Task Queue다
```
setTimeout('메세지', 500)
Promise.resolve().then('메세지')
```

4. 동기 vs 비동기 / Block vs Non-Block

동기 vs 비동기 : 함수의 실행결과가 바로 오는냐?(Sync) 안오냐?(Async)
Block vs Non-Block : 제어권을 뺏기냐?(Block) 안 빼기냐?(NonBlock)

4. 참고

https://html.spec.whatwg.org/multipage/webappapis.html#event-loops

https://ko.wikipedia.org/wiki/콜_스택

https://innolitics.com/articles/javascript-decorators-for-promise-returning-functions/

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth

How to Find Memory leak

Sun, 06 Mar 2022 00:00:00 GMT

작성이유

메모리 Leak 발견했고 해결했다!
메모리 Leak과 찾는방법(개발자도구)에 대해서 정리하고 싶어

트러블 슈팅

전체 로직 없으니... 아주 작은 문제같다.. ㅜㅜ

// websocket으로 받는 데이터: newTransactions
const data = [...newTransactions, data (1일치 데이터)]

화면에 표시될 데이터 : 24시간전부터 지금까지 데이터
문제
- 시간이 지날수록 outdated 데이터가 늘어났다.
- 개발환경에서는 노출되지 않았지만, 배포 후 급격히 늘어나는 Heap...(개발자 도구)
해결방법
- outdated 데이터 삭제

Memory Life Cycle

할당 : Allocate the memory you need, malloc()
사용 : Use the allocated memory (read, write)
해제 : Release the allocated memory when it is not needed anymore , free()

JS Variable Memory

함수 실행컨텍스트내에 VO(ariable object)에 해당 변수가 선언
reference의 경우, Heap에 할당이 되어 포인터로 해당 변수를 가르키게 된다.
- main context에 할당된 변수를 전역 변수라고 한다.

JS GC Algorithm(Mark And Sweep)

참조되고 있는 메모리(Marking)를 제외하고 제거(사용되지 않는 메모리)

Memory Leak

더 이상 사용하지 않는 메모리를 정리하지 못할때 ㅠㅠ..

1. 전역변수

function foo(arg) {
    bar = 'this is an explicit global variable'
}

2. 타이머와 콜백

const someResource = getData();
setInterval(function() {
    const node = document.getElementById('Node');
    if(node) {
        // Do stuff with node and someResource.
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

3. DOM 외부의 참조

const detachedTree;

function create() {
  const ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedTree = ul;
}

document.getElementById('create').addEventListener('click', create);

4. 클로져

var theThing = null
var replaceThing = function () {
    var originalThing = theThing
    var unused = function () {
        if (originalThing) console.log('hi')
    }
    theThing = {
        longStr: new Array(1000000).join('*'),
        someMethod: function () {
            console.log(someMessage)
        },
    }
}
setInterval(replaceThing, 1000)

Memory 관련 개발자도구

1. Heap snapshot

현재 Heap영역의 메모리 할당 내역을 보여준다.

2. Allocation instrumentation on timeline

var x = []

function grow() {
    x.push(new Array(1000000).join('x'))
}

document.getElementById('grow').addEventListener('click', grow)

3. Console Performance Monitor

이 자료를 가지고 내가 지금 할 수 있는거?

불필요한 노드(페이지에 없는 노드 또는 해제되어야 할 노드)를 찾을 수 있다.

var detachedTree

function create() {
    var ul = document.createElement('ul')
    for (var i = 0; i < 10; i++) {
        var li = document.createElement('li')
        ul.appendChild(li)
    }
    detachedTree = ul
}

document.getElementById('create').addEventListener('click', create)

클릭 이벤트가 발생할때마다, Node와 Heap의 크기가 증가 하고 있다.

참고

SSR..Nextjs...Hydration

Sun, 20 Feb 2022 00:00:00 GMT

0. 왜 작성하는가?

왜 SSR인가? 왜 Nextjs인가?
문제의 블로그 ... Hydration Style Issue

1. Nextjs

1. JSX 문법으로 SSR 할 수 있는 프레임워크

왜? 사용하나? 무엇이 이점일까?

사용자 친화적?

Code Split, Skeleton UI 활용하면 CRA로 충분히 가능하지 않을까?

- 더 빠른 화면을 보여준다
- 깜박이는 현상을 제거할 수 있다 (js 다운받아 html 생성하기 때문)

SEO?

최근에는 CSR도 가능하게 만든다고 한다.

- SEO 점수를 높여야지 검색시, 먼저 노출되기 떄문
- HTML 페이지의 정보가 필요하는데...없다(CSR)

Nextjs 동작원리
- 기본적으로 모든 페이지를 pre-Render를 제공하고 있고,(서버에서 HTML 생성)
- 이러한 페이지는 먼저 client에게 노출 후,(깜빡임 현상 제거 및 SEO 적용)
- page에 필요한 js를 다운로드하여 적용한다.(Hydration)

2. CRA와 SSR의 Loading 속도 차이

인터넷 속도가 느린곳은 SSR을 지원할 충분한 증거 0. Loading 시점

DomContentLoaded : Render Tree 완성 시점
Loaded: 리소스(JS, CSS, 이미지) 다운로드 후 적용 시점

Static 파일(단순 문자열)

Throttle이 심해질수록(fast 3G -> slow 3G) Loading 시점의 차이가 큼 - reactjs - nextjs

Code

const Lorem = () => {
    return (
        <div>
            {Array(1000)
                .fill(1)
                .map((v, index) => {
                    return (
                        <div key={index}>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. A corporis dolorum
                                enim fugiat, harum illo impedit in
                                inventore nostrum placeat, porro
                                possimus quam quibusdam quisquam
                                reprehenderit similique sint totam
                                velit?
                            </p>
                        </div>
                    )
                })}
            )
        </div>
    )
}

API 요청시

Throttle이 심해질수록(fast 3G -> slow 3G) Loading 시점의 차이가 큼
- reactjs
- nextjs

Code

// next
export const getStaticProps: GetStaticProps = async () => {
    const response = await fetch(
        'https://jsonplaceholder.typicode.com/todos'
    )
    const todos: Todo[] = await response.json()

    return {
        props: {
            todos,
        },
    }
}

function About({ todos }: Props) {
    return (
        <div>
            {todos.map((todo, index) => {
                return (
                    <div key={index}>
                        <p>{todo.title}</p>
                    </div>
                )
            })}
            )
        </div>
    )
}

// react
const App = () => {
    const [todos, setTodos] = useState([])
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos')
            .then((response) => response.json())
            .then((json) => setTodos(json))
    }, [])

    return (
        <div>
            {todos.map((todo, index) => {
                return (
                    <div key={index}>
                        <p>{todo.title}</p>
                    </div>
                )
            })}
            )
        </div>
    )
}

2. Hydration

Server에서 받은 HTML에 Event를 달아주자

1. Server의 ReactDOMServer

JSX는 HTML이 아니다... HTML로 바꿔주는 Method

ReactDOMServer.renderToString(element)

renderToString()
- Next(Node)에서 만든 Component(JSX)를 HTML로 만듬

2. Client의 ReactDOM

ReactDOM은 아직 unMount상태이다!!

ReactDOM.hydrate(element, container[, callback])

hydrate()
- HTML(SSR) 이후 다운로드 받은 JS로 ReactDom(unMounted 상태)을 생성
- HTML과 ReactDOM을 비교하여, Event를 등록한다.
  - Hydrate의 역할은 이벤트를 달아주는거다.
  - React Dom과 text, attribute(style, dataset)가 달라도 변경되지 않는다.
    - 이러한 이슈는 dev환경에서 Error로 노출된다.
    - 해결방법은 간단하다 → 한번 더 렌더링 하면된다.
      - 장점: 문제해결
      - 단점: 두번 렌더링 → 리소스, 시간 듬 → SSR할 필요가ㅏ..

3. React Hydration Error

Server(HTML)랑 Client(ReactDom) 달라? 에러(dev환경)

React.hydration 함수는 Server와 Client가 동일하다고 생각하고 이벤트를 등록

function MyComponent() {
    const color = typeof window !== 'undefined' ? 'red' : 'blue'
    return <h1 style={{ color }}>Hello World!</h1>
}

export default MyComponent

//console.error
// Warning: Prop `style` did not match. Server: "color:blue" Client: "color:red"

문제의 코드

const Home = () => {
    return (
             <>
              <SSR />
              <CSR />
              <Always />
             </>
    )
}

export default function SSR() {
    if (process.browser) return null
  return <div style={{ color: 'red' }}>SSR</div>
}

export default function CSR() {
  const [visible, setVisible] = useState(false)
  useEffect(() => setVisible(true), [])

  if (!visible) return null
  return <div style={{ color: 'blue' }}>CSR</div>
}

export default function Always() {
  return <div style={{ color: 'green' }}>Always green component</div>
}

작동원리

~~설명은 할 수 있으나, 100% 이해못함..~~

1. Server에서 만든 HTML은 `SSR`,`ALWAYS` 컴포넌트 노출
2. Client JS로 만든 ReactDOM은 `ALWAYS`만 노출
   -- hydration —
3. React는 당연히 같은 태그니까 1  === 3 태그는 같다고 판단하여 tag를 그대로 두고 textContent를 교체
   - 속성은 변경되지 않는다.
4. CSR의 useEffectf로 인해 추가!

<>
    <div></div> //ssr   - 1
    <div></div> //always - 2
</>

<>
    <div></div> always - 3
</>

참고

How to Debugger?

Sun, 13 Feb 2022 00:00:00 GMT

Chrome, React는 다 만들어놈... 잘 사용하기만 하면 된다.

자주 쓰는 console API에 대해서

dir

기능 및 역할 : Object의 속성을 트리의 형태로 보여준다
log와의 차이점
- log의 경우, toString() 값을 보여주고, dir은 tree의 형태로 보여준다.
- document.body 인자로 넣어보면, log ⇒ HTML tree의 형태, dir ⇒ JSON.tree

// log vs dir
> console.log(/foo/);
  /foo/

> console.dir(/foo/);
  /foo/
  global: false
  ignoreCase: false
  lastIndex: 0
	..

> console.log(new Date())
  Sun Feb 13 2022 18:33:35 GMT+0900 (한국 표준시)

> console.dir(new Date())
  > Sun Feb 13 2022 18:33:35 GMT+0900 (한국 표준시)
		constructor
		getDate()
		..

trace

기능 및 역할 : 호출한 곳의 stack trace를 보여준다.

function foo() {
    function bar() {
        console.trace()
    }
    bar()
}

foo()

/*
bar
foo
<anonymous>
*/

Debugger Statement (in Chrome)

Runtime 중 해당 문을 실행시키면, 해당 컨텍스트에 접근할 수 있다.(like breakPoint)

Chrome은 다 만들어놨다...

1. Chrome Debugger Button

Resume Script Execution(Command + \)
- 역할 : 스크립트를 재실행하며, 다음 breakPoint 만나면 멈추게 된다.

Step over (Command + ')

역할 : 해당 함수의 컨텍스트를 넘어가고 다음 라인으로 넘어간다

flow: A(stop) → (B , C skip) → B(stop)

function updateHeader() {
    var day = new Date().getDay()
    debugger
    var name = getName() // A
    updateName(name) // D
}
function getName() {
    var name = app.first + ' ' + app.last // B
    return name // C
}

Step into (Command + ;)

역할 : 해당 함수의 컨텍스트로 넘어간다.

flow : A(stop) → B(stop)

function updateHeader() {
    var day = new Date().getDay()
    debugger
    var name = getName() // A
    updateName(name)
}
function getName() {
    var name = app.first + ' ' + app.last // B
    return name
}

Step out (Command + Shift + ;)

역할: 해당 함수를 실행후, 다음 컨텍스트로 넘어간다.

flow: A(stop) → (B Skip) → C(stop)

function updateHeader() {
    var day = new Date().getDay()
    var name = getName()
    updateName(name) // C
}
function getName() {
    debugger
    var name = app.first + ' ' + app.last // A
    return name // B
}

Step(F9) : line by line 으로 이동한다.
Deactivate BreakPoint (Command + F8 ): Skip BreakPoint
Don’t Pause / Pause on Exception
- 역할: Exception이 발생하는 곳에서 해당 스크립트를 멈출 수 있다.

2. Chorme Debugger pannel

Watch : 원하는 변수를 등록하여, 함수가 실행시 어떻게 변하는지 확인할 수 있다.

BreakPoints: 현재 지정한 BreakPoint를 확인할 수 있다.

Scope : 해당 변수의 Local / Script / Global Scope의 변수영역을 보여준다.

Call Stack: StackTrace를 보여준다.

XHR/Fetch BreakPoints : URL을 등록하여, fetch시 해당 로직 BreakPoint 등록
Global Listeners / Event Listener BreakPoints
- 등록된 Global, Window, Document 이벤트 fire시, 해당 로직 BreakPoint 등록

React 개발자 도구

1. Components

Suspend
- 컴포넌트를 Suspend시켜, Fallback Component 여부를 확인할 수 있다.
Inspect
- 컴포넌트가 어떤 HTML 태그를 렌더링 됬는지 Element 태그로 이동하여 알려준다.
Debugging
- 컴포넌트의 정보(props, state ...)를 console 태그에 알려준다.

View Soure
- 해당 컴포넌트의 jsx 파일을 Sources 탭으로 이동하여 보여준다.

2. Profile

어플리케이션이 느리다? Profile 탭을 확인하자

FlameGraph vs Ranked 차트를 확인하면서, 해당 컴포넌트가 왜 Render됬는지, 시간은 얼마나 걸리는지 확인할 수 있다.

참고

웹 성능 최적화 - 리소스

Sun, 06 Feb 2022 00:00:00 GMT

왜 작성해야 하는가?

프론트엔드 개발자을 위한, 실전 웹 성능 최적화(링크)를 보고...
웹성능은 정말로 중요하기 때문이다. (월마트는 1초 개선해서 매출 2% 증가)
회사 프로젝트 lighthouse 점수를 1점이라도 올리기 위해...

TL;DR

1. 이미지, 동영상

문제 : 리소스(이미지, 동영상)를 다운받는데 시간과 리소스가 걸린다.
해결방법 : 손실없이 압축해서 보내자 (WebP, WebM => web에 최적화된 포맷)

2. 폰트

문제
- 폰트를 다운받는다 -> 적용하는데 시간이 걸린다 (UX 좋지 않음)
- CSSOM를 만들때, 해당 폰트가 없다면, 다운로드가 완료될때가지 렌더링 차단(Render Tree 생성 중단 ㅠㅠ)
  - 폰트는 렌더링 차단 리소스(물론, HTML, CSS, JS 또한 렌더링 차단 리소스)
해결방법
폰트의 적용시점을 바꾸자(FOUT / FOIT)
폰트의 사이즈를 줄이자(WOFF2)

이미지 최적화

문제 : 이미지 다운로드 -> 용량(사이즈)이 크다 -> 네트워크 리소스 소모
해결방법
1. 콘텐츠 사이즈에 맞게 이미지 사이즈를 줄이자 (단, 레티나 디스플레이를 대비해서 (ex. 300 x 300 ⇒ 600 x 600)으로 줄이자)
2. 이미지 포멧을 변경하자(파일크기 : PNG > JPG > WEBP, 같은 이미지 경우)
  - PNG 기준 95% 감소 (15.6MB → 704KB)
  - JPG 기준 65% 감소 (2.79M → 862KB)
  - 구글에서 만든 이미지 포맷 변경 사이트를 활용하자
3. webp를 지원하지 않는 브라우저도 있을수 있기 때문에, <picture> <source>태그를 활용하자
  - 지원하는 type(포맷)에 맞쳐 브라우저가 노출된다.
```
function App() {
    return (
        <div>
            <picture>
                <source srcSet={webpSrc} type="image/webp" />
                <img src={jpgSrc} alt="img" />
            </picture>
        </div>
    )
}
```

동영상 최적화

문제 : 이미지 사이즈 문제와 동일
해결방법 : 동영상 압축하자(압축사이트)
- 압축하기전,(중요!!) 압축 비율은 콘텐츠의 성향에 따라 디자이너와 논의하면 좋을것 같다(이미지 화질 영향)
- webm(web 최적포멧)를 지원하지 않는 브라우저도 있을수 있기 때문에, <video> <source>태그를 활용하자
  - 지원하는 type(포맷)에 맞쳐 브라우저가 노출된다.(이미지와 동일)
```
function App() {
    return (
        <div>
            <video autoPlay muted>
                <source src={earthWebM} type="video/webm" />
                <source src={earthMp4} type="video/mp4" />
            </video>
        </div>
    )
}
```

폰트 최적화

1. 폰트 적용 시점 컨트롤러

FOUT(Flash of Unstyled Text) : 기본폰트 → 다운로드 완료 → 폰트 적용(깜빡임)
- IE / Edge 웹폰트 적용 방식
FOIT(Flash of Invisible Text) : 폰트를 완전히 다운로드 되기 전까지 보이지 않음
- Chrome / Safari 웹폰트 적용 방식

font-display 속성을 가지고 폰트 적용시점 컨트롤러

font-display: auto; // 브라우저 방식을 따름
font-display: block; // FOIT (default 3s가 지나면 시스템 폰트 노출 후 swap 형태로 변경)
font-display: swap; // FOUT
font-display: fallback; // default 3s가 지나면 시스템 폰트로 계속해서 사용 => 캐시
font-display: optional; // fallback가 차이점(font-download 우선순위를 낮춘거나 중단)

2. 폰트 사이즈 줄이기

Format에 따른 파일 크기 (EOT > TTF/OTF > WOFF > WOFF2)

src 순서에 따라 우선순위 적용

@font-face {
    font-family: NanumSqureWeb,
    src: local('NanumSqureWeb'), // 로컬폰트(클라이언트 컴퓨터)
             url(NanumSquareR.woff2) format('woff2'),
             url(NanumSquareR.woff) format('woff'),
             url(NanumSquareR.ttf) format('truetype');
}

subset font : font파일에서 필요한 글자들만 가져오자 (사이트 : Transfonter)

unicode-range : 지정된 글자가 있다면 폰트를 다운로드 하고, 안하면 다운로드 하지 않는다.(trigger)

@font-face {
    font-family: NanumSqureWeb,
  src: url(NanumSquareR.woff2) format('woff2');
    unicode-range: 적용할 글자의 유니코드의 값이나 범위 예) u+0041; << A의 유니코드
}

data-url 로 변경하자
- font를 파일로 저장하지 않는다(별도의 네트워크 리소스 X)
- base 64기반으로 data-url로 바꿔서 이용한다. (사이트 : Transfonter)
preload 옵션 사용하기(React)
- 특정 리소스(Style, Script, Video, font 등) 미리 다운로드를 실행하게 한다.
  - 적용 전
    - JS를 다운받고, font파일을 다운로드 하기 시작한다.
  - 적용 후
    - 그전보다 빠르게 font파일을 다운로드 하기 시작한다.
```
<link
    rel="preload"
    href="https://fonts.gstatic.com/s/notosanskr/v25/Pby7FmXiEBPT4ITbgNA5CgmOelzI7bgWsWdx3Ch_M9uykRdOOoSdBjU92zqHxA.0.woff2"
    as="font"
    type="font/woff2"
    crossorigin="anonymous"
/>
```

참고

Dependency Array를 어떻게 비교할까?

Sun, 30 Jan 2022 00:00:00 GMT

0. 작성하는 이유

useEffect의 Dependency Array는 어떻게 비교를 해서 호출할까?
componentDidUpdate 처럼 사용하고 싶은데... 어떻게 하지?
referenceType일 경우, 별도의 작업없이 사용할 수 없을까? (custrom hook)

1. Component Render(ReRender) Flow

초기 Render : init Component → useEffect
Re-Render: init Component → clean up useEffect → useEffect

const NumberComp = () => {
    console.log('init Component')

    const [state, setState] = useState(0)

    const handleClick = () => {
        setState((prev) => prev + 1)
    }

    useEffect(() => {
        console.log('useEffect')

        return () => {
            console.log('clean up useEffect')
        }
    }, [state])

    return (
        <div>
            <button onClick={handleClick}>Change State</button>
        </div>
    )
}

2. react-dom 코드

useEffect 실행코드(update 조건 충족시)와 dependency Check부분을 확인해보자

function areHookInputsEqual(nextDeps, prevDeps) {
	...
	for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (objectIs(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }

  return true;
}

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  ...

  if (areHookInputsEqual(nextDeps, prevDeps)) {
    pushEffect(hookFlags, create, destroy, nextDeps);
    return;
  }

  ...
  hook.memoizedState = pushEffect(HasEffect | hookFlags, create, destroy, nextDeps);
}

Object.is 함수를 활용하여, prev/next dependency reference 체크를 통해 Effect가 발생하는것을 확인할 수 있다!

const foo = {
    foo: 1,
}
const bar = foo
Object.is(foo, { foo: 1 }) // false
Object.is(foo, bar) // true
Object.is(1, 1) // bar

3. Dependency Type에 따라 다르게 작동하는 Effect...

Number, String, Bool - Primitive 타입일 경우

State가 변경이 된다면, 함수가 새롭게 호출된다.
State가 변경이 안되었다면,(값이 이전 값과 동일하다면) 함수가 호출되지 않는다.

const Component = () => {
    const [state, setState] = useState(0)

    const handleClick = () => {
        setState((prev) => prev + 1)
    }

    const handleEqual = () => {
        setState((prev) => prev)
    }

    useEffect(() => {
        console.log('changing State call useEffect initialization')
    }, [])

    useEffect(() => {
        console.log('changing State call useEffect')
    }, [state])

    return (
        <div>
            <h1>Primitive</h1>
            <button onClick={handleClick}>
                Change State(If state dont change, useEffect no call)
            </button>
            <button onClick={handleEqual}>
                Equal State(useEffect no call)
            </button>
        </div>
    )
}

Array, Object - reference 타입일 경우

Imutable하게 관리하기 때문에, 매번 새롭게 생성이 된다 → 함수가 새롭게 호출된다.

Object의 경우, JSON.stringigy(to JSON string)의 형태로 변경여부를 체크할 수 있지만, (JSON Object의 경우, 지원하지 않는 타입(undefined, Functions, Symbol...)이 있으므로, 주의)

const Component = () => {

	const [state, setState] = useState({foo: {bar: 1}, test: 1})

  const changeState = () => {
    setState(prev => ({ ...prev, foo : {bar : 2}, bar: 1 }))
  }

  const handleImmutable = () => {
    setState(prev => ({foo: {bar: 1}, test: 1}))
  }

  const handleMutable = () => {
    setState(prev => {
      delete prev.foo.bar
      return prev
    })
  }

  useEffect(() =>{
    console.log('change State call useEffect initialization')
  }, [])

  useEffect(() => {
    console.log('change State call useEffect')
  }, [JSON.stringify(state)])

return (
    <div>
      <h1>reference</h1>
      <button onClick={changeState}> Change State</button>
      <button onClick={handleImmutable}> Immutable State(Every useEffect call)</button>
      <button onClick={handleMutable}> mutable State(If use mutable Object, useEffect no call)</button>
    </div>
  )

Function일 경우

함수의 경우, 매번 새롭게 생성되기 때문에 함수가 매번 호출된다

useCallback을 통해 함수를 Memorization을 해주면, 함수가 변경될때만 호출되게 된다.

const Component = () => {
    const [state, setState] = useState(0)

    const changeState = () => {
        setState((prev) => prev + 1)
    }

    const changeFunction = () => {
        console.log('call changeFunction')
    }

    const momeChangeFunction = useCallback(() => {
        console.log('call momeChangeFunction')
    }, [state])

    useEffect(() => {
        console.log('change Function call useEffect')
        return () => {
            console.log('clean up useEffect')
        }
    }, [changeFunction])

    useEffect(() => {
        console.log('change Function call useEffect initialization')
        return () => {
            console.log('clean up initialization')
        }
    }, [])

    return (
        <div>
            <h1>Function</h1>
            <button onClick={changeState}> Change State</button>
        </div>
    )
}

4. referenceType일 경우, 간단하게 사용할 수 없을까? (use-deep-compare-effect)

그 전의 값을 알고 있어야 하기 때문에! useRef를 활용해서 Memorization 하자

useEffect의 호출을 직접 다룰 수는 없지만, useEffect안에 있는 Effect를 다루자

function useDeepCompareMemoize(value) {
  const ref = React.useRef(value)
  const signalRef = React.useRef(0)

  if (!deepEqual(value, ref.current)) {
    ref.current = value
    signalRef.current += 1
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return React.useMemo(() => ref.current, [signalRef.current])
}

React.useEffect(callback, useDeepCompareMemoize(dependencies)

참고

Shallow / Deep Copy And FP

Sun, 16 Jan 2022 00:00:00 GMT

0. 작성이유

스터디 주제...
언제 얕은 복사를 쓸까?
도대체 왜 깊은 복사를 쓰는거지?

1. Primitive Type vs Reference Data Type

Primitive
- 변수(메모리 주소)가 값을 가지고 있음(강결합)
- 복사를 하게 될 경우, 새로운 값(메모리)를 할당하여 real copy

Reference

변수(메모리 주소)가 주소를 가지고 있음
복사를 할 경우, 방법에 따라 Shallow, Deep Copy

let foo = 30
bar = foo

const fooRef = {
    age: 30,
    name: 'kim',
}

const barRef = fooRef
barRef.age = 35

2. Shallow And Deep Copy

과일 바구니만 복사하는거랑, 과일까지 복사하는 차이

Shallow Copy
- Object(Original Memory Address) 주소만을 저장한다. (과일바구니)
- Original/Copied Object는Value가 동일하기 때문에, 서로 영향을 받는다.
- Copy시, Original Object의 Pointer만 복사하기 때문에 빠르다!
Deep Copy
- Object의 value의 복사복을 저장한다. (과일바구니 안에 담겨있는 과일)
- Copied Object의 value가 변경되도 Original에는 영향이 없다.
- Copy시, Original Object와 Value까지 복사하기 때문에 느리다.

3 . Reference Data Type의 요소들의 값이 ..

Primitive일 경우,

const foo = [1, 2, 3, 4, 5]
const bar1 = [...foo]
const bar2 = foo.slice()
const bar3 = Array.from(foo)

const bar = { name: 'kim' }
Object.assign({}, bar)

reference일 경우 JSON.parse/stringify, _.cloneDeep을 이용한다

JSON의 경우 Boolean, Number, String의 타입만 변경한다.

const foo = {
    date: new Date(),
    nan: NaN,
    undef: undefined,
    symbl: Symbol('foo'),
    infinity: Infinity,
    set: new Set([1, 2, 3]),
    map: new Map(),
}

JSON.parse(JSON.stringify(foo))

4. Shallow Copy는 언제 쓰나?

텍스트 에디터를 개발할때 주로 쓰인다. (참고 : 플라이웨이트 패턴)

5. 함수형 프로그래밍의 특징(in JS)

Avoid side effects(use “pure” functions)

오직 인풋만을 가지고 계산하여 아웃풋을 반환하여야 순수함수

// 순수함수가 아닌 이유 : 인풋이 없고, 아웃풋 또한 없으며 단순히 콘솔 창에 찍어주는것만 한다.
var name = 'Jun'
function greet() {
    console.log("Hi, I'm " + name)
}

// 순수함수 : 아웃풋에 영향을 주는것 인풋 밖에 없다
function greet(name) {
    return "Hi, I'm " + name
}

Use higher-order functions

함수형 패러다임에만 존재하는 형태 (like HOC)
자바스크립트는 함수또한 객체이기 때문에 함수를 리턴할 수 있다.

function makebeverage(fruit){
    return function(string){
        return fruit + string
    }
}

var apple = makebeverage('apple');
apple('soda');
    => 'apple soda'

Don’t Iterate(for, while) ⇒ (filter, map, ...)
- For-Loop하면서 해당 요소(input)의 함수를 호출시켜 원하는 작업을 진행 (output)

Avoid mutability => use immutable data

의도치 않은 변화로 인해 문제가 발생할 수 있다 (shallow copy 문제)
변경된 새로운 데이터를 만든다 (원래 데이트는 불변성을 지킨다.)


const rooms = ['h1','h2','h3'];
rooms[2] = 'h4';
rooms;
=> ['h1','h2','h4']

const newRooms = rooms.map(rm => {
   if(rm === 'h3'){return 'h4'}
   else{return rm}
})

newRooms; => ['h1','h2','h4']
rooms; =>  ['h1','h2','h3']

Persistent data structures for efficient immutability => Mori, Immutable.js
- immutable의 문제점 ⇒ 매번 사본을 만들기 떄문에 리소스(시간, 메모리) 소요
- strucure sharing 형태(데이터 → 트리 형태로)
  - 데이터를 트리의 형태로 만들어서 기존에 있는 노드를 재사용한다.

참고

Virtual DOM 장/단점

Sun, 02 Jan 2022 00:00:00 GMT

What is the Virtual DOM?

프로그래밍 개념 중 하나 (Virtual DOM / Incremental DOM / Svelt DOM ??? ... hash?? )
기존 V-DOM과 업데이트 된(이벤트나 서버의 응답 결과로 인해 만들어진) V-DOM을 비교해서 보여준다.
- 비교한것을 실제 DOM에 적용하는 것은 Reconciliation 이라고 한다.
장점
- 효율적인 비교 알고리즘(Diffing Algorithm)
- 단순하고 성능 향상에 도움이 된다.
  - (Reflow, Repaint, Composite 같은 변화를 한번에 처리해주기 때문에 렌더링 횟수를 줄여준다.
단점
- 비교 알고리즘
  - V-DOM을 두개를 사용해야 하기 때문에, 높은 메모리 사용량
  - Props만 변경하였지만, Div 태그의 속성까지 비교하게 되므로 불필요한 오버헤드가 발생
```
function WelcomeMessage(props) {
  return (
    <div className="welcome" >
      Welcome {props.name}
    </div>
}
```

바닐라와 리엑트의 비교

바닐라
- 어떤 이벤트가 발생하면, 어떻게 접근해서 어떻게 바꾸어줄지도 정해줘야 한다.
- 직접적으로 DOM 노드에 접근해서 노드를 비교해준다

<button onclick="plus()">+</button>
<button onclick="minus()">-</button>
<h3 id="state">0</h3>
<script>
  let state = 0
  const $number = document.querySelector('#state');
  const plus = () => {
    state += 1;
    $number.innerHTML = state;
  }
  const minus = () => {
    state -= 1;
    $number.innerHTML = state;
  }
</script>

React
- 어떤 상태를 보여줄것인가?

const Foo = () => {
    const [state, setState] = useState(0)
    const plus = () => {
        setState((prev) => (prev += 1))
    }
    const minus = () => {
        setState((prev) => (prev -= 1))
    }
    return (
        <div>
            <button onClick={plus}>+</button>
            <button onClick={minus}>-</button>
            <h3>{state}</h3>
        </div>
    )
}

export default Foo

VDOM은 돔을 직접 조작하는 것보다 빠른가?

누군가 Dan Abramov(redux 만든이)에게 물어봤다.
답변
- DOM을 직접 조작하는 것보다는 빠를수는 없다. 하지만 그 이상의 일을 더 할 수 있다.
- 유지보수에 용이하며, UI를 변경하는데 충분히 빠른 속도를 가지고 있다.
- 이러한 점때문에 페이스북에서 사용

출처

CORS?..Preflight?

Fri, 10 Dec 2021 00:00:00 GMT

Who should read this article?

Everyone, really.

0. 왜 작성해야 하는가?

스터디 주제!
preflight는 언제 발생하지?
왜 IMG, StyleSheet, Script 요청은 CORS를 발생하지 않는가?

1. Process

SOP : same-origin policy
CORS: Cross-Origin Resource Sharing
preflight
How to solve

2. SOP란?

브라우저에서 작동하는 리소스를 처리하는 보안 방식

잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄인다

프로토콜 / 포트/ 호스트 까지 같은 URL을 동일한 출처라고 말한다.

URL	결과	이유
http://store.company.com/dir2/other.html	성공	경로만 다름
http://store.company.com/dir/inner/another.html	성공	경로만 다름
https://store.company.com/secure.html	실패	프로토콜 다름
http://store.company.com:81/dir/etc.html	실패	포트 다름 (http://는 80이 기본값)
http://news.company.com/dir/other.html	실패	호스트 다름

단, 출처가 다른 것도 허용하는 부분도 있다.
- <script> <link> <img> <video> <audio> <object> <embed> @font-face, <iframe>
Web Storage와 indexDB 같이 브라우저 데이터 저장소 또한 SOP를 적용받는다.
- Cookie는 SOP 정책에 해당하지 않고, 모든 도메인에 접근하고 설정할 수 있다(그래서 광고 같은데서 쿠키를 활용해서 사용하는것으로 알고 있음) 그래서 쿠키의 정보는 출처가 불분명하므로 안전하지 않다.

3. CORS란?

SOP(브라우저 보안방식)에서 발생하는 에러

다른 출처로 부터 요청하는 css, js, img 파일은 정상적으로 작동하지만,
script상에서 다른 리소스를 요청하는 것은 CORS에러가 발생한다.

// localhost:63342/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="http://localhost:5500/style" rel="stylesheet">
	// color: red
  <script src="http://localhost:5500/js"></script>
	// console.log('hello Wrold')
</head>
<body>
<h1>Client</h1>

<img src="http://localhost:5500/img/1">
<script>
  (async () => {
    const result = await fetch('http://localhost:5500/hello')
    console.log(result.json())
  })();
</script>

</body>
</html>

4. Preflight trigger

모든 Request는 Preflight를 보내는줄 알았는데......... 아니였다...

Preflight란? 브라우저(클라이언트)는 직접적으로 리소스를 요청을 하기보다는, OPTIONS 메소드를 통해 해당 서버에서 어떤 Method를 허용하는지, 확인하여 리소스를 요청한다.
몇가지 조건을 만족해야지 preflight를 trigger된다
- Method : GET / HEAD / POST
- Headers : Accept / Accept-Language / Content-Language / Content-Type
  - 클라이언트에서 직접적으로 지정할 수 있는 옵션
- Content-Type 를 지정시(단, 아래 세가지는 발생하지 않는다)
  - application/x-www-form-urlencoded, multipart/form-data, text/plain 제외

5. How to solve CORS

백앤드를 찾아가서 CORS 오류 난다고 하면? .... 문제 해결

백앤드 - Response Header에 해당 속성을 넣어주면 된다

Access-Control-Allow-Origin를 * 로 하면 모든 request를 열어주는것이므로 보안에 취약하다. 그러므로 서비스하고 있는 client의 url을 넣어주면 gooood

Access-Control-Allow-Origin : *
Access-Control-Allow-Method : GET, POST, PUT. DELETE, OPTIONS (디폴트는 GET, POST)
Access-Control-Max-age : 3600
Access-Control-Allow-Headers : Origin, Accept, X-Requestd-With, Content-Type,Access-Contorol-Request-Method,
Access-Contorol-Request-Header, Authorization
Access-Contorol-Allow-Credentials
- 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 True를 응답받은 클라이언트는 실제 용청시 서버에서  정의도니 규격의 인증값이 담긴 쿠키를 같이 보내야한다.

프론트앤드 - 방법없지만, 잘못된 Header 필드로 보내게 된다면.. CORS가 발생한다.

response 부분을 수정하는것이라, 불가능하다.

하지만 개발환경일 경우, proxy를 설정하여, 요청 origin을 서버 주소로 바꿔 요청 할 수 있다.

// react cra
// package.json
{
"proxy": "http://localhost:4000"
}

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

잘못된 Header 필드로 보내게 된다면.. CORS가 발생한다.

const result = await fetch('http://localhost:5000/hello', {
    headers: {
        foo: 'bar', // cors Error
        'Accept-Manguage': 'en', // cors Error Manguage 오탈자!
    },
})

SparkLine Chart 만들기 (2)

Mon, 29 Nov 2021 00:00:00 GMT

0. 목표

마우스 포인터 기준으로, 해당 포지션의 **데이터(차트)**를 보여주자

1. 데이터를 표현할 Tag를 만들어주자

const $line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
const $spot = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'circle'
)

2. lineChart의 Path(X, Y좌표)를 이용하자

기존 데이터를 사용하는 대신, **lineChart를 그린 데이터(비율로 계산)**의 좌표를 활용

비율대로 계산된 데이터(X, Y 좌표) === 마우스 포인터의 위치(X, Y 좌표)

const dataPoints = []

data.forEach((value, index) => {
    const x = index * offset
    const y = getY(max, height, strokeWidth, value)

    pathCoords += `L ${x} ${y},`

    // element의 너비와 높이 비율에 따라 계산된 좌표를 넣어준다.
    dataPoints.push({ x, y })
})

3. Mouse(Touch)의 위치

Mouse Event(offset)

event를 binding한 element부터 현재 포인트의 위치를 알 수 있다.

const handleMouseMove = (e) => {
    const position = {
        x: e.offsetX,
        y: e.offsetY,
    }
    draw(position)
}

Touch Event(touchs.client, getBoundingClientRect)

touch 이벤트의 touches property와 getBoundingClientRect를 활용

const handleTouchMove = (e) => {
    const rect = svg.getBoundingClientRect()
    const position = {
        x: e.touches[0].clientX - rect.left,
        y: e.touches[0].clientY - rect.top,
    }
    draw(position)
}

3. mouse position을 가지고, 가장 가까운 좌표를 찾는다.

mouse position보다 큰 좌표(chart Line) 좌표를 찾는다
- 만약 없다면, 마지막 좌표라고 가정한다.
1번에서 찾은 데이터로, 이전 좌표(chart Line)를 찾는다.
찾은 좌표들을 활용하여, 더 가까운곳을 Target 좌표라고 가정한다.
- 3번 데이터가 없다면, 첫번째 데이터라고 가정한다.
Target 좌표를 가지고 포인터와 라인 Tag를 그려준다.

const draw = (position) => {
    // datapoint에서 가장 가까운것을 찾는다
    let nextDataPoint = dataPoints.find((entry) => entry.x >= position.x)

    // undefined라면 마지막 데이터이다.
    if (!nextDataPoint) {
        nextDataPoint = dataPoints[lastItemIndex]
    }

    // 이전 데이터 위치를 찾는다.
    const previousDataPoint =
        dataPoints[dataPoints.indexOf(nextDataPoint) - 1]

    let currentDataPoint

    if (previousDataPoint) {
        // 2번과 3번과의 데이터를 가지고 데이터의 중간 위치를 구한다.
        const halfway =
            previousDataPoint.x +
            (nextDataPoint.x - previousDataPoint.x) / 2
        // 중간 위치보다 크다면, 2번 데이터; 없다면, 3번 데이터를 현재 데이터라고 가정한다.
        currentDataPoint =
            position.x >= halfway ? nextDataPoint : previousDataPoint
    } else {
        // 이전 데이터가 없다면, 첫번째 데이터라고 생각한다.
        currentDataPoint = nextDataPoint
    }

    const xChord = currentDataPoint.x
    const yChord = currentDataPoint.y

    // 선그리기
    $line.setAttribute('x1', xChord)
    $line.setAttribute('x2', xChord)
    $line.setAttribute('y1', 0)
    $line.setAttribute('y2', svgHeight)

    // 포인터
    $spot.setAttribute('cx', xChord)
    $spot.setAttribute('cy', xChord)
    $spot.setAttribute('r', sporRadios)
}

4. D3 라이브러리를 활용하면, 간단하게 한줄로 바꿀수 있다.

D3란? interactive 데이터시각화(차트, 그래프)를 구현하기 위한 라이브러리
Jquery 같이 Dom에 접근해서 요소를 핸들링(생성, 및 속성 변경), 속성을 바꾸는 역할
주요한 역할은 아래와 같이, 계산부분을 이용하여, 차트나 그래프를 그리기에 유용!

// mouse event
const handleMouseMove = (e) => {
    const [x, y] = d3.pointer(e)
    draw({ x, y })
}

// touch event
const handleTouchMove = (e) => {
    const touches = e.touches[0]
    const [x, y] = d3.pointer(touches)
    return { x, y }
}

const draw = ({ x }) => {
    // 해당 포인터의 위치 찾기
    const i = d3.bisectCenter(xCoords, xScale.invert(x))
}

5. 배포하기

~~나만 쓰기 아깝고... 누군가... 필요할것같고??... 자랑하고 싶어서...~~

npm회원가입(이메일 확인! 꼭! 확인하자.. 이것때문에 10분 날림)

package.json 수정

private으로 배포하는게 아니기 때문에, publishConfig를 public으로 설정
- 만약 private로 사용하고 싶다면, 가격은 7$/month (등록 방법)

{
  "name": "react-svg-spark-line",
  "version": "1.0.3",
  "description": "Simple SVG SparkLine React component",
  "main": "dist/index.js",
  "private": false,
  "module": "dist/index.js",
  "publishConfig": {
    "access": "public"
  },
  "bugs": {
    "url": "https://github.com/kode15333/sparklinechart/issues"
  },
  "homepage": "https://github.com/kode15333/sparklinechart#readme",
}

tsconfig.json 수정

include - Transpilers path
noEmit 은 분명히 true로 설정되있을땐데 무조건 false로 바꿔줘야한다. 안되면 트랜스파일링 된 파일이 나오지 않는다.

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "lib": [
      "dom",
      "es2015"
    ],
  },
  "include": [
    "./src/lib/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "./dist/**/*"
  ]
}

tsc 명령어로 트랜스컴파일!!

두가지 형태로 나온다. 하나는 타입스크립트 전용 하나는 일반 리엑트 컴포넌트

dist
├── SparkChart
│   ├── index.d.ts
│   ├── index.js
│   ├── types.d.ts
│   ├── types.js
│   ├── useWindowSize.d.ts
│   ├── useWindowSize.js
│   ├── util.d.ts
│   └── util.js
├── index.d.ts
└── index.js

npm 배포
결과물
- npm
- CodeSandBox

React children Component 최적화

Wed, 10 Nov 2021 00:00:00 GMT

When updated React component

state 변경될때

props 변경될때

forceUpdate 호출할때

0. 최적화 하기전

useCallback, useMemo, React.memo를 사용하기전! profiling 필수
무조건 Memorization 하게 된다면, 더 느려질수도 있다..
1. 불필요한 연산과정
  - Props 비교 - React.memo
  - Dependency 비교 - useCallback, useMemo
2. 불필요한 메모리 공간 차지
  - useCallback - 함수
  - useMemo - 값
언제 최적화 해야 하나?
- 같은 props로 렌더링이 자주 일어나는 컴포넌트(로그인 버튼, Polling부분)

1. 함수를 props 넘길때, useCallback이 안되면?

State Change 버튼을 클릭마다, Outer, Inner 컴포넌트 렌더링

const Inner = ({ number, fn }) => {
    console.log('Inner')

    return <div>Inner {number}</div>
}

const Outer = ({ number }) => {
    console.log('Outer')

    const handleConsole = () => {
        console.log('handleConsole')
    }

    return (
        <div>
            Outer {number}
            <Inner number={'1'} fn={handleConsole} />
        </div>
    )
}

const App = () => {
    const [number, setNumber] = useState(0)

    const handleClick = () => {
        setNumber(number + 1)
    }
    return (
        <>
            <button onClick={handleClick}>State Change</button>
            <Outer number={number} />
        </>
    )
}

2. Inner는 왜 호출되지? (number랑 fn은 언제나 같은데)

문제점 : 렌더링 할때마다, handleConsole 함수를 새롭게 만들기 때문
해결책 : useCallback을 이용하자**(함수 인스턴스를 유지시켜주자)**

const Outer = ({ number }) => {
    console.log('Outer')

    const handleConsole = useCallback(() => {
        console.log('handleConsole')
    }, [])

    return (
        <div>
            Outer {number}
            <Inner number={'1'} fn={handleConsole} />
        </div>
    )
}

3. useCallback을 했는데도 왜 호출되지?

문제점 : Inner에서 props가 reference 타입이라서..(primitive 타입은 가능)
해결책 : React.memo를 활용하자

const Inner = React.memo(({ number, fn }) => {
    console.log('Inner')

    return <div>Inner {number}</div>
})

4. React.memo를 쓰면 무조건 되나?

문제점 : prop가 reference Type이면 안된다
- React.memo는 shallowly compare
- 기본형(number, string, undefined, bool)은 가능
- Symbol은 불가(CRA가 Bigint는 미지원)

// 렌더링 하지 않는다.
<div>
  Outer {number}
  <Inner number={0} str={''} und={undefined} bol={false} fn={handleConsole}/>
</div>

// 항상 렌더링
<div>
  Outer {number}
  <Inner symbol={Symbol(1} fn={handleConsole}/>
</div>

5. 나는 특정 props가 바뀔때만 바꾸고싶은데?

해결책 : React.memo의 callback을 이용하자
- 콜백의 인자에는 이전 props와 새로운 props가 들어와서 비교한다.
- callback의 결과값이 true면 렌더링 x / false면 리렌더링

// Outer
;<div>
    Outer {number}
    <Inner number={number} foo={{ number: 1 }} fn={handleConsole} />
</div>

const Inner = React.memo(
    ({ number, fn, foo }) => {
        console.log('Inner')

        return <div>Inner {number}</div>
    },
    (prev, next) => {
        return prev.foo.number === next.foo.number
    }
)

6. 그럼 useMemo는 ?

useCallback는 함수를 리턴, useMemo는 값을 리턴
useMemo를 활용하면, Object, Array, Symbol 참조타입도 가능

const Inner = React.memo(({ number, foo }) => {
    console.log('Inner')

    return <div>Inner {number} </div>
})

const Outer = ({ number }) => {
    console.log('Outer')

    const memoNumber = useMemo(() => ({ number: 1 }), []) // 렌더링 x
    // const memoNumber = {number:1} // Inner 렌더링

    return (
        <div>
            Outer {number}
            <Inner number={0} foo={memoNumber} />
        </div>
    )
}

7. useMemo가 값이면, React.memo가 필요없는가 아냐?

아니다.... useMemo 또한 React.memo를 해줘야지 렌더링 안된다.
- useCallBack을 이용해서 함수 인스턴스를 유지하는 것처럼
- useMemo를 이용해서 reference type을 유지

// 렌더링 됨
const Inner = ({ number, foo }) => {
    console.log('Inner')

    return <div>Inner {number} </div>
}

// 렌더링 안됨
const Inner = React.memo(({ number, foo }) => {
    console.log('Inner')

    return <div>Inner {number} </div>
})

const Outer = ({ number }) => {
    console.log('Outer')

    const memoNumber = useMemo(() => ({ number: 1 }), [])
    // const memoNumber = {number:1}

    return (
        <div>
            Outer {number}
            <Inner number={0} foo={memoNumber} />
        </div>
    )
}

8. 결론

Props가 함수나 참조형 타입일 경우, 리렌더링 한다.
useCallback, useMemo를 사용해도 리렌더링 한다.
React.memo는 기본적으로 Prop 기본형 중 몇가지의 타입(number, string, undefined, bool)은 비교해서 렌더링을 막아준다
- 단, Symbol, BigInt( CRA = 미지원), 참조형 타입은 비교할 수 없다
함수는 useCallback, 값(참조타입, Symbol, BigInt)은 useMemo를 활용하여 Props로 넘겨주고, React.Memo를 활용하여, 리렌더링를 방지할 수 있다.

참고

This is This

Sun, 07 Nov 2021 00:00:00 GMT

Q. This에 대해서 설명해주세요.

사전적 의미 : 이것, 어떠한것을 지칭하는 말
자바스크립트에서의 의미: 호출한 실행환경(Execution Context)을 나타내는것
멀티 쓰레드일 경우 (ex. 스칼라도 자바스크립트와 비슷하다)
- callback을 호출 → 어떤 thread로 실행이 되는것인가? → 그건 실행환경에 따라 달라진다
- 기본적으로 global(window)에서 호출된다.

1. 자바스크립트에서의 `this`

해당 함수를 호출한 실행 컨텍스트(코드가 실행되는 곳)을 가리킨다. (런타임에 결정)

const test = {
    prop: 42,
    func: function () {
        return this.prop
    },
}

console.log(test.func())
// expected output: 42

단, new 키워드를 만나면, 해당 함수의 this는 생성자를 가르킨다.

function Product(name, price) {
    this.name = name
    this.price = price
}

const cheese = new Product('feta', 5)

defaults : window (node환경: global)
strick-mode에서는 this === 'undefined'

2. this의 정확한 의미

다른 언어(Java, Swift, 정적언어...?)

생성되는 인스턴스를 가르킨다.

//java
public class Foo {
		public String name;
    public String color;

    public Fruit(String name, String color) {
        this.name = name;
				this.color = color;
    }
}

// swift
class Bar {
  let row: Int, column: Int

  init(row: Int, column: Int) {
    self.row = row
    self.column = column
  }
}

es6부터 Class 문법(사실은 함수...)을 지원하기 때문에, 위 언어와 비슷하게 동작한다.
babel을 활용하여, transpilering 해보면, 아래와 같이 this를 활용하여 호출하게 된다(링크)

class Foo {
    constructor(name) {
        this.name = name
    }

    foo() {
        console.log(this.name)
    }
}

// babel Compile
// this
var Foo = /*#__PURE__*/ (function () {
    function Foo(name) {
        _classCallCheck(this, Foo)

        this.name = name
    }

    _createClass(Foo, [
        {
            key: 'foo',
            value: function foo() {
                console.log(this.name)
            },
        },
    ])

    return Foo
})()

3. call, apply, bind

정적바인딩 : bind

bind는 this가 지정된 함수를 리턴한다.

bind된 함수는 다시 bind 할 수 없다.

const foo = {
    bar: 1,
    hello() {
        console.log(this.bar)
    },
}
// 전역변수
bar = 2

foo.hello()
const a = foo.hello.bind(this)

동적바인딩(default) : call, apply

call, apply는 this를 할당한 함수의 실행결과 를 리턴한다.

// call
function say(phrase) {
    alert(this.name + ': ' + phrase)
}

let user = { name: 'John' }

// this엔 user가 고정되고, "Hello"는 메서드의 첫 번째 인수가 됩니다.
say.call(user, 'Hello') // John: Hello

// apply
const numbers = [5, 6, 2, 3, 7]

const max = Math.max.apply(null, numbers)

decorator 만들기

함수의 역할은 그대로 두고, 기능을 더해준다 (데코레이터 패턴)

function work(a, b) {
    console.log(a + b)
}

function spy(func) {
    return function (...arg) {
        return func.apply(this, arg)
    }
}

work = spy(work)

work(1, 2) // 3
work(4, 5) // 9

4. 화살표 함수, 일반 함수의 차이

일반 함수

- this 호출한 컨텍스트
- arguments 객체를 이용하여, 모든 인자를 받을 수 있음
- new 키워드를 사용할 수 있음

화살표 함수

- this 렉시컬 컨텍스트 (선언될때, 이미 this가 할당)
- arguments 객체가 없음..
- new 키워드를 사용하여 호출 할 수 없음

5. event handler의 this

// html
<button id="foo">FOO</button>

<button>
	<span id="bar">BAR</span>
</button>

$foo.addEventListener('click', function () {
  console.log('function this', this)   // <button id="foo">FOO</button>
})

$foo.addEventListener('click', () => {
  console.log('arrow function this', this) // window
})

$bar.addEventListener('click', function () {
  console.log('function this', this) // <span id="bar">BAR</span>
})

SparkLine Chart 만들기 (1)

Sat, 23 Oct 2021 00:00:00 GMT

0. Line을 그리기 전,

MockData
```
const data = [10, 12, 5, 10];
```

1. Path태그를 활용하여 선을 그려보자

path 태그의 d 속성은 선을 어떻게 그리는지에 대한 정보

d 속성의 5개의 명령어을 활용하여 path를 string 으로 표현

M(Move to = 점 이동) : M dx dy
- 초기 : 0, 0을 기준으로 해당 점으로 이동
L(Line to = 라인 그리기) : L dx dy
- 해당점까지의 선을 그려준다.
H(Horizontal = 수평선) H dx
- 해당 좌표에서 x만큼 수평선 그리기
V(Vertical = 수직선
- 해당 좌표에서 y 만큼 수직선 그리기
Z(Close path = 패스 닫기)
- 해당 좌표를 기준으로 가장 가까운 M을 찾아 연결시켜준다

<svg
    class="line"
    width="400"
    height="400"
    stroke-width="2"
    stroke="blue"
    fill="none"
></svg>

<script>
    const data = [10, 12, 5, 20, 50, 10, 100, 10, 50]

    const svg = document.querySelector('.line')
    const element = document.createElementNS(
        'http://www.w3.org/2000/svg',
        'path'
    )

    let pathCoords = `M 0 ${data[0]},`

    data.forEach((d, i) => {
        pathCoords += `L ${i * 20} ${d},`
    })

    element.setAttribute('d', pathCoords)
    svg.append(element)
</script>

2. 만약? 이런 데이터가 들어온다면?

데이터는 항상 일정하게 들어오지 않을거다... 아마도... 100%

const data = [1234, 12345, 123445, 123445, 123445, 12345, 12345, 123]

3. 비율에 따라서 X, Y를 계산 해줘야 한다!

X좌표 offset구하기
- SVG 넓이에서 들어온 데이터 길이만큼 나누며 ⇒ 하나의 데이터가 차지하는 x 좌표

Y좌표 offset 구하기

현재 값을 svg Height와 곱하여 최대 값(max value)으로 나누면, offset값을 얻을 수 있다.
Y의 좌표는 좌상단 0이기 때문에, Height에서 offset값을 빼주어 상대적인 위치를 구할 수 있다.

또한, stroke의 line이 svg Height를 넘어서면 보이지 않기 때문에, 그값을 offset 값에 더해준다.

// 차트가 그려질 viewport === viewbox
const width = parseFloat(svg.attributes.width.value)
const height = parseFloat(svg.attributes.height.value)

// X offset
const lastItemIndex = data.length - 1
const offset = width / lastItemIndex

// Y offset Function
function getY(max, height, diff, value) {
    return parseFloat(
        (height - (value * height) / max + diff).toFixed(2)
    )
}

// strokeWidth
const strokeWidth = parseFloat(svg.attributes['stroke-width'].value)

// math
const max = Math.max(...data)

// start Point Y
const pathY = getY(max, height, strokeWidth, data[0])
let pathCoords = `M 0 ${pathY},`

data.forEach((value, index) => {
    const x = index * offset
    const y = getY(max, height, strokeWidth, value)

    pathCoords += `L ${x} ${y},`
})

element.setAttribute('d', pathCoords)
svg.append(element)

4. 차트 아래 부분을 채워보자

fill 속성으로도 채워도 되지만, 차트가 꼬이면, 원하지 않는 결과가 나온다
기존의 경로를 활용하여 다각형을 만들어 색상을 채워주자.

//html
<svg class="line" width="400" height="400" stroke-width="2" stroke="blue" fill="rgba(0, 0, 255, .2)"></svg>  <span class="tooltip" hidden="true"></span>

//js
// fill을 none처리 하지않으면 선이 연결되어 색상이 칠해진다.
element.setAttribute("fill", "none");

// 라인을 그려주고, 비어있는 아래선을 그려주고 Z를 활용하여 만들어준다
const fillCoords = `${pathCoords} V ${height} L ${0} ${height} Z`

fill.setAttribute("d", fillCoords);
svg.appendChild(element);
svg.appendChild(fill)

viewBox? PreserveAspectRatio?

Wed, 20 Oct 2021 00:00:00 GMT

0. 작성 이유

회사에서 svg를 활용하여 차트를 만드는 업무를 맡았는데 새로운 영역이다..
평소에 svg에 관심이 많았다???
사진을 활용해서 더 빠르게 이해하고 정리해야지 남는다.

1. SVG(Scalable Vector Graphics)는 무엇인가?

그래픽 정보를 가지고 있는 HTML Tag

그래픽을 마크업하기 위한 W3C XML 특수언어
화면 크기에 따라 언제나 같은 같은 해상도를 보여준다(캔버스 x)
각 도형별로(태그로 구성되어 있기 때문에) 인터렉션(이벤트)을 줄 수 있다.
예제 (두개의 사각형)
- canvas의 경우, 하나의 context안에서 그림(script 상에서만 가능)
- svg의 경우, tag를 통해서 그린다(script와 css 또한 가능)
- 화면을 확대할 경우, 더 선명한 이미지를 표시한다(svg)
  - 확대 전 - 확실히 구분은 안됨
  - 확대 후 - 확대 후 svg가 선명한 것을 확인 할 수 있음

2. 제일 중요한 ViewBox에 대해서

모눈종이(svg)를 어디부터(x, y) 얼만큼(width, height) 보여줄까?

svg속성에는 viewPort(width, height), viewbox의 속성이 있다.
뷰포트 - 화면에 그려지는 크기(일반적인 태그 속성)
viewBox(min-x, min-y, width, height) - svg가 보여질 부분

3. PreserveAspectRatio?(가로/세로 크기를 내 맘대로!)

뷰포트와 뷰박스의 크기가 다르면, 어떻게 정렬하고 어떻게 보여줄까(꽉차게? 넘치는 부분은 잘라서?)

viewport(width, height), viewBox의 속성이 있는 SVG element (svg, image...)
PreserveAspectRatio의 속성값은 align , meetOrSlice 으로 구성 (default - 'xMidYMid meet')

svg 이미지 사이즈(가로/세로)는 비율로 나오는데, 직접적으로 조정하고 싶을때는 'none'으로 지정

<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg>

<image preserveAspectRatio='xMinYMin meet' width='200' height='300' xlink:href='https://www.google.com/images/logos/google_logo_41.png' ></image>

참고자료

useCallback과 useMemo는 언제 memorization 하지?

Sat, 16 Oct 2021 00:00:00 GMT

0. 이글을 작성하는 이유?

useCallback과 useMemo는 언제 memorization을 하는지?
hook api가 언제 호출되는지 확실히 말할 수 있을까?
class Component의 life cycle이랑 비교하고 싶어서

1. useCallBack vs useMemo Memorization Timing

useCallback
- 주로 함수(eventHandler 등)를 새로 만들지 않고 재사용하고 싶을 때
- useCallback으로 감싼 함수를 호출할때, Memoizing
- dependency의 따라 메모리제이션 된 함수를 리턴할지, 새로운 함수를 호출할지 결정된다.
```
// before Memorization
const memoizedCallback = useCallback(() => {
    doSomething(a, b)
}, [a, b])

// Memoizing
memoizedCallback()
```
useMemo
- 주로 특정 결과값을 재사용 하며, 기능은 useCallback이랑 같음
- useMemo는 컴포넌트 첫 렌더링시, Memoizing
- dependency에 따라 작동하는건, useCallback과 동일
- props 변경시, 컴포넌트가 새롭게 렌더링 되기 때문에, Re-Memoizing
- useCallback(fn, deps) === useMemo(() => fn, deps)
```
// Memorization when first Rendering
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
```

2. 각 상황별 이벤트 로그(테스트 코드 참고)

비슷한 역할을 하는 함수
- constructor ===useState Callback
- setState Callback === setState Callback
- shouldComponentUpdate === React.memo
- componentWillUnmount === useEffect cleanup function

3. 테스트 코드

Class Component

class ClassLife extends React.Component {
    constructor(props) {
        super(props)
        console.log('1. constructor')
    }
    state = {
        number: 0,
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('1-2 shouldComponentUpdate')
        return this.state.number !== nextState.number
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('3. componentDidUpdate')
    }

    componentDidMount() {
        console.log('4. componentDidMount')
    }

    componentWillUnmount() {
        console.log('5. componentWillUnmount')
    }

    handleClick = () => {
        console.log('1. handleClick')
        this.setState((prev) => {
            console.log('1-1-1. in setState')
            return {
                ...prev,
                number: this.state.number + 1,
            }
        })
    }

    handleEqual = () => {
        this.setState({
            number: this.state.number,
        })
    }

    handleToggle = () => {
        this.props.onrr()
    }

    render() {
        console.log('2. render')
        return (
            <div>
                <h1> Class Component</h1>
                <button onClick={this.handleClick}>UpdateState</button>
                <button onClick={this.handleEqual}>Equal</button>
                <button onClick={this.handleToggle}>handleToggle</button>
                <div>number: {this.state.number}</div>
            </div>
        )
    }
}

Function Component

const FunctionLife = (props) => {
    console.log('function component body first line')

    const [number, setNumber] = React.useState(() => {
        console.log('callback in useState')
        return 0
    })

    React.useEffect(() => {
        console.log('function in useEffect Callback noDependency')

        return () => {
            console.log('function in useEffect Callback dependency')
        }
    }, [])

    React.useEffect(() => {
        console.log('function in useEffect Callback dependency')

        return () => {
            console.log('cleanup function in useEffect dependency')
        }
    }, [number])

    const updateState = (foo) => {
        console.log('foo', foo)
        setNumber((prev) => {
            console.log('callback in setState')

            return prev + 1
        })
    }

    const updateStateUseCallback = React.useCallback(() => {
        console.log('function body in useCallback')

        updateState('useCallback')
        return () => {
            console.log('return updateStateUseCallback')
        }
    }, [])

    const updateStateUseMemo = React.useMemo(() => {
        console.log('callback in useMemo')
        return updateState
    }, [])

    const updateEqual = () => {
        setNumber((prev) => prev)
    }

    return (
        <div>
            <h1>FunctionLife</h1>
            <button onClick={updateState}>updateState</button>
            <button onClick={updateEqual}>updateEqual</button>
            <button onClick={updateStateUseCallback}>
                updateStateUseCallback
            </button>
            <button onClick={updateStateUseMemo}>updateStateUseMemo</button>
            <button onClick={updateStateUseMemo}>updateStateUseMemo</button>
            <h3>{number}</h3>
        </div>
    )
}

export default React.memo(FunctionLife, (prev, next) => {
    console.log('callback in React memo')
    return JSON.stringify(prev) === JSON.stringify(next)
})

참고

https://ko.reactjs.org/docs/hooks-reference.html

stopPropagation vs stopImmediatePropagation

Mon, 11 Oct 2021 00:00:00 GMT

0. 작성이유

누군가 물어봤는데.. 대답을 잘하지 못했다.
stopImmediatePropagation의 역할에 대해서 궁금했다.

예제 HTML

<div id="one">
    <div id="two">
        <div id="three">AA</div>
        <a id="four" href="google.com"> BB </a>
    </div>
</div>

1. Event

DOM Event는 구독방식으로 작동한다.
- 한 노드에 여러가지 이벤트를 등록 가능
- 같은 Event 타입으로 여러가지의 핸들러를 등록 가능
- 핸들러 작동 순서는 렉시컬 컨텍스트 순으로 작동된다.

이벤트 등록 방식은 on[eventTyp], addEventListener(eventType, callback)

on방식은 이벤트가 쉐도잉 처리 되기때문에, 마지막에 할당한 핸들러만 작동
- 쉐도잉은 on으로 등록된 이벤트만 처리되고, addEventListener는 정상 작동

addEventListener방식은 같은 이벤트에 여러 핸들러를 등록할 수 있다.

해당 이벤트가 dispatch 되면, 등록된 핸들러가 다 작동된다.

$four.addEventListener(
    'click',
    (event) => {
        console.log('four addEventListener1')
    },
    false
)

$four.addEventListener(
    'click',
    (event) => {
        console.log('four addEventListener2')
    },
    false
)

$four.onclick = (event) => {
    console.log('four onclick1')
}

$four.onclick = (event) => {
    event.preventDefault()
    console.log('four onclick2')
}

// four addEventListener1
// four addEventListener2
// four onclick2

모던 브라우저의 기본 이벤트 타입은 버블링이다

이벤트 리스너에서 처리하는게 버블링일뿐, 이벤트는 캡쳐링 → 버블링

addEventListner의 세번째 인자에 true로 바꾸면 캡쳐링

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    true
)
$two.addEventListener(
    'click',
    (event) => {
        console.log('two')
    },
    false
)
$three.addEventListener(
    'click',
    (event) => {
        console.log('three')
    },
    false
)

// one
// three
// two

2. Event.preventDefault();

(<a>, <form>) 태그의 기본 이벤트(브라우저에 정의된)를 막는다.
- <a id='four'> 기본 이벤트는 href에 등록된 주소로 페이지 이동
- preventDefault 때문에 기본 기능을 하지 못하고 콘솔이 찍힌다.
```
$four.addEventListener(
    'click',
    (event) => {
        event.preventDefault()
        console.log('four')
    },
    false
)

// four (not move to google.com)
```

3. Event.stopPropagation()

브라우저의 이벤트 방식은 캡쳐링 → 버블링으로 이벤트 전파된다

document → body → target → body

document.addEventListener(
    'click',
    (e) => {
        console.log('document')
    },
    true
)

document.addEventListener(
    'click',
    (e) => {
        console.log('document')
    },
    false
)

document.body.addEventListener(
    'click',
    (e) => {
        console.log('body')
    },
    true
)

document.body.addEventListener(
    'click',
    (e) => {
        console.log('body')
    },
    false
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    true
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    false
)

// document -> body -> target -> body -> document

이러한 이벤트 전파 흐름을 막아준다

캡쳐링 / 버블링 관계없이 이벤트의 전파 흐름을 막는다.

document.addEventListener(
    'click',
    (e) => {
        console.log('document')
        e.stopPropagation()
    },
    true
)

document.body.addEventListener(
    'click',
    (e) => {
        console.log('body')
    },
    false
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    true
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    false
)

// document(더 이상 이벤트가 발생하지 않는다)

단, 해당 노드에 등록된 이벤트 핸들러들은 작동된다.

document.addEventListener(
    'click',
    (e) => {
        console.log('document1')
        e.stopPropagation()
    },
    true
)

document.addEventListener(
    'click',
    (e) => {
        console.log('document2')
    },
    true
)

document.body.addEventListener(
    'click',
    (e) => {
        console.log('body')
    },
    false
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    true
)

$one.addEventListener(
    'click',
    (event) => {
        console.log('one')
    },
    false
)

// document1
// document2 (더 이상 이벤트가 발생하지 않는다)

4. Event.stopImmediatePropagation();

해당 요소에 동일한 이벤트타입으로 등록된 핸들러의 전파를 멈춘다

이벤트 핸들러는 등록 순서대로 작동된다(렉시컬 컨텍스트).

$three.addEventListener(
    'click',
    (event) => {
        console.log('three1')
    },
    false
)

$three.addEventListener(
    'click',
    (event) => {
        console.log('three2')
    },
    false
)

// three1
// three2

순서 document → target(handler1, handler2 ..) → document순

$three.addEventListener(
    'click',
    (event) => {
        console.log('three1')
    },
    false
)

$three.addEventListener(
    'click',
    (event) => {
        console.log('three2')
        event.stopImmediatePropagation()
    },
    false
)

$three.addEventListener(
    'click',
    (event) => {
        console.log('three3')
    },
    false
)

// three1
// three2

$three.addEventListener(
    'click',
    (event) => {
        console.log('three1')
        event.stopImmediatePropagation()
    },
    false
)

$three.addEventListener(
    'click',
    (event) => {
        console.log('three2')
    },
    false
)

$three.addEventListener(
    'click',
    (event) => {
        console.log('three3')
    },
    false
)

// three1

5. 특정 노드에 이벤트를 리셋시켜주고 싶을때는?

관련 API는 찾을 수 없었고, 새롭게 노드를 만들어주는 방법뿐이다.
```
elClone = $three.cloneNode(true)

$three.parentNode.replaceChild(elClone, $three)
```

참고자료

top은 왜 아래로 증가를 하는가?

Sun, 10 Oct 2021 00:00:00 GMT

0. 작성이유

왜? top은 아래로 증가되지?(좌표와 다르게..)
항상 헷갈리는 client/offset width/height
sticky는 fixed랑 모가 다르죠?
font-size : 62.5%???

1. Top은 왜 아래로 증가를 하는가(추론)?

서양 언어 방향 (왼쪽 → 오른쪽) / 시계반향
- 최초의 디스플레이 개발자 (독일)
- 이러한 문화가 디스플레이 쪽으로 개발되었다.
CRT 디스플레이 작동원리(그래픽 카드와 CRT 사이의 인터페이스 - 순서대로 메모리 읽기)
- 왼쪽 상단(메모리 주소가 가장 낮음)
- 오른쪽 하단(메모리 주소가 가장 높음)

2. Element 사이즈와 포지션

offsetTop / offsetLeft : 부모 요소와의 거리
offsetWidth / offsetHeight : 해당 요소의 너비 / 높이 (border 포함)
clientTop / clientLeft : 가장 바깥쪽에 있는 테두리로 부터의 거리
clientWidth / clientHeight : 해당 요소의 크기(padding 포함 / 스크롤 바 제외)
scrollTop : 스크롤 영역 최상단에서 해당 요소까지의 거리

해당 페이지가 몇 % 보여졌는지 (예제코드)

const $scroll = document.scrollingElement
const percent = document.querySelector('#percent')

window.addEventListener('scroll', () => {
    const currentPercentage =
        ($scroll.scrollTop / ($scroll.scrollHeight - window.innerHeight)) *
        100
    percent.style.width = currentPercentage + '%'
})

3. fixed vs sticky?

fixed
- 해당 요소는 문서흐름에서 제외되고, 페이지에서 공간을 배정하지 않는다.
- 뷰포트를 기준으로 위치를 잡는다.
sticky
- 해당 요소는 문서흐름에 따라 배치하고, **스크롤이 되는 조상**을 기준
- 스크롤 박스를 기준으로 offset(top, left)을 지정하나, 다른 요소에는 영향 없음
- sticky는 해당 스크롤 박스에 따라 생길뿐, 넘어가면 보여지지 않는다

4. Font-size : 62.5%?

브라우저의 기본 폰트 크기 16px
반응형을 작업하기 주로 크기의 단위를 rem을 사용
16px 보다는 10px로 만들어, 생산성 향상(16 * 62.6 / 100 = 10)

참고자료

Normal Flow? BFC? IFC?

Sun, 04 Jul 2021 00:00:00 GMT

0. 작성이유

코드스피치 CSS 강의 내용 정리
디자인 구현을 더 빠르게 하기 위한 개념 정리..
inline guard에 대해서 신기해서 공유하고 싶어서..

1. Normal Flow

정의: HTML 요소(블록, 인라인 요소)의 배치방법(default)
1. Block Level Element(블록요소)
  - width : 부모 요소의 너비 100%
  - heigth : Content의 최대 높이
  - 블록요소는 마지막 요소 아래 라인에 위치
  - Margin에 의해서 구분되며, 더 큰 Margin 쪽으로 margin collapsing 된다.
2. Inline Element(인라인 요소)
  - 콘텐츠의 크기(width/height)를 따르나, 별도로 설정할 수 없음.
  - 인라인 요소와 같은 라인에 차례로 위치
  - 해당 라인의 충분한 공간이 없다면, overflow 되는 텍스트 또는 요소는 새로운 줄에 위치
  - margin은 쓰기모드의 방향으로만 적용

2. BFC(Block formatting contexts)

정의 : 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위
나만의 해석
- BFC는 레이아웃 안의 작은 레이아웃이 생긴다!
- 특정 css속성을 가지면, 블록 레이아웃의 특성을 가진다. (BFC 생성)
- BFC 내부의 모든 요소는 블록 안에 속한다.
BFC 생성 조건
- 문서의 루트 요소(<html>).
- 플로팅 요소(float이 none이 아님).
- 절대 위치를 지정한 요소(position이 absolute 또는 fixed).
- 인라인 블록(display가 inline-block).
- overflow가 visible이 아닌 블록 요소.
- display가flow-root.
- table, flex, grid ...

BFC 예제

<section>
  <div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>

<section>
  <div class="box" style="overflow:auto">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>

3. IFC(Inline formatting contexts)

정의 : IFC는 다른 서식 컨텍스트 내에 존재하면, 인라인 요소의 레이아웃 발생
IFC 생성 조건
- <strong>, <a>, <span> 같은 엘리먼트에 의해서 생성

4. Inline Guard

float 속성은 인라인 요소에 대해 영역을 인식함(블록 요소는 인식 안함)

<div style="width: 500px">
    <div style="height: 50px;background: red"></div>
    <div style="width: 200px;height: 150px;float:left;background: rgba(0,255,0,0.5)"></div>
    HELLO
    <div style="height: 50px;background: skyblue">WORLD</div>
    !!
</div>

Modern Web Browser 톹아보기

Sat, 22 May 2021 00:00:00 GMT

0. 글을 작성하는 이유

너무나도 좋은 자료인데, 정리를 해서 나의 것으로 만들고 싶어서
웹 브라우저의 동작 원리에 대해서 자세히 알고 싶어서
웹 브라우저의 여러가지 쓰레드에 대해서 알고싶어서

Part 1 (브라우저의 개별 프로세스와 스레드)

1. 사전 지식 : Process, Thread, IPC

Process(프로세스)
- 보조기억장치(HDD)에 위치한 프로그램이 메모리에 올라온 상태
- OS는 프로세스에게 메모리를 할당하여 해당 프로세스의 정보를 고유한 메모리 공간(PCB)에 저장할 수 있게 한다.
- 자원소유의 단위(메모리가 할당되었다)
Thread(쓰레드)
- 프로세스 내부에 있으며 프로세스를 실행하는 주제
- Dispatching의 단위(CPU에게 계산/연산 처리를 요청하는 단위)
IPC(Inter Process Comunication)
- 프로세스는 다른 프로세스를 돌려서 별도의 작업을 수행하도록 OS에 요청 할 수 있다.
  
  (OS는 새로운 프로세스에게 별도의 메모릴 공간을 할당한다)
- 두 프로세스간 통신이 필요하다면, IPC를 이용한다(데이터 교환)

2. 웹 브라우저에는 어떤 프로세스가 있나?

메인 프로세스와 여러개의 작은 프로세스가 통신하면서(IPC) 작동
프로세스의 정의와 역할
1. 브라우저(Main) - 브라우저의 전체적인 제어 및 탭 밖에 있는 모든 프로세스를 담당
  - 브라우저의 버튼이나 입력창을 그리는 UI 쓰레드
  - 데이터를 수신하는 네트워크 쓰레드
  - 파일 같은것들을 접근하기 위한 스토리지 쓰레드
2. 렌더링 - 웹 사이트가 디스플레이 될때 사용되며, 각 탭 별로 프로세스가 존재
  - 각 탭로 별도의 프로세스로 관리되기 때문에 하나가 멈춰도 다른 탭은 정상 작동
3. 플러그인 - 리엑트 개발자 도구 같은 플러그인 관리
4. GPU - 다른 프로세스와 분리된 GPU 작업을 제어
  - 동일한 표면(창)에 표시하기 때문에 별도로 분리

Part 2(멀티 프로세스 구조와 탐색 순서)

1. jooonho.com을 치면 어떻게 작동이 될까?

입력 처리
- 사용자가 주소창에 입력하기 시작하면 UI 쓰레드가 검색어인가? URL인가? 판단
탐색 시작
- 엔터를 치면, UI 쓰레드가 컨텐츠를 내려받기 위해 네트워크 쓰레드에게 요청
응답 읽기
- 네트워크 쓰레드가 응답 파일을 체크해서 해당하는 프로세스에게 데이터 이관
  - HTML ⇒ 해당 탭의 렌더링 프로세스에게 이관
  - zip 또는 다른 형식의 파일 ⇒ 다운로드 매니저에게 이관
- 넘기기전, CORB 체크(악성 사이트 여부)로 경고창 노출
렌더링 프로세스 찾기
- 네트워크 쓰레드를 통해 UI 쓰레드에게 데이터를 준비되었다고 통보
- UI쓰레드는 해당 페이지를 그릴 렌더링 프로세스를 찾는다
탐색 수행
- 브라우저 프로세스는 IPC를 통해 렌더링 프로세스에게 해당 데이터를 전송
- 데이터 스트림을 전달, 렌더링 프로세스가 HTML 데이터를 계속 받을 수 있게 진행
- 렌더링에서 커밋이 확인되면, 브라우저 프로세스는 탐색을 완료하고 문서 로딩 시작

초기 로딩 완료
- 탐색이 커밋되고, 렌더링 프로세스가 리소스 로딩과 페이지 렌더를 지속
- 렌더링 프로세스가 렌더링을 끝내면, 브라우저 프로세스에게 IPC를 반환
- UI쓰레드가 탭의 로딩 스피너를 정지

2. 다른 사이트 탐색

위와 같은 동일한 방법으로 사이트를 탐색, 그 전에 beforeunload 이벤트 호출
화면 내에서 링크를 클릭하거나, location.href를 호출
- 렌더링 프로세스가 beforeunload 핸들러 체크
- 렌더링 프로세스가 탐색 요청을 브라우저 프로세스에 요청을 전달
렌더링 프로세스가 unload 이벤트가 처리가 되면서 새로운 렌더링 프로세스를 호출

3. Service Worker의 경우

서비스 워크가 등록되면, 재탐색할때 네크워크 쓰레드가 URL을 서비스워커에서 탐색
있다면, UI 쓰레드가 해당 Service Worker 코드를 실행하기 위해 렌더링 프로세스를 탐색
Service Worker는 캐시에서 데이터를 로드하며, 네트워크 요청을 초기화

Part 3(렌더링 프로세스의 내부 동작)

1. 렌더링 프로세스의 역할 및 쓰레드

렌더링 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다.
주요 역할
- HTML, CSS, JS로 사용자가 인터렉션 할 웹 페이로 만드는 것
메인 쓰레드(대부분의 코드를 처리), 워커, 컴포지트, 레스터 쓰레드가 존재한다.

2. 파싱

DOM 생성(메인 쓰레드)
- 탐색이 커밋되고, 데이터를 받기 시작할때, 메인쓰레드는 HTML을 파싱(DOM)
추가 리소스 로딩(메인 쓰레드)
- 추가 리소스(이미지, CSS, JS 파일)는 네트워크 혹은 캐시를 통해 로드
- DOM을 생성하면서 link, img 태그를 확인하면, 네트워크 쓰레드에게 요청
- 사전로드스캐너 : 파싱 중 생성된 토큰들을 통해 미리 처리하는 것
자바스크립트를 로딩하면, 왜? 파싱이 멈출까?
- document.write()와 같은 방법으로 DOM의 구조를 바꿀 수 있기 때문
- async와 defer 속성을 이용하여 비동기적으로 로드하고 실행 할 수 있음

3. 스타일 계산(메인 쓰레드)

css를 파싱해서 각 DOM노드에 대한 계산된 스타일을 결정
CSS selector를 기반하여 각 요소들에 어떤 스타일이 적용될지 파악

4. 레이아웃(메인 쓰레드)

DOM과 계산된 스타일을 따라가며 xy좌표 및 bounding box 크기로 레이아웃 트리 생성
레이아웃 트리에는 display: none 속성은 포함되지 않으나, before,after는 포함

5. 페인트(메인 쓰레드)

레이아웃 트리를 통해 어떤 순서를 그릴지 판단(예, z-index 따라 보여지는게 다름)
메인쓰레드는 레이아웃 트리를 따라가면서 페인트 기록을 생성

렌더링 파이프라인에 대한 이해
- 각 단계에서 그 전 실행 단계를 결과물을 사용한다 (스타일 → 레이아웃 → 페인트)
애니메이션 프레임에 대한 이해
- 브라우저는 매끄러운 동작을 보여주기 위해, 매초 60번 업데이트를 해준다.
- 만약, 자바스크립트로 메인쓰레드가 블로킹 된다면, 화면이 멈춘(인터렉션 없다)
- requestAnimationFrame을 이용하여, 매 프레임마다 실행 시킬 수 있게 한다.

6. 컴포지팅(컴포지트 쓰레드)

페이지를 그리는 방법
- 레스터라이징: 레이아웃 트리와 페인트 순서를 스크린의 픽셀로 바꾸는 것
- 처음에는 사용자가 보여지는 부분(viewport)를 기준으로 레스터하여 보여준다.
- 스크롤 하게되면, 레스터된 프레임이 움직이고, 빈 부분을 레스터링 하여 보여준다.
컴포지팅이란?
- 한 페이지를 여러 레이어로 나눠, 레스터하여 페이지를 합성하는 기술
- 스크롤 하게 되면, 레이어들이 이미 레스터 되었기 때문에, 새로운 프레임을 합성
레이어 대한 고찰
- 메인 쓰레드는 레이아웃 트리를 순회하여 레이어 트리를 생성
  
  (어떤 요소들이 어떤 레이어에 있는지 확인하기 위해)
- 지나친 수의 레이어를 만들어 컴포지팅 하는 것은 렌더링 성능을 떨어뜨림

메인 스레드를 사용하지 않고 레스터와 컴포지트 하기
- 레이어 트리가 생성, 페인트 순서가 결정, 메인 쓰레드는 컴포지트 쓰레드에게 커밋
- 컴포지트는 레이어들을 여러 타일로 쪼개고 각 타일을 다수의 레스터 쓰레드에게 전송
- 레스터 스레드들은 각 타일을 레스터라이즈 하고 그것들을 GPU메모리에 저장
- 타일들이 레스터되면, 컴포지트 쓰레드는 컴포지트 프레임을 생성
- 컴포지트 프레임은 IPC를 통해 브라우저 프로세스로 넘김
- 컴포지트 프레임들은 GPU로 보내져 화면을 보여준다
- 스크롤 하게 되면, 컴포지트 쓰레드는 GPU에게 보내질 컴포지트 프레임을 생성한다.

Part4(이벤트와 컴포지트 쓰레드의 상호작용)

1. 브라우저 관점에서 입력 이벤트

화면에서 이벤트가 발생하면, 브라우저 프로세스가 해당 이벤트의 좌표를 수신
해당 좌표를 렌더링 프로세스로 전달
렌더링 프로세스는 전달받은 좌표로 해당 이벤트 대상를 찾아 리스너를 실행하여 처리

2. Non-Fast Scrollable Region

컴포지트 쓰레드는 이벤트 핸들러가 첨부된 영역을 "Non-Fast Scrollable Region"
해당 영역에서 이벤트가 발생하면, 컴포지트 쓰레드가 메인쓰레드로 정보를 전달
그 외에서 이벤트가 발생하면, 컴포지트는 새로운 컴포지트 프레임을 만드는 일만 진행

3. 이벤트 대상 찾기(Main 쓰레드)

렌더링 프로세스의 페인트 기록을 확인하여(히트테스트) 이벤트가 발생한 대상을 탐색

stale-while-revalidate

Sun, 16 May 2021 00:00:00 GMT

0. 글을 작성하는 이유

코드스쿼드 강의를 통해 알게 되었는데 더 알고싶어서...
Cache에 대해서 더 자세히 알고 싶어서...
요즘 유행 라이브러리(react-query, swr)의 작동방식을 알아보기 위해서

1. HTTP 통신이란?

클라이언트(브라우저)에서 서버로 리소스를 요청/응답받는 것

2. 요청/응답하는 리소스가 매번 같다면? Cache를 이용하자

Cache란?
- 주어진 리소스의 복사복을 저장하고 있다가 요청시에 복사복을 제공하는 기술
- 브라우저에서 요청을 중간에 가로쳐 서버까지 안가고 캐시에서 해당 리소스를 응답
- http 기본적으로 GET Method에 대해서 기본적으로 캐싱하면 다른 메서드는 무시
- 캐시는 해시구조로 되어있으며, 해당 URI를 키 값으로 구성
Cache의 장점
- 서버의 부하를 완화하며, latency와 네트워크 트랙픽을 줄여준다.
- 캐시는 상대적으로 클라이언트와 가깝기 때문에 빠른 응답속도를 제공하여 고객에서 좋은 UX를 제공할 수 있다.
- 캐시가 만료가 된다면, eviction algorithm을 통해 자동으로 삭제된다

3. Cache 종류

사설 브라우저 캐쉬(Chorme)
- 브라우저에 저장하며, 브라우저 사용자만 사용한다.
- 브라우저 캐시는 앞으로가기, 뒤로가기, 소스보기를 할때 사용된다.
- 또한 오프라인시, 오프라인 브라우징을 개선시 사용되기도 한다.
공유 프록시 캐시(CDN)
- 한명 이상 재사용되는 캐시입니다
- 예시) 한국에 게임을 오픈한다(그러면, 한국 CDN에 다운로드 파일을 위치시킨다)

4. HTTP Cache-Control

HTTP-Head의 필드로써, 요청/응답 양쪽에 있으며, cache정책을 정의한다.

Cache-Control : no-store
- 캐시를 저장하지 않는다. 매번 새롭게 요청된다.
Cache-Control : no-cache
- 캐시는 하지만, 캐시된 파일의 유효성을 확인하기 위해 서버로 요청을 보낸다.
Cache-Control : private
- Proxy일 경우, Private일 경우 저장할 수 없다(사용자의 인증 및 인가) ⇒ https에서 동일
Cache-Control : public
- 모든 응답을 캐시에 저장한다.
Cache-Control : max-age=300
- 해당 캐시 파일에 대한 유효시간을 알려준다.
Cache-Control: must-revalidate
- 캐시는 사용하기전에 해당 파일에 대해서 검증을 해야한다.
- 리스폰스 캐시가 현재도 유효한지 아닌지의 여부를 서버에 조회를 요구한다.
- 프록시가 오리진 서버에 도달할 수 없고, 리소스를 다시 요구 할 수없을때는 504를 반환한다.
age : 10
- age는 해당시간(캐시 유효시간)에 비례해서 얼마나 지난지 알려준다.

5. Cache-Control 확장기능 : stale-while-revalidate

Cache-Control: max-age=1, stale-while-revalidate=59
- HTTP 요청이 1초 내에 반복적으로 발생할 경우, 캐시된 값을 별도의 검증없이 그대로 반환한다.
- HTTP 요청이 1 ~ 60 초 사이에 반복적으로 발생할 경우, 캐시된 값은 이미 낡았지만(out-of-date) 캐싱된 값을 반환한다. 이와 동시에 백그라운드에서 향후 사용을 위해 캐시를 새로운 값으로 채우도록 재검증 요청이 이루어진다.
- 60초 이후에 들어온 HTTP 요청에 대해선 다시 서버에 요청을 보낸다.
간단요약 : Cache-Control: max-age=600, stale-while-revalidate=600
- 해당 캐시는 600초의 유효기간을 가지지만, 추가적으로 600초의 시간을 가진다.
- 총 20분의 캐시 유효시간을 가진다.
- 유효기간 동안은 block이 되지 않는다 → 새로운 요청이 없다
브라우저 지원 범위
- Chrome 75 이상,FireFox 68 이상 등 사용하기전 참고해야한다!
React-Query / SWR은 stale-while-revalidate를 이용
- 캐시를 이용하여 API요청을 줄인다

6. 관련출처

Reflow or Repaint

Sun, 09 May 2021 00:00:00 GMT

Reflow or Repaint

1. 글을 작성하는 이유?

reflow와 repaint의 차이점에 대해서 알고싶어서

2. 브라우저 렌더링 작동 순서 및 설명

HTML CSS JS파싱
- 문서(HTML, CSS, JS)를 읽어 브라우저가 문법을 분석, 코드를 이해한다
- <script>태그를 만나면 JS를 해석할 때까지 파싱을 멈춘다.
  - 브라우저는 스크립트가 페이지에서 무엇을 수행할지 모르기 때문에, 브라우저는 최악의 시나리오를 가정하고 파서를 차단한다.
  - script 태그의 async와 defer를 활용하여, script 실행을 조작 할 수 있다.(참고)
DOM CSSOM 변환
- 브라우저에서 사용할 수 있는 구조로 변환한다
- 파싱이 끝났다면 메모리에 브라우저에서 사용가능한 객체를 만든다(DOM, CSSDOM)
- CSSOM 각 노드의 스타일의 형태를 나타낸다
렌더 트리 구축
- DOM과 CSSOM을 결합하여 화면에 그려낼 내용을 작성한다.
- 즉, 어떤 엘리먼트에 어떤 스타일을 적용할 것인지 정해진다.
렌터 트리 배치(Layout 단계)
- 각 요소의 크기와 위치를 계산한다(아직 실제로 화면에 그리진 않음!!)
렌더 트리 그리기(Paint단계 → Compositing 단계)
- 요소를 실제로 픽셀로 변환하여 그린다(Paint 단계, Rasterize)(아직 실제로 화면에 그리진 않음!!)
- 픽셀로 그려진 여러 레이어를 합성한다(Compositing 단계)
- 뷰포트는 우리가 화면에 보여지는 것, 실제 문서는 우리가 생각하는것보다 크다
모든 문서가 Composite 단계까지 완료되야지 보여질까?
- 아니다! 브라우저는 먼저 실행한것에 대해서 먼저 보여진다(점진적)

3. JS가 Style을 변화시키면 Re-Render 된다.

Layout / Paint / Composite 단계를 Trigget하는 css 요소 (참고)
- Layout : width, height, padding, margin, display, box-shadow
- Paint : color, z-index, background
- Composite: opacite, transform, cursor, pointer-event
Layout 단계를 호출하면 그 아래 단계도 호출된다
- 초기 단계일수록, 리소스가 크므로, 가능하면 하위단계의 css를 변경해서 최적화해야한다.

4. Main Thread vs Composite Thread

Main Thread (Javascipt부터 Paint 단계)
- 자바스크립트로 시작적 변화 유발
- 어떤 규칙을 어떤 요소에 적용할 지 계산
- 요소가 화면에서 차지하는 공간과 위치 계산 다른 요소에 영향을 줄 수 도 있음
- 각 레이어에 픽셀을 그려내는 과정(텍스트, 색, 이미지 경계썬, 그림자 등 표현)
Composite Thread (Composite 단계)
- 정해진 순서로 레이어를 합성하여 최종 결과물을 그려내는 과정(z-index, scroll 등)
자바스크립트 렌더링 과정은 싱글쓰레드라서 앞단계로 가면 뒷단계까지 멈춘다
- 메인쓰레드에서 유발을 하면 화면이 멈춘다!(새로운 css를 읽어서 표시하는 것도 렌더링을 차단)
- Composite 단계는 별도의 쓰레드이기 때문에, 멈추지 않는다!

5. Reflow,Repaint 요약

Reflow는 Display 단계를 의미하며, Main Thread(UI) 위에서 작동한다.
Repaint는 각 브라우저별로 Trigger하는 CSS가 다르나, Reflow보다 리소스가 적다

6. 관련출처

React Custom Router

Wed, 05 May 2021 00:00:00 GMT

0. 이글을 작성하는 이유?

React-Router는 어떻게 작동할까?

1. SPA란?

새로고침은 UX적으로 좋지않다.
새로운 페이지를 렌더링 하지 않고, 부분적으로 렌더링을 하자 (react)
URL도 변경되면서, '앞으로가기/뒤로가기'가 동작되면 좋겠다 (react-router)

2. History API

BOM의 History는 사용자의 방문기록 및 '앞/뒤(으)로 가기' 같은 API를 제공한다.

주요 메소드

// 뒤로 가기
history.back()

// 앞으로 가기
history.forward()

// history stack을 기준으로 특정 지점으로 이동할 수 있다.
history.go(-1) // === history.back()
history.go(1) // === history.forward()

// history의 state(세션기록에) 해당 state를 넣으며 url을 변경해준다
// 하지만, url로 변경하지만 탐색하지 않는다(단순히 url 변경)
history.pushState(state, title, url)

3. Custom Router

구성요소
1. Route
  - popstate를 통해 navigation 변화가 발생하면 event.state값을 받아 다시 렌더링 하는 컴포넌트
2. Link
  - pushState를 활용해 history를 저장하는 컴포넌트
3. Router
  - Link와 Route컴포넌트 부모로써, Context API를 활용

코드

RouterContext
- Context API를 활용하며, popstate이벤트가 생기면 리렌더링

export const HistoryContext = React.createContext({
    history: window.history,
})

export const Router = ({ routeList, children }) => {
    const [routes] = useState(() =>
        Object.keys(routeList).map((key) => routeList[key].path)
    )
    const [currentPath, setCurrentPath] = useState(
        () => window.location.pathname
    )

    const is404 = routes.indexOf(currentPath) === -1
    const handlePopStateEvent = useCallback(({ state }) => {
        if (state && state.to) {
            setCurrentPath(state.to)
        }
    }, [])

    useEffect(() => {
        window.addEventListener('popstate', handlePopStateEvent, false)
        return () => {
            window.removeEventListener(
                'popstate',
                handlePopStateEvent,
                false
            )
        }
    }, [])

    return (
        <HistoryContext.Provider
            value={{
                currentPath,
                setCurrentPath,
            }}
        >
            {is404 ? <NotFound /> : children}
        </HistoryContext.Provider>
    )
}

Route

export const Route = ({ path, children, ...props }) => {
    const { currentPath } = useContext(HistoryContext)
    if (path !== currentPath) {
        return null
    }
    return <div {...props}>{children}</div>
}

Link

export const Link = ({ to, children, ...props }) => {
    const { currentPath, setCurrentPath } = useContext(HistoryContext)
    const handleLinkClick = useCallback(
        (e) => {
            e.preventDefault()
            if (currentPath === to) {
                return
            }
            history.pushState({ to }, '', to)
            setCurrentPath(to)
        },
        [currentPath]
    )
    return (
        <a {...props} onClick={handleLinkClick}>
            {children}
        </a>
    )
}

NotFound

export const NotFound = () => {
    return (
        <div>
            <p>404 - NotFound</p>
            <Link to={routes.home.path}>Back to home</Link>
        </div>
    )
}

출처

https://dev.to/ogzhanolguncu/build-a-custom-react-router-from-scratch-180h
코드스쿼드

Session Cookie Oauth

Tue, 04 May 2021 00:00:00 GMT

0. 이글을 작성하는 이유?

Session Cookie Oauth에 대해서 설명하고 싶어서...

HTTP란?

개요 : 클라이언트-서버 프로토콜
특징 : HTTP는 상태를 저장하지 않는다(즉, 한번 통신하고 끝)

1. Session

사전적 의미 : 정보 교환을 하는 둘 이상의 통신 장치의 송수신 연결 상태
개요
1. 서버에서 관리하는 어떠한 상태를 세션이라고 한다.(로그인 정보 등)
2. 모든 Request별로 상태를 유지하는 것은 서버자원 낭비
3. HTTP 특성상 상태를 저장하지 않기때문에, 같은 브라우저가 Request를 하여도 같은 세션인줄 모른다

2. Cookie

사전적 의미 : 사이트를 방문하면, 서버로 부터 설치되는 기록 정보 파일
개요 :
1. 서버가 클라이언트를 기억하기 위한 방법의 일종
2. 해당 세션 / 브라우저 종료시, 쿠키 만료
동작방식
1. 브라우저가 특정 페이지 요청(to Server)
2. 서버에서 Session 생성
3. 해당 Session의 정보를 Response Header에 쿠키로 추가(Set-Cookie)
4. 응답을 받은 Cookie 정보를 브라우저(Storage - Cookie)에 저장
5. 다음 요청부터는 서버로 요청시, 해당 쿠키를 동반해서 보낸다

3. OAuth

사전적 의미 : 비빌번호를 제공하지 않고 다른 사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단
개요
1. OAuth는 인증 프로토콜이 아닌, 인가 프로토콜이다.
2. Google / Naver Login같은 소셜 로그인은 OAuth로 구성되잇다.
역할 및 동작방식

1. 역할
- Client(브라우저)
- Resource Owner(사용자 ID/PW를 알고 있는 사람 : 사용자)
- Authorization Server(Facebook Oauth 서버)
- Resource Server(FaceBook의 내정보를 가지고 있는 곳)
2. 동작방식
1. FaceBook 소셜로그인 버튼 클릭
2. Facebook 로그인 - (A), (B)
3. 해당사이트의 접근을 허용 할 것인가? - (C)
4. 로그인 목적으로 사용할 수 있는 Access Token을 발급. - (D)
5. Access Token을 이용하여 서비스를 사용하는 과정 - (E), (F)
4. Token
- 사전적 의미 : 최소 단위의 정보를 가진 물체
- 종류
  1. Access Token : 특정 정보에 접근할 수 있는 권한을 가진 토큰
  2. Refesh Token : Access 토큰 만료로 사용할 수 없을때, Refresh 토큰을 이용하여 새롭게 인증하지 않아도 Access 토큰을 새롭게 받을 수 있다.
5. 출처

https://ko.wikipedia.org/wiki/

https://interconnection.tistory.com/76

React Hook

Sat, 01 May 2021 00:00:00 GMT

0. 작성하는 이유?

공식문서 요약을 빌미로 Hook에 대해서 더 알고 싶어서

1. Hook의 등장하게 된 이유

컴포넌트 사이에서 상태 로직을 재사용하기 어려움 → Custom Hook 등장배경(1)
- Render Props와 HOC 같은 패턴은 코드를 파악하기 어려움(→ 유지보수하기 어렵다)
- 상태 관련 로직을 추상화하기 어려움

복잡한 컴포넌트들은 이해하기 어렵다 → Custom Hook 등장배경(2)

lifeCycle Method에는 관련없는 로직이 포함되어 컴포넌트를 재사용하기 어려움

componentDidUpdate(){
	// 데이터 요청
	// 이벤트 리스너 등록(해당 컴포넌트에서만 사용되기 떄문에 재사용되기 어렵다)
}

componentWillUnmount() {
	// 이벤트 리스터 해제(해당 컴포넌트에서만 사용되기 떄문에 재사용되기 어렵다)
}

이러한 문제를 해결하기 위해 redux, mobx를 통해 전역에서 상태관리를 진행

Class는 사람과 기계를 혼동시킨다. → hook api 이용
- 다른언어와는 다르게 작동하는 this(Dynamic Scope)

2. State Hook

Class Component의 this.setState와 동일한 기능을 한다.
왜 state Hook인가요?
- React 16.8전까지도 함수형 컴포넌트가 있었지만, state를 사용할 수 없었고, 단순히 props를 받아서 컴포넌트를 보여주는 역할만 하였다. (state가 필요하면, class 컴포넌트로 작성)
- 함수안에서 state를 사용할 수 있게 해준다

사용법

렌더링 할때, 오직 한번만 생성된다(re-redner하기전까지 유지)
useState를 Destructuring 문법을 통해 컴포넌트에서 사용할 state명, update함수명으로 선언

React는 hook의 순서를 가지고 이전 state를 알 수 있다(hook의 규칙 참고)

import React, { useState } from 'react'

function Example() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p> {count}</p>
            <button onClick={() => setCount(count + 1)}>+버튼</button>
        </div>
    )
}

3. Effect Hook

componentDidMount + componentDidUpdate + componentWillUnmount와 동일한 기능을 한다.
왜 Effect Hook인가요?
- 네트워크 통신 및 Component Dom조작은 side Effects라고 칭한다
- sideEffect는 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서 구현 할 수 없다. (렌더링 이후)
- 이러한 side effect 작업을 할 수 있는 곳이기 때문에, effect hook이라고 한다.

사용법

렌더링 이후! useEffect안에 있는 콜백이 실행(Dom이 업데이트되었다고 보장)
렌더링 이후이기때문에, 컴포넌트 돔에 접근하거나, State에 접근 가능

컴포넌트가 마운트 해제되었거나,reRender시 clean-up을 실행한다

function FriendStatus(props) {
    const [isOnline, setIsOnline] = useState(null)

    useEffect(() => {
        function handleStatusChange(status) {
            setIsOnline(status.isOnline)
        }
        ChatAPI.subscribeToFriendStatus(
            props.friend.id,
            handleStatusChange
        )
        // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
        return function cleanup() {
            ChatAPI.unsubscribeFromFriendStatus(
                props.friend.id,
                handleStatusChange
            )
        }
    })

    if (isOnline === null) {
        return 'Loading...'
    }
    return isOnline ? 'Online' : 'Offline'
}

Effect Hook의 장점

useEffect를 여러개 사용하여, 역할/관심 별로 나누어줄 수 있다.

function FriendStatusWithCounter(props) {
    const [count, setCount] = useState(0)
    useEffect(() => {
        document.title = `You clicked ${count} times`
    })

    const [isOnline, setIsOnline] = useState(null)

    useEffect(() => {
        function handleStatusChange(status) {
            setIsOnline(status.isOnline)
        }

        ChatAPI.subscribeToFriendStatus(
            props.friend.id,
            handleStatusChange
        )
        return () => {
            ChatAPI.unsubscribeFromFriendStatus(
                props.friend.id,
                handleStatusChange
            )
        }
    })
}

같은 역할이지만, Class 컴포넌트보다 가독성이 높다.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {
    // 이전 friend.id에서 구독을 해지합니다.
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // 다음 friend.id를 구독합니다.
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // props.friend.id가 바뀔 때만 재구독합니다.

4. Hook 규칙

오직 React 함수 내에서만 Hook을 호출해야한다 (Custom Hook 포함)

Component의 Hook은 반복이나, 조건문에 따라 순서가 변경되면 안된다(호출 순서로 state 접근)

function Form() {
    const [name, setName] = useState('Mary')
    useEffect(function persistForm() {
        localStorage.setItem('formData', name)
    })
    const [surname, setSurname] = useState('Poppins')
    useEffect(function updateTitle() {
        document.title = name + ' ' + surname
    })
}

// ------------
// 첫 번째 렌더링
// ------------
useState('Mary') // 1. 'Mary'라는 name state 변수를 선언합니다.
useEffect(persistForm) // 2. 폼 데이터를 저장하기 위한 effect를 추가합니다.
useState('Poppins') // 3. 'Poppins'라는 surname state 변수를 선언합니다.
useEffect(updateTitle) // 4. 제목을 업데이트하기 위한 effect를 추가합니다.

// -------------
// 두 번째 렌더링
// -------------
useState('Mary') // 1. name state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistForm) // 2. 폼 데이터를 저장하기 위한 effect가 대체됩니다.
useState('Poppins') // 3. surname state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(updateTitle) // 4. 제목을 업데이트하기 위한 effect가 대체됩니다.

// ...

만약 호출 순서가 변경된다면?

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

useState('Mary') // 1. name state 변수를 읽습니다. (인자는 무시됩니다)
// useEffect(persistForm)  // 🔴 Hook을 건너뛰었습니다!
useState('Poppins') // 🔴 2 (3이었던). surname state 변수를 읽는 데 실패했습니다.
useEffect(updateTitle) // 🔴 3 (4였던). 제목을 업데이트하기 위한 effect가 대체되는 데 실패했습니다.

조건에 따라 Hook을 사용하고 싶다면! 함수바디에서 조건을 추가시킨다.

useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
        localStorage.setItem('formData', name)
    }
})

5. useCallback

메모리제이션된 콜백을 반환한다!
불필요한 렌더링을 방지하기 위해 사용된다(shouldComponentUpdate 역할과 동일)
자식 컴포넌트에 콜백을 전달할 때 유용
함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.

const memoizedCallback = useCallback(() => {
    doSomething(a, b)
}, [a, b])

6. useMemo

메모리제이션된 값을 반환한다!
useMemo로 전달된 함수는 렌더링 중에 실행된다
렌더링 중에는 하지 않는 것을 useMemo 함수 내에서 구현하면 안되며, useEffect에서 구현해야 한다.
useMemo는 성능최적화를 위해 사용될 수 있지만, 보장할 수 없다.
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
```

7. useRef

useRef는 current 프로퍼티에 ref가 걸려진 Dom node의 속성을 설정한다.

userRef는 변경을 캐치할 수 없다. 즉 current가 변경한다고 렌더링 되지 않는다.

function TextInputWithFocusButton() {
    const inputEl = useRef(null)
    const onButtonClick = () => {
        // `current` points to the mounted text input element
        inputEl.current.focus()
    }
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    )
}

weakMap을 이용한 singleton 패턴

Sat, 20 Feb 2021 00:00:00 GMT

이글을 작성하는 이유?

코드스피치 유튜브 영상에서 소개한 Singleton Pattern에 대해서 공유하고 싶어서
Map 과 WeakMap에 대해서 정확한 차이를 알고 싶어서

Singleton Pattern : 단 하나의 인스턴스만 생성되고 사용되어 진다.

어디에서 불러내고 요청되도 인스턴스는 언제나 하나(Singleton 유지)

App 개발에서 메모리 Context에 따라 세가지의 Singleton
1. Application Memory : 서버가 죽을때까지의 메모리
2. Session Memory : 유저가 로그인하고 로그아웃 할때까지의 메모리
3. Request Memory : 하나의 요청당 하나의 메모리

JavaScript에서 SingleTon을 구현하는 방법

1. closure + IIFE (from ZeroCho)

ES6 이전에 구현하는 방법

var singleton = (function () {
    var instance
    var a = 'hello'
    function initiate() {
        return {
            a: a,
            b: function () {
                alert(a)
            },
        }
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = initiate()
            }
            return instance
        },
    }
})()
var first = singleton.getInstance()
var second = singleton.getInstance()
console.log(first === second) // true;

2. WeakMap (from CodeSpitz)

Map과 다른점은 Key에 참조값만 넣을 수 있다! ⇒ Key가 객체이다
어떤 객체를 기반으로 무언가 값을 얻어내고 싶으면, WeakMap 사용

weakMap의 내장 메소드를 에러처리하여, Singleton의 역할만 할 수 있게!

const Singleton = class extends WeakMap {
    has() {
        err()
    }
    get() {
        err()
    }
    set() {
        err()
    }
    getInstance(v) {
        if (!super.has(v.constructor)) super.set(v.constructor, v)
        return super.get(v.constructor)
    }
}

const singleton = new Singleton()

const Test = class {
    constructor(isSingleton) {
        if (isSingleton) return singleton.getInstance(this)
    }
}

const test1 = new Test(true),
    test2 = new Test(true),
    test3 = new Test()
console.log(test1 === test2) //true
console.log(test2 === test3) //false

Map이 있는데... WeakMap은 왜 쓸까?

1. 등장배경

JS 엔진은 Mark And Sweap 알고리즘 방식으로 메모리를 관리한다

let john = { name: 'John' }
john = null // 더이상 쓰이지 않아, 메모리에서 삭제!

john = { name: 'John' }
let array = [john] // array[0]는 john 객체을 참조
john = null // 참조를 null로 덮어씀

// john을 나타내는 객체는 배열의 요소이기 때문에 가비지 컬렉터의 대상이 되지 않습니다.
// array[0]을 이용하면 해당 객체를 얻는 것도 가능합니다.
console.log(JSON.stringify(array[0])) //{ "name": "John" }

Map에서 객체를 키로 사용한 경우, Map이 메모리에 있는 한 객체도 메모리에 남아 있는다**(가비지 컬렉터의 대상이 되지 않는다)**

let john = { name: 'John' }

let map = new Map()
map.set(john, '...')

john = null // 참조를 null로 덮어씀

// john을 나타내는 객체는 맵 안에 저장되어있습니다.
// map.keys()를 이용하면 해당 객체를 얻는 것도 가능합니다.
for (let obj of map.keys()) {
    alert(JSON.stringify(obj))
}

alert(map.size)

2. WeakMap을 이용하여 객체를 키로 사용할때 발생하는 문제를 해결할 수 있다

john을 나타내는 객체는 오로지 위크맵의 키로만 사용되고 있으므로,

참조를 덮어쓰게 되면 객체는 위크맵과 메모리에서 자동으로 삭제됩니다.

let john = { name: 'John' }

let weakMap = new WeakMap()
weakMap.set(john, '...')

john = null // 참조를 덮어씀

// john을 나타내는 객체는 이제 메모리에서 지워집니다!

코드스피치 ES6+ 디자인패턴과 뷰패턴 6회차 정리

Mon, 15 Feb 2021 00:00:00 GMT

MVC ) Model에 변화가 일어나면, View와 Controller가 변한다.

Model property가 이름이 변경(name → userName) → 모든 View 수정
Controller의 Method의 리턴값은 View 객체(부모에게 끼어넣는것 → 큰 제약(라우터의 제약))

View가 Model을 모르게 하자

1. MVP

컴포넌트 기반으로 common view의 행태에서 자주 쓰인다(부트스트랩)
View가 말합니다!
- 나는 Value Object (즉, getter/setter 제공)!!
- Presenter가 VO를 적극적으로!! 이용을 알아서 해라!!
- 나는 더이상 Model 모르겠다 → 업데이트 : setter / 조회 : getter
- 그림만 그릴 뿐!!
Presenter는 View를 알고 있으니까 만드는게 자연스럽다
- View를 알아야지 Filed의 getter/setter 알수있다.
- Presenter가 View를 만드는게 당연하다
Controller(Method)의 결과 값이 아니라, Presenter를 실행하고 뷰 객체를 만든다
- Presenter는 get view를 하면 Dom객체의 view를 리턴한다.
- Presenter의 view 객체를 넣어준다 → Presenter는 view를 가지고 있다
장점
- Model의 변화를 Presenter가 흡수(View 영향 x) - 의존성이 낮다
- View → Presenter 약한 Coupling (인터렉션 처리 위임 )
- View가 VO이기 때문에 테스트 하기 쉽다.

단점

Presenter → View의 강한 Coupling(getter/setter 안다 → view의 지식이 있어야 한다)

getter/setter을 호출할때마다 view를 그리므로, Round Trip이 발생한다.

const HomeBaseView = class extends View {
  constructor (presenter, isSingleton) {
    super(presenter, el('ul'), isSingleton)
  }

  set list (list) {
    const { _presenter: pres, view } = this
    append(el(view, 'innerHTML', ''), ...list.map(v => append(
      el('li'),
      el('a', 'innerHTML', v.title, 'addEventListener', ['click', _ => pres.$detail(v.id)]),
      el('button', 'innerHTML', 'x', 'addEventListener', ['click', _ => pres.$remove(v.id)])
    )))
  }
}

const HomeDetailView = class extends View {
  constructor (presenter, isSingleton) {
    super(presenter, el('section'), isSingleton)
    append(el(this.view, 'innerHTML', ''),
      ....
        ['click', _ => presenter.$editDetail()]),
      el('button', 'innerHTML', 'delete', 'addEventListener',
        ['click', _ => presenter.$removeDetail()]),
      el('button', 'innerHTML', 'list', 'addEventListener',
        ['click', _ => presenter.$list()])
    )
  }

  get title () {return sel('.title', this.view).value}

  set title (title) {sel('.title', this.view).value = title}

  get memo () {return sel('.memo', this.view).value}

  set memo (memo) {sel('.memo', this.view).value = memo}
}

const Home = class extends Presenter {
  constructor (isSingleton) {super(isSingleton)}

  listen (model) {
    switch (true) {
      case is(model, HomeModel): {
        prop(this._view, { list: model.list })
        break
      }
      case is(model, HomeDetailModel): {
        const { title, memo } = model
        prop(this._view, { title, memo })
        break
      }
    }
  }

  detail (id) {
    prop(this, { _id: id, _view: new HomeDetailView(this, true) })
    const model = new HomeModel(true).get(id)
    model.addPresenter(this)
    model.notify()
  }

  $removeDetail () {
    this.$remove(this._id)
    this.$list()
  }

  $editDetail () {
    const model = new HomeModel(true).get(this._id)
    model.addPresenter(this)
    const { title, memo } = this._view
    model.edit(title, memo)
  }

  base () {
    prop(this, { _view: new HomeBaseView(this, true) })
    const model = new HomeModel(true)
    model.addPresenter(this)
    model.notify()
  }

  $remove (id) {
    const model = new HomeModel(true)
    model.remove(id)
  }

  $list () {app.route('home')}

  $detail (id) {app.route('home:detail', id)}
}

Protocol을 활용하여 decoupling 시켜주자!

VO protocol (메모와 타이틀이라는 속성이 제공되는 인터페이스)
- Presenters는 VO Protocol 바라보고, View 에서 VO Protocol 구상
Command Protocol (remove detail edit가 제공되는 인터페이스)
- View는 Command Protocol을 바라보고, Presenters에서 Command Protocol 구상

2. MVVM

View가 ViewModel을 구독하고 있는 형태 (like model)

View가 말합니다!
- 나는 ViewModel에게 관심이 아주아주 많다 (나의 Subject)
- (한개 혹은 여러가지의) ViewModel을 가지고 그림을 그린다.
ViewModel 시스템에서는 viewModel라는 중간 객체가 View의 subject이자 Model의 Observer

ViewModel이 말합니다!
- 나는 View를 모른다 관심없다 ⇒ View가 나한테 관심이 많다
- Model을 가지고 있으며, Model을 가지고 가공하여 내 자신을 만든다!
View와 ViewModel이 서로 관계가 없기 때문에 라우터가 그림을 그린다?

신문사가 ViewModel, 구독자들이 View (MVVM의 특징: 많은 쪽을 View로 본다)

ViewModel이 View에 관심없으니까 ViewModel에 대해서 테스트하기 쉽다 .

View가 아니더라도 수신 할 수 있으면 테스트 가능

const App = class {
    constructor(_parent = err()) {
        prop(this, { _parent, _table: new Map() })
    }
    add(k = err(), vm = err(), view = err()) {
        this._table.set(k, [vm, view])
    }
    route(path = err(), ...arg) {
        const [k, action = 'base'] = path.split(':')
        if (!this._table.has(k)) return
        const [vm, view] = this._table.get(k).map((f) => f())
        view.viewModel = vm
        vm[action](...arg)
        append(attr(sel(this._parent), 'innerHTML', ''), view.view)
    }
}

const ListVM = class extends ViewModel {
    constructor(isSingleton) {
        super(isSingleton)
    }
    base() {
        const model = new HomeModel(true)
        model.add(this.observer)
        model.notify()
    }
    listen(model) {
        if (!is(model, HomeModel)) err()
        this.notify(model.list)
    }
    $detail(id) {
        app.route('detail', id)
    }
    $remove(id) {
        const model = new HomeModel(true)
        model.remove(id)
    }
}

const DetailVM = class extends ViewModel {
    constructor(isSingleton) {
        super(isSingleton)
    }
    base(id) {
        prop(this, { _id: id })
        const model = new HomeModel(true).get(id)
        model.add(this.observer)
        model.notify()
    }
    listen(model) {
        if (!is(model, HomeDetailModel)) err()
        this.notify(model.title, model.memo)
    }
    $remove() {
        const model = new HomeModel(true)
        model.remove(this._id)
        this.$list()
    }
    $edit(title, memo) {
        const model = new HomeModel(true).get(this._id)
        model.edit(title, memo)
    }
    $list() {
        app.route('list')
    }
}

참고사항

Round Trip Time (RTT/ 왕복 시간)?
- 데이터 패킷이 대상으로 전송되는 데 걸리는 시간과 해당 패킷의 승인이 원본에서 다시 수신되는 데 걸리는 시간을 더한 것입니다. 네트워크와 서버 간의 RTT는 ping명령 을 사용하여 확인할 수 있습니다 .

코드스피치 ES6+ 디자인패턴과 뷰패턴 5회차 정리

Sun, 14 Feb 2021 00:00:00 GMT

Singleton Pattern : 단 하나의 인스턴스만 생성되고 사용되어 진다.

WeakMap을 통해서 쉽게 구현할 수 있다.
- Map과 다른점은 객체만 key로 쓸수있다.(Map은 Key가 리터럴)
- Key에 참조값만 넣을 수 있다! ⇒ Key가 객체이다
- 어떤 객체를 기반으로 무언가 값을 얻어내고 싶으면, WeakMap 사용
- weakMap의 내장 메소드를 에러처리
ES6 부터는 부모 클래스 인스턴스를 만들고 자식을 참조한다 프로토 타입 체인이 아니다 → 인스턴스 방향이 바뀜
```
const Singleton = class extends WeakMap {
    has() {
        err()
    }
    get() {
        err()
    }
    set() {
        err()
    }
    getInstance(v) {
        if (!super.has(v.constructor)) super.set(v.constructor, v)
        return super.get(v.constructor)
    }
}
```

생성자 특성을 활용하여 싱글톤 구현

자바스크립트 생성자 특성 ⇒ new 라는 키워드를 통해 생성자를 호출하면?

리턴값이 원시형이거나 or 없으면 → 새롭개 생성된 객체에 this bind
객체를 반환하면, 반한되는 객체에 this bind

const singleton = new Singleton()

const Test = class {
    constructor(isSingleton) {
        if (isSingleton) return singleton.getInstance(this)
    }
}

const test1 = new Test(true),
    test2 = new Test(true),
    test3 = new Test()
console.log(test1 === test2) // true
console.log(test2 === test3) // false

class A {
    constructor() {
        return []
    }
}

// super에 갔다오면 this가 변한다!!!!
class B extends A {
    constructor() {
        super()
        console.log(Array.isArray(this))
    }
}

const b = new B() //true

OOP에서 제일 큰 유혹 → static을 만들자

Singleton Class를 static 하게 구현했다?
- 단 하나 인스턴스만을 만들 수 있다
- 똑같은 스태틱은 그 인스턴스 하나로 환원된다
기존의 Singleton Class
- 상황에 맞게 인스턴스를 만들어, 상황에 맞게 분리할 수 있다.
객체지향은 컨텍스를 사용한다 ( 컨택스트는 인스턴스에서 발생한다)
- 클래스 소속된 Static 또한 컨텍스트이긴 하지만.. OOP가 원하는게 아님
- 인스턴스의 컨텍스트를 원하는거다.
- 객체들은 객체망을 구성 → 의존성 분리 → 협력을 통해 문제 해결
언제 유혹에 빠질까????
- 내가 그 인스턴스의 참조를 줄 방법이 없다. (방법이 없는데 클래스는 어떻게..)
- 커뮤니케이션을 설계하고 싶지 않을때 그 유혹에 빠진다.
Util 함수는 예외 → 하지만, 과연 Util인지 생각해보자(거의 아님)

MVC - MODEL VIEW CONTROLLER

Controller의 역할
1. Model 생성(or 가져오거나)
2. Model의 옵저버 (의존성을 낮추기 위해 Observer Pattern)
  
  Model의 옵저버 역할
  - Model이 변경되면 Model만 알고 있다 (정확도)
  - View에게 전달하여 새롭게 Render 하기 위해
3. View 생성 (생성만 하고 처리는 View의 역할)
4. View에게 Model을 전달
  
  View에게 Model의 변화를 직접 수신하여 렌더링 하면 되지 않을까?
  - View는 전체 공정중에 일부분만 담당한다
  - Controller가 전체 공정을 다 알고 있다 (제왕적 컨트롤러)
  - Controller의 추가적인 작업(데이터 후처리)이 필요하다(..수도 있다)
5. View의 액션을 처리 (EventListner 처리)
Contoller의 역할은 Model을 가지고 View를 그린다
View의 역할
1. Model에 기반하여 렌더링 처리
2. 입력의 처리를 컨트롤러에게 위임
  
  View 누구를 알고 있을까?
  - 그림을 그리기 위해서 Model을 알고 있다. (Controller 에게 받음)
  - 입력(EventListner)을 처리하기 위해 Controller를 알고 있다.
Model 역할 (순수한 데이터 원형)
1. Model의 변화를 Controller에게 통보
2. Model이 Subject → Controller가 Model의 Observer (Observer Pattern)
App의 역할
1. 상황에 따라 Controller 생성
2. 여러가지 라우팅 정보를 기반으로 Controller 생성
3. 생성 후 Controller 역할 시작!

MVC, MVM, MVVM 의 차이점은 VIEW 와 MODEL의 관계에서 나온다.

Controller에 추상층을 넣어, Model의 상황에 따라 공급해 주는 서비스

Model

의존성이 없기 때문에 구현하기 쉽다

페이지가 변경되도 똑같은 모델을 움직여야하니까 ⇒ 싱글톤

const Model = class extends Set {
    constructor(isSingleton) {
        super()
        if (isSingleton) return singleton.getInstance(this)
    }

    add() {
        err()
    }
    delete() {
        err()
    }
    has() {
        err()
    }
    addController(v) {
        if (!is(v, Controller)) err()
        super.add(v)
    }
    removeController(v) {
        if (!is(v, Controller)) err()
        super.delete(v)
    }
    notify() {
        this.forEach((v) => v.listner(this))
    }
}

const HomeDetailModel = class extends Model {
    constructor(_id = err(), _title = err(), _memo = '') {
        super()
        prop(this, { _title, _id, _memo })
    }
    get title() {
        return this._title
    }
    get id() {
        return this._id
    }
    get memo() {
        return this._memo
    }
}

const HomeModel = class extends Model {
    constructor(isSingleton) {
        super(isSingleton)
        // this singleton
        // 대부분 여기서 어떤 작업?  ajax 통신으로 json 가져와서 parsing
        if (!this._list)
            prop(this, {
                _list: [
                    new HomeDetailModel(1, 'todo1', 'memo1'),
                    new HomeDetailModel(2, 'todo2', 'memo2'),
                    new HomeDetailModel(3, 'todo3', 'memo3'),
                    new HomeDetailModel(4, 'todo4', 'memo4'),
                    new HomeDetailModel(5, 'todo5', 'memo5'),
                ],
            })
    }
    add(...v) {
        this._list.push(...v)
    }
    remove(id) {
        const { _list: list } = this
        if (
            !list.some((v, i) => {
                if (v.id === id) {
                    list.splice(i, 1)
                    return true
                }
            })
        )
            err()
        this.notify()
    }

    get list() {
        return [...this._list]
    }

    get(id) {
        let result
        if (!this._list.some((v) => (v.id === id ? (result = v) : false)))
            err()
        return result
    }
}

View

View 싱글톤 (render할때 model을 받아서 처리)
Controller는 입력을 처리하고, 모델을 처리하기 위해 존재
Controller 메서드명의 분리
- View가 화면을 그릴때도 메서드가 발동
- View 액션을 처리할때도 메서드가 발동

const View = class {
    constructor(_controller = err(), isSingleton = false) {
        prop(this, { _controller })
        if (isSingleton) return singleton.getInstance(this)
    }
    render(mode = null) {
        override()
    }
}

const HomeBaseView = class extends View {
    constructor(controller, isSingleton) {
        super(controller, isSingleton)
    }
    render(model = err()) {
        if (!is(model, HomeModel)) err()
        const { _contoller: ctrl } = this
        return append(
            el('ul'),
            ...model.list.map((v) =>
                append(
                    el('li'),
                    el('a', 'innerHTML', v.title, 'addEventListener', [
                        'click',
                        (_) => ctrl.$detail(v.id),
                    ]),
                    el('button', 'innerHTML', 'x', 'addEventListener', [
                        'click',
                        (_) => ctrl.$remove(v.id),
                    ])
                )
            )
        )
    }
}

const HomeDetailView = class extends View {
    constructor(controller, isSingleton) {
        super(controller, isSingleton)
    }
    render(model = err()) {
        if (!is(model, HomeDetailModel)) err()
        const { _contoller: ctrl } = this
        return append(
            el('section'),
            el('h2', 'innerHTML', model.title),
            el('p', 'innerHTML', model.memo),
            el('button', 'innerHTML', 'delete', 'addEventListener', [
                'click',
                (_) => ctrl.$removeDetail(v.id),
            ]),
            el('button', 'innerHTML', 'list', 'addEventListener', [
                'click',
                (_) => ctrl.$list(),
            ])
        )
    }
}

Model이 변경되면 즉시 View에 영향이 끼친다 → 커플링 (MVC 단점)

- View가 Model을 모르게 하는 방법 (디커플링)

View 모든 필드에 대해서 getter/setter를 제공
- Controller는 View의 getter/setter를 호출하면 끝
  - 위와 같은 Controller를 **Presenter Controller**
- 장점
  - View가 Model을 모르니, Model의 변화가 View에 영향 X
  - 실제 모델이 없어도, 메서드만 호출하면 View를 만든다
- 단점
  - View가 커지면 수많은 필드에 getter/setter를 만들어야 한다.
  - ide가 만들어주는데 직접 만들기는 어렵다.
  - 수동적인 View의 형태
- 이러한 패턴은 MVP라고 부르며, 비쥬얼 베이직, 델파이에서 사용

View가 Model을 알게 하는게 아니라 → 가짜 모델이 View를 알게 바인딩

가짜 모델이 주도적으로 View를 업데이트 한다!
장점
- View를 가짜 모델을 이용해서 업데이트하여, Model의 변화가 View에 영향 X
- 가짜모델이 View를 보고 key에 데이터 바인딩을 통해서 업데이트 한다
- 바인딩하는 엔진이 있으면, getter/setter를 만들지 않아도 된다!

단점

View과 가짜 모델과 원할하게 상호작용할 수 있는 시스템 필요(바인딩 엔진)

예시 (Vue.js)

// v-model을 통해 가짜 모델을 통해 상호작용하여 화면을 그린다.
// v-model은 View를 바꾸기 위한 이름이지, Model 이름이 아니다
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

가짜 모델은 무엇이며, 어떻게 만들까?

1차 : 서버에서 JSON (실제 Model)
2차 : JSON을 View를 업데이트 하기위한 key로 재정의한 객체 - View를 업데이트하기위해 Model을 재정의하는 것을 **View Model!
가짜 모델 ===** View Model
이러한 패턴은 MVVM라고 부르며, 모던 프론트앤드 프레임워크에서 사용

Controller

클래스로 구현한다면, 메소드 하나가 화면 하나를 담당

base() , default() 기본 화면 보여주는 default Method - 디폴트 메서드 이름을 정하는 일반적인 시스템의 룰
- Home 컨트롤러의 기본 화면을 보여줘 → default Method

화면이나 스테이지를 전환하는 것은 어플리케이션의 역할(라우팅 요청)

const Home = class extends Controller {
    constructor(isSingleton) {
        super(isSingleton)
    }

    base() {
        const view = new HomeBaseView(this, true)
        const model = new HomeModel(true)
        return view.render(model)
    }

    $detail(id) {
        app.route('home:detail', id)
    }

    $remove(id) {
        const model = new HomeModel(true)
        model.remove(id)
        this.$list()
    }

    detail(id) {
        const view = new HomeDetailView(this, true)
        const model = new HomeDetailModel(true)
        return view.render(model.get(id))
    }

    $list() {
        app.route('home')
    }

    $removeDetail(id) {
        this.$remove(id)
        this.$list()
    }
}

App

MVC에서는 App의 라우팅을 통해 화면은 전환한다.
- 컨트롤러 단에서 화면을 전환할 수 없다.
라우팅 될때마다 부모를 비우고 컨트롤러의 호출 결과를 넣어준다.
- 반드시 App을 경유해서 화면을 전환하고 있기 때문
- 컨트롤러가 화면을 바꾸거나 뷰가 모델을 수신해서 뷰을 갱신하는게 의미없다.

실무에서는 라우팅을 등록할때, 함수를 등록하는 일반적

두번째 인자의 함수를 주는 이유는 실행할때 어떠한 액션을 추가할 수 있다.

const App = class {
    constructor(_parent = err()) {
        prop(this, { _parent, _table: new Map() })
    }
    add(k = err(), controller = err()) {
        k = k.split(':')
        this._table.set(k[0], controller)
        ;(k[1] || '')
            .split(',')
            .concat('base')
            .forEach((v) => this._table.set(`${k[0]}:${v}`, controller))
    }
    route(path = err(), ...arg) {
        const [k, action = 'base'] = path.split(':')
        if (!this._table.has(k)) return
        const controller = this._table.get(k)()
        append(
            attr(sel(this._parent), 'innerHTML', ''),
            controller[action](...arg)
        )
    }
}

const app = new App('#stage')
app.add('home:detail', (_) => new Home(true))
app.route('home')

격리와 역할로 나눠 코드의 수정이 제안된 요건내에서 일어나게 바꾼다.

모델 뷰 컨트롤러로 나눠서 하나의 화면을 구성하는 이슈를 3가지로 나누었고,

각각 수정의 각각에서 나오게 만들었다. 이게 MVC

MVC란? 격리와 역할로 나눠 코드의 수정이 제안된 요건내에서 일어나게! 모델, 뷰, 컨트롤러로 나눠 하나의 화면을 구성하는 이슈를 3가지로! 각각 수정의 각각에서 나오게 만들었다

Observer

listen을 구현해서 각 모델의 notify를 받아서 처리한다.

Controller에서 View용 리스너를 용어 : action, listner, handler

const Home = class extends Controller {
  constructor (isSingleton) {super(isSingleton)}

  base () {
    const view = new HomeBaseView(this, true)
    const model = new HomeModel(true)
    return view.render(model)
  }

  $detail(id){
    app.route('home:detail', id);}

  $remove (id) {
    const model = new HomeModel(true)
    model.remove(id)
    this.$list()
  }

  detail(id) {
    const view = new HomeDetailView(this, true)
    const model = new HomeModel(true);
    return view.render(model.get(id));
  }

  $list () {app.route('home')}

  $removeDetail (id) {
    this.$remove(id)
    this.$list()
  }

참고사항

어디에서 불러내고 요청되도 Singleton을 유지해야 한다.
어떤 객체든지, 싱글턴을 만들 방법이 필요하다.
App 개발에서 메모리 Context에 따라 대표적인 세가지의 Singleton 형태
1. Application Memory : 서버가 죽을때까지의 메모리
2. Session Memory : 유저가 로그인하고 로그아웃 할때까지의 메모리
3. Request Memory : 하나의 요청당 하나의 메모리
백앤드에서 MVC + rest api가 좋은 이유는?
- Model이 바뀌면 JSON key/value 만 추가하면 된다
- View는 프론트앤드 개발자 그려줄거니까 ㅠㅠ

코드스피치 ES6+ 디자인패턴과 뷰패턴 4회차 정리

Sat, 13 Feb 2021 00:00:00 GMT

Composite Pattern의 확산 ⇒ 중복

데이터 구조를 컴포지트로 만들면 활용하는 쪽까지 컴포지트가 된다.

Task 데이터 컴포넌트 구조 → Renderer 컴포넌트 구조 (행동의 중복)

행위가 중복이다 → 컴포지트는 개발하기 어렵다
컴포지는 행동은 테스크만 가지고 있으면 되지 않나? 왜 렌더까지?

// Task 컴포넌트 패턴
getResult (sort, stateGroup) {
    ...
    return {
      ...
      children: ([...]).map(v => v.getResult(sort, stateGroup))
    }
  }

// Renderer 컴포넌트 패턴 (_render)
_render (base, parent, { item, children }, depth) {
    ....
    children.forEach(v=>{this._render(sub, item, v, depth + 1)});
    ...
  }

Renderer 그림만 그릴래(순회하기 싫어 → 행위를 정의하고 싶지 않아 → 순회는 내역할 아니다)
순회시켜줘 → 거기에 방문해서 하고 싶은것만 할래 ⇒ 비지터 패턴
비지터를 사용하는 이유
- 컴포지트를 쓰면 전파 → 오염 / 반복 (참조하고 있는 모두가 컴포지트 구현)
- 한쪽이 컴포지트이거나, 액션을 추가하거나, 그 액션에 따라서 무엇을 하고 싶으면 비지터로 처리
- Task가 컴포지트면, Render 의 액션은 비지터로 처리하자 ⇒ 분리하자!!
- 컴포지트 패턴이 나오면 무조건 비지터 패턴이 나온다

VISITOR PATTERN

Task 클래스 accpet 메서드 구현 → 컴포지트가 확산이 된다 (accept를 다시 호출)

부모 계층에서 자료구조를 생성하기 때문에(캡슐화 ⇒ getResult )
자식 계층에서는 똑같다 ( visitor pattern 전과 동일)

// Task Class
accept(sort, stateGroup, visitor){
    visitor.start(sort, stateGroup, this);
    this.getResult(sort, stateGroup).children.forEach(
      ({item}) => item.accept(sort, stateGroup, visitor)
    );
    visitor.end(); // 상위 노드로 이동하기 위해서
}

// Renderer Class
render () {
    this._visitor.reset()
    this._list.accept(Task[this._sort], true, this._visitor)
}

트랜잭션이란 ⇒ 암묵적인 순서가 강제된 메서드

start와 end사이에 자식들의 컴포지션 처리가 들어가야한다는 암묵적인 순서가 존재

DOMRender 로직은 Dom + Render이다.

Render가 그림을 그리는 일반적인 로직은 다 가지고 있다. 구체적인 로직은 비지터한테 넘기자

Render의 역할

테스크와 협조하여 테스크에 대한 그림을 그릴 수 있게! 비지터를 중계하는 행위
더이상 렌더러의 자식이 필요없다?
- native API(DOM)때문에 구현했는데, Renderer가 Visitor에게 그 역할(자식클래스)을 이관
- 렌더러에서 돔에 대한 로직을 없어졋다
- 렌더러는 테스크랑만 놀자, 그리고 중계만 하자

const Renderer = class {
  constructor (_list = err(), _visitor = err()) {
    prop(this, { _list, _visitor: prop(_visitor, { renderer: this }), _sort: 'title' })
  }

  add (parent, title, date) {
    if (!is(parent, Task)) err()
    parent.add(new TaskItem(title, date))
    this.render()
  }

  remove (parent, task) {
    if (!is(parent, Task) || !is(task, Task)) err()
    parent.remove(task)
    this.render()
  }

  toggle (task) {
    if (!is(task, Task)) err()
    task.toggle()
    this.render()
  }

  render () {
    this._visitor.reset()
    this._list.accept(Task[this._sort], true, this._visitor)
  }
}

const DomVisitor = class extends Visitor {
  constructor (_parent) {
    super()
    prop(this, { _parent })
  }

  reset () {
    this._current = el(sel(this._parent), 'innerHTML', '')
  }

  start (sort, stateGroup, task) { // operator
    if (!is(this._renderer, Renderer)) err()
    switch (true) {
      case is(task, TaskItem):
        this._item(task)
        break
      case is(task, TaskList):
        this._list(task)
        break
    }
    this._current = this._current.appendChild(el('section',
      '@marginLeft', '15px',
      'appendChild', el('input', 'type', 'text'),
      'appendChild', el('button', 'innerHTML', 'addTask',
        'addEventListener', ['click', e => this._renderer.add(task, e.target.previousElementSibling.value)]
      ))
    )
  }
  end () { // operator
    this._current = this._current.parentNode;
  }

  _list (task) {
    this._current.appendChild(el('h2', 'innerHTML', task.title))
  }

  _item (task) {
    [
      el('h3', 'innerHTML', task.title, '@textDecoration', task.isComplete() ? 'line-through' : 'none'),
      el('time', 'innerHTML', task.date.toString(), 'datetime', task.date),
      el('button', 'innerHTML', task.isComplete() ? 'progress' : 'complete', 'addEventListener', ['click', _ => this._renderer.toggle(task)]),
      el('button', 'innerHTML', 'remove', 'addEventListener', ['click', _ => this._renderer.remove(parent, task)])
    ].forEach(v => this._current.appendChild(v));
  }

DomVisitor _item 메소드에 this._renderer를 넣어준 이유 ?
- Task에 대한 관리는 Renderer가 가지고 있기 때문에 Renderer에서 처리해준다
- Renderer에게 테스크를 중계해주는 역할을 위임하기 위해( add, remove toggle )
  
  코드의 가독성은 알고리즘의 감춰지고, 커뮤니케이션이 일어날때 확보된다!
  - 변수의 이름이 좋다고 해서 가독성이 높아지는 것이 아니다.
  - 그 의미가 확실하도록, 함수화 시키거나, 객체화를 시켜라
  - 로직을 바라보는게 아니라, 커뮤니케이션을 바라보게 된다(readable code)

Task를 순회 하면서 Visitor를 자기 노드에 초대해서 렌더링!

render () {
    this._visitor.reset(); //라이프사이클
    this._list.accept(Task[this._sort], true, this._visitor);
  }

Visitor의 라이프 사이클은 reset 후에 start end를 반복합니다.
- DomVisitor 역할은 start, end에 초대하서 그림만 그릴 게(컴포지트 로직이가 없다 → 테스크만 잇다)
- DOMRender의 애매모호하게 가지고 있던 리스크 최초 초기화 및 관리 기능이 없어졋다.
```
accept(sort, stateGroup, visitor){
    visitor.start(sort, stateGroup, this);
    this.getResult(sort, stateGroup).children.forEach(
      ({item}) => item.accept(sort, stateGroup, visitor)
    );
    visitor.end();
  }
```

객체가 어떠한 단계별로 실행이 될때, 실행되는 단계가 확정되있음 → LifeCycle

본인 자체가 Visitor가 되면 되는데 왜? DomVisitor를 구현햇나요?
- 변화율에 따라 따로 분리했다 변화율 때문에
- 렌더러 로직이 바뀔 경우는 없다(왜? 테스크의 데이터에 대한 로직이기 떄문)
- 돔 비지터는 폰트/이미지가 바뀐다!! 변화율이 높다
변화율이 다를때는 파일 채로 건들지 않게 해야 효과적이다.
- 만약? Renderer를 수정하게 된다면, 데이터 로직에 대해서도 다 테스트해야한다
- DomVisitor만 수정하면 DomVisitor만 테스트만 하면 된다.
- 변화율이 역할의 정체다→ 역할을 나누는 기준은 변화율이 큰 부분이다.

start와 end 사이에서 구현을 해야한다라는 암묵적인 룰 (Operator사용 제약)

Visitor의 start(), end()가 Operator이다

비지터에 대한 지식이 없는데 컴포지트에서 처리하는게 문제
- 비지터에만 구제적인 사용 방법에 대해 정의되있다. (start 와 end 사이에서 구현하자)
- 그 행위를 가지고 있는 애만 알고 잇는 지식 (Visitor만 알고 있는 지식)
- 메서드(start, end)가 외부 메서드라도 결국에는 실패할 것이다.
accept 안에 getResult가 있다(composite 안에 compositee) → 2단 중복 / 내부 중복
- Task의 두가지 역할을 가지고 잇다.
  - accept를 받아들이는 visitor를 loop 돌리는 역할
  - 원래 컴포지트의 역할

역할이 다른 메서드가 다른 메서드를 참조하고 이기 때문에 오염된다.

accept(sort, stateGroup, visitor){
    visitor.start(sort, stateGroup, this);
    this.getResult(sort, stateGroup).children.forEach(
      ({item}) => item.accept(sort, stateGroup, visitor)
    );
    visitor.end();
  }

Reverse visitor

Visitor에 대한 역할은 Visitor가 알아야 하고, TaskList가 getResult을 수행해야 할 역할

// Renderer class
render () {
    this._visitor.reset();
		// List가 vistor를 처리해야 한다는것을 의미한다.
    this._list.accept(Task[this._sort], true, this._visitor)
}

Visitor가 오퍼레이션을 통해 리스트를 받아들이면 더 낫다!!(정답은 아니다 Task에 강하게 바인딩 되있다)

자료구조가 계속해서 변하고 이걸 처리한 비지터가 안정화되면 Reverse 를 할 필요 없다
Visitor가 Task를 알고있는것 (Task가 순수한 모델이면서 변화지 않기 때문)

자료구조가 안정적이면서 뷰를 바꾼다 → 이 application에서는 이게 더 효율적이다.

render () {
    this._visitor.reset();
    this._visitor.operation(Task[this._sort], true, this._list);
}

// task에 대해서 강하게 바인딩되있다.
operation(sort, stateGroup, task) {
    this._start(sort, stateGroup, task);
    task.getResult(sort, stateGroup).children.forEach(
      ({item}) => this.operation(sort, stateGroup, item)
    )
    this._end();
}

OBSERVER PATTERN

this.render() 중복

데이터/모델에 대한 변경이 확실하 않다(조건을 충족못한다면 실행이 불가)
- 모델에게 부탁만 했는데, 결과의 업데이트 여부를 확인 불가(캡슐화)

캡슐화를 깨지않고 변화를 밖으로 통제할 방법이 필요해 ⇒ 옵저버

add (parent, title, date) {
    if (!is(parent, Task)) err()
    parent.add(new TaskItem(title, date))
    this.render()
  }

  remove (parent, task) {
    if (!is(parent, Task) || !is(task, Task)) err()
    parent.remove(task)
    this.render()
  }

  toggle (task) {
    if (!is(task, Task)) err()
    task.toggle()
    this.render()
  }

Observer Class Concrete

subject : 신문사 , observer 구독자

OBSERVER PATTERN 작성시 주의사항

초기작성시, 인자를 보내지말자 ⇒ 통지만으로 충분하다(대부분)
값을 보내면 동기화 문제 및 멀티쓰레드 문제가 생길수도 있다.
값을 꼭 보내야하는 구조이며, 구조의 문제 일 수 도있다.

const Observer = class {
    observe() {
        override()
    }
}
const Subject = class {
    constructor() {
        this._observers = new Set()
    }

    addObserver(o) {
        if (!is(o, Observer)) err()
        this._observers.add(o)
    }

    removeObserver(o) {
        if (!is(o, Observer)) err()
        this._observers.delete(o)
    }
    // 신문을 뿌리는 행위
    notify() {
        this._observers.forEach((o) => o.observe())
    }
}

Task의 입장에서는 Observer이자, Subject의 경우기도 하다
- 다중상속 또는, 상속하나에 다중 소유로 해결한다.
- 내자신을 참조하는 Observer를 만들어서 Observer를 직접 구현하지 않았지만,
  - 나를 알고있는 Observer를 소유하므로써 Observer에 대응
  - 부모가 자식의 변화를 알려면 항상 리스닝 하고 잇어야 한다 .
```
const TaskObserver = class extends Observer {
    constructor(_task) {
        super()
        prop(this, { _task })
    }
    observer() {
        // 자식한테 통보를 받으면 나도 부모한테 notify 해주자
        // 전파 -> 전파
        this._task.notify()
    }
}
```

Task 확장 = Subject 상속

내 자식에 옵저버가 되서 자식이 변화하면 나의 notify가 호출된다 (taskObserver)

자식 변화 → 나에게 notify → 부모에게 notify

const Task = class extends Subject {
  ...
  constructor (_title = err(), _date = new Date) {
    super();
    prop(this, { ..., _observer: new TaskObserver(this) })
  }
  ...
  add (task) {
    ...
    task.addObserver(this._observer); // 등록
    this.notify();
  }

  remove (task) {
    ...
    task.removeObserver(this._observer); // 삭제
    this.notify();
  }

  ...
}

참고사항

eventDispatcher addEventListner, removeEventListner 안에 들어가는게 Observer이다.
- 자바스크립트는 함수를 객체로 보내기때문에 가능
Observer의 다른 이름 Listner
addEventlistener은 옵저버패턴의 확장인 채널 패턴이라고 부른다. (event type에 따라서 옵저버)
push observer : subject가 observer로 밀어내고 있다.
- 적은 노드를 잦은 통신할때
pull observer : 브라우저라고 생각 해당 페이지를 브라우저가 요청한다.
- 많은 노드를 비정기적으로 비동기적으로 상대할때
컴포넌트 패턴 (여러가지 패턴의 활용)
forEach, map, filter 함수의 콜백 또한 Visitor 패턴
- 순회는 array 역할
- 값만 받으면, 콜백은 처리만 한다!는 것이 역할
- 결국, 데려가주면 무언가를 할게 (구조, 순회 관심 없음 → 나의 역할이 아니다)

코드스피치 ES6+ 디자인패턴과 뷰패턴 3회차 정리

Fri, 12 Feb 2021 00:00:00 GMT

Loop Pattern

Iterator Pattern
- 동일한 구조의 반복
- Iteration은 언어에서 이미 제공 별도(Array, Set, Map, ...)
Composite Pattern
- 알고리즘 전개에 따른 반복(Recursion 재귀)
- 재귀호출을 이해했다 → 컴포지트 패턴

COMPOSITE PATTERN은 언제 쓸까?

좌측 트리메뉴에 추가해주세요! → 좌측 트리메뉴에 아이콘/depth 추가 해주세요 ㅠㅠ
계속해서 요구사항이 증가된다 → 컴포지트패턴으로 해결!!
함수를 구현하게 된다며, 상태를 가지고 있지않기 때문에 요구사항이 늘어날수록 인자가 늘어남
객체화 시켜 재귀하는 로직을 감추는게 컴포지트 패턴이다

Microsoft TODO List와 비슷한걸 만들면서 배워보자

Domain 파악
- 리스트 안에 여러개의 TODO Task 항목들
  
  도메인 훈련 : 화면(기획서)을 보고 데이터가 어떻게 생겼을까? (네이버 화면보고 HTML 파악)
  
  도메인을 파악하는 방법 (데이터베이스 기준)
  1. 행위가 명사로 표현한다 → 엔티티(데이터 저장)
    - 엔티티 후보 : TODO List, TODO Task
    - 프론트앤드 관점에서 보면 하나의 객체로 표현할 수 있다 ⇒ 클래스
  2. 행위를 동사로 표현한다 → Behavior ?
시나리오 작성 (개발 70% 완료)
- 시나리오를 보고 추측 할 수 있는 법(코드에는 없지만, 모델링을 한다)
  - 날짜는 현재시간 저장하는구나....
  - 리스트의 색상과 배경이 있는데, 기본값으로 설정되는구나...
```
const list1 = new TaskList('비사이드')
list1.add('지라 설치')
list1.add('지라 클라우드 설치')

const list2 = new TaskList('s75')
list2.add('2강 답안 작성')
list2.add('3강 답안 작성')

console.log(list1.byTitle())
console.log(list2.byDate())
```
  추측하는 것 → API 설계라고 한다
  1. API 설계는 구조적인 설계와 다르다.
  2. 어떻게? 나의 프로그램의 결과(기능과 데이터)를 사용할 것인가?
  3. 사람들이 인식하기 쉽게! 사용하기 쉽게! 설계해야 한다
  4. 결국 이름이 제일 중요하다!!(상향식에서 리펙토링으로 만들자 : add → addTask)
Concrete Class (구현)
- 엔티티를 파악하고 최대한 의존성이 없는것부터 작성한다(list 보다 task)
- 기능상의 필요한 점을 보고 api를 도출한다 (정렬 기준 : taskSort의 sortTitle, sortDate)
  - 대부분의 api는 본인의 내장을 까지않고 캡슐화를 제공하기 위해서 (sortTitle, sortDate)
    
    캡슐화 - 밖에 나의 행동을 추상적으로 표현한다 (ATM에서 돈 뽑는것) 은닉 - 감추는 행위
- 기본적인 행동(behavior) : toggle
```
const Task = class{
  sortTitle(task){
    return this._title > task._title;
  }
  sortDate(task){
    return this._date > task._date;
  }
	toggle () {this._isComplete = !this._isComplete}
}
const taskSort = {
  title : (a, b) => a.sortTitle(b),
  date: (a, b) => a.sortDate(b)
}
....
```

테스크의 서브 테스크의 형태(Optional)

sub 항목이 없어도 똑같은 데이터 구조로 나타낸다.
리스트에 task를 추가하는 행위 === task에 sub task를 추가하는 행위
행위는 추상적이라 인식하기 어렵다 (데이터가 일치하는게 아니라, 행위가 일치한다) ⇒ 메서드 복사

모델링 : 현상을 보고 데이터의 구조를 찾아내는것
```
const list = list2.byDate()
list[1].task.add('코드정리')
list[1].task.add('다이어그램정리')
```

리스트의 배열은 task의 집합

const Task = class {
  constructor (title, date) {
    ...
    this._list = []
  }

  add (title, date = Date.now()) {this._list.push(new Task(title, date))};

  remove (task) {
    const list = this._list
    if (list.includes(task)) list.splice(list.indexOf(task), 1)
  }

  _getList (sort, stateGroup) {
    const list = this._list, s = taskSort[sort]
    return {
      task: this,
      sub: !stateGroup ? [...list].sort(s) : [
        ...list.filter(v => !v.isComplete()).sort(s),
        ...list.filter(v => v.isComplete()).sort(s)
      ]
    }
  }

  ...
}

const TaskList = class {
  constructor (title) {
    ...
    this._list = []
  }

  add (title, date = Date.now()) {this._list.push(new Task(title, date))};

  remove (task) {
    const list = this._list
    if (list.includes(task)) list.splice(list.indexOf(task), 1)
  }

  _getList (sort, stateGroup) {
    const list = this._list, s = taskSort[sort]
    return (!stateGroup ? [...list].sort(s) : [
      ...list.filter(v => !v.isComplete()).sort(s),
      ...list.filter(v => v.isComplete()).sort(s)
    ]).map(v => v._getList());
  }
  ...
}

리스트는 테스크를 보여줄 책임 없다 → 테스크가 서브태스크가 보여줄 책임이 있다
- 나는 호출만 했을 뿐이다!(리스트와 태스크의 내부거래)
- 어떻게 아느냐? → 함수안에서 호출하는것이라서 밖에서는 모른다 (캡슐화)
- 테스크에게 해당 테스크를 보여줄 역할을 위임 v => v._getList()
```
  _getList (sort, stateGroup) {
    const list = this._list, s = taskSort[sort]
    return (!stateGroup ? [...list].sort(s) : [
      ...list.filter(v => !v.isComplete()).sort(s),
      ...list.filter(v => v.isComplete()).sort(s)
    ]).map(v => v._getList()); // 내부거래
  }
```

만약 서브의서브의서브의....테스트라면?

모델링 (현상을 보고 데이터의 구조를 찾아내는것)

아래와 같은 데이터의 형태를 설계해야 하는것이 먼저다!(모델링)
부모 클래스를 만들자 → 상속을 통해 공통코드(중복)을 제거

복잡한 모델을 가지고 와서 앱 전체를 표현하는것(우리의 목표)

{
  item: 's75',
  children: [
    {
      item: taskItem('3강교안작성'),
      children: [
        {
          item: taskItem('코드정리'),
          children: [
            {
              item: taskItem('subsub1'),
              children: []
            }
          ]
        }
      ]
    }
  ]
}

실무에서는 꼬리에 꼬리를 물고 재귀가 확산한다 (하노이는 같은 것만 재귀)
- 컴포지트 패턴을 이용해서 재귀 문제를 풀어낸다!
- 단, 컴포지트 패턴은 depth가 깊으면, stackoverflow가 발생가능성 높다
- 컴포지트 패턴 핵심은 동일한 함수을 통해 부모와 자식의 문제를 해결한다!
  - 본인이 처리할 부분과 자식이 처리할 부분이 똑같은 메소드로 처리한다
  - hook을 통해서 자기 자신의 사정을 해결하면 된다.(_getResult 함수)
  - 자식 사정은 getResult로 해결하면 된다(컴포지트 패턴을 파악할 수 있다)
```
getResult (sort, stateGroup) {
    const list = this._list
    return {
      item: this._getResult(), // hook
      children: (!stateGroup ? [...list].sort(sort) : [
        ...list.filter(v => !v.isComplete()).sort(sort),
        ...list.filter(v => v.isComplete()).sort(sort)
      ]).map(v => v.getResult(sort, stateGroup)) // 컴포지트 패턴이구나
    }
  }
```

Composition Rendering

컴포지션은 전파된다(데이터가 컴포지션 → 렌더링도 컴포지션)
- 데이터가 구조가 재귀적으로 되있으니까, 렌더러도 똑같이 재귀적으로 그려야 한다
  
  모델 Render vs 증분 Render
  1. 모델 Render : 데이터가 변화면, 현재 데이터를 기반으로 전체 다시 그려준다
    - 모델렌더는 mv 계열 프레임워크의 기본
  2. 증분 Render : 필요한 경우에만 다시 만들고 변화가 있으면 업데이트해준다(이벤트 기반)
    - 리엑트는 데이터가 바뀌면, 가상돔의 데이터가 바뀌고 증분을 계산해서 렌더링
    - 효율적으로 계산하기 어렵다(직접은 어렵다... 라이브러리, 프레임워크를 사용하자)
도입함수(기초 렌더링 세팅) + 컴포지션 위임

const DomRender = class {
    constructor(list, parent) {
        this._parent = parent
        this._list = list
        this._sort = Task.title
    }

    add(parent, title, date) {
        parent.add(new TaskItem(title, date))
        this.render()
    }

    remove(parent, task) {
        parent.remove(task)
        this.render()
    }

    toggle(task) {
        if (task instanceof Task) {
            task.toggle()
            this.render()
        }
    }

    render() {
        // 초기세팅
        const parent = this._parent
        parent.innerHTML = ''
        parent.appendChild(
            'title,date'
                .split(',')
                .reduce(
                    (nav, c) => (
                        nav.appendChild(
                            el(
                                'button',
                                'innerHTML',
                                c,
                                '@fontWeight',
                                this._sort === c ? 'bold' : 'nomal',
                                'addEventListener',
                                [
                                    'click',
                                    (e) => (
                                        (this._sort = Task[c]), this.render()
                                    ),
                                ]
                            )
                        ),
                        nav
                    ),
                    el('nav')
                )
        )

        // 컴포지트 패턴
        this._render(parent, this._list, this._list.getResult(this._sort), 0)
    }

    _render(base, parent, { item, children }, depth) {
        const temp = []
        base.style.paddingLeft = depth * 10 + 'px'
        if (item instanceof TaskList) {
            temp.push(el('h2', 'innerHTML', item._title))
        } else {
            temp.push(
                el(
                    'h3',
                    'innerHTML',
                    item._title,
                    '@textDecoration',
                    item.isComplete() ? 'line-through' : 'none'
                ),
                el(
                    'time',
                    'innerHTML',
                    item._date.toString(),
                    'datetime',
                    item._date.toString()
                ),
                el('button', 'innerHTML', 'remove', 'addEventListener', [
                    'click',
                    (_) => this.remove(parent, item),
                ])
            )
        }
        const sub = el(
            'section',
            'appendChild',
            el('input', 'type', 'text'),
            'appendChild',
            el('button', 'innerHTML', 'addTask', 'addEventListener', [
                'click',
                (e) => this.add(item, e.target.previousElementSibling.value),
            ])
        )
        children.forEach((v) => {
            this._render(sub, item, v, depth + 1)
        })
        temp.push(sub)
        temp.forEach((v) => base.appendChild(v))
    }
}

참고사항

함수의 시그니처란
- Parameter의 value와 type
- 반환값과 타입
- Exception

코드스피치 ES6+ 디자인패턴과 뷰패턴 2회차 정리

Thu, 11 Feb 2021 00:00:00 GMT

디자인패턴은 어떠한 철학을 가지고 있는가?

디자인패턴을 이해하기 위해선
- 객체의 역할모델에 대한 전반적인 이해
- 구조를 이해하는게 먼저(더나은 구조를 찾기 전)
- 디자인패턴은 **역할모델**과 **객체지향**에 대해서 먼저 이해하고 써야 한다.
디자인 패턴 분류
- 생성패턴 : 객체를 만들때 이런식으로 만드는게 좋아!
- 구조패턴 : 객체끼리 관계를 이런식으로 하는게 좋아!
- 행동패턴 : 알고리즘적인 문제를 객체간 협력으로 풀어보자!
객체지향설계를 학습할 수 있는 분류
- 다형성
- 캡슐화
- 변화율
- 객체 관계
- 역할모델 : 중점적으로 다룰 주제!!
알고리즘이 변화하는 이유? (대부분 통제불가요소이다.)
- 비지니스 변화
- 연관 라이브러리 변화
- 호스트측 변화

기존 제어문 기반의 알고리즘이 갖는 문제

알고리즘이 변화한 부분만 수정하고 나머지는 건드리고 싶지 않다면?

최대한 개별 알고리즘을 함수로 분리한다.

// 수정하면 전체가 컴파일 됨
if(case == 1){
...
}else if(case == 2){
...
}else if(case == 3){
...
}

// 최대한 개별 알고리즘을 함수로 분리
if(case == 1){
	case1();
}else if(case == 2){
	case2();
}else if(case == 3){
	case3();
}

하지만 함수로 최대한 분리를 해도, 아래와 같이 변경된다면, 문제가 발생한다.


// 문제1. 경우가 변경될떄
if(case == 1){
...
}else if(case == 2){
...
}else if(case == 3){
...
}else if(case == 4){
...
}

// 문제2. 함수 간 공통부분
if(case == 1){
	common();
	case1();
}else if(case == 2){
	common();
	case2();
}else if(case == 3){
	case3();
}

변화에 대응하는 프로그래밍으로 해결하자 ⇒ 적응형 프로그래밍 중에 객체지향 프로그래밍
- 최소한의 변화를 일으키는 부분을 분리해서 격리!
- 알고리즘 분화시 객체지향에서 선택할 수 있는 두 가지 방법(격리를 어떻게 해줄것인가?)
  1. 상속 위임
    - 내부 계약관계로 추상층에서 공통 요소를 해결하고 상태를 공유할 수 있음
    - 부모와 자식관의 대화는 속성으로 한다.(인자가 아니라, 속성)
    - 변경되는 부분(분기 case)을 자식에서 해결한다.
    - 상속 위임으로 관계 - 관계 간의 역할을 분리하는 것이 첫번째!!!
  2. 소유 위임
    - 외부 계약관계로 각각이 독립적인 문제를 해결하며 메세지를 주고 받는 것으로 문제를 해결함
    - Data가 Renderer 소유하거나 Renderer가 Data를 소유하는 것
    - 자기가 가지고 있는 문제의 일부분을 다른 객체한테 넘겨주는 것
    - Gof 디자인 패턴 방향성은 소유위임이다
- 부가적인 형이 많음 (하나의 테이블에서 여러가지의 클래스로 나뉬다)
- 변화율이 많을것같다!!! ⇒ 역할을 나누어준다(각 case별로 클래스를 나누어준다)
  - 변화율을 파악하려면 도메인에 대해서 분석을 해야한다
  - 예) 보험상품 → 밑값은 변경되지 않는다. 하지만, 상품은 여러개로 파생되서 역할을 나누어줘야 한다.
- 변화는 알고리즘이 아니라 비즈니스에서 오는 거라서 알 수 있다.

상속위임 (Template Method Pattern)

위임하는 부분을 호출하는 곳을 template Method 라고 한다.
위임한 부분을 hook

실행시점선택지를 case별로 서브 클래스를 만들어간다(if 처럼)

hook을 콘크리트(구현)해주세요! hook 함수를 정의하고 바디를 적으면 된다

const Github = class{  // 정의시점 변하지 않는 부분
  constructor (id, repo) {
    this._base = `https://api.github.com/repos/${id}/${repo}/contents/`;
  }
  load(path){ // Template Method 공통부분!!!!!!
    const id = 'callback' + Github._id++;
    const f = Github[id] = ({data : {content}}) => {
      delete Github[id];
      document.head.removeChild(s);
      this._loaded(content); // 위임부분
    };
    const s = document.createElement('script');
    s.src = `${this._base + path}?callback=Github.${id}`;
    document.head.appendChild(s);
  }
  _loaded(v) {throw 'overrid';} // Hook
}
Github._id = 0;

// const ImageLoader = class extends  Github{ // 실행시점선택지 - 변하는 부분
//   _loaded(v){...} // 위임 구현
// }

// 변하는 부분에 대해서 각 class 처리
const ImageLoader = class extends Github {
  constructor (id, repo, target) {
    super(id, repo)
    this._target = target
  }

  _loaded (v) {
    this._target.src = 'data:text/plain;base64,' + v
  }
}

// 변하는 부분에 대해서 각 class 처리
const MdLoader = class extends Github {
  constructor (id, repo, target) {
    super(id, repo)
    this._target = target
  }

  _loaded (v) {
    this._target.innerHTML = this._parseMD(v)
  }

  _parseMD (v) {
    return d64(v).split('\n').map(v => {
      let i = 3
      while (i--) {if (v.startsWith('#'.repeat(i + 1))) return `<h${i + 1}>${v.substr(i + 1)}</h${i + 1}>`}
      return v
    }).join('<br>')
  }
}

const d64 = v => decodeURIComponent(atob(v).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('')

정의시점과 실행시점
- 자바스크립트는 컴파일이 없지만, 정의시점의 파일은 컴파일 된거랑 같다고 생각할 수 잇다.
- 정의시점에 내가 무엇을 할지 미리 만들어놓지 않고, 케이스별로 처리할 처리기만 만든다 (imageLoader, Mdloader)
```
// 정의 시점
<script src="Github.js"></script>
<script src="ImageLoader.js"></script>
<script src="MdLoader.js"></script>

// 실행시점선택
<script>
const img = new ImageLoader(...);
img.load(...);

const md = new MdLoader(...);
md.load(...);
</script>
```

소유위임 (STARATEGY PATTERN)

소유한(사용하기 전 해당 객체/함수에 대해서 소유)객체(함수)한테 문제의 일부분 위임만 한다
함수가 위임객체이면, 상속위임 보다는 클래스 정의가 줄어든다(클래스를 넘겨준다면 비슷)
함수면 type에 대해서 처리할 수 없기 때문에 valdiation 처리 필요(안정성을 담보 할 수 없다)
위임하는 일이 중요도에 따라 높으면 클래스, 아님 함수
위임객체를 Starategy Object - 전략객체라고 한다

전략객체을 소유하고 있는 class를 host, invoke(실행기)라고 한다.

const Github = class {
    // 정의시점 - 변하지 않는 부분
    constructor(id, repo) {
        this._base = `https://api.github.com/repos/${id}/${repo}/contents/`
    }

    load(path) {
        if (!this._parser) return
        const id = 'callback' + Github._id++
        const f = (Github[id] = ({ data: { content } }) => {
            delete Github[id]
            document.head.removeChild(s)
            this._parser(content) // 위임부분
        })
        const s = document.createElement('script')
        s.src = `${this._base + path}?callback=Github.${id}`
        document.head.appendChild(s)
    }
    set parser(v) {
        this._parser = v
    } // 위임객체 // STARATEGY OBJECT //실행시점 선택지 - 변하는 부분
}

const el = (v) => document.querySelector(v)
const parseMD = (v) => {
    return d64(v)
        .split('\n')
        .map((v) => {
            let i = 3
            while (i--) {
                if (v.startsWith('#'.repeat(i + 1)))
                    return `<h${i + 1}>${v.substr(i + 1)}</h${i + 1}>`
            }
            return v
        })
        .join('<br>')
}

const loader = new Github('kode15333', 'Calculator')
// 전략객체만 바꿔준다 img 처리 함수로
const img = (v) => (el('#a').src = 'data:text/plain;base64,' + v)
loader.parser = img
loader.load('./public/guide.png')

// 전략객체만 바꿔준다 md 처리 함수로
const md = (v) => (el('#b').innerHTML = parseMD(v))
loader.parser = md
loader.load('README.md')

자유변수를 통한 확장 (외부의 상태값을 같이 저장하여 사용한다)

const Github = class {
    constructor(id, repo) {
        this._base = `https://api.github.com/repos/${id}/${repo}/contents/`
    }

    load(path) {
        if (!this._parser) return
        const id = 'callback' + Github._id++
        const f = (Github[id] = ({ data: { content } }) => {
            delete Github[id]
            document.head.removeChild(s)
            this._parser[0](content, ...this._parser[1]) // 변경부분
        })
        const s = document.createElement('script')
        s.src = `${this._base + path}?callback=Github.${id}`
        document.head.appendChild(s)
    }
    setParser(f, ...arg) {
        //외부의 상태값을 같이 저장한다.
        this._parser = [f, arg]
    }
}

Github._id = 0

const loader = new Github('kode15333', 'Calculator')
const img = (v, el) => (el.src = 'data:text/plain;base64,' + v)
loader.setParser(img, el('#a'))
loader.load('./public/guide.png')

const md = (v, el) => (el.innerHTML = parseMD(v))

소유위임은 클래스 하나의 전략객체만 바꾸는 거라 휠씬 짧다

// 정의 시점
<script src="Github.js"></script>
<script src="img.js"></script>
<script src="md.js"></script>

// 실행시점선택
<script>
const loader = new Github('kode15333', 'Calculator');
loader.setParser(img, el('#a'));
loader.load('./public/guide.png');

const md = new MdLoader(...);
loader.setParser(md, el('#b'));
loader.load('README.md')
</script>

실행시점 선택 위임

발생가능한 경우의 수를 값으로 기술(라우팅 테이블을 이용 / Loader의 코드는 변경되지 않는다)
if를 값으로 바꾸려면, 라우터를 이용하자(object or hashmap을 이용)(if 문, router 값)

그래서 코드를 안건드리고 값을 추가만 할수 있다.

const Loader = class {
    constructor(id, repo) {
        this._git = new Github(id, repo)
        this._router = new Map() // 라우팅테이블
    }
    add(ext, f, ...arg) {
        ext.split(',').forEach((v) => this._router.set(v, [f, ...arg]))
    }
    load(v) {
        const ext = v.split('.').pop()
        if (!this._router.has(ext)) return
        this._git.setParser(...this._router.get(ext)) // 확장자 경우에 따라 자동분기
        this._git.load(v)
    }
}

const el = (v) => document.querySelector(v)
const loader = new Loader('kode15333', 'Calculator')
loader.add('jpg,png,gif', img, el('#a'))
loader.add('md', parseMD, el('#b'))

loader.load('./public/guide.png')
loader.load('README.md')

상태에 대한 분기는 사라지지 않는다. 그 분기가 필요해서 태어났기 때문!!

정의시점에 제거하는 방법
- 분기 수 만큼 객체를 만들고(상속/소유 위임 , Template / Staratege)
- 실행시점에 경우의 수를 공급(실행시점 선택 위임, Builder???)
실행시점으로 분기를 옮길 때의 장단점
1. 장점
  - 정의 시점에 모든 경우를 몰라도 됨
  - 정의 시점에 그 경우를 처리하는 방법도 몰라도 됨
  - 일정한 통제 범위 내에서 확장가능한 알고리즘 설계 가능
2. 단점
  - 실행시점에 모든 경우를 반드시 기술해야 함
  - 실행시점마다 알고리즘의 안정성을 담보해야함
  - 매 호스트코드마다 안정성을 따로 담보해야 함

참고사항

data URL 형식 data:[minetype];base64,'+base64 + base64로 이미지의 URL
용량은 알고리즘을 대체할 수 있고, 알고리즘은 용량을 대체할 수 있다. 자바스크립트는 프로토타입은 용량이 부족해서 연산으로 찾는거다!

코드스피치 ES6+ 디자인패턴과 뷰패턴 1회차 정리

Wed, 10 Feb 2021 00:00:00 GMT

데이터를 활용하여, 테이블로 표현해보자

0. 데이터 분석

테이블 명 : title
column : header
row : Items (2차원 배열)

{
    "title": "TIOBEIndex for June 2017",
    "header": [
        "Jun-17",
        "Jun-16",
        "Change",
        "Programming Language",
        "Ratings",
        "Change"
    ],
    "items": [
        [1, 1, "", "Java", "14.49%", "-6.30%"],
        [2, 2, "", "C", "6.85%", "-5.53%"],
        [3, 3, "", "C++", "5.72%", "-0.48%"],
        [4, 4, "", "Python", "4.33%", "0.43%"],
        [5, 5, "", "C#", "3.53%", "-0.26%"],
        [6, 9, "", "change", "Visual Basic .NET", "3.11%", "0.76%"],
        [7, 7, "", "JavaScript", "3.03%", "0.44%"],
        [8, 6, "change", "PHP", "2.77%", "-0.45%"],
        [9, 8, "change", "Perl", "2.31%", "-0.09%"],
        [10, 12, "change", "Assembly language", "2.25%", "0.13%"],
        [11, 10, "change", "Ruby", "2.22%", "-0.11%"],
        [12, 14, "change", "Swift", "2.21%", "0.38%"],
        [13, 13, "", "Delphi/Object Pascal", "2.16%", "0.22%"],
        [14, 16, "change", "R", "2.15%", "0.61%"],
        [15, 48, "change", "Go", "2.04%", "1.83%"],
        [16, 11, "change", "Visual Basic,2.01%", "-0.24%"],
        [17, 17, "", "MATLAB", "2.00%", "0.55%"],
        [18, 15, "change", "Objective-C", "1.96%", "0.25%"],
        [19, 22, "change", "Scratch", "1.71%", "0.76%"],
        [20, 18, "change", "PL/SQL", "1.57%", "0.22%"]
    ]
}

1. 코드 구현

코드(함수명, 변수명)를 보고 의도를 파악할 수 있어야 한다 → 어떻게 동작할지
- 프로그래밍을 한다는 것은 나만의 단어와 의미체계를 만드는것
- 코드 설명
  - private 변수 때문에 클로져로 구현(class만 알고 있어야 되는 것)
  - 클로져 상태의 클래스가 리턴하는 방식으로 하기 위해서 즉시실행함수 구현
```
//<section id="data"></section>

const Tabel = ((_) => {
    return class {}
})()
const table = new Table('#data')
table.load('71_1.json')
```
코드를 사용하는 부분(호출하는 부분)을 먼저 작성한다 → 시나리오 작성 (의도를 만들고)
- 호출하는 부분에서 이상이 있다면, 구현도 이상하다
- 테스트 주도 개발과 비슷하다 사용할 코드를 만들고 → 구현

그 다음, 함수나 클래스를 구현해야 한다

이유 1 - 구현된 클래스나 함수로 내가 안 짤수도 있다.

이유 2 - 라이브러리나 사수가 짜줄수도 있기 때문

const Table = ((_) => {
    const Private = Symbol()
    return class {
        constructor(parent) {}

        async load(url) {}
    }
})()
const table = new Table('#data')
table.load('71_1.json')

구현을 하면서, 생각/로직을 확장한다.
- 데이터가 load되면 화면에 render 된다는 프로세스를 알고 있기때문에 render메소드를 구현
- 데이터를 로딩하는것(load) ≠ 그림을 그리는 것(render) → 역할이 다름
  - load와 render 메소드를 별도 구현
- table.load 밑에 render를 호출해주지 않을까?
  - load가 언제 완료될지 모르니까(비동기 로직)
```
const Table = ((_) => {
    const Private = Symbol()
    return class {
        constructor(parent) {}

        async load(url) {}
        render() {}
    }
})()
const table = new Table('#data')
table.load('71_1.json')
```
상세구현을 하기전에, 우리는 하고싶은일을 명시적으로 적는 일부터 하자!!
- 주석은 보장해주지 않는다 (오라클도 주석과 코드가 다르다)
  - 레거시 코드나 라이브러리를 보고 이걸 만든 의도로 파악해보자
- 코드가 느려질 생각하지도 말고, 무조건 말을 코드로 만드는 연습을 하자
- 부모가 될 셀렉터 문자열을 코드로 표현하면 아래와 같다
```
constructor (parent) {
          if (typeof parent != 'string' || !parent) throw 'invalid param';
          this[Private] = {parent};
        }
```
- 내장을 보이기 싫다면,Symbol이나 WeakMap을 활용해보자(최대한 노력해보자)
- 누군가 내장을 건드려서 바꿔서 사고가 나도, 잘못을 후회해도 소용없다.
```
const Private = Symbol();
return class{
  constructor (parent) {
    if (typeof parent != 'string' || !parent) throw 'invalid param';
    this[Private] = {parent};
  }
```
함수의 값을 넘기는 방법은 인자와 전역변수(지역참조)를 활용하는 것
- 클래스 안에서의 내부함수(메서드)라면 지역참조를 해야한다(클래스 변수)
- 지역참조 : 컨텍스트 ⇒ 인스턴스의 것만 참조해!!!
  - 클래스 안에 있는 메서드는 함수가 아니다.
  - 메서드란 인스턴스의 상태를 공유하는 함수의 집합이다.
  - _render()함수로 인자로 보내지 않는 이유는 _render는 메서드이기 때문이다.
```
Object.assign(this[Private], { title, header, items })
this._render()
```
외부의 노출되는 함수라면, 외부에서 사용될거라면 인자를 받아서 처리한다.
- 인자를 넘기면 값이 화이트리스트인지 아닌지 모르기 때문에 매번 validation을 해줘야한다.
코드를 작성하기전, 한번 중간언어로 고치자(의사코드)
- 우리는 한국말이 편하다 하지만 순서가 이상해도 의미가 전달된다.
- 하지만 컴퓨터는 그렇지 못하다

의사코드란, 해야할일이 아니라!!! 순서대로 할일!!

부모, 데이터 체크

왜 여기서 부모를 체크하나? render할때만 부모를 체크하면 된다
부모가 통과하지 못하면 아래를 실행할 필요가 없으니까

 _render () {
        // 부모, 데이터 체크
        // table 생성
        // 캡션을 title로
        // header를 thead로
        // items를 tr로
        // 부모에 table 삽입
      }

3. 코드 완성본(1차)

const Table = ((_) => {
    const Private = Symbol()
    return class {
        constructor(parent) {
            if (typeof parent != 'string' || !parent) throw 'invalid param'
            this[Private] = { parent }
        }

        async load(url) {
            const response = await fetch(url)
            if (!response.ok) throw 'invalid response' // 데이터 validation
            const json = await response.json()
            const { title, header, items } = json
            if (!items.length) throw 'no items' //데이터 validation
            Object.assign(this[Private], { title, header, items })
            this._render()

            // Promise 기반
            // fetch(url).then(response => {
            //   return response.json();
            // }).then(json => {
            //   this._render();
            // })
        }

        _render() {
            // 부모, 데이터 체크
            const fields = this[Private],
                parent = document.querySelector(fields.parent)
            if (!parent) throw 'Invalid parent'
            if (!fields.items || !fields.items.length) {
                //이 부분은 데이터가 검증하는 부분과 동일하다!!! 반응하는 로직인데!! 중복이다!!
                parent.innerHTML = 'no data'
                return
            } else parent.innerHTML = ''
            // table 생성
            // 캡션을 title로
            const table = document.createElement('table')
            const caption = document.createElement('caption')
            caption.innerHTML = fields.title
            table.appendChild(caption)
            // header를 thead로
            table.appendChild(
                fields.header.reduce((thead, data) => {
                    const th = document.createElement('th')
                    th.innerHTML = data
                    thead.appendChild(th)
                    return thead
                }, document.createElement('thead'))
            )
            // items를 tr로
            // 부모에 table 삽입

            parent.appendChild(
                fields.items.reduce((table, row) => {
                    table.appendChild(
                        row.reduce((tr, data) => {
                            const td = document.createElement('td')
                            td.innerHTML = data
                            tr.appendChild(td)
                            return tr
                        }, document.createElement('tr'))
                    )
                    return table
                }, table)
            )
        }
    }
})()
const table = new Table('#data')
table.load('71_1.json')

0. 프로그래밍 세계에서 유일하게 변하지 않는 원칙

모든 프로그램은 변한다

이미 작성된 복잡하고 거대한 프로그램을 어떻게 변경할 수 있을 것인가?
바꿀 수 없다 → 다시 짠다 → 야근 → 요구사항 변경 → 롤백 → 야근

격리(Isolation) : Something 변화, Something Else 영향 X

격리 기본 전
1. load 보다는 render가 변화율이 높다!
  - render가 변하면 Table클래스가 전체 영향이 받는다.
2. 변환율이란 시간적인 대칭성
  - 변화의 원인과 주기별로 정리

실천수칙 : 강한 응집성 & 약한 의존성

Q. 데이터로딩을 왜 테이블에서 하지?? 강한 응집력이 때문에???
- A. 테이블은 로딩을 가질 역할/책임이 없다.
- A. 덩어리에서 어떻게 코드를 분리할것인가? → 역할을 기준으로 분리하자!!!
- A. 렌더링을 플랫폼 별로 나누어주자

Rendeing을 도메인이라고 정의한다 (중립적인 렌더링) ⇒ 도메인 패턴

1. 코드구현

역할 분리
- Loader 역할 : 데이터를 받아서 json으로 만들어주는 역할
- Renderer 역할 : json은 데이터를 받아서 그려주는 역할만 한다.
- Loader와 Renderer는 분리되었기 때문에 인자로 보내는게 정답!! 별도의 객체이기 때문이다.
```
const loader = new Loader('71_1.json')
loader.load((json) => {
    const renderer = new Renderer()
    renderer.setDate(json)
    renderer.render()
})
```
데이터의 화이트리스트(VO ⇒ Value Object)
- json 은 검증되지 않는 값 (화이트데이터를 보내줘야하는데 블랙데이터를 보내고 있다)
- 정리되고 안정성이 되어 있는 데이터(VO)를 보내준다(value Object)
```
const data = new JsonData('71_1.json')
const renderer = new Renderer()
renderer.render(data)
```
Data Load ⇒ Data Supply로 역할이 변경 되었다.
- 데이터 로드 : 작은역할
- 주요한 역할 : 데이터를 제공
- 렌더러에게 데이터를 제공해주는것이니까 이름을 바꾼다 ⇒ 역할이 바뀐다
역할 모델 구현
- Loader ⇒ JsonData로 바꿨다.
  
  (Data 추상객체 ⇒ (JSON 서브객체)
- 본질적인 로직은 Data 인터페이스(추상객체)가 있고, 파싱로직만 다른 서브 객체 이런게 역할모델이다(이름으로 추정한다)
- 알고리즘이란 제어로직과 변수를 이용하여 원하는 값을 원하는것
- 오브젝트가 메세지를 통해서 문제를 해결한다
- 이러한 메세지를 객체망을 통해 통신한다

타입체크 및 내부 프로토콜

JsonData.protype ⇒ Data 이며, instanceof를 통해 해당 type을 체크하면서 유효성 검사를 대신한다.
- 각각의 객체끼리는 타입으로 통신해야 한다(프로토콜 === VO)
- 두 객체가 통신할때, 어떠한 약속을 한다 (프로토콜) ⇒ 어떠한 데이터가 온다
- 객체의 타입이 존재하는 이유는 타입으로 알고리즘을 대체한다.(유효성 검증을 대신한다)
- instanceof(타입체크)를 통해 유효성 검사를 해준다. 타입이 아니면 에러발생
- 강타입을 특성을 활용한 type 프로그래밍 보증한다!!
getData가 async면 getData를 사용하는곳도 async로 되어있어야 한다(async 전파)

const Data = class {
    async getData() {
        throw 'getData mush Overide'
    }
}

const JsonData = class extends Data {
    constructor(data) {
        super()
        this._data = data
    }

    async getData() {
        if (typeof this._data === 'string') {
            const response = await fetch(this._data)
            return await response.json()
        } else return this._data
    }
}

const Renderer = class {
    constructor() {}
    async render(data) {
        if (!(data instanceof Data)) throw 'invalid data type'
        const json = await data.getData()
        console.log(json)
    }
}

내부 프로토콜인 info 역할로 유효성 화이트리스트에 대한 책임이 넘어간다.

const Info = class {
    constructor(json) {
        const { title, header, items } = json
        if (typeof title != 'string' || !title) throw 'invalid title'
        if (!Array.isArray(header) || !header.length) throw 'invalid header'
        if (!Array.isArray(items) || !items.length) throw 'invalid items'
        items.forEach((v, idx) => {
            if (!Array.isArray(v) || v.length != header.length) {
                throw 'invalid items : ' + idx
            }
        })
        this._private = { title, header, items }
    }
    get title() {
        return this._private.title
    }
    get header() {
        return this._private.header
    }
    get items() {
        return this._private.items
    }
}

const Data = class {
    async getData() {
        throw 'getData mush Overide'
    }
}

const JsonData = class extends Data {
    constructor(data) {
        super()
        this._data = data
    }

    async getData() {
        let json
        if (typeof this._data === 'string') {
            const response = await fetch(this._data)
            json = await response.json()
        } else json = this._data
        return new Info(json)
    }
}

const Renderer = class {
    constructor() {}
    async render(data) {
        if (!(data instanceof Data)) throw 'invalid data type'
        const info = await data.getData()
        console.log(info.title, info.header, info.items)
    }
}

계약에 대해서(내부/외부)

Data클래스의 getData()는 info를 보장하지 않는다.(계약사항이 아니다)
- JsonData에서 구현된것이다 ⇒ 권한이 없다
역할 재조정
- 부모객체 역할 : 부모는 서브객체의 데이터 결과값을 받아 통신한다
- 서브객체 역할 : 부모의 참고자료만을 만드는 역할
- hook(_getData)을 통해서 서브객체에서 참조데이터 결과를 받아서 Data에서 Info객체를 관리
계약이란, 어떤 객체는 어떠한 역할을 해야한다는것을 정의하는것
- 내부계약 Data와 JsonData의 관계 서브객체는 JSON으로 만들어줘야한다
- 외부계약 Render와 Data의 관계에서는 JSON인거 몰라도 된다 그래서 Info를 통해서 애기한다.
객체는 인자로 넘기지않는다, 컨텍스트로 넘긴다.(this._data)

const Info = class{...}

const Data = class {
    async getData () {
      const json = await this._getData()
      return new Info(json)
    }
		// hook
    async _getData () {throw 'getData mush Overide'}
  }

  const JsonData = class extends Data {
    constructor (data) {
      super()
      this._data = data
    }

    async _getData () {
      if (typeof this._data === 'string') {
        const response = await fetch(this._data)
        return await response.json()
      } else return this._data
    }
  }

  const Renderer = class {
    async render (data) {
      if (!(data instanceof Data)) throw 'invalid data type'
      const {_private : {title, header, items}} = await data.getData();
      Object.assign(this, {title, header, items})
      this._render()
    }

    _render () {
      throw '_render must override'
    }
  }

  const TableRenderer = class extends Renderer {
    constructor (parent) {
      if (typeof parent != 'string' || !parent) throw 'invalid param'
      super()
      this._parent = parent
    }

		// hook
    _render () {....}
  }

  const data = new JsonData('71_1.json')
  const renderer = new TableRenderer("#data")
  renderer.render(data)

2. 요구사항과 수정 변화에 대응하려면 ?

어디까지가 경계의 역할을 보고 격리시킬지, 격리되있는것을 객체로 만들어서 협력하게 만들어라
템플릿메소드 패턴 : 부모와 자식과 협력
- 훅을 끌어올려 부모쪽에서 대표메소드를 노출하고 자식쪽에서는 그 일부만 구현해서 서로 협력
데이터와 렌더러와의 협력 완전히 다른 집안이기 떄문에 프로토콜을 통해서 협력
- Info객체 : 중간에 서로 합의를 본 내용 = 프로토콜

참고사항

프로그램을 한다는 나만의 단어와 의미체계를 만든다는 것
fetch의 결과는 항상 promise며, then의 결과값도 promise (text를 제외한 모든 타입이)
_함수명은 js 3.1부터 내려온 private 함수명의 표현이다
코드를 만드는것은 소저와 같다(진흙을 하나하나 붙어서 작품을 만드는것)

에러의 3단계

complie 에러 ⇒ 문법이 이상해!! (syntex err)
runtime 에러 ⇒ nullpointer ⇒ 해결방법 : throw날려서 그 지점을 찾자! (최후의 보루!!!)
context 에러 ⇒ 프로그램이 죽지않는다. 에러가 나오지 않는다 결과값만 다르다 (농부가 되자)

Debounced And Throttle

Sun, 31 Jan 2021 00:00:00 GMT

0. 이글을 작성하는 이유?

최근 업무(검색시, 가장 마지막에 입력한 글자만 검색되게..)를 진행하면서, 디바운스를 사용했다.
쓰로틀링과 디바운스의 차이점에 대해서 정확히 알고 싶어서..

1. 용어 정리

Throttle (쓰로틀)
- 의미 : 이벤트를 일정한 주기마다 발생하도록 하는 기술
- 사전적 의미 : 꽉 조여 압축하다
- 나만의 해석 : 이벤트 발생 주기를 조절, 그 주기 안에 발생하는 모든 이벤트를 하나의 이벤트로 압축한다.
Debounce
- 의미 : 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술
- 사전적 의미 : 기계식 스위치를 전기 회로에서 밀어 일련의 단락을 만들 때 형성되는 작은 전류 리플을 제거합니다.
- 나만의 해석 : 마지막 이벤트만 처리하자!

2. Throttle

예시) 10초 동안 A 버튼을 계속 클릭해보자!(Throttle time 1초)
예시 결과) 10번 클릭된다! 1초 간격

무한스크롤을 구현시 사용됨(페이스북, 트위터)

// 스크롤 이벤트가 발생시, throttle 처리
document.addEventListener(
    'scroll',
    _.throttle(function () {
        check_if_needs_more_content()
    }, 300)
)

function check_if_needs_more_content() {
    // 현재 위치가 문서의 끝 부분이랑 얼마나 차이 있는지 확인
    pixelsFromWindowBottomToBottom =
        0 +
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight

    // 만약 200 이하면, 콘텐츠를 넣어준다!
    if (pixelsFromWindowBottomToBottom < 200) {
        // 마지막에 추가할 콘텐츠 추가 방법(Ajax 이벤)
    }
}

3. Debounce

예) 10초 동안 A 버튼을 계속 클릭해보자!(debounce Time 1초)
결과) 1번 클릭된다! 마지막 클릭만!

검색이벤트 처리할때, 브라우저 창 크기를 조절할때

function after_resize() {
	// 마지막 이벤트가 발생하고 처리할 함수
}

document.addEventListener('resize', _.debounce(function() {
    after_resize();
}, 400));

function make_ajax_request(e){
	// 마지막 이벤트가 발생하고 처리할 함수
}

document.addEventListener('keydown',
     _.debounce(make_ajax_request, 1300));
});

4. 출처

https://medium.com/@progjh/throttle-debounce-개념-잡기-19cea2e85a9f

https://css-tricks.com/debouncing-throttling-explained-examples/

웹 페이지 로드 과정

Sun, 24 Jan 2021 00:00:00 GMT

0. 이글을 작성하는 이유?

프론트앤드 관련 강의를 듣다가 웹 페이지 로드 과정에 대해서 설명해주셨는데 한번 정리하고 싶어서!
플랫폼이 어떤 순서로 페이지를 로드하는지, 어떤 이벤트들이 발생하는지 궁금해서!
Navigation Timing API에서 제공하는 property가 어떤걸 의미하는지 알고 싶어서!
성능 이슈는 웹 브라우저의 동작과 관련이 있기때문에 미리 정리하고 싶어서!

1. Navigation Time Level 2 Spec

노란색 부분은 웹페이지에서 벗어난 후 문서를 읽어들이기 전, 자바스크립트 이벤트는 없고 전부 네트워크 레벨에서 일어나는 일

1) Prompt for unload (unloadEventStart, unloadEventEnd)
- 현재 페이지에서 다른 페이지로 이동할때 발생
- 현재(보고 있던) 페이지를 unload (window: beforeunload 발생)
2) Redirect (redirectStart, redirectEnd)
- 서버쪽에서 redirect 신호가 오면 발생한다.(HTTP code 301, 302)
- optional이라서, 발생하지 않을 수 도 있음.
3) AppCache (fetchStart)
- 실제로 서버에서 데이터를 읽어오기 전에 브라우저 캐시의 저장된 데이터가 있는지 확인
4) DNS(domainLookupStart, domainLookupEnd)
- DNS에 요청을 보내기 전에 먼저 Browser에 해당 Domain이 cache돼 있는지 확인
  
  (Chrome의 경우 chrome://net-internals/#dns 에서 확인 가능)
- 없을 경우, 로컬에 저장돼 있는 hosts파일에서 참조할 수 있는 Domain이 있는지 확인
- 없을 경우, 마지막으로 네임서버를 조회해서 서버의 실제 IP를 확인
5) TCP (connectStart, secureConnectionStart, connectEnd)
- DNS단계에서 알아낸 IP를 통해 TCP로 서버에 연결(TCP 통신을 통해 Socket을 연다)
- 관련 링크
6) Request (requestStart, requestEnd)
- HTML 문서에 대한 요청
7) Response (responseStart, responseEnd)
- Response의 첫번째 바이트가 수신한 직후 응답 시간이 체크된다. (start)
- 마지막 바이트를 받은 직수 응답 완료 시간이 체크된다. (end)
- 웹페이지에서 사용할 HTML 파일을 받음!
8) Precessing(domInteractive, domContentLoadedEventStart/End, domComplete)
- 파일(HTML, CSS, JS, img 파일)을 파싱하고 렌더링단계까지 포함
- domInteractive : 모든 HTML 및 DOM 생성 작업이 완료
- domContentLoadedEvent :
  - DOM 및 CSSDOM이 모두 준비된 시점**, 화면에 그리기 전!!! 렌더링 트리 생성전!!**
  - 여기서 자바스크립에서 기능을 추가
  - 많은 자바스크립트 프레임워크 로직의 트리거가 domContentLoaded
- domcomplete : 페이지 및 해당 하위 리소스가 모두 준비된 시점
9) Load(loadEventStart, loadEventEnd)
- 서브리소스(이미지, 동영상)까지 모두 다운로드 받고 읽은 단계 (window load이벤트 발생)

3. window.performance.timing

개발자 도구에서 쉽게 window객체에 접근해서 확인할 수 있다.
해당 페이지가 로딩되면서 각 이벤트를 대한 시간을 UNIX타임으로 제공한다.

4. 관련 출처

비제어 / 웹 컴포넌트

Sun, 27 Dec 2020 00:00:00 GMT

제어 컴포넌트

React에 의해 값이 제어되는 입력 폼 엘리먼트
input 필드에서 onChange 콜백을 통해 값이 제어된다.

비제어 컴포넌트

DOM에서 값을 변경되도 DOM이 상태를 가지고 있다.
접근하려면 ref를 통해서 해당 엘리먼트를 접근해서 가져와야 한다.

defaultValue를 사용할 수 있다.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

비제이 컴포넌트의 대표적인 <input type='file'/> 에 대해서 알아보자

class FileInput extends React.Component {
    constructor(props) {
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.fileInput = React.createRef()
    }
    handleSubmit(event) {
        event.preventDefault()
        alert(`Selected file - ${this.fileInput.current.files[0].name}`)
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Upload file:
                    <input type="file" ref={this.fileInput} />
                </label>
                <br />
                <button type="submit">Submit</button>
            </form>
        )
    }
}

ReactDOM.render(<FileInput />, document.getElementById('root'))

[비제어/제어를 언제 써야 하나?(출처)]

웹 컴포넌트

React 처럼 DOM에서도 커스텀 컴포넌트를 만들 수 있다.
WebComponent는 재사용할 수 있는 컴포넌트(HTML)
React는 데이터와 Dom을 동기화하는 선언적 라이브러리이다.
React 또한 Web Component를 지원하기 때문에 React안에서도 사용 가능하다.

class XSearch extends HTMLElement {
    connectedCallback() {
        const mountPoint = document.createElement('span')
        this.attachShadow({ mode: 'open' }).appendChild(mountPoint)

        const name = this.getAttribute('name')
        const url =
            'https://www.google.com/search?q=' + encodeURIComponent(name)
        ReactDOM.render(<a href={url}>{name}</a>, mountPoint)
    }
}
customElements.define('x-search', XSearch)

PropTypes Type Check

Sun, 20 Dec 2020 00:00:00 GMT

1. Type Check하면 애플리케이션의 오류를 미리 잡을 수 있다??

자바스크립트 초기 로딩시! 문법이 맞는지만 확인하기 때문
실행해야지만, 오류를 확인할 수 있다.
이러한 문제를 해결하기 위해 TypeScript / Flow를 사용하여 미리 에러를 확인을 할 수 있다.
하지만, React에 내장된 PropType를 사용하면 손쉽게 타입을 체크할 수 있다.

2. 사용방법

해당 Class의 propTypes를 정의한다.(함수형 컴포넌트, React.memo, React.forwardRef와 동일)
Greeting.propTypes와 같이 정의하면 해당 컴포넌트의 Props가 전달이 되면!!
유효성 검사기(props-types 내장된 )로 보내시고, 타입이 맞다면 Pass / 틀리다면 Console 창에 경고가 발생!!

import PropTypes from 'prop-types'

// class형 컴포넌트
class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

Greeting.propTypes = {
    name: PropTypes.string,
}

// 함수형 컴포넌트
function HelloWorldComponent({ name }) {
    return <div>Hello, {name}</div>
}

HelloWorldComponent.propTypes = {
    name: PropTypes.string,
}

3. PropsType의 초기 Props 값 할당

Props의 없다면, 에러가 발생한다. 별도의 Props가 없다는 표현식을 작성하는것 보다
초기 Props를 할당하여, 대처를 하자

class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

// props의 초깃값을 정의합니다.
Greeting.defaultProps = {
    name: 'Stranger',
}

// "Hello, Stranger"를 랜더링 합니다.
ReactDOM.render(<Greeting />, document.getElementById('example'))

클래스 내에 정적 프로퍼티를 선언해서 쓴다면, 아래와 같이 쓸수 있다.

class Greeting extends React.Component {
    static defaultProps = {
        name: 'stranger',
    }

    render() {
        return <div>Hello, {this.props.name}</div>
    }
}

Strick Mode

Sun, 13 Dec 2020 00:00:00 GMT

'Strick Mode'는 UI를 렌더링하지 않으며, <React.StrickMode> 하위 컴포넌트에 대한 부가적인 검사(아래 설명)를 통해 경고 한다.

Strick Mode는 develop Mode에서는 작동되지만, production Mode에서는 작동하지 않는다.

Strick Mode 검사하는 부분

안전하지 않은 생명주기를 사용하는 컴포넌트 발견
레거시 문자열 ref 사용에 대한 경고
권장되지 않는 findDOMNode 사용에 대한 경고
예상치 못한 부작용 검사
레거시 context API 검사

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견?

React가 계속해서 업데이트(현재 v17.0.1)를 하면서 기존에 쓰이던 lifecycle Method가 deprecate되거나 다른 Method로 대체되는경우가 있는데 아래와 같다.
- 16.3: Introduce aliases for the unsafe lifecycles, UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, and UNSAFE_componentWillUpdate. (Both the old lifecycle names and the new aliases will work in this release.)
- A future 16.x release: Enable deprecation warning for componentWillMount, componentWillReceiveProps, and componentWillUpdate. (Both the old lifecycle names and the new aliases will work in this release, but the old names will log a DEV-mode warning.)
- 17.0: Remove componentWillMount, componentWillReceiveProps, and componentWillUpdate . (Only the new “UNSAFE_” lifecycle names will work from this point forward.)
이러한 메소드를 안쓰면 당연히 발생하지 않지만, React 관련 라이브러리에서 해당 메소드를 사용할 수 있기때문에 이 기능을 활용해서 라이브러리 개선을 PR을 날리면 좋을것같다...
이러한 문제를 LifeCycle Method문제를 해결한다면 향후 concurrent 렌더링 이점을 얻을 수 있다고 한다.

2. 레거시 문자열 ref 사용에 대한 경고?

레거시 문자열 ref의 문제점
- ref가 현재 컴포넌트를 참조하는것 때문에 리엑트가 다소 느려진다
  
  There are multiple problems with it:
  - It requires that React keeps track of currently rendering component (since it can't guess this). This makes React a bit slower.
  - It doesn't work as most people would expect with the "render callback" pattern (e.g. ) because the ref would get placed on DataGrid for the above reason.
  - It is not composable, i.e. if a library puts a ref on the passed child, the user can't put another ref on it (e.g. #8734). Callback refs are perfectly composable.
해결책
- 콜백 ref 이용, createRef API를 사용하자

3. findDOMNode 사용에 대한 경고

findDOMNode 사용법
ref로 렌더링된 컴포넌트에 접근할 수 있고, HTML tag에 바로 적용할 수 있게 되어 더 이상 사용되지 않지만, 혹시 사용하게 되면, 추상화/캡슐화가 무너지고, 리펙토링 하기 어려워지 때문에 추천하지 않는다.
해결책 : ref를 사용하자!

4. 예상치 못한 부작용 검사

렌더링 → 커밋을 걸쳐 컴포넌트가 DOM에 렌더링 된다.
렌더링 단계에서는 메모리 누수 등 다양한 문제를 야기한 가능성이 있다.
Strick Mode는 이것을 어떻게 찾을까?
- 이중!!호출한다 그래서 결과가 다르면? 경고를 보여준다.

레거시 context API 검사

레거시 context API를 사용하기만 해도 경로를 보여준다
16버전까지는 production에서는 문제없이 사용가능하지만, 그 이후는...
새로운 context API를 쓰거나, 별도의 상태관리 라이브러리를 사용하자!

Render Props

Sun, 06 Dec 2020 00:00:00 GMT

1. Render Prop?

props의 이름이 render.
render는 해당 컴포넌트의 state를 props로 내린다.
render prop은 무엇을 렌더링할지 컴포넌트에 알려주는 함수

<DataProvider render={(data) => <h1>Hello {data.target}</h1>} />

2. 사용하는 이유?

React 컴포넌트 간에 코드를 공유하기 위해
Cross-Cutting Concerns을 위해 (공통된 로직을 재사용하기 위해)
- 컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위
- 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다.

3. 예제를 통해 이해하자

마우스 위치 추적 컴포넌트

class MouseTracker extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY,
        })
    }

    render() {
        return (
            <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
                <h1>Move the mouse around!</h1>
                <p>
                    The current mouse position is ({this.state.x},{' '}
                    {this.state.y})
                </p>
            </div>
        )
    }
}

마우스에 대한 로직은 분리 시키자

Mouse 컴포넌트는 마우스에 대한 행위를 캡슐화

class Mouse extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY,
        })
    }

    render() {
        return (
            <div
                style={{ height: '100vh' }}
                onMouseMove={this.handleMouseMove}
            >
                <p>
                    The current mouse position is ({this.state.x},{' '}
                    {this.state.y})
                </p>
            </div>
        )
    }
}

class MouseTracker extends React.Component {
    render() {
        return (
            <>
                <h1>Move the mouse around!</h1>
                <Mouse />
            </>
        )
    }
}

P 태그가 아닌 고양이 사진을 넣어주려면?

오로직 Cat 컴포넌트만 사용할 뿐 재사용하려면 계속해서 WithSomething을 만들어줘야한다.

class Cat extends React.Component {
    render() {
        const mouse = this.props.mouse
        return (
            <img
                src="/cat.jpg"
                style={{
                    position: 'absolute',
                    left: mouse.x,
                    top: mouse.y,
                }}
            />
        )
    }
}

class MouseWithCat extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY,
        })
    }

    render() {
        return (
            <div
                style={{ height: '100vh' }}
                onMouseMove={this.handleMouseMove}
            >
                {/*
          여기서 <p>를 <Cat>으로 바꿀 수 있습니다. ... 그러나 이 경우
          Mouse 컴포넌트를 사용할 때 마다 별도의 <MouseWithSomethingElse>
          컴포넌트를 만들어야 합니다, 그러므로 <MouseWithCat>는
          아직 정말로 재사용이 가능한게 아닙니다.
        */}
                <Cat mouse={this.state} />
            </div>
        )
    }
}

class MouseTracker extends React.Component {
    render() {
        return (
            <div>
                <h1>Move the mouse around!</h1>
                <MouseWithCat />
            </div>
        )
    }
}

render Props를 통해 동적으로 렌더링을 할 수 있게 만들어주자

Mouse 역할 : 마우스 위치만 건네줄뿐!!! render는 props의 render값이 할 것!

class Cat extends React.Component {
    render() {
        const mouse = this.props.mouse
        return (
            <img
                src="/cat.jpg"
                style={{
                    position: 'absolute',
                    left: mouse.x,
                    top: mouse.y,
                }}
            />
        )
    }
}

class Mouse extends React.Component {
    state = { x: 0, y: 0 }

    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY,
        })
    }

    render() {
        return (
            <div
                style={{ height: '100vh' }}
                onMouseMove={this.handleMouseMove}
            >
                {/*
          <Mouse>가 무엇을 렌더링하는지에 대해 명확히 코드로 표기하는 대신,
          `render` prop을 사용하여 무엇을 렌더링할지 동적으로 결정할 수 있습니다.
        */}
                {this.props.render(this.state)}
            </div>
        )
    }
}

class MouseTracker extends React.Component {
    render() {
        return (
            <div>
                <h1>Move the mouse around!</h1>
                <Mouse render={(mouse) => <Cat mouse={mouse} />} />
            </div>
        )
    }
}

주의사항

React.PureComponent에서 render props pattern을 사용할 땐 주의해주세요.
얕은 prop 비교는 새로운 prop에 대해 항상 false를 반환합니다.

이 경우 render마다 render prop으로 넘어온 값을 항상 새로 생성합니다.

class Mouse extends React.PureComponent {
    // 위와 같은 구현체...
}
class MouseTracker extends React.Component {
    render() {
        return (
            <div>
                <h1>Move the mouse around!</h1>

                {/*
          이것은 좋지 않습니다! `render` prop이 가지고 있는 값은
          각각 다른 컴포넌트를 렌더링 할 것입니다.
        */}
                <Mouse render={(mouse) => <Cat mouse={mouse} />} />
            </div>
        )
    }
}

이 예제에서 가 render 될때마다, 의 prop으로 넘어가는 함수가 계속 새로 생성됩니다. 따라서 React.PureComponent를 상속받은 컴포넌트 효과가 사라지게 됩니다.

class MouseTracker extends React.Component {
    // `this.renderTheCat`를 항상 생성하는 매서드를 정의합니다.
    // 이것은 render를 사용할 때 마다 *같은* 함수를 참조합니다.
    renderTheCat(mouse) {
        return <Cat mouse={mouse} />
    }

    render() {
        return (
            <div>
                <h1>Move the mouse around!</h1>
                <Mouse render={this.renderTheCat} />
            </div>
        )
    }
}

Ref와 DOM

Sun, 29 Nov 2020 00:00:00 GMT

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법

Ref의 역할

일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 할 경우
- 수정할 자식이 React 컴포넌트 인스턴스나, DOM 엘리먼트일 수도 있다
(일반적인 데이터 플로우) 자식을 수정하려면, 새로운 Props를 전달하여 자식을 다시 렌더링
Dialog 컴포넌트에서 open / close 함수를 구현하는 대신 isOpen props를 전달하여 관리

Ref 사용처

포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
애니메이션을 직접적으로 실행시킬 때
서드 파티 DOM 라이브러리를 React와 같이 사용할 때

Ref 생성

컴포넌트의 인스턴스가 마운트 될 때 React는 ref 콜백을 DOM 엘리먼트와 함께 호출합니다.
컴포넌트가 마운트될 때 React는 current 프로퍼티에 DOM 엘리먼트를 대입

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()
    }
    render() {
        return <div ref={this.myRef} />
    }
}

Ref에 접근하기

HTML Element

ref.current 안 HTML 엘리먼트 기본 메서드 호출 및 상태를 변경할 수 있다.

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props)
        this.textInput = React.createRef()
        this.focusTextInput = this.focusTextInput.bind(this)
    }

    focusTextInput() {
        this.textInput.current.focus()
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.textInput} />
                <input
                    type="button"
                    value="Focus the text input"
                    onClick={this.focusTextInput}
                />
            </div>
        )
    }
}

Class Component

ref.current 안 component 인스턴스로 메서드 호출 및 상태를 변경할 수 있다.

class AutoFocusTextInput extends React.Component {
    constructor(props) {
        super(props)
        this.textInput = React.createRef()
    }

    componentDidMount() {
        this.textInput.current.focusTextInput()
    }

    render() {
        return <CustomTextInput ref={this.textInput} />
    }
}

Functional Component

함수 컴포넌트는 인스턴스를 생성하지 않는 때문에, React.creatRef()를 사용 할 수 없다.
hook의 forwardRef를 사용하여 구현 할 수 있다.

Ref 수정/해제 시기

수정 : componentDidMount / componentDidUpdate 메서드가 호출되기 전
삭제 : 컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null

부모 컴포넌트에서 자식 컴포넌트의 DOM 노드에 접근하려 하는 경우

자식 컴포넌트의 캡슐화를 파괴하기 때문에 권장되지 않는다.
자식 컴포넌트의 DOM 노드를 포커스하는 일이나, 크기 또는 위치를 계산하는 일 등을 할 때는 효과적인 방법
함수형 컴포넌트는 React.forwardRef를 사용하거나, 16.2 이전일 경우 아래와 같이 ref를 설정할 수 있다.

function CustomTextInput(props) {
    return (
        <div>
            <input ref={props.inputRef} />
        </div>
    )
}

class Parent extends React.Component {
    render() {
        return <CustomTextInput inputRef={(el) => (this.inputElement = el)} />
    }
}

Reconciliation

Sun, 22 Nov 2020 00:00:00 GMT

Motivation

하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘은 일반적은 O(n^3)의 복잡도를 가지고 있다.(state of the art algorithms)
일반적으로 1000개의 엘리먼트를 그리기 위해서 10억 번의 비교 연산 수행
이 과도한 연산을 O(n)으로 줄이기 위해 2가지의 가정을 통해 구현할 수 있었다.
1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다.
2. 엘리먼트의 key prop을 통해, 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

Diffing Alogirithm

두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교합니다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라집니다.

엘리먼트의 type이 다른 경우
1. type이 다른걸 check
2. componentWillUnmount()로 이전 DOM 노드를 삭제한다.
3. 새로운 DOM 노드 생성
4. componentWillMount()
5. componentDidMount()
6. 루트 엘리먼트가 가지고 있는 state가 변경 ⇒ 초기화
```
<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

// 이전 Counter는 사라지고, 새로 다시 마운트가 될 것입니다.
```
DOM 엘리먼트의 타입이 같은 경우
1. 속성이 변경되었다면, 변경된 속성만 업데이트
```
<div className="before" title="stuff" />

<div className="after" title="stuff" />
```
1. style이 변경되었다면, 변경된 style만 업데이트
```
<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />
```
1. DOM 노드의 처리가 끝나면, React는 이어서 해당 노드의 자식들을 재귀적으로 처리
같은 타입의 컴포넌트 엘리먼트(타입은 같지만, 상태가 다를때)
1. componentWillReceiveProps() - 새로운 내용을 반영하기 위해 props 갱신
2. componentWillUpdate() - props로 component의 상태 변경
3. render() - 비교 알고리즘이 이전 결과와 새로운 결과를 재귀적으로 처리

Key를 통한 효율적인 엘리먼트 관리

형제 노드사이에서만 유일하고 전역에서 유일할 필요는 없다!!!

key가 없다면

변경된 부분을 다시 그려줘야 한다.

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

key로 인한 장점

다시 그리는게 아니라, 이동만 할 뿐

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

결론

render()를 호출한다
1. diffing 을 통해 변화가 없다면, 출력되는 값/화면은 같다(마운트된 엘리먼트를 사용)
2. diffing 을 통해 변화가 있다면, 언마운트시키고, 다시 마운트 ⇒ 변경된 부분만 적용
key는 반드시 변하지 않고, 예상 가능하며, 유일해야 한다.
1. 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있습니다.
타입은 다르지만 비슷한 결과물을 출력하는 두 컴포넌트있다면, 하나의 타입으로 만들자(비교하기 쉽게!!)

JSX 없이 사용하는 React

Sun, 15 Nov 2020 00:00:00 GMT

JSX를 사용하면 리엑트를 쉽게 구성할 수 있다
단! 필수는 아니지만, 추천한다

JSX를 사용하면 직관적? 쉽게? 컴포넌트를 사용!

class Hello extends React.Component {
    render() {
        return <div>Hello {this.props.toWhat}</div>
    }
}

ReactDOM.render(<Hello toWhat="World" />, document.getElementById('root'))

Pure를 사용하면 React.Object를 만들어서 넣어줘야하기때문에 직관적이지 못함!

class Hello extends React.Component {
    render() {
        return React.createElement('div', null, `Hello ${this.props.toWhat}`)
    }
}

ReactDOM.render(
    React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
)

ES6 없이 사용하는 React

Sun, 08 Nov 2020 00:00:00 GMT

Q1. 현재 Class 문법을 활용하여 잘 사용하고 있는데... 만약 Class가 없다면?

create-react-class의 createReactClass를 활용
class 문법 또한 컴파일 되면 객체로 변환하기 때문 상관없다.
사용하는 방법만 다를뿐, 만들어지는 결과나, 안의 속성은 같다.

//es6
class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>
    }
}

//var
var createReactClass = require('create-react-class')
var Greeting = createReactClass({
    render: function () {
        return <h1>Hello, {this.props.name}</h1>
    },
})

Q2. defaultProps는 어떻게 사용?

es6에서도 class의 defaultProps의 속성에 접근해서 값을 할당한다.
createReactClass에서는 getMethod와 비슷한 getDefaultProps를 정의

class Greeting extends React.Component {
    // ...
}

Greeting.defaultProps = {
    name: 'Mary',
}

var Greeting = createReactClass({
    getDefaultProps: function () {
        return {
            name: 'Mary',
        }
    },

    // ...
})

Q3. State 정의는?

props와 비슷하게 getInitialState를 정의한다.

class Counter extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: props.initialCount }
    }
    // ...
}

var Counter = createReactClass({
    getInitialState: function () {
        return { count: this.props.initialCount }
    },
    // ...
})

Q4. 내부 method의 this 할당은?

class Properties를 활용한다면, 쉽게 this를 바인딩 하지 않아도 된다.
createReactClass의 내부 함수를 구현하므로 this는 createReactClass를 바라보기 때문에 this를 바인딩하지 않아도 된다.

class SayHello extends React.Component {
    constructor(props) {
        super(props)
        this.state = { message: 'Hello!' }
    }
    // 경고: 이 문법은 실험적입니다!
    // 화살표 함수를 통해 메서드를 바인딩합니다.
    handleClick = () => {
        alert(this.state.message)
    }

    render() {
        return <button onClick={this.handleClick}>Say hello</button>
    }
}

var SayHello = createReactClass({
    getInitialState: function () {
        return { message: 'Hello!' }
    },

    handleClick: function () {
        alert(this.state.message)
    },

    render: function () {
        return <button onClick={this.handleClick}>Say hello</button>
    },
})

Mixins의 기능이 있지만, 공식 문서에서 추천하지 않는다.

createReactClass에서는 구현이 가능

Profiler component

Sun, 01 Nov 2020 00:00:00 GMT

도대체 몇번 렌더링하고, 렌더링하는 비용이 얼마?

이런 문제를 해결해줄 API 이다
Profier를 활용하여 최적 할 부분을 찾자 ⇒ 최적화 도구
Production build에서는 빠져있다 ⇒ 약간의 오버해드 발생

사용법

를 감쏴 해당 컴포넌트의 업데이트 "commit' 과정에서 호출된다

render(
    <App>
        <Profiler id="Navigation" onRender={callback}>
            <Navigation {...props} />
        </Profiler>
        <Main {...props} />
    </App>
)

render(
    <App>
        <Profiler id="Panel" onRender={callback}>
            <Panel {...props}>
                <Profiler id="Content" onRender={callback}>
                    <Content {...props} />
                </Profiler>
                <Profiler id="PreviewPane" onRender={callback}>
                    <PreviewPane {...props} />
                </Profiler>
            </Panel>
        </Profiler>
    </App>
)

onRender Callback

Profiler 컴포넌트 다양한 props를 받는다

function onRenderCallback(
    id, // 방금 커밋된 Profiler 트리의 "id"
    phase, // "mount" (트리가 방금 마운트가 된 경우) 혹은 "update"(트리가 리렌더링된 경우)
    actualDuration, // 커밋된 업데이트를 렌더링하는데 걸린 시간
    baseDuration, // 메모이제이션 없이 하위 트리 전체를 렌더링하는데 걸리는 예상시간
    startTime, // React가 언제 해당 업데이트를 렌더링하기 시작했는지
    commitTime, // React가 해당 업데이트를 언제 커밋했는지
    interactions // 이 업데이트에 해당하는 상호작용들의 집합
) {
    // 렌더링 타이밍을 집합하거나 로그...
}

id: string - 방금 커밋된 Profiler 트리의 id prop. 복수의 프로파일러를 사용하고 있다면 트리의 어느 부분이 커밋되엇는지 식별하는데 사용할 수 있습니다.
phase: "mount" | "update" - 해당 트리가 방금 마운트된 건지 prop, state 혹은 hooks의 변화로 인하여 리렌더링 된 건지 식별합니다.
actualDuration: number - 현재 업데이트에 해당하는 Profiler와 자손 컴포넌트들을 렌더하는데 걸린 시간 이것은 하위 트리가 얼마나 메모이제이션을 잘 활용하고 있는지를 암시합니다 (e.g. [React.memo](https://ko.reactjs.org/docs/react-api.html#reactmemo), [useMemo](https://ko.reactjs.org/docs/hooks-reference.html#usememo), [shouldComponentUpdate](https://ko.reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate)). 이상적으로 대다수의 자손 컴포넌트들은 특정 prop이 변할 경우에만 리렌더링이 필요하기 때문에 이 값은 초기 렌더링 이후에 상당 부분 감소해야 합니다.
baseDuration: number - Profiler 트리 내 개별 컴포넌트들의 가장 최근 render 시간의 지속기간 이 값은 렌더링 비용의 최악 케이스를 계산해줍니다(e.g. 초기 마운트 혹은 메모이제이션이 없는 트리)
startTime: number - React가 현재 업데이트에 대해 렌더링을 시작한 시간의 타임 스탬프.
commitTime: number - React가 현재 업데이트를 커밋한 시간의 타임 스탬프 이 값은 모든 프로파일러들이 공유하기 때문에 원한다면 그룹을 지을 수 있습니다.
interactions: Set - 업데이트가 계획되었을 때 추적하고 있던 “상호작용”의 집합 (e.g. render 혹은 setState가 호출되었을 때).

portal

Sun, 25 Oct 2020 00:00:00 GMT

정의 : Portal은 컴포넌트를 DOM 어디든지 만들어줄수 있는 기능
범위 : Root 컴포넌트 안/밖 어디든지 (주로, modal/dialog 창 같이 style을 독립적으로 사용하기 위해)
사용법

const Portal = ({ children }) => {
  const el = document.getElementById('my-portal');
	// index.html 기준
  return ReactDOM.createPortal(children, el);
}

return (
	<Portal>
		<Hello> // Portal 시킬 엘리먼트
	</Portal>
)

만약!! ref를 전달해야 할 사항이라면??(forwardRef를 사용하자)

const Tooltip = forwardRef((props, ref) =>
    createPortal(
        <div ref={ref}>{props.children}</div>,
        document.getElementById('modal')
    )
)

const Info = () => {
    const ref = useRef()
    return <Tooltip ref={ref}>My content</Tooltip>
}

개발자 도구에서 확인

Chroem 개발자 도구 Elements Tap - 원하는 element에 렌더링
리엑트 개발자도구 Components - React Tree에서는 자식으로 위치 - 부모 === ModalPortal을 가지고 있다.

이벤트 버블링은 어떻게 캐치할까?

리엑트에서는 자식이 portal 이든지 상관하지 않는다(어차피 React Tree에 존재)

class App extends Component {
  state = {
    modal: false
  };
  handleOpenModal = () => {
    this.setState({
      modal: true
    });
  };
  handleCloseModal = () => {
    this.setState({
      modal: false
    });
  };
  render() {
    return (
      <div className="App">
        <h1>안녕하세요 리액트!</h1>
        <button onClick={this.handleOpenModal}>모달 열기</button>
        {this.state.modal && (
          <ModalPortal>
            <MyModal onClose={this.handleCloseModal} />
          </ModalPortal>
        )}
      </div>
    );
  }
}

export default App;

import React from 'react';
import './MyModal.css';

const MyModal = ({ onClose }) => {
  return (
    <div className="MyModal">
      <div className="content">
        <h3>이것은 모달</h3>
        <p>궁시렁 궁시렁 내용입니다.</p>
        <button onClick={onClose}>닫기</button>
      </div>
    </div>
  );
};

export default MyModal;

Optimizing Performance

Sun, 18 Oct 2020 00:00:00 GMT

리엑트는 내부적으로 최적화 되있다. But 더 빠르게 할 수 없을까?

내가 개발한 어플리케이션은 얼마나 최적화가 되있을까?

어떠한 부분을 어떻게 할까?

Virtualize Long Lists

1000개 리스트를 보여주는 화면에서 처음 보여지는 리스트의 갯수는 20~30개 남짓
'Windowing' 기법을 활용하여 렌더링 시간을 줄이자
react-window, react-virtualized 같은 라이브러리를 활용하면 쉽게 window를 구현할 수 있다.

Avoid Reconciliation

Component의 props와 state가 변경이 될때, diff 알고리즘을 통해 가상돔과 현재돔의 변화를 찾아 새롭게 돔을 업데이트 해준다
React.PureComponent를 활용하면 매번 얇은 비교(주소 비교)를 통해서 돔의 변화를 찾어 shouldComponentUpdatete 실행한다(React.PureComponent는 매번 실행하지 않음)
아래의 코드는 React.component와 React.PureComponent가 동일하게 작동하는걸 나타낸다.

class CounterButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: 1 }
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.color !== nextProps.color) {
            return true
        }
        if (this.state.count !== nextState.count) {
            return true
        }
        return false
    }

    render() {
        return (
            <button
                color={this.props.color}
                onClick={() =>
                    this.setState((state) => ({ count: state.count + 1 }))
                }
            >
                Count: {this.state.count}
            </button>
        )
    }
}

class CounterButton extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = { count: 1 }
    }

    render() {
        return (
            <button
                color={this.props.color}
                onClick={() =>
                    this.setState((state) => ({ count: state.count + 1 }))
                }
            >
                Count: {this.state.count}
            </button>
        )
    }
}

React Compoenet Tree를 보면 shouldComponentUpdatete에서 true를 리턴한 컴포넌트만 리렌더링
shouldComponentUpdatete로 최적화를 구현됬다는걸 확인할 수 있다.

변화가 있다면, 지우고 다시 그리자

PureComponet는 얕은 비교로 주소값만 비교하고 안에 있는 데이터를 비교하지 않기때문
데이터에 따라 변경되는 리엑트가 바보가 될 수 있다.
데이터가 변경된다면, 새롭게 만들자

// concat()
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

// speard syntax
handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

// object.assign
function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

// object.assign => object spread properties
function updateColorMap(colormap) {
  return {...colormap, right: 'blue'};
}

Immer를 통해 손쉽게 데이터를 핸들링 할 수 있다.

JSX

Sun, 11 Oct 2020 00:00:00 GMT

What is JSX?

JavsScript XML(Extensible Markup Language)의 약자
React에 제공하는 Syntax Sugar
- Syntax Sugar 언어 차원에서 지원하는 단축표현
- 예) class, !!, &&, ||, >>, <<, >>>
HTML을 쉽게 작성할 수 있다.

;<MyButton color="blue" shadowSize={2}>
    Click Me
</MyButton>

//after complie
React.createElement(MyButton, { color: 'blue', shadowSize: 2 }, 'Click Me')

특징

대문자로 컴포넌트를 표현한다.
- 바벨을 통해 변경시, 소문자는 HTML tag로 인식하기 때문
- 소문자로 하면 dot '.' 으로 속성에 접근하지 못함
- https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters

Static(Lexical) Scope다.

React.createElement(MyButton, { color: 'blue', shadowSize: 2 }, 'Click Me')

Dot Notiation(점 표기법)으로 하나의 컴포넌트를 export시켜 여러개의 컴포너트로 사용가능

import React from 'react'

const MyComponents = {
    DatePicker1: function DatePicker1(props) {
        return <div>11111111111111111</div>
    },
    DatePicker2: function DatePicker2(props) {
        return <div>22222222222222222</div>
    },
}

function BlueDatePicker() {
    return <MyComponents.DatePicker color="blue" />
}

JSX tag는 표현식을 사용 할 수 없다.

대문자로 시작하는 변수에 할당해 사용은 가능

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

Props in JSX

표현식 사용가능(계산 결과가 값의 형태로 변환), 문은 불가능

;<MyComponent
    foo={1 + 2 + 3 + 4}
    bar={1 && 2 && false}
    hello={1 ? '1이다' : '2이다'}
/>

// 결국 description의 값
function NumberDescriber(props) {
    let description
    if (props.number % 2 == 0) {
        description = <strong>even</strong>
    } else {
        description = <i>odd</i>
    }
    return (
        <div>
            {props.number} is an {description} number
        </div>
    )
}

props로 문자열을 넘길때는 HTML 이스케이프 처리가 되지 않는다.
```
<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />
```
Props의 default value는 true
- 단 ES6 object shorthand로 인해 잘못된 props가 전달될수도 있기때문에 추천하지 않는다.
Spread syntax를 활용하여 여러개의 props를 한꺼번에 내릴수 있다.
- 단점은 불필요한 props도 같이 내리기 때문에 추천하지 않는다.

Children in JSX

자식으로 HTML 태그나, JSX를 가짐으로써 중첩된 컴포넌트를 구성할 수 있다.

elements로 이루어진 배열을 반환할 수 있습니다.

render() {
  // 리스트 아이템들을 추가적인 엘리먼트로 둘러쌀 필요 없습니다!
  return [
    // key 지정을 잊지 마세요 :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

직접만든 컴포넌트에 넘겨지는 자식들은 React가 이해할 수 있는 형태로 변환이 된다면, 사용가능

함수또한 값이기 때문 자식으로 사용가능하다

// 자식 콜백인 numTimes를 호출하여 반복되는 컴포넌트를 생성합니다.
function Repeat(props) {
    let items = []
    for (let i = 0; i < props.numTimes; i++) {
        items.push(props.children(i))
    }
    return <div>{items}</div>
}

function ListOfTenThings() {
    return (
        <Repeat numTimes={10}>
            {(index) => (
                <div key={index}>This is item {index} in the list</div>
            )}
        </Repeat>
    )
}

표현식 사용가능
boolean, null, undefiend, true는 유효한 자식이지만, redering 되지 않는다.
- 단, falsy 값 중 0, -0은 0을 rendering 한다

React + Jquery

Sun, 04 Oct 2020 00:00:00 GMT

어떻게?

React는 외부 DOM에서 일어나는 변화를 인식하지 못한다.
만약, JQuery와 같이 동일한 DOM을 가지고 다룬다면 React는 당연히 헷갈린다
이러한 충돌을 피하는 가장 쉬운 방법은
- React 컴포넌트가 업데이트 되지 않게 막는 것
- 제이쿼리를 사용하지 않는것....
업데이트가 되지 않는다 ⇒ 렌더링 할 요소의 자식이나 프로퍼티가 없다 ⇒ state, props가 없다.
메모리 누수 방지를 위해, unmount시 이벤트 리스너를 해제시켜 줘야한다.
- 다수의 이벤트리스너는 메모리 누수와 애플리케이션 속도 저하를 야기한다
- https://stackoverflow.com/questions/28627606/does-adding-too-many-event-listeners-affect-performance

class SomePlugin extends React.Component {
    componentDidMount() {
        this.$el = $(this.el)
        this.$el.somePlugin()
    }

    componentWillUnmount() {
        this.$el.somePlugin('destroy')
    }

    render() {
        return <div ref={(el) => (this.el = el)} />
    }
}

function SomePlugin() {
    useEffect(() => {
        this.$el = $(this.el)
        this.$el.somePlugin()

        return () => this.$el.somePlugin('destroy')
    }, [])

    return <div ref={(el) => (this.el = el)} />
}

Jquery Chosen 플러그인 사용하기

Chosen 컴포넌트는 Div를 통해 Select를 감싼다.
- JqueryChosen으로 인해 select 태그의 형제 태그로 생성되기 되기 때문
- 리엑트는 단일 엘리먼트만 반환하기 때문
Jquery_chosen의 trigger를 활용하여 react가 Dom에 대한 변경을 감지 할 수 있게 해야 한다.
- React는 더이상 Dom을 관리하지 않기 때문
```
componentDidUpdate(prevProps) {
  if (prevProps.children !== this.props.children) {
    this.$el.trigger("chosen:updated");
  }
}
```

전체코드

class Chosen extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.chosen();

    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    this.$el.off('change', this.handleChange);
    this.$el.chosen('destroy');
  }

  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
					// JQuery_Chosen이 추가하는 Node
          {this.props.children}
        </select>
      </div>
    );
  }

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
  );
}

문자열 기반 렌더링을 React로 바꾸기

ReactDOM.render()는 앱처럼 크거나 버튼처럼 작은 UI의 독립적인 부분에 대해 여러 번 호출가능
- 애플리케이션을 한 부분씩 작성 할 수 있다.
- 기존의 서버에서 생성한 탬플릿 및 다른 클라이언트 사이드 코드와 결합이 쉽다.
- 작게 만든다 ⇒ 하나로 합친다 ⇒ 계층 구조로 만들 수 있다.

// JQuery
$('#container').html('<button id="btn">Say Hello</button>')
$('#btn').click(function () {
    alert('Hello!')
})

// React
function Button() {
    return <button id="btn">Say Hello</button>
}

ReactDOM.render(<Button />, document.getElementById('container'), function () {
    $('#btn').click(function () {
        alert('Hello!')
    })
})

// ID의 의존하지 않고, 컴포넌트 렌더링시 직접 등록
function Button(props) {
    return <button onClick={props.onClick}>Say Hello</button>
}

function HelloButton() {
    function handleClick() {
        alert('Hello!')
    }
    return <Button onClick={handleClick} />
}

ReactDOM.render(<HelloButton />, document.getElementById('container'))

코드스피치 강의 ES6+OOP 4회차 정리

Sun, 27 Sep 2020 00:00:00 GMT

프로그램

1. 대화형(일반적인 프로그래밍)

이벤트(Dom 이벤트, HTTP 이벤트)의 결과에 따라 작업을 정의
흐름을 제어하는게 아니라 전체적인 흐름에 맞춰서 어떻게 반응할지 프로그래밍
로직이 단편화되서 일관성이 요구되는 부분이 있다(데이터)
여기 클릭, 저기 클릭해도 데이터는 일관성 있게 관리 되어야 한다(예) 리덕스)
이벤트/다이어로그 프로그래밍(반응형 프로그래밍과 비슷)

2. 실시간(게임, 테트리스)

시간이라는 플로우에 따라서 작업을 정의
- 실시간 항공 충돌 시스템, 자율주행??
- 1초 8번 클릭을 지속적으로 하는 것
플로우를 제어아하는게 아니라 계속해서 흐르는 시간 안에서 일어나는 일을 지속적으로 처리하는 프로그래밍

3. 이번 강의 목표

난감한 도메인을 만났을때 어떻게 데이터분석을 해서 처리할 수 있을까?
이러한 데이터분석이 객체지향이 될 수 있게 하자

Before Makaing Tetris

모델링을 축소하면 안된다.

객체지향은 추상화라는 영역에 속해 있다.

Categorization
- 일정한 기준으로 분류한다 ⇒ 디테일은 숨겨지고 카테고리만 나온다.
- 예) 초급/중급/고급 개발자, 초/중/고/대 학생(여자/남자 구분이 없다)
- 병렬 : 서로 연관이 없다.
- 종렬(종속적인) : 속성이 세분화된다.(대한민국 서울시 강남구 ...)
Modeling
- 현실세계에서 기억해야 할 것만 모아놓은게 모델링
- 건담은 진짜 건담? ⇒ 내가 기억해야 할 디데일만 프로모델로 구현
- 이!! 도메인에서 꼭 기억해야 할게 무엇이냐?(방법은 데이터 분석)
Groupinng / Set
- 그냥 모은것, 무작위적인 집합(너너너너너너 1조, 너너너너 2조)
결론
- 추상화 기법은 적극적으로 활용하는것이 객체지향
- 추상화를 이해하고 추상화 기법을 사용하여 모델링을 한다.

객체지향 프로그래밍 / 시스템 기준

1. 대체가능성(substitute)

보다 구성형은 추상형으로 대체될 수 있다
나를 보다 큰 카테코리 큰 모델링으로 변형해도 내가 그 자리에 들어 갈 수 있다
- 개발자 ⇒ 한국사람 ⇒ 아시아인 ⇒ 지구인
자식 클래스는 부모 클래스를 대체 가능
- 자식 클래스는 부모 클래스를 상속받았기 때문에 모든 속성을 다 가졌기 때문
- 상속이나 위임을 가능하게 하는 이유는 대체가능성
구상클래스는 추상클래스 / 인터페이스를 대신 할 수 있다.
자바스크립트 상속은 프로토타입 체인으로 구현
- 프로토 타입에 체인을 걸어서 그 다음 체인을 만든다.
- instanceof 를 하면 chain 되 있는 모든 애들이 걸려서 나온다.
```
var a = []
a instanceof Array // true
a instanceof Object // true
```
자바스크립트는 메모리가 부족하여 재활용하기 위해 체이닝을 사용하여 대체 가능성을 구현했다.

2. 내적동질성/내적일관성

구상 객체(인스턴스)는 원형(클래스)를 따른다(표준)
1. 자식클래스에서 부모클래스의 메소드를 오버라이드 한 클래스
2. 대체가능성으로 부모타입의 자식 인스턴스를 생성하고 오버라이드한 메소드를 호출하면
3. 인스턴스의 원형 ⇒ 자식클래스의 함수가 호출된다.
원형에 따라서 오버라이드 있거나 오버라이드 있는 속성을 반드시 만들어진 구상 객체를 사용
자바스크립트도 부모의 메소드를 자식에 정의하면 자식 메소드가 사용(내적일관성 구현)

객체지향 프로그래밍의 최소한의 룰/매너

객체를 여러개 만들때 객체까리 서로 지켜야 될 매너가 있습니다.

1. 은닉

말 그대로 숨기는것
최고는! 아무것도 안보여주는것(요청은 했지만, 이것이 안/밖에서 줬는지 모르게)
언어 차원에서 강제로 뜯어보는것을 막을수있어야 한다(but, 옵션일뿐)
자바스크립트는 암묵적으로 _를 붙여서 은닉된 함수라고 생각한다.

2. 캡슐화

몰라도 되게, 바보를 만들기 위해, 내가 무엇을 하는지 모르게 은닉과 상관이 없다.
가장 모르는 수준까지(엄마 : '어디가니?' , 아들 : '놀러가요') 놀라가서 멀하는지 캡슐화한다.
가장 좋은 예는 ATM ⇒ 내부작업에 대해서 알려줄 필요없다.
1. 카드를 넣는다
2. 비밀번호 입력
3. 내부 작업 (터널링 ⇒ 인증서 ⇒ 화면) : 캡슐화
4. 돈 인출

3. 참고

테트리스 OOAD

1. OOAD ?

소프트웨어를 개발하는 하나의 방법론
모든 소프트웨어 시스템의 주요 기본요소를 구성하는 객체지향적인 분석과 설계 방법
- 사물을 가르키는 객체
- 그 객체들을 하나의 집합으로 묶은 클래스로
객체지향적이란것은 현실세계에서 실재하는 사물, 즉 객체들을 지향한다는 것
OOA : 분석
OOD : 설계
OOP : 프로그래밍

2. 객체지향 분석 및 설계에 대한 추상화

현실
1. 현 상황에 대해서 배우를 찾아내고
2. 각 배우들의 책임과 역할을 정의하고
3. 배우들간의 관계를 지정하고
4. 각 배우들에 대한 대본을 쓴다
추상화
1. 식별하고
2. 일반화하고(object, class)
3. 대상들 간의 관계 (inheritance, embedded)를 설정하고,
4. 상호작용 하도록(behavior)한다.
도메인 ⇒ 도메인 개념의 시각화 ⇒ 설계 객체를 구현
1. use case 정의 ⇒ 요구 분석
2. 도메인 모델 정의
  1. 문제영역 분석 및 표현
  2. 객체지향분석은 영역객체를 분류하는 관점에서 관심영역을 기술하는것
  3)도메인은 해결하고자 하는 대상 영역 ⇒ 소프트웨어는 도메인의 문제를 해결하기 위한 수단
  1. 추상화
3. 인터렉션 다이어그램 정의
4. 설계 클래스 정의
5. 난감한 도메인을 만났을때 우리는 어떻게 데이터 분석을 해서 처리할 수 있는가
  
  ⇒ 데이터 분석의 결과가 객체지향이 될 수 있게 하는 것이 우리의 목표

3. OOA

화면을 보고 객체를 분석(뷰 아래 로직이 깔려있다)
사물을 분석할때 추상화를 한다.
카테고리제이션 / 그룹핑을 할 수 있나? 판단!

4. OOD

1) 설계 유의사항

심플렉스티
- 단일 방향 의존성
- 의존성 방향이 한쪽으로 있는것
- 심플렉스티를 유지하는게 좋다
멀티플렉스티
- 의존성 방향이 양쪽으로 있는것(전파된다)
- 멀티플렉스 상황이다? 우회하는 방법을 찾자
- 데이터베이스에서 다대다 참조하면 양방향 의존성을 없애기 위해 브릿지 데이블을 만들어 일대다로 만든다
이러한 유의사항을 지키면 설계할수 있는 방법 : 그림으로 그려보자
- 멀티플렉스티를 최소한으로 방지하기 위해 그림을 그리고 객체지향의 의존성의 방향

2) 역할과 책임

역할을 언제나 동시에 권한과 책임이 온다(동전의 양면)
" 누가 이 결정을 하지" ⇒ "누가 책임지지" (현실은 그렇지 않지만, 개발만...)
본인만의 고유한 영역이 있고, 본인이 책임져야할 한계가 있다 ⇒ 역할의 정의
역할인식(중급개발자로써의 관문)의 힘
- 역할을 나눌때, 권한과 책임이 일치할 수 있도록 해야 한다

3) 역할로 나누어보자

- GAME

형태 : 데이터
역할
- 타이머를 돌려 매 블럭을 내려오게 한다
- 블럭 생성/이동/삭제

- STAGE

형태 : 데이터
역할 : 현재 스테이지 정보

- SCORE

형태 : 데이터
역할 : 점수 및 계산법

- BLOCK

형태 : 데이터 ⇒ 블럭별 카테고라이징
역할 : 범용 블록정의

- PANEL

형태 : 데이터 ⇒ 패널별 카테고라이징
역할 : 시작화면, 스테이지 종료, 죽음, 클리어, 결과화면

- DATA

형태 : 데이터
역할 : 게임 ↔ 렌더링 간 프로토콜
프로토콜로 중간에 중계해주는 이유?
1. 상호간의 약속한 형태를 끼어 넣으면 상호간의 의존성이 줄게된다
2. 범용 렌더링 처리기는 프로토콜의 데이터만 처리, 게임본체는 프로토콜의 데이터 형식으로 변환하여
3. 한쪽이 변경되더라도 프로토콜의 형식만 맞추게 된다면, 다른 한쪽은 변경하지 않아도 된다.
4. 매개체가 바뀌지 않는 이상, 한쪽이 변경되면 매개체의 형태로 변경해주면 된다.
언제 이런 프로토콜을 적용을 할까?
1. 한쪽이 변화율이 높으면 프로토콜로 만들어준다(지속적인 업데이트로 인한 구조 및 데이터 변경)
2. 변화율이 낮으면 그냥 바로 의존한다.

- RENDERER

형태 : 데이터를 통한 화면 구현
역할 : TABLE RENDER, CANVAS RENDER

5. OOP

역할이 명확하고, 의존성 관계가 적은것부터!!
생성자 인자 listener를 넣어주는 이유는 의존성을 줄이고 통보만 해주기 위해

- UTIL FUNC
const prop = (target, v) => Object.assign(target, v);

- STAGE

스테이지가 끝까지 왔냐, 안왔냐 판단
스테이지가 끝이 아니라면, 한판 올라가면서 스피드를 올려주는것
없어진 line을 받아 해당 스코어로 점수 계산

const Stage = class{
	constructor(last, min, max, listener){
		prop(this, {last, min, max, listener});
	}
	clear(){
		this.curr = 0;
		this.next();
	}
	next(){
		if(this.curr++ < Stage.last){
			const rate = (this.curr - 1) / (this.last - 1);
			this.speed = this.min + (this.max - this.min) * (1 - rate);
			this.listener();
	}
	score(line){
		return parseInt((this.curr * 5) * (2 ** line));
	}
}

- SCORE

점수를 초기화
STAGE를 통해 계산된 점수를 인스턴스의 상태값에 저장

const Score = class {
    constructor(stage, listener) {
        prop(this, { stage, listener })
    }
    clear() {
        this.curr = this.total = 0
    }
    // 수정후
    add(line) {
        const score = this.stage.score(line)
        this.curr += score
        this.total += score
        this.listener()
    }

    // 수정전
    // add(line, stage){
    // const score = stage.score(line);
    // 수정사유
    // - 지금이렇게 하면 add할때마다 새로운 스테이지가 공급된다(맞지 않다)
    // - 도메인과 객체지향 관점에서 SCORE와 STAGE는 게임이 시작되면 하나씩만 생성
    // - 굳이 계산할때마다, 임시바인딩해서(약결합) 불러올 필요가 없다(나쁜 코드??)
    // - 작동은 정상작동하나, 의미가 맞지 않는다. 이러한 의사결정을 지속적으로 해야한다.
}

- BLOCK

여러가지 블록을 형태를 제공하니까 객체를 제공하는게 아니라 클래스를 제공
카테코라이징을 하기 위해 공통적인 부분을 찾아 정의한다(rotate부분)
자바스크립트는 함수 == 값, 클래스또한 값이다.

const Block = class {
    constructor(color) {
        prop(this, { color, rotate: 0 })
    }
    left() {
        if (--this.rotate < 0) this.rotate = 3
    }
    right() {
        if (++this.rotate > 3) this.rotate = 0
    }
    getBlock() {
        throw 'override!'
    }
}

const block = [
    class extends Block {
        constructor() {
            super('#f8cbad')
        }
        getBlock() {
            return this.rotate % 2 ? [[1], [1], [1], [1]] : [[1, 1, 1, 1]]
        }
    },
    class extends Block {
        constructor() {
            super('#ffe699')
        }
        getBlock() {
            switch (this.rotate) {
                case 0:
                    return [
                        [0, 1, 0],
                        [1, 1, 1],
                    ]
                case 1:
                    return [
                        [1, 0],
                        [1, 1],
                        [1, 0],
                    ]
                case 2:
                    return [
                        [1, 1, 1],
                        [0, 1, 0],
                    ]
                case 3:
                    return [
                        [0, 1],
                        [1, 1],
                        [0, 1],
                    ]
            }
        }
    },
]

과연 추상화를 확실히 했을까?

부모 클래스가 rotate를 관리하는데 자식 클래스가 부모의 rotate를 가지거나, 연산을 하는 것은 은닉을 깨는것
부모와 자식간의 관계에서도 은닉과 캡슐화는 똑같이 성립해야 한다
도메인 수준의 차이점은 색깔/모양 , 공통점은 이동/회전
목표를 코드로 맞춰야지, 코드가 목표를 맞춰서는 안된다.
getBlock을 자식에서 부모로 옮긴다(rotate는 부모가 관리하니까)
getBlock을 호출할때마다 블럭배열을 계속해서 만들었는데 context 데이터로 만들어 메모리를 절약한다.

const Block = class{
	constructor(color, ...blocks){
		prop(this, {color, rotate : 0, blocks, count:blocks,length - 1});
	}
	left(){
		if(--this.rotate < 0) this.rotate = count;
	}
	right(){
		if(++this.rotate > count) this.rotate = 0;
	}
  getBlock(){
		throw this.blocks[this.rotate]
	}
}

const block = [
	class extends Block{
		constructor(){
			super('#f8cbad', [[1], [1], [1], [1]],
				[[1,1,1,1]]);
		}
	},
	class extends Block{
		constructor(){
			super('#ffe699', [[0,1,0],[1,1,1]], [[1,0],[1,1],[1,0]], [[1,1,1],[0,1,0]],[[0,1],[1,1],[0,1]]);
		}
	}
]

- DATA

관심사항 : 데이터뿐!! 게임본체는 상관이 없다.

const Data = class extends Array {
    constructor(col, row) {
        prop(this, { col, row })
    }
}

- RENDERER

관심사항 : 데이터뿐!! 게임본체는 상관이 없다.
clear()는 자식들의 렌더링 하는 방식이 다르기때문에 (다형성을 위해)
템플릿메소드
- 함수는 부모것이 호출이 되지만, 특정한 부분은 자식 클래스의 함수가 호출
- 부모쪽에 있는 메서드가 많은 서비스를 제공하고 실제 할 일을 자식클래스에게 위임하기 위해 사용된다.

const Renderer = class {
    constructor(col, row) {
        prop(this, { col, row, blocks: [] })
        while (row--) this.blocks.push([])
    }
    clear() {
        throw 'override'
    }
    render(data) {
        if (!(data instanceof Data)) throw 'invalide data'
        this._render(data) // 내적동질성에 의해서 자식인스턴스의 함수 호출
    }
    _render(data) {
        throw 'override!'
    }
}

- TABLE RENDERER

관심사항 : 색갈로 분류된 2차원 배열
블록이 변화가 있어날때마다 데이터로 렌더러는 호출하면 그려준다.
모델이 들어오면 모델대로 그림을 그려 모델렌더라고 부른다
- 데이터가 바뀌면 새롭게 그린다(이전 상태를 저장하지 않는다)
적층형 렌더는 사용자의 인터렉션에 따라서 데이터가 쌓이고 난 다음 그린다
- 데이터가 바뀌면 이전 상태를 참고해서 그린다.
- 오류가 쉽게 일어난다.

- UTIL FUNC
const el = (el) => document.createElement(el);
const back = (s, v) => s.backgroudColor = v;

const TableRenderer = class extends Renderer{
	constructor(base, back, col, row){
		super(col, row);
		this.back = back;  // 초기 빈칸 색상(검정색)
		while(row--){
			const tr = base.appendChild(el('tr')), curr = [];
			this.blocks.push(curr);
			let i = col;
			while(i--){
				curr.push(tr.appendChild('td').style);
				// 스타일 객체를 넣는다.
			}
			this.clear();
		}
		clear(){
			this.blocks.forEach(
				curr => curr.forEach(s => back(s, this.back));
			)
		}
		_render(v){
			this.blocks.forEach(
				(curr, row) => curr.forEach((s, col) => back(s, v[row][col]))
			)
		}
	}
}

- Canvas Renderer

const CanvasRenderer = class extends Renderer {
    constructor(base, back, col, row) {
        suepr(col, row)
        prop(this, {
            width: (base.width = parseInt(base.style.width)),
            height: (base.height = parseInt(base.style.height)),
            cellSize: [base.width / col, base.height / row],
            ctx: base.getContext('2d'),
        })
    }
    _render(v) {
        const {
            ctx,
            cellSize: [w, h],
        } = this
        ctx.clearRect(0, 0, this.width, this.height)
        let i = this.row
        while (i--) {
            let j = this.col
            while (j--) {
                ctx.fillStyle = v[i][j]
                ctx.fillRect(j * w, j * h, w, h)
            }
        }
    }
}

참고사항

의사 결정
- 수행하는 잡(코드)이 누구의 역할인지 책임인지 고민
- 도메인에 따라 클래스/함수에서 인자로 들어오는게 맞나? 컨텍스트로 들어오는게 맞나?
  - 테트리스의 스테이지와 스코어는 게임이 시작되면 계속해서 유지되기 때문에(컨텍스트)
- 둘 다 정상적인 작동을 하나, 역할과 책임이 맞지 않기때문에 항상 고민해야 한다.
대화하는 방법
- 함수지향형 : 인자와 리턴값
- 객체지향형 : 컨텍스트(인스턴스 별로 컨테스트라는걸 생성/유지)
컨텍스트
- 인스턴스가 생성되면 컨텐스트가 생성된다(인스턴스 별로 컨텍스트를 유지)
- 인스턴스마다 고유하게 부여된 메모리(상태를 가지고 있는다 ⇒ 인스턴스의 상태)
함수지향에서 상태를 유지하는 방법
- 자유변수를 통해서 관리한다.
- 자유변수를 유지하려면 새로운 함수 생성이 필요
- 왜? 함수가 생성될때만, 자유변수를 인식하기 때문
클래스 인스턴스를 만드는 행위를 함수형으로 바꾸면

필요한 자유변수를 가둬둔 상태로 함수를 만들어 리턴하는 행위와 같다
리턴되는 함수는 컨텍스트 대신 자유변수로 해당 상태를 기억
객체지향을 함수지향으로 바꾸는 방법 ⇒ 인스턴스 수만큼 함수를 생성

객체지향이란

섬세하게 책임과 의존성 관계를 잘 정리하고 다루는 과정
계속해서 인식할수록 더 정교한 관계를 맺거나 RNR 분리할 수 있다.
역할(함수) 뿐만 아니라, 상태(객체)에 대해서 의존성관계를 정리하는 것

ES5 ES6의 가장 큰 차이점

es5는 상속해도 만들어진 인스턴슨는 object이다(이런걸 home object)
es6는 extends Array 를 하면 Array가 된다????????
this를 바인딩해서 바꾸는 능력이 있다.
es5는 생성자의 this를 변경해서 상위 클래스를 만들면서 체이닝한다
es6는 생성자의 부모/상위 클래스를 먼저 만들어서 자식의 생성자의 this를 바꾼다.

한번밖에 사용되지 않는 변수는 중복이다
for와 forEach 중 어떤걸 사용할까?

언어스펙에서 정의되어 있는 메서드를 사용하자
성능문제는 아직..... 추상화 된거를 쓰자.

도메인 패던이란?

도메인 객체 : 게임/스테이지/스피드에 대한 정책 알고리즘
네이티브 객체: DOM 관련 네이티브 로직이 담겨져 있다.
도메인과 네이티브를 컨테이너(프로토콜)로 나눠야지 플랫폼에 상관없이 재사용가능

Higher-Order Components

Sun, 27 Sep 2020 00:00:00 GMT

HOC란?

컴포넌트의 공통 기능을 관리하기 위해 사용되는 함수
컴포넌트를 입력으로 받아서 컴포넌트를 출력해주는 함수이다.
HOC를 사용하여 코드의 중복을 줄일 수 있다.

HOC를 사용하여 코드의 중복을 줄일 수 있다.

componentDidMount
componentWillUnmount
handleChange

class CommentList extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = {
            comments: DataSource.getComments(),
        }
    }

    componentDidMount() {
        DataSource.addChangeListener(this.handleChange)
    }

    componentWillUnmount() {
        DataSource.removeChangeListener(this.handleChange)
    }

    handleChange() {
        this.setState({
            comments: DataSource.getComments(),
        })
    }

    render() {
        return (
            <div>
                {this.state.comments.map((comment) => (
                    <Comment comment={comment} key={comment.id} />
                ))}
            </div>
        )
    }
}

class BlogPost extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.state = {
            blogPost: DataSource.getBlogPost(props.id),
        }
    }

    componentDidMount() {
        DataSource.addChangeListener(this.handleChange)
    }

    componentWillUnmount() {
        DataSource.removeChangeListener(this.handleChange)
    }

    handleChange() {
        this.setState({
            blogPost: DataSource.getBlogPost(this.props.id),
        })
    }

    render() {
        return <TextBlock text={this.state.blogPost} />
    }
}

HOC 활용

function withSubscription(WrappedComponent, selectData) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.handleChange = this.handleChange.bind(this)
            this.state = {
                data: selectData(DataSource, props),
            }
        }

        componentDidMount() {
            DataSource.addChangeListener(this.handleChange)
        }

        componentWillUnmount() {
            DataSource.removeChangeListener(this.handleChange)
        }

        handleChange() {
            this.setState({
                data: selectData(DataSource, this.props),
            })
        }

        render() {
            return <WrappedComponent data={this.state.data} {...this.props} />
        }
    }
}

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
)

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlogPost(props.id)
)

주의사항

Don’t Mutate the Original Component

logProps의 문제점
- 다른 HOC의 input으로 입력되면 componentDidUpdate가 override된다
- 함수형 컴포넌트는 componentDidUpdate가 없어 작동하지 않는다.

function logProps(InputComponent) {
    InputComponent.prototype.componentDidUpdate = function (prevProps) {
        console.log('Current props: ', this.props)
        console.log('Previous props: ', prevProps)
    }
    // The fact that we're returning the original input is a hint that it has
    // been mutated.
    return InputComponent
}

// EnhancedComponent will log whenever props are received
const EnhancedComponent = logProps(InputComponent)

해결책

function logProps(WrappedComponent) {
    return class extends React.Component {
        componentDidUpdate(prevProps) {
            console.log('Current props: ', this.props)
            console.log('Previous props: ', prevProps)
        }
        render() {
            // Wraps the input component in a container, without mutating it. Good!
            return <WrappedComponent {...this.props} />
        }
    }
}

HOC내에서 render 생명주기 사용하지 않기

매번 새로운 값이라고 판단(React's diffing alogirithm 구분하지 못함)

render() {
  // A new version of EnhancedComponent is created on every render
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // That causes the entire subtree to unmount/remount each time!
  return <EnhancedComponent />;
}

Static Method 전달

function enhance(WrappedComponent) {
    class Enhance extends React.Component {
        /*...*/
    }
    // Must know exactly which method(s) to copy :(
    Enhance.staticMethod = WrappedComponent.staticMethod
    return Enhance
}

// hoist-not-react-static 이용
import hoistNonReactStatic from 'hoist-non-react-statics'
function enhance(WrappedComponent) {
    class Enhance extends React.Component {
        /*...*/
    }
    hoistNonReactStatic(Enhance, WrappedComponent)
    return Enhance
}

// 정적메소드만 따로 export하여 사용하기
// Instead of...
MyComponent.someFunction = someFunction
export default MyComponent

// ...export the method separately...
export { someFunction }

// ...and in the consuming module, import both
import MyComponent, { someFunction } from './MyComponent.js'

Ref는 전달

function logProps(Component) {
    class LogProps extends React.Component {
        render() {
            const { forwardedRef, ...rest } = this.props
            return <Component ref={forwardedRef} {...rest} />
        }
    }
    return React.forwardRef((props, ref) => {
        return <LogProps {...props} forwardedRef={ref} />
    })
}

코드스피치 강의 ES6+OOP 3회차 정리

Sun, 20 Sep 2020 00:00:00 GMT

HTML PARSER

BeFore Make HTML Parser

DATA ANANYSYS(데이터 분석)
- 어떠한 현상(선박안전, 재고관리 등)을 눈으로, 머리로 구조적인 해석을 해야한다.
- 단순한 원리의 조합으로 그 현상에 대해서 설명 할 수 있어야 한다.
- 여러 현상/케이스를 줄여서 최소한의 케이스로 줄여서 설명 할 수 있어야 한다.
  - 케이스가 장황하고 많다면 그에 맞게 알고리즘을 짜야한다.(초급개발자의 벽)
  - 수많은 IF로 상황을 구현한다 그러면 안되
  - 개발은 케이스가 언제나 확정적이지 않다. 재귀적이며 복합적인 상황이기때문에 연습 필요
- 어떠한 현상을 보고 구조적이고, 재귀적인 형태의 데이터 구조를 만들어야 한다.
프로그램 언어를 정의하는 방법 == BNF 정의 방식을 활용
- 내부 구성 요소로부터 응용 구성요소로 확장하는 것
- 언어의 구성요소를 정의하는 여러 문법들이 있다(lex, yak)

A = <TAG>BODY</TAG>
B = <TAG/>
C = TEXT
BODY = (A | B | C)N // A의 BODY는 A, B, C의 재귀

INPUT AND FUNC

1단계 - 기본 함수 구현

함수를 디자인할때, 아큐먼트와 리턴값을 통해 확실한 시그니처를 구현해야한다.
- 어떤 아큐먼트를 받아서 어떻게 처리해서 어떤 리턴값을 만들것인지
- input이라는 텍스트를 구조적인 객체로 만들어서 리턴하고 싶다. (시그니처)
동적루프 = 스택구조를 통해 루프를 결정하는 요인을 변경
- 스택구조를 통해 대상(태그)를 왔다갔다(자식을 처리하고 다시 부모로 가서 처리) 하기 위해
- 스택구조를 밖에 위치하고(첫번째 while) 알고리즘을 안으로 들어왔다(두번째 while)
- 두번째 while문 안에서 스택을 추가하면 루프가 더 돈다(동적루프)
- 루프를 결정하는 요인이 루프를 돌다가 변할 수 있다.
현재 parser라는 함수는 result 객체를 반환한다.
- result객체 안에 children을 채우는 것

let input = '<div>a<a>b</a>c<img/>d</div>'

const parser = (input) => {
    input = input.trim()
    const result = { name: 'ROOT', type: 'node', children: [] }
    const stack = [{ tag: result }]
    let curr,
        i = 0,
        j = input.length
    // 첫번째 while 스택을 소비하는 역할
    while ((curr = stack.pop())) {
        // 두번째 while input을 스캐닝하는 역할
        while (i < j) {}
    }
    return result
}

2단계 - TEXTNODE 구현

스캐너
- 루프를 전체돌면서 요소를 확인하는 것을 스캐너라고 한다.
- i가 바뀌면 위험하고 조회용으로 사용하기 위해 cursor로 대입
- i를 바뀔때만 직접적으로 i를 변경한다(i = idx)
문자열의 시작이 '<'로 태그인지, 텍스트 노드인지 판단한다.
- 텍스트 노드는 다음 '<' 태그가 오기전까지 텍스트 노드로 인식한다.

텍스트 노드로 찾아 현재 stack에 children으로 넣어준다.

const parser = (input) => {
    input = input.trim()
    const result = { name: 'ROOT', type: 'node', children: [] }
    const stack = [{ tag: result }]
    let curr,
        i = 0,
        j = input.length
    while ((curr = stack.pop())) {
        while (i < j) {
            // i가 바뀌면 위험하고 조회용으로 사용하기 위해 cursor 대입
            const cursor = i
            if (input[cursor] === '<') {
                // A, B의 경우
            } else {
                // C의 경우
                const idx = input.indexOf('<', cursor)
                curr.tag.children.push({
                    type: 'text',
                    text: input.substring(cursor, idx),
                })
                i = idx
            }
        }
    }
    return result
}

역할을 인식하는 순간 그 즉시 함수로 만들어 뺀다
- 나중에 하면 함수로 만들 부분이 변수의 오염으로 인해 어려워진다.
- curr은 ref 타입인데 왜 인자로 넣을까?? 그렇게 하지말라고 배웠는데
  - 코드는 응집성을 높이고 의존성을 낮혀야하는게 기본 원칙이지만,
  - 현실에서는 밸런스를 맞춰야한다.
  - 이 코드는 응집성을 최대한으로 높여서 만든거다(밸런스를 맞춘것)
- 좋은 디자인이란 정답이 없다.
  - 상황에 맞춰 응집성을 높일것인지, 의존도를 낮출건인지 개발자가 판단(고급)
```
const textNode = (input, cursor, curr) => {
    const idx = input.indexOf('<', cursor)
    curr.tag.children.push({
        type: 'text',
        text: input.substring(cursor, idx),
    })
    return idx
}
```

3단계 - htmNode(케이스 : 시작태그, 닫는태그, 싱글태그)

'<'는 HTML에서 파서를 하기위한 트리거이다(토큰이라고 부른다)
- 태그가 아닐때, '<'를 쓸때는 항상 이스케이프를 해야한다
- '>'는 트리거가 아니기때문에 상관없다.
왜 textNode부터 처리했을까?
- 코드를 짤때는 무조건 쉬운것부터 처리한다.
- 쉬운것의 특징은 의존성의 낮다, 독립된 기능일 가능성이 높다.
- 나중에 쉬운코드의 의존하는 코드를 짜기 편한다.
- 복잡한것은 공유하는 부분도 크고 중복도 크기떄문에 함수로 뺴기 힘들기 때문
- 이렇게 해야지 더 견고하고 의존성이 낮은 모듈로 부터 의존성이 높은 모듈을 짜 나갈 수 있다.

케이스가 3개가 있지만 공통점에 대한 것을 먼저 처리 해준다. (코드 중복 방지)

태그의 특징(공통점을 찾는다) '<'시작하고, '>'로 끝난다.
공통점을 찾는(추상화적인것)을 눈으로 찾는 훈련이 필요하다.
코드를 파악할떄는 최대한 중복과 공통점이 있을거라고 생각하고 찾는다.

사물 보고 데이터를 분석할때 추상화된 공통점을 발견하고 재귀적인 로직을 발견하는 것이 개발자의 몫

const parser = (input) => {
    input = input.trim()
    const result = { name: 'ROOT', type: 'node', children: [] }
    const stack = [{ tag: result }]
    let curr,
        i = 0,
        j = input.length
    while ((curr = stack.pop())) {
        while (i < j) {
            const cursor = i
            if (input[cursor] === '<') {
                const idx = input.indexOf('>', cursor)
                i = idx + 1
                if (input[cursor + 1] === '/') {
                } else {
                }
            } else i = textNode(input, cursor, curr)
        }
    }
    return result
}

시작태그와 싱글태그의 공통점과 차이점을 파악하여 로직 추가
- 데이터 모델링 / 분석을 잘하면 코드는 매칭 과정일 뿐이다.
- 공통점은 시작하는 태그이기때문에 이름을 가진다
- 차이점은 '/>' 닫히냐 안 닫히냐를 통해 구분한다.(동일한 코드를 이지선다로 작성)
- 공통점과 차이점을 통해 코드로 표현한다.
```
	let name. isClose;  // 공통 준비 사항

	if(input[idx - 1] === '/'){ //<img/>
		name = input.substring(cursor + 1, idx - 1), isClose = ture;
	}else{ //<div>
		name = input.substring(cursor + 1, idx), isClose = false;
	}
```
차이점을 처리했다면, 이제 더 이상 차이를 케이스로 인식 안해도된다.
- 경우의 수가 케이스 ⇒ 케이스를 값으로 바꿀수 잇다 ⇒ 케이스는 값으로 환원
- 메모리와 연산은 교환된다.
- 케이스 밑에 연산한 메모리를 가르키는 하나의 연산만 기술하면 된다
- 차이를 일으키는 연산을 메모리로 흡수한 다음, 그 메모리를 이용한 하나의 로직만 기술(초급의 벽)
- 이렇게 안하면 케이스마다 알고리즘이 달라져 유지보수가 어렵고 이해하기도 어렵다
공통 처리 사항 == 화이트리스트로 만든 데이터를 이용하여 처리한다
- 함수의 인자를 필터링해서 안정적인 조건을 만드는 것(화이트리스트)
- 서버에서 내려온 JSON을 뷰가 소비하게 좋게 바꾸는것(화이트리스트)
- 복잡성을 제거하고 안정성있게 데이터리스트를 만드는 것을 화이트 리스트
- 화이트리스트를 집중하고 알고리즘을 짜는게 더 효율
- 알고리즘을 어렵게 짜려고 하지말고 화이트리스트를 만드는 훈련이 더 중요

let name, isClose // 공통 준비 사항

// 다른점을 기술하는 부분을 메모리로 흡수하는 측
// 차이를 일으키는 연산
if (input[idx - 1] === '/') {
    //<img/>
    ;(name = input.substring(cursor + 1, idx - 1)), (isClose = ture)
} else {
    //<div>
    ;(name = input.substring(cursor + 1, idx)), (isClose = false)
}
// 공통 처리 사항
const tag = { name, type: 'node', children: [] }
curr.tag.children.push(tag)

차이점을 이용하여 새로운 스택에 추가한다
- 스택에 추가하기전 현재 스택의 index를 기억한다(함수의 리턴 포인트)

const idx = input.indexOf('>', cursor);
i = idx + 1;
if(input[cursor + 1] === '/'){
}else{
	let name. isClose;
	if(input[idx - 1] === '/'){
		name = input.substring(cursor + 1, idx - 1), isClose = ture;
	}else{ //<div>
		name = input.substring(cursor + 1, idx), isClose = false;
	}
	const tag = {name, type : 'node', children : []};
	curr.tag.children.push(tag);
	if(!isClose){
		stack.push({tag, back:curr});
		break;
	}
}

역할을 인식하는 순간 그 즉시 함수로 만들어 뺀다
- 단지 브레이크는 외부제어 통제이기 때문에 boolean 값을 리턴한다.
- 동적 루프 및 응집성을 높이기 위한 밸런스 처리

const elementNode = (input, cursor, idx, curr, stack) => {
    let name, isClose
    if (input[idx - 1] === '/') {
        ;(name = input.substring(cursor + 1, idx - 1)), (isClose = ture)
    } else {
        ;(name = input.substring(cursor + 1, idx)), (isClose = false)
    }
    const tag = { name, type: 'node', children: [] }
    curr.tag.children.push(tag)
    if (!isClose) {
        stack.push({ tag, back: curr })
        return true
    }
    return false
}

// 리펙토링
const elementNode = (input, cursor, idx, curr, stack) => {
    const isClose = input[idx - 1] === '/'
    const tag = {
        name: input.substring(cursor + 1, idx - (isClose ? 1 : 0)),
        type: 'node',
        children: [],
    }
    curr.tag.children.push(tag)
    if (!isClose) {
        stack.push({ tag, back: curr })
        return true
    }
    return false
}

닫는 태그는 break할때 저장한 curr.back을 통해 이동한다

const parser = (input) => {
    input = input.trim()
    const result = { name: 'ROOT', type: 'node', children: [] }
    const stack = [{ tag: result }]
    let curr,
        i = 0
    j = input.length
    while ((curr = stack.pop())) {
        // 브래이크를 통해 빠져 나오면 새로운 curr이 생긴다.
        while (i < j) {
            const cursor = i
            if (input[cursor] === '<') {
                const idx = input.indexOf('>', cursor)
                i = idx + 1
                if (input[cursor + 1] === '/') {
                    curr = curr.back
                } else {
                    if (elementNode(input, cursor, idx, curr, stack)) break
                }
            } else i = textNode(input, cursorr, curr)
        }
    }
    return result
}

좋은 개발론

좋은 코드를 짜는 방법

데이터를 이해하고
재귀적인 로직을 찾아내거나
추상화된 공통점을 찾아내거나
역할을 이해하거나

코드의 가독성은 어떻게 확보되는것일까요?

변수명이 이쁘면? 길면? 코드가 읽기 쉬어지나? NoNo
알고리즘, 수학적 함수, 연산 이런거는 무조건 어렵다.
- 왜? 컴퓨터가 연산하는걸 우리가 머리로 생각해야 하니까
쉬운코드 === 역할에게 위임하는 코드
- 함수명을 통해 의도를 이해하고
- 함수 안 로직을 처리하는데 신경을 쓰지 않지만
- 함수명을 통해 어떠한 작업을 할 수 있는지 확인

리더블한 코드란?

적절한 역할 모델로 위임되서 그들간의 통신과 협업을 볼 수 있는 코

중복은 제거하는게 아니라 발견하는거다

 개발자의 기량에 따라 코드, 아키텍쳐, 데이터의 중복을 판단하여 제거 할 수 있다.
 똑같은 코드를 봤는데 중복된게 갑자기 보인다 그럼 실력이 올라간거다

코드에 대한 중복
- 언어에 대한 바른 이해와 문법적으로 해박한 사용법으로 코드 중복을 없앨수 잇다.
아키텍처에 대한 중복
- 역할 관계를 인식하고 책임이 어디까지 들어가는지 얼마나 확장 가능성 있는지
- 어디가 중복이고 어디가 레이어인지 알 수 있으면 중복 제거 가능
데이터에 대한 중복
- 전통적인 RDB의 정규화랑 안정적인 로직이 있다.

Ref Forwarding

Sun, 20 Sep 2020 00:00:00 GMT

React.forwardRef를 사용해야 하는 이유

리엑트의 컴포넌트는 캡슐화의 특징을 가지고 있다.
- 컴포넌트 자체의 응집도를 높이고 의존도를 낮추기 위해 캡슐화
- 캡슐화를 통해 컴포넌트의 내부의 로직이나 상태는 노출되지 않는다.
- 사용하는 쪽은 DOM에 렌더링 될 HTML만 원하고 ref같은 객체를 원하지 않는다(?)
- 함수를 구현할때도 부모 컴포넌트는 자식의 상태를 알지 못하고 함수만 내려줄 뿐이다.
ref객체도 props와 비슷하게 전달한다. 하지만 props와는 다르게 key의 속성과 비슷하다.
- key는 컴포넌트의 속성으로 작성해도 내려가지 않는다.
ref는 React.forwardRef()를 통해 하위 컴포넌트로 전달 할 수 있다.
- 전달 원리는 HOC(클래스 컴포넌트 동일)

React.forwardRef 사용방법

React.createRef() 를 통해 ref 객체를 생성
생성한 ref 객체를 자식 컴포넌트의 ref 속성으로 넘겨준다.
자식 컴포넌트는 React.forwardRef를 감쏴 props와 ref객체를 받아올 수 있다.
받아온 ref객체를 button 태그에 속성으로 넣는다.

ref.curret를 통해 DOM이 렌더링 된 후 button 객체 속성을 이용할 수 있다.

const FancyButton = React.forwardRef((props, ref) => (
    <button ref={ref} className="FancyButton">
        {props.children}
    </button>
))

const ref = React.createRef()
;<FancyButton ref={ref}>Click me!</FancyButton>

직접 HOC 구현하면?

props를 통해 ref가 전달되지 않는다.
ref가 전달된곳은 LogProps 컴포넌트이다.
FancyButton은 렌더링 되지만 focus 함수 미작동

function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}

class FancyButton extends React.Component {
  focus() {
		this.props.handleClick(
  }

	reder(){
		return(
			<button ref={ref} className="FancyButton" onClick={this.focus}>
		    {props.children}
		  </button>
		)
}

export default logProps(FancyButton);

const ref = React.createRef();

<FancyButton
  label="Click Me"
  handleClick={handleClick}
  ref={ref}
/>;

그러면 방법이 없는건가?

logProps를 리턴값을 React.forwardRef 함수로 감싼다
props로 내리기전 ref라는 속성값대신 별도의 속성값을 통해 전달한다 .(forwardedRef)
props로 전달된 속성 중 ref값을 컴포넌트에 속성으로 넣어준다.

function logProps(Component) {
    class LogProps extends React.Component {
        render() {
            const { forwardedRef, ...rest } = this.props
            return <Component ref={forwardedRef} {...rest} />
        }
    }
    return React.forwardRef((props, ref) => {
        return <LogProps {...props} forwardedRef={ref} />
    })
}

개발자 도구에서 Ref 이름

React.forwardRef의 콜백을 화살표 함수대신 함수정의문으로 넣는다.
컴포넌트의 속성중 displayName을 활용

// 화살표 함수 대신 일반함수 정의문으로 구현
const WrappedComponent = React.forwardRef(function myFunction(props, ref) {
    return <LogProps {...props} forwardedRef={ref} />
})

function logProps(Component) {
    class LogProps extends React.Component {}

    function forwardRef(props, ref) {
        return <LogProps {...props} forwardedRef={ref} />
    }

    const name = Component.displayName || Component.name
    forwardRef.displayName = `logProps(${name})`

    return React.forwardRef(forwardRef)
}

Intersection Observer

Thu, 17 Sep 2020 00:00:00 GMT

정의

WebAPI 중에 하나이며, 모던 브라우저 지원(IE 제외)
viewport(default)를 기준으로 해당 엘리먼트가 들어왔는지 확인 가능
해당 엘리먼트가 viewport로 들어왔으면 콜백함수를 넘겨 실행시킬 수 있다.

왜 사용할까?

처음에 보여지는 화면만 렌더링 및 이미지 요청을 하여 리소스 절약
별도의 라이브러리를 사용하지 않고 최적화를 진행 할 수 있다(like react-virtualized)
뷰포트가 이동함에 따라 엘리먼트에 애니메이션을 적용할 수 있다.
webAPI이기 때문에 react, vue에서도 사용가능(최적화 가능)

사용법

intersection observer 생성

let option = {
    root: document.qeurySelector('#scroolArea'),
    rootMargin: '0px 0px 0px 0px',
    threshold: 1.0,
}

let observer = new IntersectionObserver(callback, options)

option
- root : 뷰포트의 기준(별도로 지정하지 않으면, default = 기본 뷰포트)
- rootMargin : 뷰포트 기준의 margin이며, 값은 css와 동일하게 사용
- threshold : 뷰포트와 지정한 엘리먼트의 교차하는 면적(% 기준)에 따라 콜백 실행
IntersectionObserver
- callback : 엘리먼트가 threshold에서 지정한 교차면적으로 들어오면 콜백 실행

Targeting an element to be observed

// 하나만
let target = document.querySelector('#listItem')
observer.observe(target)

// 여러개의 객체 추가

let targets = document.querySelectorAll('.listItem')
targets.foreach((el) => observer.observe(el))

target : 지정할 엘리먼트(뷰포트와 만날 엘리먼트)
observer.observe(target) : IntersectionObserver에서 observe 메소드를 통해 target 등록

Intersection change callback

const callback = (entries, observer) => {
    entries.forEach((entry) => {
        // 해당 target이 뷰포트 안으로 들어왔는지 여부 판단
        if (entry.isIntersecting) {
            // 뷰포트에 들어왔으면 해당 타켓을 해제
            observer.unobserve(entry.target)
            // 해당 속성을 가지고와 이미지를 로딩
            entry.target.src = entry.target.dataset.src
        }
    })
}

entries : oberve에 등록한 엘리먼트의 정보들이 배열로 들어온다
- boundingClientRect
  - DOMRectReadOnly {x: 8, y: 8, width: 100, height: 200, top: 8, …}
  - 지정한 엘리먼트의 속성값(읽기 전용)
- intersectionRatio
  - 뷰포트와 지정한 엘리먼트의 교차 비율
- intersectionRect
  - DOMRectReadOnly {x: 8, y: 8, width: 100, height: 200, top: 8, …}
  - 뷰포트와 지정한 엘리먼트의 교차된 부분의 속성값(읽기 전용)
- isIntersecting : true
  - 교차 여부
- isVisible : false
- rootBounds
  - DOMRectReadOnly {x: -20, y: -20, width: 413, height: 805, top: -20, …}
  - 뷰포트 속성 값(읽기 전용)
- target : img.lazy..
  - 지정한 타켓의 속성
- time : 256.60000000789296
observer : IntersectionObserver 객체이자 속성정보

예제 코드(이미지 로딩)

<img class="lazy" src="" data-src="https://source.unsplash.com/random"/>
.
.
.
.
<img class="lazy" src="" data-src="https://source.unsplash.com/random"/>

<script>
	// rootMargin을 20px주어 뷰포트가 내려오기전 미리 로딩
  const options = {threshold: 0, rootMargin : '20px'};
  const observer = new IntersectionObserver(
    (entries, observer) => {
      console.log(entries)
      console.log(observer)
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          observer.unobserve(entry.target);
         entry.target.src = entry.target.dataset.src;
        }
      });
    }
    , options);

  const boxElList = document.querySelectorAll('.lazy');
  boxElList.forEach((el) => {
    observer.observe(el);
  })
</script>

Error Boundary

Mon, 14 Sep 2020 00:00:00 GMT

렌더링 도중 'Life Cycle'에서 에러/예외가 발생한다면?

애플리케이션 중단(모든 컴포넌트가 언마운트)
잘못된 정보를 사용자에게 보여주는 것보다 아무것도 안 보여주는것이 더 나은 UX이기 때문

해결 및 방지책(Error Boundary 적용)

static getDerivedStateFromError와 componentDidCatch를 활용하여 에러를 처리할 수 있다.
- 클래스 컴포넌트에서만 구현됬기때문에 함수형 컴포넌트에 적용불가
- 현재는 Hook에 구현은 안되있지만, 업데이트나, 라이브러리로 지원 계획(공식 홈페이지)
에러가 발생한다면, 위에 두 메서드를 구현한 가장 가까운 부모 컴포넌트를 찾는다.
- static getDerivedStateFromError(error)
  - 에러 정보를 상태값에 저장해서 화면에 나타내는 용도로 사용된다.
- componentDidCatch(error, info)
  - getDerivedStateFromError과 동일하게 에러 정보를 화면에 나타내는 용도로 사용되나,
  - 주로 서버로 전송하는 용도로 사용된다.
Root의 Error Boundary보다는 각 컴포넌트 그룹별로 구현한다
- 페이스북 메신저는 사이드바, 정보 패널, 대화기록에 대해 각각 별도로 구현

class ErrorBoundary extends React.Component {
    state = { error: null }

    static getDerivedStateFromErro(error) {
        return { error }
    }

    componentDidCatch(error, info) {
        sendToMyServer(error, info)
    }

    render() {
        const { error } = this.state
        if (error) {
            return <div>{error.toString()}</div>
        }
        return this.props.children
    }
}

function App() {
    return <ErrorBoundary>//...컴포넌트</ErrorBoundary>
}

ComponentDidCatch 메서드에서 에러를 서버로 전송하는 이유?

컴포넌트가 실제 돔에 반영될때 보내기 때문에 한번만 보낸다. (커밋단계)
렌더링 중 에러를 서버로 보내게 된다면, 같은 정보를 여러번 보낼 수 있기때문 (렌더단계)
리액트에서 데이터 변경에 의한 화면 업데이트 렌더 단계와 커밋 단계를 거친다.
- 렌더단계 : 실제 돔에 반영할 변경 사항을 파악
- 커밋단계 : 파악된 변경 사항을 실제 돔에 반영
커밋 단계의 메서드(렌더 단계의 메서드는 커밋단계를 제외하고 전부다)
- getSnapshotBeforeUpdate
- componentDidMount
- componentDidUpdate
- componentDidCatch

Error Boundary로 포착하지 못하는 에러

이벤트 핸들러
- 사용자의 입력(즉, 비동기적인 작업)에 의해 생기는 오류는 생명주기와 연관이 없으므로 포착 불가
- 이벤트 핸들러 내부에서 try/catch구문을 통하여 error의 상태값을 업데이트하여 포착하게 한다.
비동기적 코드(setTimeout or requestAnimationFrame의 콜백함수)
서버사이드 렌더링
Error Boundary를 구현한 컴포넌트에서 발생한 에러

컴포넌트 에러 스택

Create React App 프로젝트내에서 기본적으로 작동한다.
콘솔을 통해 어떤 컴포넌트(파일이름, 줄번호)에서 에러가 발생했는지 출력해준다.
- 컴포넌트 이름은 Function.name 프로퍼티에 따라 보여준다.

Display None

Mon, 14 Sep 2020 00:00:00 GMT

Why?

초기세팅 이후 IFRAME 요소의 스크롤이 움직이지 않음.
display의 속성이 none ⇒ block으로 변경시 scrollTop이 0으로 변경됨.
이러한 문제 때문에 display와 visibility에 대해서 정리

display : none

display 속성이 적용된 HTML 요소가 화면에 표시되지 않는다.(자식요소 포함)
렌더링은 했으나, 화면에는 요소가 표시되지 않으며, 돔 구성에서도 포함되지 않는다
선택자를 통해 요소의 스타일과 이벤트를 줄 수 있다.
iframe내 요소도 접근 할 수 있으며, 동일하게 스타일과 이벤트를 줄 수 있다.
- iframeElement.contentDocument.body를 통해서 부모(opener)에서 접근 가능
개발자 도구에서 확인할 수 있다.

visibility : hidden

visivility속성이 적용된 HTML 요소가 화면에 표시되지 않는다(자식 요소 포함)
display : none가 동일하게 화면에 표시되지 않지만, 돔 구성에는 포함되어 있다.
- width와 height를 가진다

// 예제 코드
<body>
<button id="none">display none</button>
<button id="block">display block</button>
<button id="color">color</button>
<div id="dis">
    Display None
    <h1>Hello world</h1>
    <iframe src="../test.html">
    </iframe>
</div>
<div id="vis">
    Visivility Hiddden
</div>
<script>
  document.querySelector('#dis').style.color = 'red';

  document.querySelector('#none').onclick = function () {
    document.querySelector('#dis').style.display = 'none';
  }
  document.querySelector('#block').onclick = function () {
    document.querySelector('#dis').style.display = 'block';
  }
  document.querySelector('#color').onclick = function () {
    document.querySelector('#dis').style.color = 'blue';
  }

</script>
</body>

코드스피치 강의 ES6+OOP 2회차 정리

Sun, 13 Sep 2020 00:00:00 GMT

SPREAD REF

메인루틴과 서브루틴이 값을 공유하는 방법
- arguments : 메인루틴에서 서브루틴을 보낼때의 인자값
- return : 서브루틴이 실행종료되고 메인루틴으로 보내는 리턴값
값을 공유할 때, type의 중요성
- Primiteve : 값이 복사되며, 원래의 값에 영향을 끼치지 않는다(메모리에 새로운 값 생성)
- Reference : 원래 값의 주소를 가르키는 포인터를 보낸다(기존에 가지고 있는 값을 이용)
Reference type을 전달하게 된다면? 어떤 문제가 발생하나?
- 상호/연쇄 참조 발생(이름은 다르지만, 값을 가르키고 있는 포인터가 변경되지 않기때문)
- 커플링 발생!
- 같은 포인터를 가진 변수를 함수를 통해 상태변화를 시키면 모두다 변경
- 리펙토링시, 여러 루틴에서 값을 가지고 있기때문에 작동이 안될수 있다.
- 디버깅시, 리펙토링과 동일하게 오류의 원인을 찾기 힘들다
해결책
- 인자로 넘길때도 값을 복사해서 넘겨주고, 서브루틴안에서 값을 복사하여 사용한다!
- 신경쓰고 싶지않다면, 모든 값을 복사해서 새로운 값을 만들어서 작업한다.
- 메모리 걱정은 하지말자. 자바크립트는 Mark And Sweep으로 사용되지 않으면 삭제된다.
- 목표는 각 루틴마다 가지고 있는 상태의 값이며, 상태변화에 따른 사이드 이펙트 적게 하자.

const foo = {}
let bar = null

// foo는 bar를 서로 참조하여 상호참조라는 오염이 발생
bar = hello(foo)

// hello 함수의 인자로 참조타입
function hello(arg) {
    // variable을 들어온 참조타입 인자로 할당
    const variable = arg
    return variable
}

SUB ROUTINE CHAIN

루틴에서 루틴을 호출되는 순간 이전 루틴의 정보(Execution Context)를 Snap Shot을 통해 콜스택에 저장
- Execution Contex : 함수호출시, Snap Shot(인자와 지역변수)에 대해서 메모리가 생성된다.
Tail Resurtion 지원시, 루틴을 호출하는 라인이 return이면 실행환경 컨택스트를 저장 할 필요가 없다
- 인자와 지역변수는 return문 이후로는 사용되지 않고, 단순히 전달만 해주기때문
- 함수의 실행 컨택스트를 유지 할 필요가 없으므로 호출 이후 메모리에서 사라진다.
- 함수의 리턴포인트는 언어 수준에서 결정되므로 브라우저마다 다름 (꼬리물기 최적화 조건을 지원시)

function r1() {
    r2()
}
function r2() {
    r3()
}
function r3() {}

r1()

TAIL RECURSION

현재 apple OS의 사파리만 지원
- Tail Resursion 조건을 맞춰서 함수를 실행하면 됨(스펙 참조)
- 실행시 Stack OverFlow에러는 안나지만, Time out 에러가 발생될수도 있음.
모든 연산자는 꼬리물기의 최적화를 방해한다
- 모든 연산자는 연산시, 메모리를 생성한다(앞에 있는 것과 연산을 하기 위해서 메모리에 기억)
- 단! 삼항연산자, 논리연산자(&&, ||)는 지연평가를 하기때문에 꼬리물기 최적화시 메모리를 안한다.
연산자로 인한 문제 해결책
- 연산을 인자로 옮긴다.(연산의 결과값을 이전의 함수가 가지고 있는게 아니라, 연산을 하고 인자로 넘김)
- 콜에서 연산을 실행하고 해제(인자로 넘겼으니까, 기억할 필요 없다), 다음 루틴의 값으로(인자) 전달
- 현재 함수의 메모리는 제거하고 호출하는 함수 메모리(메모리)를 사용한다.
Tail Recursion은 결국 반복문이다(TAIL RECURSION TO LOOP)
- 제어문의 스택 클리어 기능을 활용하여 메모리를 제거해주고 다음 연산을 실행하는 것이다.
- 컴퓨터에서 꼬리물기최적화는 루프문으로 바꾸는것이다.(결국 파싱하면????)
제어문의 스택 클리어 기능
- 제어문은 연속된 호출에 대해서 제어문을 통해서 스택을 클리어(스펙)
- 제어문에서 while, for 문을 써야지 루프에 대한 스택을 클리어 할 수 잇다.
- 해당 인덱스를 실행하고 메모리에서 해당 스택을 비우고 인덱스만 가지고 다음 스택 생성

//연산자 + 로 인해 전에 값을 저장해야 하기때문에 지원불가
const sum = (v) => v + (v > 1 ? sum(v - 1) : 0)
sum(3)
// sum 3 return 3 + sum(2)
// sum 2 return 2 + sum(1)
// sum 1 return 1 + 1

//연산자를 바디안에서 결과를 앞치고 인자로 넘긴다.
const sum = (v, prev = 0) => {
    prev += v
    return v > 1 ? sum(v - 1, prev) : prev
}
sum(3)
// sum3 return sum(2, 3);
// sum2 return sum(1, 5);
// sum1 return 6

//Tail Recursion To Loop
const sum = (v) => {
    let prev = 0
    while (v > 1) {
        prev += v
        v--
    }
    return prev
}

CLOSURE

STATIC STATE
- 루틴 === 문
  - 함수를 선언하는것은 문이지 자바스크립트처럼 변수에 대입할 수 있는 값이 아니다.
- 함수를 문으로 만드는 언어의 특징
  - 메인 플로우 밖에서 루틴이 생성
  - 전역 메모리의 변수와 생성된 루틴 내의 지역변수만을 사용
  - 정적 디스페치를 통해 컴파일시, 서브루틴의 메모리(주소와 크기)를 확정
  - 루틴과 서브루틴의 관계가 별도있기 때문에 클로져가 생기지 않음.
RUNTIME STATE
- '루틴 === 값`
  - 런타임 중에 루틴을 생성시킬 수 있다.(값 ⇒ 루틴)
- 함수를 값으로 만드는 언어의 특징
  - 메인 플로우 안에서 루틴이 생성
  - 메인 플로우 내에서 생성되기 때문에 플로우 내의 변수도 접근 가능
  - 런타임 중이므로 언제 생겨날지, 얼마나의 크기를 가질지 모른다.(루틴 호출전까지)
  - 메인플로우 안!!에서 값의 형태로 있다가 갑자기 서브루틴이 생기면서 생겨난다(실행중간에)
  - 루틴이 처음부터 정적인 문으로 존재하지 않고 값의 형태로 존재한다
- 자유 변수
  - 루틴 밖에 있는 변수 중에 해당 루틴이 인식할 수 있는 변수들을 Free variables라고 부른다.
  - 자유변수를 한번이라도 참조를 하게 되면 해제되거나 조작될 수 없다.(해당 루틴이 종료전)
- 클로져
  - 클로저는 런타임 중에 루틴(루틴을 문이 아니라 값)을 만들 수 있는 언어에서 생겨난다
  - 자유변수는 루틴의 플로우가 종료가 되면 사라져야 하는데 서브루틴이 잡고 있으면 해제가 안된다.
  - 자유변수가 해제되지 못하고 갇혀있는 공간 == 서브루틴에 갇혀있으면 클로져라고 한다.
  - 단, 해당 서브루틴이 다른곳에서 노출되거나, 넘어가서 사라지지 않는다는 조건

NESTED CLOSURE

스코프로 인해 생기는 클로져 ⇒ 스코프란 클로져를 만드는 행위
- 클로저는 루틴만이 만드는게 아니다.(루틴도 또 다른 하나의 스코프)
- es6이후에는 블록스코프가 생기면서 블록만 만들어도 스코프가 생긴다.

window.a = 3
if (a === 3) {
    const b = 5
    const f1 = (v) => {
        const c = 7
        if (a + b > c) {
            return (p) => v + p + a + b
        } else {
            return (p) => v + p + a + b
        }
    }
}

SHADOWING

새도잉이란?
- 중첩된 클로져가 있는데 각각의 클로져의 상태에서 같은 이름의 변수를 소유했을때 일어난다.
- 이름이 겹치면, 현재 코드가 실행할때 가장 가까운 클로져의 영역을 사용한다.
- 가장 가까운 변수만 사용되고 밖에 있는 변수는 그림자가 가리듯 가려진다.
왜? 사용하나?
- 네임스페이스를 정의할떄, 변수가 내부와 외부가 다른 의미로 사용되어야 할때
- 클로져 안에서는 자유변수를 오염시킬 위험이 굉장히 높다(오염 방지)
- 자유변수의 오염을 막을 수 있는 유일한 방법
- 좋은 변수명은 자바스크립트 코어(Date, Array)가 선점을 했기때문에 위험하므로 쉐도잉하자

const a = 3;
if(a == 3) {
	const a = 5;
	const f1 = v => {
		const a = 7; // a를 쉐도잉해서 오염을 막았다!
		console.log(a);
}

CO ROUTINE

커맨드 패턴
- 명령어를 직접 실행하지 않고, 명령어 하나하나를 객체나 함수에 담는다.
- 실행하고 싶을때 해당 함수나 객체를 호출한다.
- 문을 중간에 멈출 수 있다(함수를 호출한다 ⇒ 서브루틴을 만든다)
자바스크립트 내의 실행기
- 자바스크립트는 es6부터 하나의 문을 레코드라는 객체로 감싸 메모리에 저장
- 명령어가 한번에 실행하는게 아니라, 레코드 하나하나씩 invoke(실행기)를 통해 실행
- 커맨드 패턴과 비슷하다. 코루틴을 할 수 있다( == 문을 중지 시킬 수 있다)
Single Routine
- 루틴에서 서브루틴을 호출하면 플로우를 진행해서 끝맞추고 리턴하는것
- 싱글루틴은 루틴의 플로우가 끝까지 실행한다는 것을 보장한다.
Co Routine
- 코루틴에서는 플로우를 끝까지 진행안하고 정지시킬 수 있다(Suspension/일시정지)
- 서브루틴에서 yield를 통해서 서스펜션이 일어나면 리턴포인트로 제어권이 이동한다.
  - 언어마다 yield라는 네임은 다를 수 있다.
- 코루틴에서 서스펜션을 통해 정지된 서브루틴을 여러번 호출할 수 있다.
Co routine의 장점
- 함수가 아니라 문에도 서스펜션을 걸 수 있다.
- 서브루틴내에서 어떠한 값을 공유해야 한다면 서스펜션을 통해 지역변수 상태를 유지할수있다.
- 서스펜션이 걸려있는 코루틴은 메모리를 해지하지 않는다. 플루우가 끝나지 않았기 때문이다.
- 결국, 루틴을 다시 호출하거나, 인자를 통해서 상태를 넘기지 않고 코루틴으로 간단하게 만들 수 있다.
- 더 좋은, 더 읽기 좋은 코드를 만들 수 있다.
제네레이터를 통해 코루틴 구현
- 제네레이터를 호출한 결과값을 코루틴이라고 한다.
- 코루틴에서 루프 또한 정지 시킬 수 있다.
- yield를 통해서 서브루틴을 호출한 리턴포인터로 돌아간다
- 호출한 결과값은 value, done의 키를 가진 이터레이터 객체이다.
- next()를 통해서 제네레이터를 호출하여 코루틴을 받을 수 있다.

const generator = function* (a) {
    a++
    yield a
    a++
    yield a
    a++
    yield a
}

const coroutine = generator(3)

let result = 0
result += coroutine.next().value
console.log(result) //4
result += coroutine.next().value
console.log(result) //9
result += coroutine.next().value
console.log(result) //15

수업 중 메모

인자와 리턴으로 메인루틴과 서브루틴이 값을 공유
참조값으로 공유를 하게 되면 많은 문제가 생긴다
서브루틴에서 서브루틴이 호출된다(체이닝 ⇒ 꼬리물기 최적화(재귀함수))
람다 : 루틴을 값으로 인식하고 처리하겠다.
루틴안에 문을 값처럼 만들어서 처리하는 기술 C언어의 함수 포인터라는 기술의 발전
루틴이 태어나는 환경을 컨택스트라고 한다.
서브루틴을 값의 형태로 만드는 언어와 객체의 형태로 만드는 언어가 있다.
자바의 메소드는 문이다 클래스 안에서 메소드를 정의해야 한다.
런타임안에서 루틴이 생성되면 어떤 환경에서 생성됬는지도 기록한다. (This is Scope)
생성된 루틴이 알 수 있는 변수가 전역과 지역변수 뿐만 아니라 내가 태어난 플로우의 변수도 알 수 있다.
재귀와 꼬리잡기는 루프문으로 기계적으로 고칠수 잇다 그러면 이건 루프문이니까 꼬리 잡기로 고칠수있다.

Scope

Fri, 11 Sep 2020 00:00:00 GMT

1. 정의

참조 대상 식별자(변수명, 함수명)를 찾아내기 위한 규칙(결국 이름을 찾아내는 규칙)
해당 Entity의 이름(변수/함수명)이 무슨/어떤 리터럴로 바인딩 되었는지 알아내는 규칙
스코프를 통해서 참조 대상 식별자의 충돌 방지(동일한 이름이어도 스코프에 따라서 다른 값 할당)

2. Static(Lexical) Scope

정의 및 선언의 위치에 따라 스코프가 결정된다.(실행시간과 호출 스택에 무관하다)
변수의 유효범위를 단순히 구조를 보고 빠르게 찾을 수 있다.
정의한 위치의 실행 컨택스트를 참고하여 스코프를 만들어준다(추가)
스코프 체인을 통해 첫번째 → 두번째 → ... → 전역까지 검색을 하면서 찾는다
스코프 체인은 찾는 순간 멈추고 그 값으로 바인딩하여 함수를 실행준비 끝!
전역까지 찾았는데 없으면 undefined으로 값이 정의되지 않았다고 나타낸다.

// 예제 1
// 현재 main 컨텍스트
// scope = [main]
var x = 1

// foo함수 실행시 실행컨텍스트안에는 scope 생성
// scope는 foo가 선언/정의되는 main 컨텍스트를 뒤로 생성
// scope = [foo, main]
function foo() {
    var x = 10
    bar()
}

// bar함수 실행시 실행컨텍스트안에는 scope 생성
// scope = [bar, main]
function bar() {
    console.log(x)
}

foo() // 1
bar() // 1

// 예제 2
// scope = [main]
var value = 1

// scope = [foo, main]
function foo() {
    var value = 2

    // scope = [bar, foo, main]
    function bar() {
        return value
    }

    console.log(bar())
}

foo() // 2

3. Dynamic Scope

호출 위치에 따라 스코프가 변경된다(실행환경에 따라 변경된다)
스코프 검색시 실행 중인 함수에서 검색을 하고 그 다음 함수를 호출한 컨텍스트를 기준으로 변수를 찾음
자바스크립트에서는 this가 다이나믹 스코프처럼 호출한 실행 컨택스트를 보고 값을 할당한다(확실하지 않음)

var myObject = {
    name: foo,
    sayName: function () {
        console.log(this.name)
    },
}

var otherObject = {
    name: bar,
}

otherObject.sayName = myObject.sayName

myObject.sayName()
otherObject.sayName()

4. Key Point

자바스크립트에서는 this와 변수는 다르게 값이 할당된다.
this는 동적(호출한 컨텍스트) 으로 변수는 정적(정의한 컨텍스트)으로 할당된다.

Git Actions 설명

Thu, 10 Sep 2020 00:00:00 GMT

# Git Actions YML 파일
# 파일 위치 : 프로젝트 폴더 /.github/workflows/main.yml
name: git action test - build and push master
# 액션의 이름!! 여러개의 WorkFlow를 연결 할 수 있기때문에 라벨링이라고 생각하면 된다.

on:
# 이벤트 리스너라고 생각하면 된다!
  push:
	# push라는 이벤트가 발생하였을때!
    branches: [ master ]
	# 어떤 브런치에서?

	schedule:
	# 예약된 작업을 설정 할 수 있다.
    - cron: '0 * * * *'

#작업에 대한 라벨링
jobs:
  # build1라는 작업!!
  build1:
    # 우리가 올린 소스를 어디서 실행을 할까?
	# 일반적으로 우분트에서 실행이 되지만, Node환경도 추가 가능
    runs-on: ubuntu-latest
    defaults:
    # 실행시 default 값 설정 가능
      run:
        shell: bash
        # 터미널은 bash 사용
        working-directory: scripts
        # build1이라는 작업은 scripts 폴더에서 진행

	# 작업 순서
    steps:
      # actions시 브랜치 이동
      - uses: actions/checkout@master

      # Name은 작업 이름이고 run은 커멘드에서 실행될 명령어
      - name: Run a one-line script
        run: echo Hello, world!

	  # 여러줄의 명령어
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.name: CI Build

  build2:
    runs-on: ubuntu-latest

	# 전역 변수
    strategy:
      matrix:
        node-version: [ 12.x ]

    steps:
      - uses: actions/checkout@master

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
		# action 마켓에 있는 노드 환경 설정 워크플로우 다운!
        with:
		# setup-node 함수 실행시 필요한 매개변수
          node-version: ${{ matrix.node-version }}
          registry-url: "https://npm.pkg.github.com"

      - name: Cache node modules
        # node_module을 설치하는데 시간이 오래걸리니까 캐싱!!
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
        # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-


	  - name: Install dependencies
        run: yarn install
		# 환경 변수
        env:
          CI: true

      - name: Run Build
        run: yarn build

      - name: push
        uses: github-actions-x/commit@v2.7
		# action 마켓에 있는 commit and push 워크플로우 다운!
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          push-branch: 'master'
          commit-message: 'publish'
          force-add: 'true'
          files: build/
          name: will
          email: kode15333@gmail.com
          rebase: 'true'

GitHub Actions Documentation

Singnaling And ICE Framework

Wed, 09 Sep 2020 00:00:00 GMT

getUserMedia() : MediaStream

미디어(마이크, 카메라)의 동기화된 스트림(마이크 트랙, 카메라 트랙)
MediaStream을 URL.createObjectURL()로 <video> <audio>의 소스로 사용가능
getUserMedia()의 인자로 비디오 관련 설정을 넣어 개발자가 원하는 스트림을 가질 수 잇다.
- 화면 비율
- 화면모드(앞 / 뒤)
- 프레임 속도
- 높이와 너비
- 주의사항 - 사용자가 권한요청을 거부하게 된다면 에러 메세지를 반환한다.

Signaling

비디오 코덱 및 해상도에 대한 정보/ 네트워크에 대한 정보를 교환하는 작업
- 시기 : 스트리밍하기 전 무조건 완료해야
시그널링을 통해 교환하는 정보
- Session Control message : 통신의 시작과 종료 그리고 에러 내용 리포트
- Network 설정 : 나의 아이피 정보 및 포트
- 미디어 설정 : 브라우저간의 사용가능한 비디오 코덱 및 해상도 정보

Sinaling Flow(jun : 주최)

네트워크 정보 교환

RTCPeerConnection을 통해 onicecandidate 핸들러 생성

핸들러는 네트워크 candidates(비디오, 오디오 트랙 전송)가 가능해지면 실행됩니다.(Call 버튼 클릭)

pc = new RTCPeerConnection(configuration)

// send any ice candidates to the other peer
pc.onicecandidate = function (evt) {
    signalingChannel.send(JSON.stringify({ candidate: evt.candidate }))
}

// once remote stream arrives, show it in the remote video element
pc.onaddstream = function (evt) {
    remoteView.src = URL.createObjectURL(evt.stream)
}

Jun는 candidata data를 시그널링 서버(WebSocket, fetch)를 통해 DuDu에게 전달
DuDu는 받은 candidate의 정보를 addIceCandidate를 통해 해당 peer에 추가
- setRemoteDescription이 설정 시작
- signalingstatechange 이벤트가 발생하고 offer 확인
- setRemoteDescription의 마무리되면 addIceCandidate를 통해 cadidate를 추가
  - 넘어오는 트랙에 따라 오디오 하나, 비디오 하나
- createAnswer를 통해 시그널링 서버를 통해 sdp 정보를 전달한다.
- 전달 후 setLocalDescription을 통해 DuDu의 dsp를 설정하고 addIceCandidate를 통해 candidate를 추가한다.

미디어 정보 교환

Jun는 RTCPeerConnection를 통해 createOffer(callback)를 호출한다
- 콜백안에는 Jun의 sdp(미디어 설정)을 setLocalDescription에 설정
  - icegatheringstatechange : gathering
- 시그널링 서버를 통해 생성된 offer를 DuDu에게 전달
DuDu는 받은 Jun의 sdp정보를 setRemoteDescription에 설정
DuDu는 createAnswer()에 Jun으로 부터 전달받은 RemoteDesc를 실행하여 Local Session 생성
DuDu는 본인의 sdp를 setLocalDesciption에 설정하고 answer를 전달
Jun은 받은 answer로 받은 sdp를 setRemoteDescription을 설정
- iceconnectionstatechange : checking / connectionstatechange : connection
- iceconnectionstatechange : connected / signalingstatechange : stable
- setRemoteDescription Success
- addIceCandidate를 통해 candidate 추가
- icegatheringstatechange : complete
- iceconnectionstatechange : connected ⇒ complete로 변경후 지속적인 데이터 통신

네트워크/미디어 정보교환은 동시에 완료된다

그 이후 Peer간 직접 주고 받게 된다

ICE Framework

ICE
- Peer들과 연결하기 위한 최적의 경로를 찾으려 합니다.(SDP를 결정한 후!)
- 동시에 가능한 모든 것을 시도하며 동작하는 가장 효율적인 선택을 골라냅니다.
- 대기시간이 적은 UDP 찾는 과정 때문에 스트리밍이 연결 초반에는 영상 품질이 낮을 수 있다
- ICE는 첫번째로 다음과 같이 디바이스 운영체제로와 네트워크 카드로부터 획득한 호스트 주소를 사용하여 연결을 생성하려 합니다. 만약 실패한다면 (디바이스가 NAT 뒤에 있을 것입니다.) ICE는 STUN 서버를 이용하여 외부 주소를 획득하고 그것이 실패한다면 TURN 중계 서버를 통해 트래픽을 라우팅합니다.
STUN : NAT 뒤에 있는 피어들이 연결 가능하도록 자신들의 공용주소와 포트를 찾는다.
TURN : NAT와 방화벽으로 인해 직접연결이 안되면 TURN 서버를 사용 - 릴레이 하는 STURN서버 - 모든 정보를 중계하기 때문에 최악의 경우만 사용

useRef 활용법

Mon, 07 Sep 2020 00:00:00 GMT

UseRef의 current?

정의
- 컴포넌트 내에서 mutable한 객체를 만들어 사용 할 수 있다.
- ref Object의 추가된 값은 current 키의 값으로 업데이트된다.
- mutable한 객체는 자바스크립트 Heap객체처럼 사용가능하다
- React는 상태가 변경되면 렌더링이 되고나서 상태의 값을 알 수 있기떄문에 불필요한 렌더링을 막을수 있다.
- 컴포넌트 안에서 조회 및 수정 할 수 있다(생명주기 포함)
- 리엑트는 변경상태를 감지하지 않는다.(값 - mutable object)이 변경되도 리렌더링 되지 않는다.)

사용법

DOM 선택

input태그의 ref property에 넣으면 ref.current 객체안에 input에 대한 속성이 입력된다.
ref.current안에는 input에 대한 이벤트 / 속성이 있어 focus()같은 처리를 할 수 있다.

const Focus = () => {
    const InpuRef = useRef()
    const getFocus = () => {
        InpuRef.current.focus()
    }
    return (
        <>
            <button onClick={getFocus}>Focus</button>
            <input type="text" ref={InpuRef} />
        </>
    )
}

클래스의 Instance filed 처럼 사용

useRef()의 매개변수로 하나의 객체를 초기화해서 사용가능(current 키의 value)
useRef()의 current 객체에 접근해서 언제든지 조회/수정/입력이 가능하다
리엑트는 이러한 ref객체의 변경을 감지하지 못한다.
setTimeout, setInterval을 통해서 만들어진 id
외부 라이브러리를 사용하여 생성된 인스턴스(socket)
스크롤 위치에서 사용된다.

//setTimeout / setInterval 사용
function Timer() {
    const intervalRef = useRef()

    useEffect(() => {
        const id = setInterval(() => {})
        intervalRef.current = id
        return () => {
            clearInterval(intervalRef.current)
        }
    })
}
// 외부 라이브러리 사용
const socket = useRef()

useEffect(() => {
    socket.current = io.connect('http://localhost:8000')
    navigator.mediaDevices
        .getUserMedia({ video: true, audio: true })
        .then((stream) => {
            setStream(stream)
            if (userVideo.current) {
                userVideo.current.srcObject = stream
            }
        })
    socket.current.on('yourID', (id) => {})
}, [])

주의사항

렌더링 중에 ref를 설정하면 사이드 이펙트 발생

useRef()의 initialState는 생성자를 호춣하면 매번 ref객체가 생김

function Image(props) {
    // ⚠️ 렌더링 마다 계속해서 생성
    const ref = useRef(new IntersectionObserver(onIntersect))
}

function Image(props) {
    const ref = useRef(null)

    // ✅ 한번만 생성
    function getObserver() {
        if (ref.current === null) {
            ref.current = new IntersectionObserver(onIntersect)
        }
        return ref.current
    }

    // 필요시 getObserver() 호출
}

코드스피치 강의 ES6+OOP 1회차 정리

Sun, 06 Sep 2020 00:00:00 GMT

Function & OOP

SUB ROUTINE FLOW

FLOW
- 메모리에 적재된 명령어가 순차적으로 ALU에 의해서 실행되는 과정
- 한번 실행이 되면 중간에 멈출 수 없고, 명령어가 다 실행되기전까지 절대 멈출수 없다(Sync / 동기화명령)
ROUTINE
- Flow 그 자체를 의미한다
- 메모리에 적재된 명령어를 한번만 실행하는게 아니라 여러번 실행시킬 수 있는것
SUB ROUTINE
- 현재 루틴안에서 일어나는게 아니라 밖에서 일어나면 다 서브 루틴(상대적인 관점)
- 메인 플로우에서 서브루틴(하나의 또다른 루틴)를 호출시키면 flow가 이동하여 서브루틴안에 있는 명령어들을 다 실행하고 메인 플로우로 돌아오는게 특징
- 서브루틴을 호출할때는 메인 플로우에서 다시 돌아올 지점을 같이 넣어서 호출한다(돌아올것)
MAIN FLOW vs SUB FLOW
- Main FLOW - Main routine이 실행되는 것
- Sub FLOW - Main flow에서 Sub Routine이 실행 되는것

// Main FLOW
const routineA = (b) => {
    const result = b * 2
    console.log(result)
    return result
}

const routineB = (d) => {
    const result = d * 3
    console.log(result)
    return result
}

const b = 10,
    d = 30
const a = routomeA(b) // Sub Flow
console.log(a)
const c = routineB(d) // Sub Flow
console.log(c)

Communicate with routine

MAIN FLOW와 SUB FLOW사이에서의 통신
- 위치 : MAIN FLOW에서 SUB Routine을 호출한 위치(되돌아올 장소)
- 값 : 인자(메인 ⇒ 루틴)와 리턴 (루틴 ⇒ 메인)

const routineA = (arg) => {
    const result = arg * 2
    return result
}
const b = 10,
    c = 20,
    d = 30
const b = routineA(a) + routineA(b) + routineA(c)

연산자로 인한 스택 메모리 생성
- A만 실행시 문제가 없지만, A의 리턴값과 B의 리턴값을 가지고 연산을 하려고 하면 A 와 연산자를 저장
- B가 실행되고 돌아올때까지 이전 결과값과 연산자를 메모리(스택)를 만들놔야지 연산 진행(아니면 성립불가)

Sub Routine in Sub Routine

서브루틴 안에 서브루틴
- 서브루틴 상에서 또다른 서브루틴을 호출하려고 하면 지금 현재의 상태를 Snap Shot을 찍어서 가지고 있고 호출한 루틴이 끝나면 다시 돌아와 그 값을 이용하여 서브루틴을 끝낸다.
Keep
- 무리한 call stack은 stackover로 프로그램이 멈춘다.(크롬은 대략 100번 정도)
- 이러한 Keep을 call stack이라고 부른다 ⇒ Stack Memory에 저장
- Snap shot을 찍어서 저장하는 과정을 Keep이라고 부른다

const routineA = (arg) => routineB(arg * 2) // routineB를 호출하기전 routineB에 대한 상태값을 저장해놔야한다.
const routineB = (arg) => arg * 3

const b = 10
const a = routineA(b)

Value vs Reference

Primitive Value
- 메모리상에서 값이 복사되는 형태
- 루틴으로 전달될때 값이 복사되서 넘어가기 때문에 의존성이 낮아진다(사이드 이펙트가 없다)
Reference Value
- 공유된 객체의 포인터를 전달(전달된 객체를 바꾸면 원래값을 바꾼다??? 값은 원래값 하나뿐)
- 레퍼런스로 넘어온 경우, 포인터를 건드리지 않고 readonly로만 사용하고 만들어서 사용해라(사이드 이펙트)

const r = ({ a, b, ...rest }) => rest

const p = { a: 3, b: 4, c: 5, d: 8 }

const a = r(p)

p !== a

Structured Design

높은 응집도, 낮은 결합도

높은 응집도
- 배열을 처리하기 위해서 다른 메소드를 부르는게 아니라 배열의 내장메소드를 이용한다
- Math 내장객체는 높은 응징도(수학에 관련된 모든 함수)
- 어떤 함수를 처리하기 위해 여러 함수를 호출하는게 아니라 하나의 함수만으로 처리한다
낮은 결합도
- 어떤 함수를 사용하려면 앞에 40개의 함수를 가지고 있어야 해 높은 결합도
- Math 함수 ⇒ floor round (필요할때 가져다가 쓴다 = 의존성이 제로)

COUPRING

정의
- 의존성보다는 더 포괄적인 의미를 가지고 있다.
- 의존성은 방향을 가지고 잇다. 커플링은 둘이 의존을 양쪽에서 하고 있다.
CONTENT - 강결합
- A클래스 속성 v가 변경되면 즉시 B클래스 깨짐
- B클래스에서 A클래스의 속성을 다 볼수 있기 때문에
- 이렇게 대부분이 코딩을 하고 있으며, 하면 안된다.

const A = class {
    constructor(v) {
        this.v = v
    }
}

const B = class {
    constructor(a) {
        this.v = a.v
    }
}

const b = new B(new A(3))

COMMON - 강결합
- COMMON이란 전역객체, 공유객체, 인메모리에 안에 있는 객체를 의미한다.
- 1:1 구조를 COMMON으로 바꾼것일 뿐

const Common = class {
    constructor(v) {
        this.v = v
    }
}

const A = class {
    constructor(c) {
        this.v = c.v
    }
}

const B = class {
    constructor(c) {
        this.v = c.v
    }
}

const a = new A(new Common(3))
const b = new B(new Common(3))

External 강결합
- 이 결합은 피할수 없다 정복해야 한다
- member.json에 의존적이라서 어쩔수 없다
- swagger 같은 것이 있어서 키랑 응답값에 대해서 정의
- 키가 없거나 다를 경우를 대비해서 throw 처리를 해줘야 한다.

const A = class{
	constructor(member){
		this.v = member.name;
	}
};

const B = class{
	constructor(member){
		this.v = memver.age
	}

fetch('/member')
	.then(res => res.json())
	.then(member => {
					const a = new A(member);
					const b = new B(member);
	})

Control 강결합
- A 클래스 내부의 변화는 B클래스의 오작동을 유발
- flag를 기준으로 proces를 처리하기 때문에 문제가 많다.
- 팩토리 패턴에서 자주 발생되는 문제이며, 전략 패턴으로 해결해야한다.

const A = class {
    process(flag, v) {
        switch (flag) {
            case 1:
                return this.run1(v)
            case 2:
                return this.run2(v)
            case 3:
                return this.run3(v)
        }
    }
}

const B = class {
    constructor(a) {
        this.a = a
    }
    noop() {
        this.a.process(1)
    }
    echo(data) {
        this.a.process(2, data)
    }
}

const b = new B(new A())
b.noop()
b.echo('test')

STAMP - 강결합 or 유사약결합
- A와 B는 ref로 통신함 ref에 의한 모든 문제가 발생할 수 있음
- A클래스는 단순히 add라는 행위에 초점을 둬야 하는데 객체로 받아오면 객체의 key가 변경이되면 오류 발생
- B클래스에서는 count 그 값자체만 주고 update는 본인이 해야함

const A = class {
    add(data) {
        data.count++
    }
}

const B = class {
    constuctor(counter) {
        this.counter = counter
        this.data = { a: 1, count: 0 }
    }
    count() {
        this.counter.add(this.data)
    }
}

const b = new B(new A())
b.count()
b.count()

DATA - 약결합
- A와 B는 value로 통신함 모든 결합문제에서는 자유로워짐
- 하지만 A클래스에서 당연히 값이 온다고 가정했기 떄문에 데이터에 대한 커플링 발생
- 루틴간 통신하려고 할때는 값으로!!

const A = class {
    add(count) {
        return count++
    }
}

const B = class {
    constuctor(counter) {
        this.counter = counter
        this.data = { a: 1, count: 0 }
    }
    count() {
        this.data.counter = this.counter.add(this.data.count)
    }
}

const b = new B(new A())
b.count()
b.count()

COHESION

COINCIDENTAL(우연히)

Util 같이 메소들이 아무런 관계가 없음. 다양한 이유로 수정됨

const Util = class {
    static isConnect() {}
    static log() {}
    static isLogin() {}
}

LOGICAL
- 사람이 인지할 수 있는 논리적 집합. 언제나 일부만 사용됨.
- 동등한 지식을 가진 사람이 인식할 수 있는 수준의 응집된 함수의 모임
- 도메인이 일반적이고 누구든지 알수있다면 진행(Math, URL)
```
const Math = class {
    static sin(r) {}
    static cos(r) {}
    static random() {}
    static sqrt(v) {}
}
```

TEMPOLAL

시점을 기준으로 관계없는 로직을 묶음.
관계가 아니라 코드의 순서가 실행을 결정
역할에 맞는 함수에게 위임해야 함.

const App = class {
    init() {
        this.db.init()
        this.net.init()
        this.asset.init()
        this.ui.start()
    }
}

PROCEDURAL

외부에 반복되는 흐름을 대체하는 경우
순서정책변화에 대응불가

const Account = class {
    login() {
        p = this.ptocken()
        s = this.stoken(p)
        if (!s) this.newLogin()
        else this.auth(s)
    }
}

COMMUNICATIONAL
- 하나의 구조에 대해 다양한 작업이 모여있음.
- 배열처럼 push/pop/slice 하나의 목적
- 하나의 객체가 하나의 역할을 수행하는것이 좋다.
```
const Array = class {
    push(v) {}
    pop() {}
    shift() {}
    unshift() {}
}
```

SEQUENTIAL

실행순서가 밀접하게 관계되며 같은 자료를 공유하거나 출력결과가 연계됨
프로시져와 커뮤니케이션의 복합체, chainning 함수

const Account = class {
    ptocken() {
        return this.pk || (this.pk = IO.cookie.get('ptocken'))
    }
    stoken() {
        if (this.sk) return this.sk
        if (this.pk) {
            const sk = Net.getSessionFromProken(this.pk)
            sk.then((v) => this.sk)
        }
    }
    auth() {
        if (this.isLogin) return
        Net.auth(this.sk).then((v) => this.isLogin)
    }
}

FUNCTIONAL
- 역할모델에 충실하게 단일한 기능이 의존성 없이 생성된 경우

결합도와 응집도는 서로가 다른 방향으로 향하게 되므로 둘 사이의 밸런스를 찾는 것이다.

추가

순수한 함수를 만들때 this가 필요해?
- 함수는 에로우로 만들자
- 메소드는 클래스 문법으로 만들자
자바스크립트는 리턴값을 정의하지 않으면 무조건 undefined가 된다
undefined의 두가지
- new Array(10) ⇒ 길이가 10인 undefiend
- var a = undefined ⇒ 값이 undefiend
es6부터는 객체의 키값이 선언한 순서대로 순서를 보장한다

Context

Thu, 03 Sep 2020 00:00:00 GMT

정의

React 컴포넌트 트리 안에서 데이터를 쉽게 공유하는 방법중 하나이다.

컴포넌트가 깊어지면 props를 내리는데 리소스 증가에 따라 사용되는 방법 중 하나

// context 사용전
class App extends React.Component {
    render() {
        return <Toolbar theme="dark" />
    }
}

function Toolbar(props) {
    return (
        <div>
            <ThemedButton theme={props.theme} />
        </div>
    )
}

class ThemedButton extends React.Component {
    render() {
        return <Button theme={this.props.theme} />
    }
}

// context 사용 후
const ThemeContext = React.createContext('light')

class App extends React.Component {
    render() {
        return (
            <ThemeContext.Provider value="dark">
                <Toolbar />
            </ThemeContext.Provider>
        )
    }
}

// props 과정이 사라짐
function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    )
}

// 컨텍스트를 활용하여 value 접근
class ThemedButton extends React.Component {
    static contextType = ThemeContext
    render() {
        return <Button theme={this.context} />
    }
}

Context를 사용하기 전에 고려할 것

Context에 의존성이 높아지므로 재사용이 어려워짐.

context보다는 컴포넌트 합성으로 문제점 해결(props.children)

IOC(제어의 역전)를 이용하여 내리는 props 줄일 수 있으므로, props를 여러개 내리지 않아도 된다.

장점 : props는 수는 줄고 최상위 컴포넌트의 제어력이 커지기 떄문에 클린코드 작성 가능
단점 : 복잡한 로직이 상위에 있기 때문에, 상위컴포넌트는 복잡성이 증대되고, 하위 컴포넌트는 필요이상으로 유연해져야 한다.

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// 이제 이렇게 쓸 수 있습니다.
<Page user={user} avatarSize={avatarSize} />
// ... 그 아래에 ...
<PageLayout userLink={...} />
// ... 그 아래에 ...
<NavigationBar userLink={...} />
// ... 그 아래에 ...
{props.userLink}

Context가 변경이되면, 모든 하위 컴포넌트가 리렌더링이 된다.

한번 변경이 되면 향후 변경되지 않은 데이터를 Context로 활용한다(테마, 데이터캐쉬)

API

React.createContext

const MyContext = React.createContext(dafaultValue)

export const ThemeContext = React.createContext({
    theme: themes.dark,
    toggleTheme: () => {},
})

Context 객체 생성하며, dafaultValue는 값이 없을때 사용되며, 객체( = 값)에 값과 메소드를 넣어 사용할수도 있다.

Context.Privider

<MyContext.Provider value={}>

Context를 통해 전달될 값을 넣어주며 Provider 하위 컴포넌트에게 value가 변경될때마다 전파한다.
value가 변하면 props가 변하기 때문에 불필요한 렌더링이 발생한다(shouldComponentUpdate 미적용)
- Object.is를 통해서 Context의 값 변경 여부를 체크한다(true/false)

Class.contextType

class MyClass extends React.Component {
    componentDidMount() {
        let value = this.context
    }
    componentDidUpdate() {
        let value = this.context
    }
    componentWillUnmount() {
        let value = this.context
    }
    render() {
        let value = this.context
    }
}
MyClass.contextType = MyContext

contextType을 통해 class내에서 사용하는 Context를 지정할 수 있다

모든 컴포넌트의 생명주기 메서드에서 사용가능하다.

class MyClass extends React.Component {
    static contextType = MyContext
    render() {
        let value = this.context
        /* context 값을 이용한 렌더링 */
    }
}

public class field 문법으로 contextType을 지정할 수 도 있다.

Context.Consumer

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

Provider의 하위 트리에서 사용할 수 있는 Cosumer 컴포넌트입니다.
Consumer 컴포넌트의 children은 함수형으로 작성되면 props는 해당 Context의 value값이다.
value값이 없다면, defaultValue가 적용이 된다.

Context.displayName

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools

개발자 도구에서 손 쉽게 확인하려고 라벨링을 해 줄 수 있다.

Context의 value값이 reference일때!!

value 값이 객체이면 매번 새로운 객체가 생성되므로 Provider가 렌더링될때마다 리렌더링 된다
state를 객체로 생성하고 객체를 가리키고 있는 포인터를 넘기자

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: { something: 'something' },
        }
    }

    render() {
        return (
            <Provider value={this.state.value}>
                <Toolbar />
            </Provider>
        )
    }
}

Hook - useContext

함수형 컴포넌트에서 Context를 사용할때 사용
가장 가까이 있는 Context.Provider의 value를 리턴한다.
React.memo, shouldComponentUpdate를 사용해도 최적화가 안되며 리렌더링이 된다

const themes = {
    light: {
        foreground: '#000000',
        background: '#eeeeee',
    },
    dark: {
        foreground: '#ffffff',
        background: '#222222',
    },
}

const ThemeContext = React.createContext(themes.light)

function App() {
    return (
        <ThemeContext.Provider value={themes.dark}>
            <Toolbar />
        </ThemeContext.Provider>
    )
}

function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
        </div>
    )
}

function ThemedButton() {
    const theme = useContext(ThemeContext)
    return (
        <button
            style={{ background: theme.background, color: theme.foreground }}
        >
            I am styled by theme context!
        </button>
    )
}

Code Split

Mon, 31 Aug 2020 00:00:00 GMT

왜? 해야하나요?

CRA는 웹팩을 통해 여러개로 나누어진 파일(js, css)를 하나의 파일로 만든다(번들링)

이유
- 여러번 요청하는게 아니라 한번에 파일을 받게 한다
- 데이터기반으로 빠르게 UI를 변경시켜 사용자에게 좋은 UX를 제공한다(서버 요청 없이 페이지 변경)
문제점
- 번들링 된 파일이 거대해지면, 첫페이지를 로딩시간이 길어진다.
- 번들링 된 파일에는 사용자가 불필요한 코드가 포함되어 있다.

방법

1. import()

CRA는 기본적으로 Webpack에 codesplit이 설정이 되어있다.
Webpack이 번들링할때, import()문을 만나면 나누어서 번들링을 한다.

// 예제 1)
// 하나의 파일로 번들링이 된다.
import { add } from './math';

console.log(add(16, 26));

// dynamic import를 통해 파일이 분리가 된다.
import("./math").then(math => {
  console.log(math.add(16, 26));
});

// src/func.js

export function func() {
    console.log('hello world!')
}

// 예제 2)
// src/App.js
import React, { Component } from 'react';

class App extends Component {
    handleClick = () => {
        import('./func').then(result => {
            result.func();
            // 물론 export defualt로 내보내주면 result.default()가 됩니다.
        });
    };
    render() {
        return (
            <div className="App">
                <button onClick={this.handleClick}>불러오기</button>
            </div>
        );
    }
}

export default App;

//예제 3)
// 함수와 달리 컴포넌트는 바로 호출하는 것이 아니고
// 있을 때 호출해야 하는 조건을 달아줘야 하므로 state로 관리
import React, { Component } from 'react';

class App extends Component {
    state = {
        Test: null
    };

    handleClick = () => {
        import('./Test').then(result => {
            this.setState({
                Test: result.default
            });
        });
    };

    render() {
        const { Test } = this.state;

        return (
            <div className="App">
                <button onClick={this.handleClick}>불러오기</button>
                {Test && <Test />}
            </div>
        );
    }
}

export default App;

또한 바벨 이용시 import를 통해서 코드스플릿이 되게 플러그인을 설치해준다.

// $ npm install babel-plugin-syntax-dynamic-import
// .babelrc
{
    "plugins": ["syntax-dynamic-import"]
}

2. React.lazy, Suspense

React.lazy / Suspense는 아직 서버 사이드 렌더링을 미지원(공식 문서)
React.lazy는 default export를 가진 모듈을 반환한다.
Suspense 컴포넌트의 children으로 React.lazy이다
- fallback을 통해 해당 컴포넌트 로딩화면을 구현 할 수 있다.
- 하나의 Suspense 컴포넌트 하위에 여러개의 React.lazy 컴포넌트를 구성할 수 있다.

import React, { Suspense } from 'react'

const OtherComponent = React.lazy(() => import('./OtherComponent'))

function MyComponent() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <OtherComponent />
            </Suspense>
        </div>
    )
}

3. Loadable Components

React.lazy보다 지원범위가 넘음

Loadable 지원범위

사용법은 lazy와 동일하며, 두번째 매개변수로 fallback 구현 or fallback Props로 구현가능

import React, { Suspense } from 'react'
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'), {
    fallback: <div>Loading...</div>,
})

function MyComponent() {
    return (
        <div>
            <OtherComponent fallback={<div>Loading...</div>} />
        </div>
    )
}

4. 만약 Loading 중에 깜박거리는 느낌을 받는다면 ?

화면 전환을 지연시킨다(500ms의 지연을 겪게하여 오히려 편한 UX를 제공할 수 있다.)

// npm inatall p-min-delay

import React, { Component } from 'react'
import loadable from '@loadable/component'
import pMinDelay from 'p-min-delay'

const Test = loadable(() => pMinDelay(import('./Test'), 500), {
    fallback: <div>Loading...</div>,
})

class App extends Component {
    state = {
        visible: false,
    }

    handleClick = () => {
        this.setState({
            visible: true,
        })
    }

    render() {
        const { visible } = this.state
        return (
            <div>
                <button onClick={this.handleClick}>댓글보기</button>
                {visible && <Test />}
            </div>
        )
    }
}

export default App

언제 사용할까?

Router 기반으로 CodeSplit 구현

import React, { Suspense, lazy } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const Home = lazy(() => import('./routes/Home'))
const About = lazy(() => import('./routes/About'))

const App = () => (
    <Router>
        <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Suspense>
    </Router>
)

주의사항

React.lazy 같은 경우 default exports만 지원(공식문서)
names exports를 사용할 경우 default로 이름을 재정의해야 한다.

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";

코드스피치 강의 ES6+ 6회차 정리

Sun, 30 Aug 2020 00:00:00 GMT

Sync vs Async

Sync

실행결과를 return '결과'로 반환
프레임이 적재된 순서대로 실행하는것

Async

콜백(전달된 함수)을 통해 리턴값을 반환
콜백함수의 위치에 따라 goto 처럼 이동하게 위/아래로 이동하기 떄문에 디버깅하기 어려움(코드가 날라다닌다)
Sync 로직 플로우(위에서 아래 / 좌에서 우)가 익숙하기 때문에 이해하기 어렵다

Generator

Breaking Block

블록이 다 실행시키전(결과를 반환)까지 정지를 시킬 수 없다
break를 통해 블록을 중지 시킬 수는 있지만, 우리가 원하는게 아니다
Generator Suspend를 통해 Flow를 정지시킬 수 있다(Yield 전)
next() 함수를 통해 CoRoution(정지된 상태(지역변수)로 이동)를 실현 ⇒ 다시 Flow 진행

const infinity = (function* () {
    let i = 0
    while (true) yield i++
})()

console.log(infinity.next())
console.log(infinity.next())

Blocking Evasion

Time Slice Manual
- 로직과 알고리즘이 함께 있어 어느 부분이 변경이 된다면 손이 많이 간다
- 클로져로 인해(자유변수 사용) 로직을 이해하는 것이 힘들다.

// async nonBlock
const looper = (n, f, slice = 3) => {
    let limit = 0,
        i = 0 // 자유변수
    const runner = (_) => {
        while (i < n) {
            if (limit++ < slice) f(i++)
            else {
                limit = 0
                requestAnimationFrame(runner)
                break
            }
        }
    }
    requestAnimationFrame(runner)
}

looper(10, console.log)

Time Slice Manual Using Generator
- Coroutine으로 인해 상태를 유지하기 때문에 지역변수로 사용하여 이해가 쉽다.
- Flow Control과 Logic을 분리하여 유지보수에 용이하다(관심사 분리)

//데이터 로직
const loop = function* (n, f, slice = 3) {
    let limit = 0,
        i = 0 // 지역변수 (제네레이터의 지역변수)
    while (i < n) {
        if (limit++ < slice) f(i++)
        else {
            limit = 0
            yield
        }
    }
}
//실행기
const executor = (iter) => {
    const runner = (_) => {
        iter.next()
        requestAnimationFrame(runner)
    }
    requestAnimationFrame(runner)
}

executor(loop(10, console.log))

Why use Generator
- 제어 구조를 분리해서 재활용 할 수 있다(같이 있으면 재사용 불가)
- Generator Block Braking 속성을 이용하면
  1. 실행기와 핵심로직을 분리
  2. 자유변수보다는 지역변수를 이용하여 로직을 단순화

Generator + Async + Executor(컨슈머 용법 활용)

데이터 로직

const profile = function*(end, next, r){
    const userid = yield $.post('member.php', {r}, next);
    let added = yield $.post('detail.php', {userid}, next);
    added = added.split(",");
    end({userid, nick:added[0], thumb:added[1]});

profile 함수가 호출이 되면 yield까지 실행이 된다($.post()를 호출하고 나서 결과값을 가진 상태)
하지만 userid로 할당이 되지 않는다(next()를 호출하기 전까지)

실행기

const executor = (end, gene, ...arg) => {
    const next = (v) => iter.next(v)
    const iter = gene(end, next, ...arg)
    iter.next()
}

executor(console.log, profile, 123)

$.post가 결과값을 next로 넘겨주게 된다.
값을 yield로 할당하면서 next()를 호출한다. 다음 yield까지 실행하게 된다.

좋은점?
- 콜백지옥에서 탈출
- 모든게 다 지역변수로 관리된다
- 모든게 다 동기로직으로 변경되었다.

Promise

Passive Async Controll(수동적)

콜백을 보낼 수는 있지만 언제 올지는 모른다.

병렬로 진행될 수 있음에도 불구하고 순서 때문에 한번에 하나 씩 진행

useid를 받아와야지 프로필 정보를 받아올 수 있다.

// 언제 결과가 올지 몰라 에러가 발생할 수도 있다
let result

$.post(url1, data1, (v) => {
    result = v
})

$.post(url2, data2, (v) => {
    result.nick = v.nick
    report(result)
})

순서가 있는 콜백은 어쩔 수 없다. 현재 이 방법 뿐이다

Active Async Controll(능동적)

호출하기 전까지는 발동하지 않는다(Promise)
Promise는 then을 호출해야지만 결과를 얻는다
요청이 완료되지 않으면 결과를 못받는다.
중요한 점은 then을 호출하기 전까지는 상태가 완료되도 실행되지 않는다.

Why Promise

실제적인 비동기 행위와 콜백의 처리를 완전히 분리 할수 있다.
- 프로미스가 어떤 작업의 상태인지 우리 관심에서 멀어졌다.(then만 기억)
병렬/병행성 작업을 진행하여 순서가 없는 작업에 대해서 처리 할 수 있다.
- promise1, promise2는 동시에 요청이된다. 그래서 all,race, some이 나온것임
But!! 순서 잇는 로직은 적용하지 못하고 callback으로 진행, 처음부터 구조를 잘 짜야한다.
우리는 흐름제어만 신경쓰자!!

let result;
const promise = new Promise(r => $.post(url1, data1, r));
promise.then(v => {
	return = v;
})

const promise1 = new Promise(r => $.post(url1, data1, r));
const promise2 = new Promise(r => $.post(url2, data2, r));
promise1.then(result => {
	promise2.then(v => {
		result.nick = v.nick;
		report(result);
	})
});

Generator + Promise

Promise 또한 비동기적인 작업 일 수 밖에 없다
next()가 사라지면서 상태에 대한 관심이 분리되어 자기 참조 무결성이 더욱더 강해졌다.
초반에 생성을 할 수 있는 데이터를 일체 받고(병렬) 나중에 조립하는 로직만 프로미스로 하자

const profile = function*(end, r){
	const userid = yield new Promise(res => $.post('member.php', {r}, res));
	let added = yield new Promise(res => $.post('detail.php', {userid}, res));
	added = added.split(',');
	end({userid, nick:added[0], thunb:added[1]});

const executor = (end, gene, ...arg) => {
	const iter = gene(end, ...arg);
	const next = ({value, done}) => {
		if(!done) value.then(v => next(iter.next(v));
	};
	next(iter.next());
};

executor(console.log, profile, 123)

Async Await

제네레이터의 실행기가 언어적으로 내장되어 있어서 사용된다
하지만 동기적으로 작동하기 때문에 병렬안되나, await promise.all(()로 진행할 수 있다.
AWAIT PROMISE = SYNC
코드가 어떻게 줄어졌는지? 어떤게 내장되어 있는지? 고민해보자.

const profile = async function(end, r){
	const userid = await new Promise(res => $.post('member.php', {r}, res));
	let added = await new Promise(res => $.post('detail.php', {userid}, res));
	added = added.split(',');
	end({userid, nick:added[0], thunb:added[1]}
);

profile(console.log, 123)

추가사항

자바스크립트 함수는 내부의 문법 오류가 없다면 모든 변수를 실행 시점에 평가한다.
const / let을 사용하면 tdz를 생성해서 호이스팅을 방지한다.
콜백에 대해서 순서없는 프로그래밍을 짜라 리엑티브 프로그래밍

Page visibility, Geolocation, File, Web Timing

Sun, 30 Aug 2020 00:00:00 GMT

Page visibility

정의
- 사용자가 현재 페이지를 보고 있는지? 조작하고 있는지 확인하는 api
사용법
- document.hidden
  - 페이지가 백그라운드 상태인지 확인
  - 브라우저가 최소화되있거나, 탭이 비활성인 경우 true
- document.visibility
  - visible : 탭이 활성상태이며, 페이지가 부분적으로 보이는 상태
  - hidden : 브라우저가 최소화되거나, 탭이 비활성
  - prerender : 사전 렌더링 상태
- visibilitychange : visibility 상태가 변화면 이벤트가 발생

Geolocation

정의
- 사용자의 위치정보를 받아 올 수 있는 api
- 사용자에게 위치정보를 요청할 수 있는 알람이 보여지면 승인을 해야지 조회가능
사용법
- getCurrentPostion(position => console.log(position)
  - 매개변수로 위치(경도, 위도, 정확도 등)가 주어진다.
- watchPosion
  - getCurrentPostion와 같이 매개변수로 위치정보가 주어지며, 위치가 변화면 계속해서 호출된다.
- clearWatatch(watchPosion 식별자)
  - watchPosion을 해제할 수 있다.

File

정의
- 파일 입력요소에 접근가능하게 하는 api
- <input type="file"/>에서 사용자 올린 파일에 대해서 정보(name, size, type, lastModified)를 알 수 있다.
- File 인터페이스는 Blob 인터페이스를 확장한것이다.
사용법
- e.target.files : input에 사용자 올린 파일에 대해서 접근 할 수 있다.
- reader = new FileReader(); << reader.result로 함수의 결과값을 들어간다.
  - readAsArrayBuffer(file) : 파일을 읽어 arrayBuffer를 result 프로퍼티에 저장
  - readAsBinaryString(file) : 바이너리 데이터로 변경하여 result 프로퍼티에 저장
  - readAsDataURL(file) : 데이터 URL을 result 프로퍼티에 저장
  - readAsText(file, encoding) : 덱스트로 읽고 result에 저장하며, 두번째 인자로 인코딩 타입을 받는다.

예제

 <input type="file" id="fileInput"/>
 <img id="inputImg" width="300"/>

 // 파일을 읽는다.
 const sourceImageUrl = document.getElementById("fileInput").files;

 // 읽은 파일을 사진의 src로 적용한다.
 document.getElementById('merged-image').src = window.URL.createObjectURL(sourceImageUrl[0]);

 // FormData를 생성해서 file을 넣어줘 post로 요청한다.
 // FormData는 XML용으로 특수한 객체 형태라서 console.log로 볼수 없다.
 // for - of , ...으로 확인가능하
 const data = new FormData(t)
 data.append('file', sourceImageUrl[0])
 fetch("localhost", {
    headers: {
      enctype: "multipart/form-data",
    },
  method: 'POST',
  body : data
})

Web Timing

정의
- 브라우저 내부의 측정 시스템에 접근하는 api
사용법
- performance.memory : 브라우저 메모리 확인
- performance.navigator : 리다이렉트 횟수, 처음 접속이지, 새로고침인지, 앞/뒤로 갔는지 확인
- performance.timing : 페이지 이벤트에 대한 타임스탬프가 나와있다.

접근성(accessibility, a11y)

Fri, 28 Aug 2020 00:00:00 GMT

정의

장애인, 비장애인을 포함한 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것을 의미한다.
스크린리더를 이용하는 사람, 키보드만 이용하는 사람들이 사용 할 수 있게 만드는 것
React는 HTML을 이용하여 구현가능

표준 및 지침

WCAG(Web Content Accesibility Guidlines)
WAI - ARIA
1. aria-* HTML 속성을 이용하여 구현을 한다.
2. JSX에서는 다른 HTML 속성과는 다르게 hypen-case로 구현(원래는 camelCase)

시맨틱 태그를 이용하여 웹 접근성 기초 구현

<div> 로만 컴포넌트를 구현을 할 경우 웹 접근성의 의미가 없으므로 시맨틱 태그를 활용하여 작성한다.

<ul>, <ol> 태그 같은 리스트 태그 같은 경우 <React.Fragment> 태그를 이용한다.

import React, { Fragment } from 'react'

function ListItem({ item }) {
    return (
        <Fragment>
            <dt>{item.term}</dt>
            <dd>{item.description}</dd>
        </Fragment>
    )
}

//Fragment의 props가 없으면 <></> 태그로 사용가능

function Glossary(props) {
    return (
        <dl>
            {props.items.map((item) => (
                <ListItem item={item} key={item.id} />
            ))}
        </dl>
    )
}

export default Glossary

`<Input> <textarea>` 같은 폼태그

form 컨트롤 같은 경우 입력창이기 때문에 스크린리더가 읽을 수 있는 속성이 없기 때문에 <label> 태그를 이용한다.

JSX에서는 for가 아니고 htmlFor로 작성하여한 한다.

<label htmlFor="namedInput">name:`</label>
`<input id="namedInput" type="text" name="name"/>

성공 / 오류 (W3C 기준)

<h1> 태그로 해당 process의 상태를 표시
<title> 태그를 이용(<tiitle> 태그는 스크린 리더가 제일 먼저 태그이기 때문이다.)
window.alert을 이용
페이지 상단에 오류에 대한 정보를 보여준다(role='alert'으로 작성해주어야 한다)
input 태그 옆으로 바로 성공/오류에 대한 상태를 표시해준다.
입력을 하고 있는 중이라면 5번과 같이 태그 옆에 해당 입력값의 상태를 표시해 준다.

포커스 컨트롤

키보드 포커스와 포거스 윤곽선

키보드(tab , shift+tab)을 이용하여 포커스를 이동시킬 수 있다.
포커스 이동시, 태그의 윤곽성이 표시된다.

원하는 콘텐츠로 건너뛸 수 있는 방법

<a> 태그를 이용하여 원하는 콘텐츠로 이용가능

<a href="hello">Go to Hello </a>

<h1 id="hello">Hello </h1>

시멘틱 태그를 이용하여 페이지 영역을 나눈다.

ref를 이용한 포거스 관리

ref를 props로 이용

function CustomTextInput(props) {
    return (
        <div>
            <input ref={props.inputRef} />
        </div>
    )
}

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.inputElement = React.createRef()
    }
    render() {
        return <CustomTextInput inputRef={this.inputElement} />
    }
}

// 이제 필요할 때마다 포커스를 잡을 수 있습니다.
this.inputElement.current.focus()

react-aira-modal 이용하여 포커스 관리

마우스와 포인터 이벤트

마우스/포인터 이벤트를 기준으로 컴포넌트를 작성한다면, 키보드 사용자의 사용성을 해칠 수 있다.

해결책은 focus를 이용하여 해결한다(onBlur = 포커스를 잃었을때, onFocus = 포커스를 가질때)

class BlurExample extends React.Component {
    timeOutId = null
    state = {
        isOpen: false,
    }

    onClickHandler = () => {
        this.setState((currentState) => ({
            isOpen: !currentState.isOpen,
        }))
    }

    // setTimeout을 사용해 다음 순간에 팝오버를 닫습니다.
    // 엘리먼트의 다른 자식에 포커스가 맞춰져있는지 확인하기 위해 필요합니다.
    // 새로운 포커스 이벤트가 발생하기 전에
    // 블러(blur) 이벤트가 발생해야 하기 때문입니다.
    onBlurHandler = () => {
        this.timeOutId = setTimeout(() => {
            this.setState({
                isOpen: false,
            })
        })
    }

    // 만약 자식이 포커스를 받으면, 팝오버를 닫지 않습니다.
    onFocusHandler() {
        clearTimeout(this.timeOutId)
    }
    render() {
        // React는 블러와 포커스 이벤트를 부모에 버블링해줍니다.
        return (
            <div onBlur={this.onBlurHandler} onFocus={this.onFocusHandler}>
                <button
                    onClick={this.onClickHandler}
                    aria-haspopup="true"
                    aria-expanded={this.state.isOpen}
                >
                    Select an option
                </button>
                {this.state.isOpen && (
                    <ul>
                        <li>Option 1</li>
                        <li>Option 2</li>
                        <li>Option 3</li>
                    </ul>
                )}
            </div>
        )
    }
}

ARIA를 이용한 웹 접근성 향상

스크린 리더 및 보조기기가 aria 속성을 읽어 컴포넌트의 현재!! 실시간!!의 상태를 알 수 있다
aria속성을 이용하여 태그의 역할, 속성, 상태를 표시한다.(aria-selected="true/ false")
tabindex 속성을 이용하여 포커스를 조정 할 수 있다(-1 : 받지 않을때, 0 : default, 1 : 우선적으로)
role 속성을 이용하여 div 태그를 시멘틱 태그처럼 사용 가능

기타 사항

언어 설정

lang 속성을 이용하여 스크린 리더가 어떤 언어로 해석하고 읽어줄지 설정 가능

문서 제목 설정

react-helmet을 이용하여 title 및 meta 태그 설정가능

색대비

저시력자가 볼 수 있도록 충분한 색 대비를 주어야 한다.

테스트

키보드로 테스트
1. 마우스의 연결을 해제하세요.
2. Tab과 Shift+Tab을 사용해 이동하세요.
3. Enter를 사용해 엘리먼트를 활성화하세요.
4. 메뉴와 드롭다운과 같은 일부 엘리먼트는 필요하다면 키보드 방향키를 사용해 조작합니다.
voice over를 사용하여 테스트

React 디버깅에 대해...

Thu, 27 Aug 2020 00:00:00 GMT

How to Debugging with React

debugger keyword

debugger 키워드에서 flow가 멈춘다.
개발자도구 Soures 탭에 해당 파일과 debugger 키워드 위에 어떻게 값이 들어오는 확인가능
현재 Call Stack / Scope(Local / Global 변수 리스트 확인가능)을 확인가능
또한 Console의 상태는 현재 컨텍스트이기 때문에 Scope에 있는 변수를 적어 바로바로 확인가능

Breakpoint로는 작동이 안되는데...내가 못하는것 같지만 이것으로도 충분하다고 판단

export default handleActions(
    {
        [increment]: (state, action) =>
            produce(state, (draft) => {
                debugger // 이부분에서 플로우가 스탑이 된다.
                draft.number += action.payload.number
            }),
        [DECREMENT]: (state, action) =>
            produce(state, (draft) => {
                draft.number -= action.payload.number
            }),
    },
    initialState
)

React-devtools extension 사용
- Components 탭을 이용해 props와 state를 확인하고 변경가능하다.
  - component 우측에 있는 3가지 버튼을 활용하면 좋다
  - Inspect : 어떤 HTML 태그를 렌더링 됬는지 Element 태그로 이동하여 알려준다.
  - Debugging : 해당 컴포넌트의 정보를 console 태그에 알려준다.
  - View Soure : 해당 컴포넌의 jsx 파일 알려준다.
- Profiler 탭을 이용해서 최적화가 됬는지 안됬는지 확인할 수 있다.
  - useMemo, useCallback을 쓰고 나서 얼마나 효과가 있는지 확인 할 수 있다.
  - 녹화버튼을 눌러 해당 컴포넌트의 렌더링/이벤트을 녹화하여 시간을 알려준다.
Redux-devtools extension 사용
- store 설정시 extension을 활성화 시킬 수 있다.
- 액션 및 페이로드에 대한 상태를 직관적으로 확인 할 수 있으며, 타임머신 기능을 통해 그 전 상태로 돌아갈 수 있다.
- 자세한 사용법은 인터넷을 참고하면 좋을것 같습니다.

코드스피치 강의 ES6+ 5회차 정리

Sun, 23 Aug 2020 00:00:00 GMT

FLOW

정의 : 컴퓨터가 프로그램을 적재하고 실행시키는 것
특징 : 플로우는 실행 중 관여할수 없다.
- 컴퓨터는 프로그램을 끝나기 전까지는 관여할 수 없다.
- 할 수 있는것은 플로우 컨트롤 여기로 비켜라 저기로 비켜라
- BLOCK : 실행이 완료되기전까지 제어권을 넘기지 않는다.
- NON-BLOCK : 제어권이 바로 회복되는 것을 논 블록킹이라고 부른다.

BLOKING

플로우는 기본적으로 블로킹이다.
모든 흐름제어가 끝나야지 제어권을 반환한다.
cpu는 그 사이 다른 명령을 내릴 수 없다.
자바스크립트에서 큰 json을 파싱을 시키면 화면이 멈친다.

for (const i of (function* () {
    let i = 0
    while (true) yield i++
})())
    console.log(i)

// Process terminated due to long running script
// script timeout

이 명령은 무한루프이기 때문에 에러가 발생한다.
브라우저가 계속해서 점유하고 있어 플로우를 제거해 버린다.
기본적으로 5초 이상으로 제어권을 가지고 있으면 해당 플랫폼이 죽여버린다.
현대 os는 이러한 기능을 공통적으로 가지고 있어서 지속적으로 점유를 하고 있으면 프로세스를 죽여버린다.
안드로이드 / 아이폰 OS는 통화나 메세지가 우선적으로 처리해야하기 때문에 제어권을 프로그램에게 주어지지 않는다.

BLOCKING FUNCTION

일반적으로 블로킹을 애기하는 것은 함수를 기준으로 애기한다(점유하는 시간만큼 블로킹을 일으키는 함수)

const f = (v) => {
    let i = 0
    while (i++ < v);
    return i
}
f(10) // 블로킹 함수
f(10000000000000) // 블로킹 함수

시간이 오래걸린다고 블로킹 함수가 아니고, 기본적으로는 모든것은 블로킹 함수이다.
블로킹 함수가 지속적으로 브라우저의 제어권을 가지고 있으면 종료가 되기 때문에 제한조건을 생각해야 한다.
블로킹 함수 - 제한조건
- 배열 순회, 정렬 - 배열크기에 따라
- DOM 순회 - DOM의 하위구조에 따라
- 이미지 프로세싱 - 이미지 크기에 따라

BLOCKING EVASION(블로킹 피하기)

정의

컴퓨터에서 어떠한 작업을 피할때는 Evasion을 사용한다.
독점적인 cpu점유로 인해 모든 동작이 정지됨
- 블로킹상태(루프..) 시각적인 데이터가 없으므로 클라이언트는 좋지 못한 ux를 제공
- 고객은 0.1초안에 원하는 상태로 변경되지 못하면 불안함을 느낌.
- sumit 버튼을 수십번 눌러 에러 발생(꼭 막아줘야 한다)
타임아웃체크에 의해 프로그램이 강제 중단됨(현대 os / brower 동일)
블록킹의 조합을 예측할 수 없음
- 블록 연쇄(함수(함수...)) 작업으로 인해 생긴 블록은 어디서 블록이 생긴지 모른다.
Bloking은 피할 수 없다.

Bloking은 관리해야 할 대상이고 분산 시켜야 할 대상이다.

순차적인 실행

3개의 프로그램이 있다면, 첫 프로그램이 실행이 완료되고 다음 프로그램을 실행 시킨다

시분할 운영체제의 동시 실행

첫번째 프로그램이 실행 중에 cpu가 제어권을 뺏어 다음 프로그램을 실행시켜 동시에 실행시킨 것처럼 한다.
Context Switching : 프로그램 실행 중 해당 자원과 코드를 저장해 놓고 다른 프로그램을 실행하는 것

순차적이 시분활 실행보다 빠른데 왜 사용할까?

동시작업 선호(네이버 검색하면서, 멜론 음악도 듣고, 카카오톡 채팅도 하고)
머신파워의 발전에 따라 컨텍스트 스위치 비용을 신경안써도 된다
다중 코어로 하나의 코어에 하나의 프로그램을 실행시켜도 속도의 문제 없음

프로세스와 쓰레드

프로세스 : 하나의 프로세스 == 실행 환경
쓰레드 : 프로세스 안에서 또 하나의 프로세스를 만든다(또 하나의 시분활 대상)

자바스크립트 thread

MAIN UI THREAD
- 화면을 그려준다
- 자바스크립트 코드 실행
BACKGROUD THREAD
- ajax 같은 네트워크 통신(브라우저 별로 백그라운드 쓰레드 숫자는 제한)
WEB WORKER THEAD
- 자바스크립트로 통제할 수 있는 백그라운드 쓰레드를 만들 수 있다
블록킹을 피하는 방법!! 이런 쓰레드로 작업을 나누어준다!!!

Time SLICING

정의
- 블록킹의 시간 단위를 줄여 바로 제어권이 반환되게 한다
- requestAnimationFrame을 활용하여 해결한다
- requestAnimationFrame의 매개변수를 화면 갱신 하기 전에 호출
- 프레임 : 브라우저에서 자바스크립트가 실행되는 프로세스의 단위

메뉴얼 버전 : 실행 시킬 함수를 판단하여 프레임을 넘겨줄 기준을 조작

const looper = (n, f, slice = 3) => {
    let limit = 0,
        i = 0
    construnner = (_) => {
        while (i < n) {
            if (limit++ < slice) f(i++)
            else {
                limit = 0 //계속해서 조건을 초기화 시켜 블로킹의 시간을 제어한다.
                requestAnimationFrame(runner)
                break
            }
        }
    }
    requestAnimationFrame(runner)
}

자동 버전
- performace.now를 활용하여 계속해서 제한조건을 확인한다(한 프레임당 5초 미만이 제한조건
- performace.now()은 브라우저에서 어플레이케이션이 실행되고 나서 시간을 측정한다.

const looper = (n, f, ms = 5000, i = 0) => {
    //한 프레임은 5초 이내로 작동 이상이면 화면 멈춤
    let old = performance.now(),
        curr
    construnner = (_) => {
        while (i < n) {
            curr = performance.now()
            if (curr - old < ms) f(i++)
            else {
                old = curr //계속해서 조건을 초기화 시켜 블로킹의 시간을 제어한다.
                requestAnimationFrame(runner)
                break
            }
        }
    }
    requestAnimationFrame(runner)
}

WEB WORKER

자바스크립트를 실행하는 메인 쓰레드 UI쓰레드인데, 별도의 쓰레드를 만들수 있다(멀티 쓰레드!!!)
작동방식은 멀티쓰레드 패턴의 워커 쓰레드를 따르고 있다.
Web Worker에는 캔버스 객체, ajax 객체가 있다
Web Worker가 블록이 걸려도 메인 UI는 영향을 주지 않는다.
원시값만 갈 수 있다. 객체가 간다면 메인 쓰레드에서도 접근 할 수 있기 때문이다.
별도의 js 파일로 존재해야 한다.

Atomics 객체를 이용하여 객체를 전달 할 수 있다.(진행 중인 쓰레드가 완료되기 전까지 다른 접근 불가)

const backRun = (f, end, ...arg) => {
    // 별도의 js파일이 존재해야 하지만 바이너리 파일로 변환하여 전송시켜준다.
    const blob = new Blob([`onmessage =e=>postMessage((${f})(e.data));`], {
        type: 'text/javascript',
    })
    const url = URL.createObjectURL(blob)
    const worker = new Worker(url)
    worker.onmessage = (e) => end(e.data)
    worker.onerror = (e) => end(null)
    worker.postMessage(arg)
}

backRun((v) => v[0] + v[1], console.log, 3, 5)

정리

블로킹을 피하는 방법은 논 블로킹이다(서브루틴이 즉시 플로우 제어권을 내놓는것)
순차에 무관한 더욱 더 안정적인 알고리즘을 짠다(병행성 프로그램...)

SYNC ASYNC

정의

Block/NoNBlock의 주요 관점은 제어권을 바로 받을 수 있냐?

SYNC : 서브루틴이 즉시 값을 반환

const double = (v) => v * 2
console.log(double(2)) //4

ASYNC : 서브루틴이 콜백을 통해 값을 반환

const double = (v, f) => f(v * 2)
double(2, console.log) //4

SYNC

BLOCK (nomalAPI, legacyAPI)

const sum = (n) => {
    let sum = 0
    for (let i = 1; i <= n; i++) sum += i
    return sum
}
sum(100)

NON BLOCK(old API ⇒ IOCP, Future, img.complete..)

블록킹이 될 가능성이 높다!!!(사용하지 말자.. 초급개발자는 오류를 발생률이 높다? )
서스펜션 패턴 : 두개의 쓰레드가 한쪽은 생산하고 한쪽은 감시하는 것

const sum = n= >{
	const result = {isComplete:false};
	requestAnimationFrame(_=>{
		let sum = 0;
		for(let i = 1; i <= n; i++) sum += i;
		result.isComplete = true;
		result.value = sum;
	});
	return result;
};
const result = sum(100);
while(!result.isComplete);  //여기서 계속 멈춤 error
console.log(result.value);

ASYNC

BLOCK(함정 ⇒ 무조건 피해야한다)

const sum = (n, f) => {
    let sum = 0
    for (let i = 1; i <= n; i++) sum += i
    return f(sum)
}
sum(10, console.log)
console.log(123) //55 → 123

NON BLOCK(modern API)
- 콜백으로 짜는 이유???
  - 값으로 받으면 그 값에 대한 처리를 해주는 코드를 써야되고, 그 값을 다시 이용하려면 중복 발생
  - 콜백은 하나의 함수안에 값을 처리할 함수를 캡슐화해서 몇번이나 재사용 가능
  - 소비하는 측의 로직을 관리하기 위해 캡슐화를 시켜놓은게 콜백이다!!!
```
const sum = (n, f) => {
    requestAnimationFrame((_) => {
        let sum = 0
        for (let i = 1; i <= n; i++) sum += i
        f(sum)
    })
}
sum(10, console.log)
console.log(123) //123 → 5
```

SIMILAR ASYNC-BLOCK

미루기 패턴 (다음 프레임으로 미룬다) - 안티 패턴

const sum = (n, f) => {
    let sum = 0
    for (let i = 1; i <= n; i++) sum += i
    return f(sum)
}
sum(1000000, console.log)
console.log(123) //55 → 123

백그라운드로 어마어마한 쓰레드를 보내면 쓰레드 고갈로 죽는다 - 안티패턴

const backRun = (f, end, ...arg) => {
    const blob = new Blob([`onmessage =e=>postMessage((${f})(e.data));`], {
        type: 'text/javascript',
    })
    const url = URL.createObjectURL(blob)
    const worker = new Worker(url)
    worker.onmessage = (e) => end(e.data)
    worker.onerror = (e) => end(null)
    worker.postMessage(arg)
}

const f = (v) => {
    for (let i = 1, sum = 0; i <= v[0]; i++) {
        sum += i
    }
    return sum
}
leti = 1000
while (i--) backRun(f, console.log, 100000)

About Tree Shaking

Sat, 22 Aug 2020 00:00:00 GMT

##Tree Shaking

정의
- 사전적 의미 : 나무 흔들기(== 나무를 흔들어 불필요한 가지나 나뭇잎을 떨어뜨린다.)
- 자바스크립트 의미 : 자바스크립트 실행환경에서 죽은 코드(사용되지 않는 코드) 제거
- ES2015의 import / export와 관련이 있다.(모듈을 통해서 파일을 관리 / Common JS 안된다.)
- Webpack or Rollup 같은 번들러를 통해 자동으로 tree shaking을 실시한다.(추가적인 설정 및 import를 잘 사용하면!!)
번들링을 하는 이유?
- 우리가 추가한 패기지들을 한꺼번에 불러올려면 하나의 파일로 만드는게 낫다
  - HTTP/1에서는 파일을 요청하는 리소스가 크기 때문에 한 파일을 만들어서 요청하는게 좋다.
  - 하지만 HTTP/2가 나오면서 크게 상관이 없어진다...
- 번들링을 한 파일을 압축하는게 더 효율적이다(따로 따로 압축하는것 보다 / 이유 : 통신하기 위해)
- 번들링을 하면서 불필요한 공간(화이트 스페이스 등등)과 불필요한 모듈의 함수를 제거할 수 있다.(공간 절약)
  - ES2015는 모듈 시스템으로 하나의 tree로 변환시켜 쉽게 treeShaking을 할 수 있다.

설정 및 방법

Babel이 CommonJS로 만들어주는 것을 막아주자

// .bablerc
  {
    "presets": [
      ["env", {
        "modules": false
      }]
    ]
  }

// package.json
 {
   ...
   "babel": {
     "presets":["env", { "modules": false}]
   }
 }

SideEffect 막아주자

만약 사용하지 않는다고 모듈이라고 해도 다른곳에서 사용되서 삭제가 되면 문제가 생기기 때문이다.

// package.json
 {
   // sideEffect는 ['경로/파일명']을 통해서도 추가 가능
   "sideEffects": false,
   "scripts": {
    "build": "webpack --mode production" // production에서만 가
   },
   "babel": {
     "presets":["env", { "modules": false}]
   }
 }

Import 구문 사용법

// math.js
export function square(x) {
    return x * x
}

export function cube(x) {
    return x * x * x
}

export default { square, cube }

// index.js
// 필요한 함수만 꺼내서 써야지 번들링 될때 그 함수를 포함해서 만들어준다.
import { cube } from './math.js' // 번들링을 하게 되면 cube 함수만 포함
import * as Math from './math.js' // 번들링을 하게 되면 cube, squre 함수가 포한된다.

전/후 파일 크기 차
- tree shaking 전
- tree shaking 후

webpack 관련 기타사항

번들링된 파일명에 대해서
- vandors.[hash].js : React 관련 third-party 라이브러리
- main.[hash].js : 우리가 작성한 코드

plugin 추가 방법 및 chunkhash 추가 방법

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.[chunkhash].js',
        path: path.resolve(__dirname, 'public'),
    },
    mode: 'production',
    plugins: [new HtmlWebpackPlugin()],
}

Arguments 객체에 대해서

Fri, 21 Aug 2020 00:00:00 GMT

Arguments

정의
- arguments 객체는 함수로 전달된 인수(매개변수)
- iteratable 인터페이스를 구현하고 있어 rest 연산자를 이용하여 전달되는 매개변수를 배열로 만들 수 있다.
- 함수 내부에서 사용되는 내부 변수이다.
- arguments객체는 index로 접근 할 수 있다.
속성
- callee()
  - 호출 당한 함수!!! arguments 객체가 속해 있는 함수를 부른다.
  - 재귀함수 호출시 사용된다.
- length : 함수에서 전달된 매개변수 총 수를 나타낸다.

사용법

function foo(a) {
    arguments.length // 6
    arguments.callee // foo 함수!!!  == foo()랑 같다.
}

foo(1, 2, 3, 4, 5, 6)

function bar(...arg) {
    return arg // [1,2,3]  arguments 객체는 rest 연산자를 통해 배열로 구현 가능
}

bar(1, 2, 3)

// rest 연산자, 매개변수 초기값 할당을 사용하면 매개변수가 있을시 arguments 객체를 변경해도 반영 안됨
function bar(a = 1) {
    arguments[0] = 100
    return a
}
bar(10) // 10

//반대로 나머지, 매개변수 초기값이 없으면 arguments 객체가 변경되면 반영
function zoo(a) {
    arguments[0] = 100
    return a
}
zoo(10) // 100

callee보다는 함수명을 적어주는 게 좋다
- namespace를 오염시키지 않는다.
- this가 변하지 않는다.
- arguments 객체를 접근하는 것보다 좋다(리소스가 적다)
써야 할 경우?
- 함수도 값이기 때문에 변수로 찾아 실행을 한다.
- 아래와 같이 새로운 변수에 함수를 대입하고 이전 변수를 해제시키면 함수를 찾지 못해 에러를 발생한다.
- 그때 함수명 대신에 arguments.callee()를 이용하면 에러를 방지 할수 있다.
```
function fac(num){
 if(num <= 1){
  return 1;
 }else{
   return num * fac(num - 1);
 }
}

var anotherFac = fac;
fac = null;
anotherFac(10) // TypeError fac is not a function

function fac(num) {
 ....
 else{
  return num * arguments.callee(num - 1)
 }
}
```
caller와 callee
- 함수 호출 규약에 따라 컴퓨터 과학에서 어떻게 서브루틴(함수)가 호출자로 부터 매개변수를 어떻게 받고 결과를 어떻게 반환하는지 정해놓은것
- caller는 메인함수이고 callee는 그 위에서 실행되는 함수라고 생각하면 되는 callee는 caller를 기억해야 하는 특징이 있다.
- C/C++ 기준으로 설명(정확하지 않음...)
  1. 매가변수를 먼저 메모리에 올린다.
  2. 그 다음 함수를 메모리에 올려서 실행하여 결과를 리턴한다