(수근수근)

react memoization 2 ) React.memo

InformationFarm — Mon, 9 Oct 2023 15:06:41 +0900

1편에서 pure component에 대해서 이야기 했다.

pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서
설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다.

리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다.

React.memo

React.memo pure component를 최적화하는 escape hatch

function Decoration() {
  return (
    <div className="decoration">
      ⛵️
    </div>
  );
}

const PureDecoration = React.memo(Decoration);

export default PureDecoration;

React.memo를 사용해서 우리는 리액트에게 알려줄 수 있습니다

“이 컴포넌트는 pure해! 따라서 동일한 props와 state라면 리렌더링 할 필요 없어! ”

리액트는 이전 스냅샷을 기억하고 있기 때문에, props가 변경되지 않으면 새로운 스냅샷을 만들어서 제공하지 않고 기존의 스냅샷을 전달합니다.

react memoization 1 ) 왜 최적화 툴이 필요한가?

InformationFarm — Mon, 9 Oct 2023 14:24:20 +0900

최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고
좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다.

일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까?

최적화 툴이 만들어진 이유는 다음과 같다.

리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자!

The Basic rule

모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다.
따라서 상위 컴포넌트가 변경되면 모든 하위의 컴포넌트도 재렌더링됩니다.

여기서 많은 사람들이 오해하는 부분이 있다.

나 또한 잘못알고 있었고, 리렌더링 자료를 찾다보면 리렌더링 되는 조건을 종종 발견할 수 있다.

props가 변경되면 컴포넌트는 리렌더링 된다! => false

반례를 하나 봅시다.

function Counter() {
  const [count, setCount] = React.useState(0);
  
  return (
    <main>
      <BigCountNumber count={count} />
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Decoration />
    </main>
  );
}

Decoration component는 count에 어떠한 영향도 받지 않지만, count상태가 변경됨에 따라 재렌더링됩니다.

상태가 변경여부가 관계없이 리렌더링이 됩니다.. 리액트 팀은 왜 리렌더링이 되도록 해야했을까요?

⇒ 리액도팀 100%확실할 수 없기 때문입니다. (사용자들이 제대로 이해하고 사용한다고 장담하기 어렵죠...그게 접니다.. )

우리는 항상 pure한 리액트 컴포넌트(같은 props를 넣으면 값은 UI가 생성이되는)를 만들고 싶습니다!

하지만 현실세계에서는 impure한 컴포넌트를 만들기 무진장 쉽습니다!

아래 코드처럼요!

function CurrentTime() {
  const now = new Date();

  return (
    <p>It is currently {now.toString()}</p>
  );
}

리액트팀의 첫번째 목표는 사용자의 UI가 state에 따라 동기화 되는지입니다.

따라서 사용자에게 오래된 UI를 보여주기보다는 불필요한 리렌터링하는 것을 선택한것이지요!

따라서 props와 rerender링은 상관이 없습니다!

우리는 상태값이 변경하면 해당 컴포넌트를 리렌더링하고 이는 트리 아래로 종속되어 리렌더링 되는 것일 뿐입니다!

리액트가 이런 허용을 했을때는 이를 최적화 할 수 있는 툴도 만들었을겁니다.

(우리는 일단 사용자 UI가 fresh한 것이 목적이니, 너희가 리액트의 cycle에 대해 이해하게 된다면, 직접 우리가 제공하는 툴을 통해 최적화를 시켜!) 이런의도가 아니었을까요? 감히 추측해봅니다...

이것이 React.memo, useMemo, useCallback이며 왜 배워야하는지도 조금은 명확해졌습니다.

다음 글은 React.memo를 왜 사용하는지, 어떻게 사용하는지에 대해서 알아보겠습니다.

useEffect callback함수 async키워드를 쓰면 안되는 이유

InformationFarm — Sun, 8 Oct 2023 15:14:20 +0900

Async Effect Gotcha

gotcha : 프로그래밍에서 문제는 문서화된 대로 작동하지만 호출하기 쉽고 결과가 예상치 못하거나 불합리하기 때문에 직관에 반하고 실수를 거의 유발하는 시스템, 프로그램 또는 프로그래밍 언어의 유효한 구성입니다.

모두 알다시피, await키워드를 사용할 때, async함수 내부여야만 사용할 수 있다.

리액트를 개발하면, useEffect내부에서 비동기 함수를 사용해야하는 일이 꽤나 빈번하다. 특히 컴포넌트가 mount될 때, api를 불러오고 싶은경우가 많을 것이다.(react query, swr을 처음부터 쓰면, 알아서 해줍니다..)

예를 들어보자,

React.useEffect(async () => {
    const response = await fetch(ENDPOINT);
    const json = await response.json();

    setTemperature(json.temperature);
  }, []);

해당과 같이 useEffect를 쓰면 다음과 같은 console waring을 받을 수 있다.

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately.

이유는 다음과 같다. effect의 callback으로 비동기 함수를 사용할 수 없기 때문이다.

해결방법은 다음과 같습니다.

React.useEffect(() => {
  async function runEffect() {
    // ... Effect logic here
  }

  runEffect();

  return () => {
    //  ... Cleanup logic here
  }
}, []);

비동기 함수명을 지을 때 구처젝인 함수의 기능보다 runEffect같은 일반적인 함수명을 할 것은 권합니다.

