Slack 클론코딩 6주차

Slack 클론코딩

마무리 단계에 접어들었다.
짧게 구성된 섹션인만큼 배운 점이 많지는 않았던 것 같다.

---

📚배운 점

1. npm run build

지금까지는 npm run dev를 통해 개발 모드로 진행했다면,
배포를 위해 이제는 npm run build를 사용한다.
이 때 총 프로젝트의 압축 버전인 dist 폴더가 나온다.

위와 같이 dist 폴더가 나오는 것은 알고 있었지만,
이를 webpack-bundle-analyzer 라이브러리 설치 후 npm run build를 실행하게 되면

위와 같이 각 번들이 어느 정도 공간을 차지하고 있는지 볼 수 있다는 점이 신기했다.
이를 잘 분석하여
1. Tree-shaking을 통해 공간을 확보하거나
2. Code-splitting을 통해 Lazy Loading을 구현할 수 있다는 점이 마음에 들었다.

2. 타입 가드

타입가드는 조건문에서 객체의 타입을 좁혀나가며 타입을 구분, 점검하는 역할을 한다.

• typeof 연산자

function doSomething(x: number | string) {
  if (typeof x === 'string') { // TypeScript는 `x`가 무조건 `string`이란 걸 알고 있다.
  console.log(x.subtr(1)); // Error: `subtr`은 `string`에 존재하지 않는 메소드다.
  console.log(x.substr(1)); // 굿
  }
  x.substr(1); // Error: `x`가 `string`이라는 보장이 없다.
}

• in 연산자
  내부에 특정 property가 존재하는지 확인하는 연산자이다.

interface IChat {
  // 채널의 채팅
  id: number;
  UserId: number;
  User: IUser;
  content: string;
}

export interface IDM {
  // DM 채팅
  id: number;
  SenderId: number;
  Sender: IUser;
}

interface Props {
  data: IDM | IChat;
}

const user = 'Sender' in data ? data.Sender : data.User;
// data라는 객체 안에 Sender 속성이 있는지 검사함

이 외에도 instanceOf, 리터럴 타입 가드, 사용자 정의 타입 가드 등이 있다. 타입 점검 시에 유용하게 써먹을 듯 하다.

---

✅해결한 에러

1. 슬랙 아이콘이 제대로 보이지 않던 오류를 수정했다.
2. 가끔 input이 제대로 작동하지 않던 오류를 해결했다.

😡해결할 에러

1. 서버에서 온라인 유저 목록이 제대로 불러와지지 않는다.