채널 만들기
<TS오류> any -> `e: ChangeEvent<HTMLInputElement>`
type 강제 변환 : `as unknown an T`
T extends string | number
* K.C 케밥 케이스 : 하이픈(-)으로 단어를 연결하는 방식. css
기존 코드 바탕으로 수정할때는 가장 의존이 많이 되는 것 바꾸면 -> 의존요소 모두 빨갛게 변하고, 수정해주기
Channel, DM 유사구조. 중복제거하기 좋다
타입 점검하기(타입 가드)
DM : sender, receiver
Chat : channel, user
JS문법. 폴인문
for...in 문 : 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복
data 객체 안에 'Sender'속성이 있으면 true, 없으면 false
const user = 'Sender' in data ? data.Sender : data.User;TS에서는 type guard : 두가지 이상의 타입이 겹쳐져 있을대, 타입을 구분해줌
ex) 타입 선언하지 않아도, if문 조건 활용
funtion(b: number | string){
if(typeof b === 'number'){ //b가 number
b.toFixed()
}
b.toFixed() //error. b가 string일수도있음. 미리 에러로 잡음
}
옵티미스틱 UI할때 순서가 실제 서버에 저장된 순서와 다르게 나타날 수 있다 -> Revalidate 하는 순간 순서가 제대로 변경
배포 준비하기(bundle-analyzer)
Bundle Analyzer 플러그인 : 배포 시 사용. 용량을 볼 수 있음
`npm i webpack-bundle-analyzer` `npm i --save-dev @types/webpack-bundle-analyzer`
개발모드 + 배포모드
webpack.config.ts
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' }));
}개발모드에서는 서버에 보이고, 서버를 따로 띄우지만
배포모드는 html로 결과물 출력
mode: isDevelopment ? 'development' : 'production',
devtool: !isDevelopment ? 'hidden-source-map' : 'eval',배포모드 isDevelopment 최적화 -> production
개발모드 !isDevelopment
`npm run dev` 마우스를 올리면, 용량을 확인할 수 있다
1. 코드 스플리팅 : 코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는 것 -> 코드 비동기 로딩
- 자바스크립트 함수 비동기 로딩
- React.lazy와 Suspense를 통한 컴포넌트 비동기 렌더링
- Loadable Components를 통한 컴포넌트 비동기 렌더링
2. 트리 쉐이킹 : 나무에서 나뭇잎 털기(폰트 라이브러리 샘플이미지 등)
`npm run build` 300 ~ 500kb 이하. Stat size(기본용량), Gzipped Size(압축)
백엔드 개발자에게 dist폴더의 js파일(`npm run build` 하면 생성됨) + intex.html 경로 복사해서 전송
CICD에서 변경될때마다 백엔드로 전송, 서버 재시작 => 백엔드 개발자가 한다
Q&A
NODE_ENV : package.json에 작성할때 너무 길어지면
`better npm run` 라이브러리, `npm run all` 라이브러리로 확장할 수 있다
성능 로딩속도 이미지 용량 최적화하기, 이미지 압축
`@bable/preset-env` : 인터넷 브라우저 버전에 따라 작동안되는 라이브러리 JS코드 등을 최적화해줌
css 크로스 브라우징 난이도 어렵다;
느낀점?
코드 스플리팅 방법이 인터넷에 굉장히 많다. 플젝 배포 전에 블글로 정리하고 싶다.