성능 개선

• 아래의 두가지 포인트에서 개선할 것이 전부이다.
• 초기 로딩
• 반응 개선

캐시

• 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

• 유한 상태 머신