cleanup함수에 runEffect의 function은 들어가서 안됩니다.(스코프내의 함수임)

그럼 우리는 해결방법은 알게되었습니다.

근데 왜! 비동기함수는 Effect의 콜백함수로 허용이 안될까요?

다시 해결방법을 살펴봐보시면, 왜 비동기 함수로 만들고 호출하고 바로 없애는게 바보같아보입니다.

근데 왜 그렇게 해야할까요?

가장 먼저 분명히 할 것은, 비동기함수는 promise를 반환한다는 것입니다.

for example :

async function quickExample() {
  return 5;
}

const result = quickExample();
console.log(result); // Promise

useEffect에서 반환하기로 우리가 약속한 것은 cleanup함수입니다.

다음 상황을 Effec상황을 봐봅시다.

React.useEffect(() => {
  // Effect logic: start an interval
  const intervalId = window.setInterval(() => {}, 1000);

  // Cleanup logic: stop the interval:
  return () => {
    window.clearInterval(intervalId);
  };
}, []);

우리가 useEffect를 사용할 때, 우리는 cleanup함수를 전달합니다.

리액트는 dependencies가 변경될 때마다 cleanup함수를 호출합니다.

여기서 중간에 비동기함수가 들어가야한다고 가정해봅시다.

React.useEffect(async () => {
  const intervalId = window.setInterval(() => {}, 1000);

  await someLongRunningProcess();

  // Even though we're returning a function, it'll actually
  // return a *promise* that resolves to a function:
  return () => {
    window.clearInterval(intervalId);
  };
});

비동기 함수이니 반환값이 promise가 될 것입니다.

만약 비동기 함수가 작업이 오래 걸리고 있을 때 unmount가 된다면 cleanup함수는 수행되지 않을겁니다.

이런한 어려운 상활을 피하기 위해서 리액트팀은 비동기함수 콜백이 불가능 하도록 결정했을 것입니다.

대신 우리는 비동기함수 로직을 감싸서 사용할 수 있습니다. 해당과 같은 경우는 cleanup함수를 즉시반환이 가능하기 때문에, 잘못된 gotcha를 피할 수 있습니다.

해당 글은 josh강의를 이해하기 위해 일부 정리한것입니다.

datepicker 자동 masking하기

InformationFarm — Thu, 5 Jan 2023 23:51:45 +0900

문제

- 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감

- locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음

해결방법

- datepicker에서 열어둔 props의 customInput을 활용한다.

- 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용
(https://github.com/text-mask/text-mask/tree/master/react)

필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함)

- locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다.

import ReactDatePicker, { registerLocale } from 'react-datepicker';
import { ko, enUS } from 'date-fns/locale';
import MaskedInput from 'react-text-mask';

