About
About

2022-04 TIL

📅 2022. 04. 06

2022-04-01

아무리 같은 값이라 할지라도, enum 내에 있으면 타입스크립트는 비교할 수 없기 때문에 false가 리턴된다.

enum Direction1 {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right',
}

enum Direction2 {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right',
}

// This condition will always return 'false' since the types 'Direction1.Up' and 'Direction2.Up' have no overlap.
if (Direction1.Up === Direction2.Up) {
}

2022-04-06

a 태그에download attribute를 쓰면 링크로 이동 안하고 바로 다운로드된다.

참고: IE, Edge (prior version 18), Safari (prior version 10.1) 버전에선 동작 X

jest--runInBand

the --runInBand cli option makes sure Jest runs the test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time.

기본적으로 jest는 테스트마다 별도의 프로세스를 만들어서 병렬로 실행한다. --runInBand 옵션을 붙여서 실행하면 단일 프로세스에서 테스트 여러개가 순차적으로 실행되어 디버깅에 용이하다.

Automatic persisted queries

문제

  • GraphQL은 모든 요청을 POST로 보내므로 HTTP 프로토콜에서 캐시 불가능
  • 쿼리가 선언적 구조이기 때문에 요청 필드가 많아질수록 payload size가 커져서 네트워크 성능 저하가 발생

Automatic persisted queries

  • 아폴로 클라이언트에 내장된 @apollo/client/link/persisted-queries 를 사용하면 쿼리를 해시값으로 변환해서 자동으로 보내줌 (예: pinkfong-query-xxxx )
  • 해시값으로 변환된 쿼리는 apollo-server 에 전달됨
  • 서버에서 해당 해시값 쿼리가 존재하면 바로 response를 내려주고, 없으면 해당 쿼리를 실행해서 response로 내려줌

해결

  1. GraphQL은 모든 요청을 POST로 보내므로 HTTP 프로토콜에서 캐시 불가능 -> 캐시 가능 (GET 메서드를 사용하므로)
  2. 쿼리가 선언적 구조이기 때문에 요청 필드가 많아질수록 payload size가 커져서 네트워크 성능 저하가 발생 -> 해시값을 사용해서 네트워크 성능 향상 (payload 크기가 줄어듦)
  • 추가적으로, Persistent Query는 GET 요청이기 때문에 CDN까지 적용하면 네트워크 성능을 더 높일 수 있다.
  • Apollo server의 persistent query hash 값들은 항상 SHA256 을 사용해야 하며, 서버의 로컬 인메모리에 저장된다고 한다. 만약 캐시 저장소를 바꾸고 싶으면 Apollo Server의 config를 다른 저장소로 변경할 수 있다고 한다 (ex: redis)

2022-04-08

호이스팅 퀴즈 1

다음 선언식과 표현식이 있다. 콘솔창에 어떻게 출력될까?

immaBeOnTop();

var immaBeOnTop;

function immaBeOnTop() {
  console.log('first');
}

immaBeOnTop = function() {
  console.log('second');
};

정답

'first'

function, var 중에 function이 먼저 호이스팅이 된다. var의 중복 선언은 무시된다. 따라서 아래와 같이 컴파일된다.

function immaBeOnTop() {
  console.log('first');
}

immaBeOnTop();

immaBeOnTop = function() {
  console.log('second');
};

호이스팅 퀴즈 2

다음은 콘솔창에 어떻게 출력될까?

foo();

function foo() {
  console.log(1);
}

var foo = function() {
  console.log(2);
};

function foo() {
  console.log(3);
}

foo();

정답

'3'
'2'

중복 var 선언은 무시되지만 후속 함수 선언 및 변수 할당은 이전 함수 선언을 무시한다. 위의 코드는 아래처럼 컴파일 된다.

function foo() {
  console.log(1);
}

function foo() {
  console.log(3);
} // 앞의 foo를 override

foo(); //3

foo = function() {
  console.log(2);
};

foo(); //2

출처: https://quiz.typeofnan.dev/hoisting-race-to-the-top/

2022-04-09

Next.js has built-in support for Scroll Restoration

Next.js는 페이지 전환할 때 자동으로 스크롤을 맨 위로 이동시키는 기능을 내장하고 있다.

참고: https://nextjs.org/docs/migrating/from-react-router#scroll-restoration

주간 인기 TOP 7