0806

신지쿤 에바에 올라타 나엿음 갓다 신지야 ....

Clone coding

tanstack query

• 서버사이드 환경에서 싱글턴 패턴을 사용하는 것은 위험하다
  • 싱글턴이란? 인스턴스를 한 번만 생성하고 재사용하는 것
  • 왜 싱글턴을 사용하는데? 메모리를 감소하기 위해
  • 메모리가 얼만큼 감소되는데? 모르겟음 내일 측정해봐야지
• 왜 ssr에선 싱글턴 쓰는게 위험한데? 여러 사용자가 동일한 query client 인스턴스를 공유할 수 있어서
• 위 문제를 어떻게 해결하는데? react의 cache 함수를 사용해 서버 각 request마다 새로운 query client를 생성하도록 만들면 됨. 아니면 싱글턴 패턴을 쓰지말던가
  https://ko.react.dev/reference/react/cache

opgg 동적으로 생성하기

https://nextjs.org/docs/app/api-reference/functions/image-response

• app 라우팅 폴더에다 api 추가해서 page별로 오픈그래프 설정함

빈 배열과 "" 차이점

• 아래에 있는 코드는 content가 빈 문자열로 들어가니까 thumbnail에 문제가 있다면 og 파싱 자체가 중단 될 수 있음

images: [productDetail.thumbnailImage || ""],

• 반면 아래처럼 삼항연산자를 써서 아예 빈 배열로 처리하면 thumbnail에 문제가 있을 때도 op:image 자체를 생략해버려서 문제가 안 발생함

images: productDetail.thumbnailImage   
? [productDetail.thumbnailImage]   
: []

backbutton 표시하기

feat. zustand와 session, local storage

• 초기 진입 페이지나 메인 페이지가 아닐 경우에만 backbutton을 띄우도록 session storage를 활용한 useNavigation hook 추가
  • zustand를 사용하지 않은 이유
  • zustand는 memory 기반이기에 새로고침시 상태가 리셋됨
    • 왜 메모리 기반이면 상태가 초기화 되느냐?
    • 브라우저는 새로고침시 현재 탭에 있는 기존의 js 런타임을 완전히 종료하고 react 앱을 처음부터 다시 실행한다
    • 즉 모든 상태가 초기값으로 재설정된다
  • persist로 storage에 저장할 순 있지만 hydration 문제도 관리해야하고
  • 해당 상태는 app header에서만 사용되기에 zustand를 사용하는건 오버라 판단하여 session storage를 활용했음
    • 왜 local말고 session에 저장했는가?
      • 탭 단위로만 해당 상태를 유지하기 위해서
      • 만약 local storage에 저장했다면 브라우저 전체 디스크에 상태가 유지되는데, 뒤로가기 버튼인데 굳이?
• 관련 PR: https://github.com/dpwls02142/shopping-app/pull/94