function DateInput({
  name,
  selected,
  locale = 'en',
  ...rest
}: props) {
  return (
    <Styled.Wrapper>
      <ReactDatePicker
        customInput={
          <MaskedInput
            mask={
              locale === 'ko'
                ? [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/]
                : [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
            }
            guide={false}
          />
        }
        dateFormat={DATE_FORMAT[locale]}
        {...rest}
      />
    </Styled.Wrapper>
  );
}

export default DateInput;

날짜 데이터 유효성

자동으로 -를 넣어주는 것 이상으로 월, 일, 윤년 같은 것을 자동으로 검증해주고 싶다면?

1. text-mask-addons install

yarn add text-mask-addons

https://github.com/text-mask/text-mask/tree/master/addons/#readme

2. createAutoCorrectedDatePipe api를 통해서 autoCorrectedDatePipe반환 뒤 MaskedInput props로 전달
(저는 locale에 따라 다르게 유효범위를 주고있습니다.)

import MaskedInput from 'react-text-mask';
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';


function DateInput({
  name,
  selected,
  size = 'large',
  locale = 'en',
  onSelect,
  onChange,
  ...rest
}: Types.DateInputProps) {

  const autoCorrectedDatePipe = createAutoCorrectedDatePipe(
    locale === 'ko' ? 'yyyy-mm-dd' : 'mm-dd-yyyy',
  );


  return (
    <Styled.Wrapper size={size}>
      <ReactDatePicker
        locale={locale}
        name={name}
        selected={selected ? ""}
        customInput={
          <MaskedInput
            mask={
              locale === 'ko'
                ? [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/]
                : [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
            }
            guide={false}
            pipe={autoCorrectedDatePipe}
          />
        }

이후 찾아보니 mul Input의 유효한값 mask해주는 3rd party library로는 imask 라이브러리를 소개하고 있네요..

imask와 react-text-mask 장단점을 비교해보는 것이 필요해보입니다... !

출처

https://stackoverflow.com/questions/56679242/insert-auto-slash-for-date-in-mm-dd-yyyy-format-for-react-datepicker

Typescript handbook 읽고 정리(Narrowing)

InformationFarm — Thu, 20 Oct 2022 00:53:53 +0900

Narrowing

narrowing 타입을 좁혀나간다 이런 의미같다.. 살펴보자

해당 장에서 타입스크립트가 제공하는 (자바스크립트가 제공하는 키워드이기도 하지만..? 이를 타입스크립트는 narrowing용으로 사용도 하는 것 같다.) Type guards들에 대해서 하나씩 알아보자!

우선 첫 번째 예제를 하나 보여주는데 아래와 같다

function padLeft(padding: number | string, input: string) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
  }
  return padding + input;
}

위의 함수를 보면 일단 자바스크립트 코드처럼보인다. 이 것이 요점인데, 타입스크립트는 타입안정성을 위해 자바스크립트 코드를 최대한 쉽게 작성하는 것을 목표료 한다는 것이다.

타입스크립트는 typeof라는 타입 가드의 형태로 구체적인 유형으로 한번 더 Narrowing해주는 작업을 진행한다. 그럼 type guards인 typeof키워드에 대해서 알아보자

typeof type guards

자바스크립트 typeof를 지원하여 런타임에 우리가 가지고 있는 값의 유형에 대해 정보를 제공한다. TypeScript는 이를 통해 특정 문자열 집합을 반환할 것으로 예상한다.

string
number
bigint
boolean
symbol
undefined
object
function

padLeft에서 보았 듯이, typeof는 JavaScript 라이브러리에서 자주 사용하여 TypeScript는 다른 분기의 유형을 좁히는 것을 이해할 수 있습니다.

TypeScript에서 typeof에 반환되는 값에 대해 체크하는 것이 유형 가드입니다.

타입스크립트는 타입이 다른 값에서 어떻게 동작하는지 인코딩하기 때문에 자바스크립트에서 그것의 기묘함 중 일부를 알고 있다. 아래의 예를 봐보면

function printAll(strs: string | string[] | null) {
  if (typeof strs === "object") {
    for (const s of strs) {
      // Object is possibly 'null'
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  } else {
    // do nothing
  }
}

위의 코드를 보면 Object is possibly 'null' 에러를 내뿜는데, 그 이유는 object타입으로 타입을 좁히면 string[], null이 narrowing이 된다. (null의 타입도 object라는 사실~!)

Truthiness narrowing

진실은 사전에서 찾을 수 있는 단어는 아닐지 몰라도, 자바스크립트에서는 아주 많이 들을 수 있는 단어야.JavaScript에서 조건에 대한 표현식을 사용하는데, 예를 들어 &&, ||, if, ! 등등이 있다.

자바스크립트에서는 if와 같은 분기문으로 해당 조건에 따라 강제분기를 합니다.

0
NaN
“” (empty string)
null
0n(the bigint version of Zero)
null
undefined

위의 값들은 false로 강제되고, 나머지는 다 true로 강제된다.

function printAll(strs: string | string[] | null) {
  if (strs && typeof strs === "object") {
    for (const s of strs) {
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  }
}

코드를 보면 자연스럽게 truthy만 확인함으로써 나머지 에러들을 자연스럽게 제거하는 것을 확인할 수 있다.

typeof 키워드만으로는 Null체크를 못해주기 때문에, 앞에서 falsy를 필터링해주어서 narrowing을 해준다.

truthiness을 boolean을 !부정함으로써 좁히는 것도 방법입니다.

function multiplyAll(
  values: number[] | undefined,
  factor: number
): number[] | undefined {
  if (!values) {
    return values;
  } else {
    return values.map((x) => x * factor);
  }
}

Equality narrowing

TypeScript는 또한 switch 문을 사용하고 ==,! ==, ==, == 및! =와 같은 동등성 검사를 좁은 유형으로 사용합니다.

if (x === y) {
    // We can now call any 'string' method on 'x' or 'y'.
    x.toUpperCase();
          //(method) String.toUpperCase(): string
    y.toLowerCase();
          //(method) String.toLowerCase(): string
  } else {
    console.log(x);
               //(parameter) x: string | number
    console.log(y);
               //(parameter) y: string | boolean
  }
}

타입스크립트는 x,y가 같은 경우는 string이여야 동일함을 알고 있다. 따라서 첫번째 if문에서 타입스크립트는 x,y를 string으로 narrowing합니다. 또한 else문에서는 다양한 경우의 수가 오는 것까지 타입스크립트가 자동으로 추론합니다.

The in operator narrowing

JavaScript에는 개체에 이름이 있는 속성인 in 연산자가 있는지 여부를 결정하는 Type Guard가 있습니다. TypeScript는 잠재타입을 in으로 narrowing하여 고려합니다.

type Fish = { swim: () => void };
type Bird = { fly: () => void };
 
function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    return animal.swim();
  }
 
  return animal.fly();
}

animal에는 Fish와 Bird가 있는데, animal속성에 따라 다르게 move동작을 해야하는데 이럴 때 in을 사용하여 narrowing합니다.

instanceof narrowing

자바스크립트에는 값이 다른 값의 "인스턴스"인지 여부를 확인하는 typeguard 연산자가 있다. 자바스크립트 x 인스턴스에서 foo의 프로토타입 체인이 foo.protype을 포함하고 있는지 확인한다.

예상하셨겠지만, instanceof 또한 타입가드이며 typeScript는 instanceof에 의해 타입을 좁힙니다.

function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toUTCString());
           //(parameter) x: Date
  } else {
    console.log(x.toUpperCase());
          //(parameter) x: string
  }
}

Assignments (할당을 통한 narrowing)

앞서 말했듯이 어떤 변수에 대입하면 TypeScript는 =할당 기준으로 오른쪽을 먼저 해석하여 왼쪽의 타입을 적절하게 좁힙니다.

아래의 코드를 보면 처음에 삼항연산자를 통해서 x를 string과 number로 자동 narrowing을 해줍니다.

