(Tutorial) '카드 짝맞추기'에 Typescript 적용하기

다음은 zerocho님의 웹 게임을 만들며 배우는 TypeScript: 섹션 6 짝맞추기 강의를 공부한 내용을 기록해두기위해 작성된 글입니다.

1. 왜 colors.slice()와 같이 의미없는 slice()를 뒤에 붙이는 걸까?

const colors: string[] = [
  'red',
  'red',
  
];
let colorCandidate: string[] = colors;
colorCandidate[0] = 'aqua';
console.log(colors[0]); //aqua

문자열, 숫자, 불린을 제외한 객체는 다른 변수에 대입할 때 값을 복사하는 게 아니라 참조(메모리의 주소)를 복사한다.

const colors: string[] = [
  'red',
  'red',
  
];

let colorCandidate: string[] = colors.slice();
colorCandidate[0] = 'aqua';
console.log(colors[0]); //red

원본(colors)의 값까지 변하지 않게 하려고 colors.slice(0)로 colorCandidate는 새로운 메모리를 참조하도록 만든다.

2. querySelectorAll과 getElementsByClassName의 차이는 무엇일까?

const a = document.querySelectorAll('.card');
const b = document.getElementsByClassName('card');

typscript는 html에 적혀있는 값의 타입까지는 인식하지 못하기 때문에 a와 b의 타입을 null이라고 넓게 인식해서 강제변환(type casting)을 해주어야 오류가 나지 않는다.
예를 들어 .forEach를 사용하기 위해 아래와 같이 해당 값의 타입이 HTMLElement이라고 알려주는 as나 해당 값의 타입은 값이 있다고 확신해주는 !를 써서 강제변환을 해주어야 한다.

(document.querySelector('.card') as HTMLElement).forEach(()=>{})

또는

document.querySelector('.card')!.forEach(()=>{}) 

querySelectorAll에서 querySelectorAll(selectors: string): NodeListOf || null와 같이 여러 경우의 수를 하나의 함수가 처리하는 오버로딩해주는 타입 정의가 없을 때는 타입에 제약이 생겨서(아래의 경우 HTMLElementTagNameMap나 SVGElementTagNameMap를 상속받은 값만 가능하게 된다) 강제변환이 불가능하다.

querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
   querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;//오버로딩되는 부분

3. 유사배열은 배열과 어떤 차이가 있길래 Array.prototype.forEach.call와 같이 번거롭게 call()를 써줘야하는 걸까?

유사배열과 배열의 구분해야 하는 이유는 유사배열에서는 메소드인 forEach, map, filter, reduce 등를 쓸 수 없기 때문이다.

Array.prototype.forEach.call<
   HTMLCollectionOf<Element>,
   [(card: HTMLDivElement, index: number) => void],
   void
 >(document.getElementsByClassName('card'), card, index)=>{}

참고:
zerocho blog 배열과 유사배열
zerocho blog 객체의 복사

4. perspective:600px, transform-style : preserve-3d 속성이 의미하는 것은?

perspective 속성은 멀리 떨어진 사물은 작게, 가까이 있는 사물은 크게 만들어서 원근감을 준다.
perspective의 속성값이 600px이면 '내가 600px만큼 떨어져서 보고 있다'라고 설정해주는 것이다.

transform-style : preserve-3d는 자식요소를 3D 공간에 배치되도록 한다.

참고:
3D Transform, 【CSS】transform-style : 자식 요소를 3D 공간에 배치하거나 2D 평면에 평평하게 배치 할지를 지정하기