# TIL: 성능 개선, States

Snoop So·2023년 5월 19일
0

성능 개선

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

캐시

  • 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

  • 유한 상태 머신

0개의 댓글