이후에 x에 boolean값을 할당하면 x는 처음에 선언한 것만 가능하다고 타입스크립트가 에러를 던져주는 것을 확인할 수 있습니다.

let x = Math.random() < 0.5 ? 10 : "hello world!";  //let x: string | number
x = 1;
console.log(x);   //let x: number
x = true; //불리언 값을 넣으려고 하면 에러가 남!
//Type 'boolean' is not assignable to type 'string | number'.
//처음에 선언한 것만 사용이 가능하다.
console.log(x);
     //let x: string | number

Control flow analysis

지금까지 TypeScript가 특정 분기 내에서 좁혀지는 몇 가지 기본적인 예를 살펴보았다. 하지만 모든 변수에서 살펴보면 if, while, conditional 등을 통해 typeguard를 찾는 것 이상의 일이 있습니다.

⇒ 코드의 흐름에 컨트롤에 따라서 typeguard가 지정이 된다는 의미같다. (잘 모르겠음)

Using type predicates

우리는 지금까지 좁히기를 처리하기 위해 기존 JavaScript 구문과 함께 작업했지만 때로는 코드 전체에서 유형이 어떻게 변경되는지에 대한 직접적인 제어를 원할 수도 있습니다. 사용자 정의 type guard를 직접 정의하기 위해서 is키워드를 통해 제어해줄 수 있습니다.

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

isFish가 일부 변수와 함께 호출될 때마다, TypeScript는 만약 원래 타입이 호환이 되면 해당 변수를 특정 유형으로 좁힙니다.(isFish가 type guard이다)

// Both calls to 'swim' and 'fly' are now okay.
let pet = getSmallPet();
 
if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

Discriminated unions

interface Shape {
  kind: "circle" | "square";
  radius?: number;
  sideLength?: number;
}

위를 보면 문자의 타입을 union을 사용하고있음을 알 수 있다.

위처럼 사용하면 스펠링 오류도 해결할 수 있다.

넓이를 구하기위해서 아래와 같이 사용하면 에러가 난다.

function getArea(shape: Shape) {
  return Math.PI * shape.radius ** 2;
//Object is possibly 'undefined'.
}

반지름이 정의되지 않을 수도 있기 때문에 에러가 난다. shape의 속성에 검사를 수행한다면?

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
//Object is possibly 'undefined'.
  }
}

radius가 옵셔널이기 때문에 없을 수도 있다고 에러가난다. 우리는 위에서 배운 ! 을 사용하여 무조건 undefined가 아니라고 말한다.

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius! ** 2;
  }
}

그런데 이와같은 해결방법은 적절치 않다.

적합한 방법은 아래와 같다

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

→ Shape를 분리하여 필요한 속성에 따라 다르게 분리한다.

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
                      
  }
}

이는 오류를 없앴다! 유니언의 모든 타입이 리터럴 타입을 가진 공통 속성을 가지고 있을 때, 타입스크립트는 그것을 구별되는 유니언으로 간주하고 유니언의 구성원을 좁힐 수 있다.

Discriminated unions 는 이러한 예제 뿐만아니라, 네트워크(클라이언트/서버 통신)를 통해 메시지를 전송하거나 상태 관리 프레임워크에서 돌연변이를 인코딩할 때처럼 자바스크립트에서 모든 종류의 메시징 체계를 표현하는 데 유용하다.

The never Type

범위를 좁힐 때 조합의 선택권을 모든 가능성을 제거하고 남는 것이 없을 정도로 줄일 수 있습니다. 이 경우 TypeScript는 존재하지 않아야 하는 상태를 나타내기 위해 never 유형을 사용합니다.

Exhaustiveness checking (철저한 체크!)

Never 유형은 모든 유형에 할당할 수 있지만, Never 유형은 할당할 수 없다(Never 자체는 제외). 이것은 당신이 좁히기를 사용할 수 있고 스위치 문에서 철저한 점검을 하기 위해 절대 나타나지 않는 것에 의존할 수 있다는 것을 의미한다. 예를 들어, 모든 가능한 경우가 처리되지 않았을 때 절대로 발생하지 않을 모양을 할당하려고하는 getArea 함수에 기본값을 추가하십시오.

type Shape = Circle | Square;
 
function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Shape 타입에 Triangle을 추가하게 되면 타입스크립트는 어떠한 타입도 와서는 안되는 never타입인데 타입이 있다는 에러가 뜨게 된다.

interface Triangle {
  kind: "triangle";
  sideLength: number;
}
 
type Shape = Circle | Square | Triangle;
 
function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
Type 'Triangle' is not assignable to type 'never'.
      return _exhaustiveCheck;
  }
}

Typescript handbook 읽고 정리

InformationFarm — Wed, 5 Oct 2022 23:18:35 +0900

Everyday Types

배열

Array<number> vs number[]
두개의 차이점을 이야기하자만, 전자는 generic syntax고, 후자는 shortand구문으로 제너릭이 필요한 경우 전자를 사용하면 된다.

any

타입스크립트의 틀별한 타입으로, 타입 검사오류의 발생이 되지 않는다.
any를 사용하는 경우 추가적인 타입검사 자체가 비활성화되며 보통 굳이 긴타입으로 정의하는 것이 비효율적일 때 사용한다.

noImplicitAny 설정을 켜놓는 경우는 any를 사용하는 경우 오류를 발생시킵니다. (설정하기 나름이다…)

