[React/TS] Slack 클론코딩 6주차 - 마무리하기

1. 타입가드 (타입 점검하기)

두 가지 이상의 타입이 겹쳐져 있을 때, 타입을 구분해주는 역할을 한다.

 

in 연산자

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

if문

 function a(b: number | string) {
 	if (type of b === 'number') {
    	b.toFixed()	// b: string
        // number에는 toFixed라는 메소드가 존재하여 b가 number라는 것을 확실히 앎
    }
    b.toFixed();	// error
    // if문 바깥에서는 b가 문자열일 수도 있고 숫자형일 수도 있는데, string의 경우에는 toFixed를 사용할 수 없기 때문!

 function a(b: number | string) {
 	if (type of b === 'number') {
    	b.toFixed()
    }
    b.slice();	// error
    // 반대로 if문 밖에서 string에 존재하는 slice 메소드 사용 시, number에는 없는 메소드이므로 에러가 남
    // 이 역시 if문 바깥에서는 b가 string일 수도, number일 수도 있기 때문!

 function a(b: number | string) {
 	if (type of b === 'number') {
    	b.toFixed();
    }
    if (typeof b === 'string') {
    	b.slice();	// 이 if문 안에서는 b가 무조건 문자열이라는 것을 알기 때문에 에러가 안 남
    }
}

 

 function a(b: number | number[]) {
 	if (type of b === 'number') {
    	b.toFixed()
    }
    if (Array.isArray(b)) {		// b가 배열이면 (배열인지 판단 후)
    	b.forEach(() => {});	// 배열에서 사용하는 forEach를 사용하도록 TS가 허용해줌
    }
}

 

=> 타입스크립트가 if문을 보고 타입을 더 구체적으로 추론해준다!

 

 

2. 

Optimistic UI를 사용하면 네트워크 상태에 따라서 이런 상황이 발생할 수 있다.

인터넷이 느린 상황에서

0초 나: 안녕 
1초 상대: 안녕
2초 나: 안녕 (실제 서버)

나한테는 내가 먼저 안녕이라고 보낸 것처럼 보이지만, 상대한테는 본인이 먼저 보낸것으로 보이게 된다.

이런 경우를 방지하기 위해서 revalidate를 항상 해주어야 한다.

=> 잠깐 동안에 저렇게 보였더라도 서버에서 요청 완료 후 데이터를 다시 가져오기 때문에 순서가 다시 바뀌어서 보여줄 수 있음

 

* Optimistic UI와 Revalidate가 뭐였는지 까먹었다면

https://pingzeming.tistory.com/42

[React/TS] Slack 클론코딩 2주차 - 로그인, 회원가입 만들기

2주차 내용을 다시 한 번 읽어보자 (6번 항목)

 

 

3. 배포 준비하기

webpack-bundle-analyzer 

npm i webpack-bundle-analyzer

npm i --save-dev @types/webpack-bundle-analyzer

웹팩 사용 시 항상 bundle analyzer를 설치해주자!

웹팩이 여러 파일을 하나의 js 파일로 압축해주는 역할을 하기에 용량 문제를 생각하게 되는데, 이때 bundle analyzer를 설치하여 용량을 확인할 수 있다.

 

// webpack.config.ts
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
// ...
if (isDevelopment && config.plugins) {	  // 개발모드
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
if (!isDevelopment && config.plugins) {	  // 배포모드
  config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}

 

npm run dev > 이렇게 각 파일이 차지하고 있는 용량을 한눈에 시각적으로 알려준다.

확인 후, 용량이 너무 큰 파일들은 코드 스플리딩 혹은 tree-shaking 등의 기법으로 줄여볼 수도 있겠다.