UI/Next (5) 썸네일형 리스트형 [ Next / loading ] Nextjs에서 대표적으로 사용되는 Loading Next js 에는 여러 가지 방식의 Loading 있다. 이것들을 어떻게 작동하는지 간략하게 알아보고 상황별 사용을 알아 보려고 한다. 요약기능 분류기능핵심 특징성능 영향자동 라우트 레벨 로딩폴더- 라우트 탐색 시작 시 자동 활성화 - 자동 제어 방식- 초기 로딩 화면 즉시 표시(TTFB(Time To First Byte) 개선 효과)eg. 간단한 페이지 전체 로딩 화면명시적 컨포넌트레벨 로딩Suspense fullback - 특정 컴포넌트 영역 로딩 상태 격리 및 관리 - 컨포먼트 래핑 제어 방식- 부분 화면 로딩으로 사용자 경험 향상eg. 복잡한 대시보드, 특정 섹션 데이터 패칭, 부분 업데이트스트리밍기반콘텐츠 로딩@defer 디렉티브- 서버 컴포넌트 렌더링 스트리밍 방식으로 개선 - 디렉티브 .. [ Next / Component ] child component의 리셋(feat.parent Hook toggle) button component를 사용할 꺼 같아서 만들었다. Prop으로 정보 값을 전달했다. 그런데... 상황이 이렇다. 숙박을 위해서 추가 인원 설정 팝업이 필요했다.그래서 버튼이 성인 1개, 어린이 1개 이렇게 있어서 component로 만들어봐야겠다 했다. 간단한 정보는 Prop으로 전달했다. 성공했다! 그런데 팝업이 꺼지면 데이터가 날아갔다. 다시 말해 데이터가 리셋됐다. 데이터 정보값은 2개 있다. 총 인원 useState, the child button comonent.-총 인원 : parents component Hook-성인 + 어린이 : child component Hook 팝업은 parent component에서 useState으로 처리하기 때문에 false가 되는 순간 the c.. [ Next / react-calendar] hydration errors (Feat. SSR) react-calendar을 사용하는데 Next에서는 SSR이 진행되기 때문에 hydration errors가 발생할 수 있다. 현재 나도 발생했고 따라서 이부분에 대해서 언급해보려고 한다. Situation- Text content did not match. Server:"July 2024" Client: "2024년 7월" Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error solution-prop으로 locale을 추가공문서 언급Note: When using SSR, setting this prop may help r.. [ Next / SCSS ] 시행착오 (feat. Next.config) Next로 refactor을 하면서 겪는 시행착오, 그중 scss를 react 시절에 쓰던 것 처럼 쓸 수 있다는 착각.각각을 individual 하게 폴더를 만들어서 제작. 그런데!인식을 못함 => 세팅이 필요 하다는 것을 인식 좋은 글들이 있었는데, 상세 설정이 아쉬워서 직접 정리한 글입니다. Next.config.mjs필요 이유는 환경설정을 해서 scsc의 파일 정보를 정확하게 읽어보게 하는 방법.처음 path를 봤을 때, 왜 require가 있지라는 생각을 했다. require는 node 용어인데?ㅎㅎnode를 쬐금 공부한게 도움이 됨 const path = require('path'); // node를 통해서 서버에서 파일 읽기const nextConfig = { reactStrictMod.. [Next / generateStaticParams() ] 다이나믹 페이지를 pre-Made하기 Next 공식 문서The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.솔직히 무슨 말인지 모르겠음. 개인적인 결론으론1) 서버에서 함수 돌려서 dynamic pages를 다 파악한다. 2) 파악했기 때문에 만들어져 있고 더 빠르게 sever에서 클라이언트로 전송. 이처럼 작성하라고 함. Chapt 한테 물어봤음.Understanding generateStaticParams()In Next.js, generateStaticParams() is used fo.. 이전 1 다음
