성능 개선
- 아래의 두가지 포인트에서 개선할 것이 전부이다.
- 초기 로딩
- 반응 개선
캐시
- http의 캐시는 static한 파일들을 주로 하는 것
- json 쪽은 크게 연관 없음..
데이터를 한꺼번에 가져오면
- 실시간으로 업데이트를 할 수가 없음
- 초기 로딩이 오래 걸림
- 캐시 전략으로 일단 데이터를 불러오고 변경된 일부만 업데이트
- https://swr.vercel.app/
- react query도 이런 전략을 사용함
- 캐시된 네트워크이면 서버까지는 안가게도 할 수 있음
- 서비스워커: 프록시처럼 가로챔. 가야하나 말아야 하나 설정할 수 있음
- cache api라는 것이 브라우저에 있음.
- pwa(웹앱) 라는 것이 있는데, 앱 like한 웹을 만들자... 이게 서비스워커 안에 이 개념이 들어가 있음
서버 상태를 관리하려면
- 캐시에 대한 전략이 필요하다.
- 서버사이드렌더링이 여기에서 나옴
- 루카스는 아폴로를 쓰는데 여기는 거의 다 서버 상태임.. ㄷㄷ
상태가 많아지면
- 상태가 많아서 복잡해지면 리듀서로 관리하기도 함
난독화(오뷸스케이팅)
- 함수 이름을 길게 만들면 줄이는.. 이러면 최적화를 할 수 있음.
로딩처리
https://react.dev/reference/react/Suspense
서스펜스를 사용해서 처리할 수 있음
concurrent mode 라는게 있어서 빠르면 로딩바를 보여주지 말까? 하는 고민도 하고 있음
Custom hook
4주차에 써보자~
설계 단계
- state: 어떤 상태가 있지?
- event: 어떤 이벤트가 있지?
- action: 어떤 변경 작업이 있지? (서버 데이터 요청, 비즈니스 로직..)
- transition: 종합적으로 정리한 문장 (얘가 눌리면 그때 오픈이 close로 변경된다~)
States machine