변수에 대한 타입 표기

아래와 같다 간단..

const name : string = “Mercury”

함수

함수의 주요목적이 입출력인 것처럼 타입스크립트도 입출력의 타입을 지정할 수 있다.

매개변수 뒤에 표기
리턴값 매개변수의 타입 뒤에 표기
- 반환값은 표기하지 않아도 되는게 일반적? 왜..? → return 문을 바탕으로 반환타입이 자동 추론되기 때문,

function getFavoriteNumber(): number {
  return 26;
}

익명함수에서는 어떻게 적용?

함수 호출시 함수가 어떻게 호출될지 알 수 있다면, 매개변수에 자동으로 타입을 부여한다.(이러한 것은 문맥적 타입부여라고 한다.)

객체타입 ({ })

타입을 지정하지 않으면 any로 간주
쉬워서 예시로 대체

// 매개 변수의 타입은 객체로 표기되고 있습니다.
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

선택적인 타입으로 옵셔널로 지정할 수도있는데 프로퍼티 뒤에 ?을 붙여주면 된다.

유니언 타입 ( | )

타입스크립트는 기존 타입을 기반으로 다양한 연사자를 통해 또 다른 새로운 타입을 만들어 낼 수 있다.

사용방법

function printId(id: number | string) {
  if (typeof id === "string") {
    // 이 분기에서 id는 'string' 타입을 가집니다
 
    console.log(id.toUpperCase());
  } else {
    // 여기에서 id는 'number' 타입을 가집니다
    console.log(id);
  }
}

⇒ 두개의 유니언 타입이 동일 메서드를 내장하고 있다면 문맥을 통해 상황을 좁히지 않아도 사용할 수 있다.

타입 별칭

타입이 자주 활용되어 재사용하고 싶거나 이름을 붙이고 싶은 경우 사용한다.

type ID = number | string;

인터페이스

인터페이스를 통한 선언은 객체타입을 만드는 또 다른 방법이다.

interface Point {
  x: number;
  y: number;
}

참고자료 - https://medium.com/humanscape-tech/type-vs-interface-언제-어떻게-f36499b0de50 interface vs type Interface 는 선언 병합이 가능 하지만, Type Alias는 불가능하다.

TypeScript 팀은 개방-폐쇄 원칙에 따라 확장에 열려있는 JavaScript 객체의 동작 방식과 비슷하게 연결하도록 Interface를 설계했습니다.

그래서 TypeScript 팀은 가능한 Type Alias보단 Interface를 사용하고, 합 타입 혹은 튜플 타입을 반드시 써야 되는 상황이면 Type Alias를 사용하도록 권장하고 있습니다.

타입단언 (as)

사용자가 더 타입에 대한 정보를 잘 아니까 너에게 권한을 줄게!의 의미에서 생긴 타입스크립트의 키워드이다.

타입 assertion은 컴파일러에 의해서 제거된다. 따라서 검사는 런타임중에 이루어지지 않는다. 따라서 틀리더라도 예외가 발생하지 않는다.

리터럴 타입

리터럴이란? 리터럴은 변수의 값이 변하지 않는데이터(메모리 위치안의 값)를 의미한다.

타입스크립트에서는 구체적인 문자열과 숫자 값을 지정할 수 있다.

let x: "hello" = "hello";

위와 같은 예시를 보면 딱히? 왜 쓸까? 하는 생각이 든다…

하지만 유니언과 함께 사용한다면?

const direction : "left" | "rigth" |"up" |"down" = "up"

딱 봐도 쓸 곳이 많아보이죠? 필요없는 것은 만들지도 않았을 겁니다.ㅋㅋ

타입스크립트 너는 다 계획이 있구나

리터럴도 추론이 될까요 그럼?

HTTP 흐름 가볍게 이해하기 (1~3까지)

InformationFarm — Wed, 3 Aug 2022 21:59:57 +0900

HTTP이 발전 이해하기

HTTP/0.9

GET메소드만 존재
HTML만 읽을 수 있고 클라이언트 정보 X
하지만 WWW의 근간이 되어 더욱이 발전할 수 있었음

HTTP/1.0

헤더를 통해 클라이언트와 서버 정보 전달이 가능해졌다.
또한, content-type헤더를 통해서 HTML뿐만 아니라, 이미지 동영상같은 다양한 정보를 주고 받을 수 있게 되었다.
POST가 추가되어 클라이언트의 정보를 웹으로 전달할 수 있게 되었다.
content-Encoding을 통해서 클라이언트와 서버간의 압축정보를 공유가 가능해졌다.

HTTP/1.1

HTTP의 첫 번쨰 공식 표준버전이다
GET, POST, PUT, DELETE의 함수를 모두 지원
하나의 TCP 연결을 지속적 연결을 추가함으로 재사용해 많은 콘텐츠 전달
via 헤더로 중계서버 정보 공유, accept헤더로 클라이언트 지원 형식을 알 수 있게 됨
하지만 HOL(Head-Of-Line-blocking)문제를 해결하지 못했다.
- 이는 서버가 응답을 지연하면 나머지의 요청또한 지연이 되는 것을 의미한다.

HTTP/2

