6월 3주차 기록

June 18, 2022 • ☕️☕️ 8 min read

weekly

보란듯이 무너졌어… IE

배워가기

리버스 프록시

포워드 프록시의 반대 개념이다. 앱 서버의 앞에 위치하여 클라이언트가 서버를 요청할 때 리버스 프록시를 호출하고, 리버스 프록시가 서버로부터 응답을 전달받아 다시 클라이언트에게 전송하는 역할을 한다.

클라이언트는 애플리케이션 서버를 직접 호출하는 것이 아니라, 프록시 서버를 통해 호출하기 때문에 리버스 프록시는 애플리케이션 서버를 감추는 역할을 하게 된다.

리버스 프록시 뒤에 여러 개의 WAS를 두어서 사용자 요청을 분산할 수 있으며(로드밸런싱), 보안 상의 이유로 서버에 직접 접근하는 것을 막기 위해 DMZ같은 네트워크에 리버스 프록시를 구성하여 접근하도록 할 수 있다.

리버스 프록시의 예시로는 nginx, apache web server 등이 있다.

Ref https://sujinhope.github.io/2021/06/13/Network-프록시(Proxy)란,-Forward-Proxy와-Reverse-Proxy.html

노드 모듈 해석 전략

상대경로일 때 (’/’, ’./’, ‘../’ 세 가지 경우)
- 생각하는 것처럼 찾는다.
절대경로일 때
- package/src/node_modules 에서 찾는다
- 없으면 package/node_modules에서 찾늗다.
- 없으면 node_modules 찾는다.
- 최상위까지 가서 찾아도 없으면 없다고 한다.

리액트 컴포넌트의 state

리액트에서 state를 자식 컴포넌트가 아닌 부모 컴포넌트로 끌어올려 저장하고 자식 컴포넌트는 제어 컴포넌트로 만들어주는 것이 좋다.

부모가 자식컴포넌트의 state 를 요청하는 방식은 버그에 취약하며 리팩토링이 어렵기 때문이다. 또한 state 정의를 부모 컴포넌트에 할 경우 추후 자식 컴포넌트가 1개에서 여러 개로 늘어났을 때에도 자식 컴포넌트 간에 통신이 쉬워지고 부모 컴포넌트와의 동기화가 용이하다.

cypress에서 api intercept하기

cypress에서 api를 intercept하여 alias를 부여하고, 해당 alias에 wait를 걸면 api call을 기다릴 수 있다.

이때 wait에 배열 형식으로 alias를 넣으면 여러 개의 api call을 기다릴 수 있다.

Copy

cy.intercept("/api/...").as("card-attributes");

cy.wait("@card-attributes");
// 배열 : cy.wait(['@alias1', '@alias2', ...]);

cypress clock

cypress의 clock 기능을 통해 setTimeout, setInterval 등 시간과 관련된 함수에 대한 제어권을 cypress로 넘길 수 있다.

Copy

let seconds = 0;

setInterval(() => {
  $("#seconds-elapsed").text(++seconds + " seconds");
}, 1000);
// test.ts
cy.clock();
cy.visit("/index.html");
cy.tick(1000);
cy.get("#seconds-elapsed").should("have.text", "1 seconds");
cy.tick(1000);
cy.get("#seconds-elapsed").should("have.text", "2 seconds");

jest에서도 시간 관련 함수를 mocking하는 기능을 제공한다. jest.useFakeTimers()로 사용할 수 있다.

Ref https://docs.cypress.io/api/commands/clock https://jestjs.io/docs/timer-mocks

객체 key에서 특정 prefix만 골라내기

keyof typeof을 사용하여 객체의 key만 골라낸 후, 그중에서 특정한 prefix를 가진 key만 다시 추출해보자.

Copy

const colorTheme = {
  bg_primary: "blue",
  bg_secondary: "red",
  fill_primary: "blue",
  fill_secondary: "red",
};

type ColorKey = keyof typeof colorTheme;
type BgIncluded = `bg_${string}`;
type BgKeys = Extract<ColorKey, BgIncluded>;

const bg1: BgKeys = "bg_primary";
const bg2: BgKeys = "fill_primary"; // 🚨 Type '"fill_primary"' is not assignable to type 'BgKeys'.

객체의 key들에서 특정 prefix만 골라내고, 해당 prefix를 제거할 수도 있다.

Copy

type Replace<
  T extends string,
  S extends string,
  D extends string,
  A extends string = ""
> = T extends `${infer L}${S}${infer R}`
  ? Replace<R, S, D, `${A}${L}${D}`>
  : `${A}${T}`;

interface ColorSet {
  fill_primary: string;
  fill_secondary: string;
  fill_accent: string;
  bg_accent: string;
}

type Color = keyof ColorSet;
type ColorAsset = Extract<Color, `fill_${string}`>; // fill_primary | fill_secondary | fill_accent
type Result = Replace<ColorAsset, `fill_`, "">; // primary | secondary | accent

`as const` vs `readonly`

객체를 as const로 선언해주면, 객체의 모든 프로퍼티가 readonly로 바뀌게 된다.

Copy

const color = {
  white: "#FFFFFF",
  blue: "#0000FF",
  red: "#FF0000",
} as const;

color.white = "#000000"; // 🚨 Cannot assign to 'white' because it is a read-only property.

readonly는 타입이나 인터페이스에 사용한다.

Copy

type Color = {
  readonly white: string;
  readonly blue: string;
  readonly red: string;
};

const color: Color = { white: "#FFFFFF", blue: "#0000FF", red: "#FF0000" };
color.red = "red"; // 🚨 Cannot assign to 'red' because it is a read-only property.

만약 일부 타입의 속성들만 상수로 만들고 싶다면 해당 타입의 변수에만 readonly를 붙여주면 된다.

JSX.Element props

render props를 사용해 composition 형태로 props를 통해 컴포넌트를 주입받을 때, 컴포넌트의 props에 접근할 수 있다.

prop으로 주입받는 타입을 JSX.Element로 선언하면 props와 type에 접근할 수 있다. 예를 들어, badge.type.displayName으로 접근하면 컴포넌트의 이름을 알 수 있다.

Copy

interface ButtonProps {
  badge?: JSX.Element;
}

const Button = ({ badge }) => {
  const size = badge.props.size;
  return <Button>{badge}</Button>;
};

<Button badge={<Badge size={14} />} />;

`window.location.href` vs `history.push`

window.location.href
- 새로운 HTTP call을 만든다 (새로고침 O)
- 앱 상태 유지 불가
history.push
- 새로운 HTTP call을 만들지 않는다 (새로고침 X)
- 앱 상태 유지
💡 window.open - target = ‘_blank’처럼 동작한다

이것저것

CORS에러를 뚫어주는 Allow CORS extenstion은 서버로부터 응답을 받아 Access-Control-Allow-Origin: * 헤더를 추가해 다시 클라이언트에게 전송한다.
React.Children.toArray() 함수는 children을 1차원 배열로 평탄화해서 리턴해준다. 1차원 배열로 변환하는 과정에서 Reconciliation, 렌더링 최적화를 위한 고유한 key 값을 각 요소의 키에 삽입해준다.
지면을 꾸미기 위해 사용된 이미지는 alt text를 빈 스트링으로 처리한다.