보다 개선된 웹프로토콜을 위해 구글이 시작한 SPDY프로젝트이다.
텍스트 방식으 프로토콜 메시지를 binaray format을 사용해 경량화 함
HTTP1.1의 비해 멀티플렉싱, 스트림 우선순위 설정, 헤더압축, 서버 푸시같은 최적화 기능이 추가되었다.
HTTP2.0은 HOC의 문제를 해결했으나 TCP의 HOC문제는 해결하지 못했다.

HTTP

새로운 프로토콜인 QUIC(전송프로토콜)를 사용하는 HTTP의 최상위 버전이다
QUIC는 UDP프로토콜을 채택했고, 구글에서 개발을 하였습니다.
QUIC는 한 번 맺은 QUIC를 최대한 재사용하기 때문에 클라이언트와 서버간의 연결을 만다는 과정의 시간이 대폭 줄어들었다.
하지만 아직은 실험적인 단계이므로 많이 사용하지 않는다.

HTTP/2의 최적화 기술

정리

기존 텍스트 방식을 이진프레임방식으로 바꾸며 프로토콜을 경량화했다.
HTTP요청과 응답의 중복헤더를 걸러 내어 헤더의 크기를 최소화 함
서버푸시를 통해 서버가 미리 빠르게 전송하여 RTT를 최소화 함
구글 SPDY를 통해 최대 55%빠른 앱을 만듬

HTTP/2 의 이진프레임

HTTP2 이전에 요청과 응답은 메세지라는 단위로 구성되어있다.
HTTP/2에서는 메시지 단위 말고도 프레임, 스트림이라는 단위가 푸가되었다.
프레임 : HTTP2통신상 가장 작은 정보 단위이며 헤더나 데이터 중 하나
메세지 : HTTP1과 마찬가지로 응답단위이고 다수의 프레임으로 이루어져있음
스트림 : 클라이언트와 서버 사이의 맺어진 연경을 통해 양방향으로 주고 받는 하나 혹은 복수의 메지시이다.

여러 프레임이 모여 메세지가 되고, 여러개의 메세지가 모여서 스트림이 된다.
큰 데이터는 여러개의 프레임에 나뉘어 전달되는데 멀티플렉싱이 적용되어 순서에 상관없이 전달이 되고 클라이언트는 프레임들을 조림하여 완료하여 완전한 데이터를 만들어 낸다
하나의 TCP연결을 통해 다수의 클라이 언트 요청과 서버의 응답이 비동기 방식으로 이루어지는 멀티플렉싱을 사용되어 HTTP1.1의 HOC문제가 자연스레 해결이 되었다.

멀티플렉싱

파이프라이닝은 선입선출의 방식을 계속해서 사용했기 때문에 HOC가 해결되지 않았다. HTTP멀티플렉싱의 스트림의 유연한 구조로 인해 응답 프레임들은 요청 순서에 상관없이 만들어진 순서대로 클라이 언트에 전달이 가능하다
멀티플렉싱 : TCP 연결상에서 다수의 클라이언트 요청과 서버의 응답이 비동기방식으로 이루어지는 기술을 멀티플렉싱이라 한다.

헤더압축

HTTP1.1까지는 content-Encoding을 헤더를 통한 알고리즘을 사용해 HTTP페이로드를 서버에서 압축했다.
따라서 헤더는 압축없이 그대로 전달이 되는 문제가 있었다.
HTTP2는 클라이언트와 서버사이의 가상테이블을 설정하고 중복되는 헤더값을 테이블에 저장하고 참고하는 방식으로 중복 전달을 제거했다.
클라이언트가 두번의 요청을 보낸다고 가정하면 HTTP/1.x의 경우 두개의 요청 Header에 중복 값이 존재해도 그냥 중복 전송한다. 하지만 HTTP/2에선 Header에 중복값이 존재하는 경우 Static/Dynamic Header Table 개념을 사용하여 중복 Header를 검출하고 중복된 Header는 index값만 전송하고 중복되지 않은 Header정보의 값은 Huffman Encoding 기법으로 인코딩 처리 하여 전송한다.

서버 푸시

클라이언트의 요청이 없이도 서버가 응답을 알아서 보내는 서버푸시 기능이 HTTP2에서 추가되었다.

서버푸시의 대상은 웹서버 관리자나 개발자가 미리정할 수 있다.

추가적인 왕복이 필요하지 않다.

HTTP/3의 최적화 기술 ⛱️

QUIC (새로운 전송계층)

구글에서 개발한 OSI 네번째 계층인 전송계층 프로토콜이다.
Quick UDP Internet Connections를 의미한다.
전달 속도 향상과 더불어 클라이언트와 서버의 연걸 수를 최소화하고 대역폭을 예상해 패킷의 혼잡을 피하는 것이 주요 특징이다
클라이언트가 서버를 한 번이라도 접속을 했다면, 별로의 정보교환 없이 바로 데이터를 보내는 기술을 Zero RTT라고 한다.

UDP로 바꾸는게 성능향상이 되는이유

UDP의 헤더의 크기가 작은만큼 보내는 데이터의 지연을 줄일 수 있습니다.
QUIC 방식이 UDP의 방식으로 Zero RTT(Round Trip Time, 왕복 시간)로 연결에 걸리는 시간이 줄어듭니다.

HTTP/3의 특징

가장 큰 특징은 TCP/IP기반의 레이어 프로토콜인 HTTP를 QUIC위로 이동시켰다는 것이다.
이를 HQ라고 부른다(HTTP over QUIC)

CSS Ecosystem

InformationFarm — Mon, 18 Jul 2022 23:14:51 +0900

Vanilla CSS

장점

도구가 필요하지 않아 덜 복잡하고, 런타임 성능비용이 없음

단점

범위가 지정되지 않는 단점이 있다. 한 곳에 작성한 CSS는 모든 곳에 진행되기 때문에 BEM과 같은 명명법을 통해서 해결해 나갈 수 있으나, 이는.. 엄청난 노력이 필요함
최적의 브라우저 지원을 위해 많은 CSS에 대해서 브라우저의 접두서를 추가해야함
JS와의 공유가 어려움

Sass / Less

Scss는 바닐라 CSS로 컴파일 되는 전처리기 입니다. 중첩, 변수 및 iteration의 기능으로 바닐라 CSS를 커버합니다.

작동방식은 타입스크립트와 비슷합니다.

Less 도 Sass와 방식이 아주 유사한데, 차이점이라고 하면 변수에 지정을 다르게 한다

잠점

for-loop, mixin nesting 같은 강력한 도구가 포함
바닐라 CSS에 비해 좋음

단점

빌드 단계로 인해 속도가 지연 됨
CSS로 검파일 되기 때문에 본질적으로는 전역적으로 유지된다.
빌드시간으로 인해 실시간으로 반영이 안됨 이러한 이유때문에 Sass변수는 CSS변수 만큼 강력하지 않음

Aphrodite

이름이 이쁜데... 처음들어본다 최초의 CSS-in-JS중 하나라고 합니다. Styled-component와 유사하게 보임

import { StyleSheet, css } from 'aphrodite';
function App() {
  return (
    <div className={css(styles.wrapper)}>
      Hello World!
    </div>
  );
}
const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: 'gray',
    minHeight: 200,
    '@media (min-width: 1025px)': {
      fontSize: '1.25rem',
    },
  },
});

장점

CSS 내에서 JS를 사용할 수 있습니다.
자동으로 prefix를 추가해주기 때문에 걱정할 필요가 없다.

단점

빌드단계가 필요
2020년에 새로운 릴리즈가 없고 활발한 프로젝트가아니다.

CSS 모듈

css모듈은 바닐라 css로 작성하고 JS로 가져올 수 있는 도구입니다.

/* App.module.css */
.wrapper {
  background-color: gray;
  min-height: 200px;
}
@media (min-width: 1025px) {
  .wrapper {
    font-size: 1.25rem;
  }

// App.js
import styles from './App.module.css';
function App() {
  return (
    <div className={styles.wrapper}>
      Hello World!
    </div>
  );
}

장점

스코프에 대한 단점을 해결할 수 있다.

단점

css와 js간에 데이터 공유가 어렵습니다.

Single-file components

컴포넌트가 지정된 파일에서 CSS룰 생성하는 방법

큰 이점은 스타일과 마크업이 동일한파일에 작성되어 파일간의 이동이 줄어든다는 점이다.

// Hello.vue
<template>
  <p>Hello World</p>
</template>
<style scoped>
  p {
    background-color: gray;
    min-height: 200px;
  }
  @media (min-width: 1025px) {
    p {
      font-size: 1.25rem;
    }
  }
</style>

styled-components

스타일 컴포넌트도 css-in-JS솔루션이다.

import styled from 'styled-components';
function App() {
  return (
    <Wrapper>
      Hello World!
    </Wrapper>
  );
}
const Wrapper = styled.div`
  background-color: gray;
  min-height: 200px;
  @media (min-width: 1025px) {
    font-size: 1.25rem;
  }
`;

장점

범위지정을 잘 해결하고, 컴포넌트 중심의 아키텍쳐에 잘 맞는다
CSS를 작성하는 것처럼 느껴져서 사용하기 쉽다.
애니메이션 및 전역스타일을 위한 도구를 제공한다.
개발자의 만족도가 높아진다.
SSR을 지원하고 성능이 매우 향상되고 있다.
커뮤니티가 가장 풀부하며 개발이 빨리 이루어진다.

단점

빌드시스템이 빌표하다
주로 리액트 도구기 때문에 다른 프레임워크의 커뮤니티가 적다

이 말고도, Emotion, Tailwind같은 도구들이 많이 생기고 있어 우리가 사용할 수 있는 CSS 도구들은 너무~ 많다.

어떤 도구를 사용하는지는 중요하지 않다! 왜냐면 앞으로도 계속해서 바꿀꺼기 때문에

고집만 하지말자!

[ Rendering Logic2 ] Sticky Positioning

InformationFarm — Sun, 26 Jun 2022 22:26:19 +0900

Sticky Positioning

position : sticky는 스크롤 할 때 요소가 상태적인 위치에서 고정위치로 전환되는 속성입니다.

position : sticky 뿐만 아니라 top, right, left, bottom등 하나 이상을 선택해야 수행이 된다.

Sticky position에는 몇가지 특이한 세부사항이 있는데 이를 살펴보자!

Stays in their box

position : sticky가 자주 간과되는 것은 상위 컨테이너에서 외부 스크롤을 따르지 않는다는 것이다.

고정요소는 상위 컨테이너가 보이는 동안에만 고정이 됩니다.

아래를 보면 스크롤을 내리면 상위 컨테이너에서 벗어나는 것을 확인 할 수 있습니다!

스크롤을 내리지 않았을 때.

스크롤을 내릴 때

만약 스크롤을 내릴 때 어떤 컨텐츠와의 인접성을 유지되게 하고 싶으면 이를 활용하여 개발할 수 있습니다!

아래의 예시를 보면 Section1, 2, 3가 내려도 컨텐츠 옆에 붙어서 유지되는 것을 확인 할 수 있다.

아래의 코드를 통해서 이를 구현할 수 있다.

section h2 {
  position: sticky;
  top: 0;
}

Offset

position value는 top/right/left/bottom이 작동하는 방식에 영향을 준다.

상대 위치지정을 사용하면, 자연스러운 유입 위치에서 이동한다.
절대 위치 지정을 사용하면, 요소를 포함하는 블록의 가장자리에서 멀어진다.
고정 위치 지정을 사용하면 뷰포트 기반으로 요소가 조정이 된다.

아래의 예시처럼 .sticky에 position: sticky;width: 50px; height: 50px;를 주고 각각 다른 공에 top설정을 다르게 지정한 후

스크롤을 내리면 아래의 사진처럼 작동합니다.

Not Incorporeal 무형적이 않다

정적이거나 상대적인 형제가 있는 경우 절대, 고정요소가 존재하지 않는 것처럼 배치된다.

예시를 보는 것이 이해가 쉬운데, 스크롤을 내릴경우 형제 요소들은 고려하지 않고 위로 겹쳐지는 것을 확인할 수 있다.

Horizontal stickiness

고정위치는 거의! 수직 스크롤과 함꼐 사용되지만 반드시 그럴 필요는 없다.

아래는 수평으로의 예이다.

Trouble Shooting

position : sticky 가 적용되지 않는 경우들이 종종있는데, 몇 가지 이유에 대해서 알아보자.

A parent is hiding / mamging overflow

가장 흔한 이유인데 부모요소의 overflow: auto; 가 있는 경우 해당 이슈가 생긴다.

우리가 overflow에 hiddent이나 scroll이나, auto를 설정하는 경우 내부에서의 context만 stick이고 더 큰 context에서는 반영이 되지 않는다.

그 이유는 더 큰 context가 스크롤이 가능할 때만 요소의 sticky가 동작을 한다

position : sticky는 상위 한개의 context에서만 작동하므로, main에 scroll가능하도록 만들던지, 조상 요소의 해당 요소를 붙인다.

The container isn't big enough

sticky요소가 상위 컨테이너내에서 이동할 공간이 있는지 확인을 해라

sticky요소는 뷰포트를 따르기 때문에 상위컨테이너에서 공간이 있는 경우만 sticky요소가 작용한다

The sticky element is stretched

flex, gird속성을 사용한 경우에는 요소가 상위 컨테이너에서 움직일 공간이 없도록 만들기 때문에 sticky요소가 cross축을 따라 늘어나는 것이 가능하다.

뷰포트 가장 자리를 기준으로 요소를 배치하려는 경우 얇은 1px 의 간격이 생긴다. 이것은 화소에 대한 반올림 문제인데

아래의 코드 스니펫으로 이를 해결할 수 있다.

header {
  position: sticky;
  top: -1px; /* -1px instead of 0px */
}

[ Rendering Logic2 ] Fixed Positioning

InformationFarm — Wed, 15 Jun 2022 09:05:10 +0900

Fixed Positioning

fixed positioning은 absolute와 비슷한 역할을 한다.

차이점은 훨씬 반항적이여서 뷰포트에서만 억제가 가능하다.

(viewport는 현재 눈에 보이는 웹사이트의 일부)

가장 많이 쓰이는 이유는 스크롤에 영향을 받지 않기 때문에 고정시킬때 많이 쓰인다.

위의 해당 버튼은 스크롤할 때도 움직이지 않고 고정되어있습니다.

Instead of the closest non-static ancestor, it listens to the “initial containing block”, a box the size and position of the viewport

absolute 로 modal을 만든 것 처럼, fixed 로도 모달같은 오버레이 효과를 줄 수 있습니다.

Absolute와 fixed의 차이점을 보면, 스크롤의 대해서 영향을 받는지 안받는지에 대해서 알 수 있습니다!

(앞으로 modal은 fixed가 좋지 않을까? 생각을 해봅니다....)

The transform exception (변환 예외)

일반적으로 fixed는 viewport 기준으로 배치되지만 한가지 예외가 있습니다!

parent나 grand parent가 transform 속성을 사용하는 경우는 fixed element 에 containing블록이 되어 absolutly-positioned 된다.

기억 할 점은 transform된 부모가 fixed children을 가질 수 없다는 것이다.

이것은 어떤 부모든 해당 속성을 가지고 있으면 자식은 영향을 받기 때문에 자바스크립트 스니펫을 사용하여

fixed가 작동하지 않는 원인을 파악할 수 있습니다!

아래는 해당 스니펫입니다.

const selector = '.the-fixed-child';
function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }
  let parent = elem.parentElement;
  while (parent) {
    const {
      transform,
      willChange
    } = getComputedStyle(parent);
    if (transform !== 'none' || willChange === 'transform') {
      console.warn(
        '  Found a culprit!  \n',
        parent,
        { transform, willChange }
      );
    }
    parent = parent.parentElement;
  }
}
findCulprits(document.querySelector(selector));