nextjs13 [ReactQuery] (4) ReactQuery - useIsFetching (feat. Nextjs) 접근 (요약)앱에서 isLoading 과 isFetching만을 사용해 컴포넌트마다 개별 Loading Indicator만을 활용했다면,useIsFetching에 대해서 알게 되고 더 큰 앱에 중앙 집중식 Loading Indicator를 사용해보기 위해 정리를 남긴다. 1. isLoading & isFetching & useIsFetching 2. useIsFetching 적용하기 3. 적용 TEST방법 1. isLoading & isFetching & useIsFetching# useIsFetching- 각 컴포넌트에 대해 "개별 로딩 인디케이터 (Loading Indicator)" 를 사용하는 대신- "중앙 집중식 로딩 인디케이터"를 사용하도록 앱을 업데이트 할 예정!>> useIsF.. 2025. 3. 19. [ReactQuery] (1) ReactQuery 란 무엇인가? 접근 (요약)reactQuery의 개요를 작성한다. 1. Client State vs Server State 1. Client State - 웹 브라우저 세션과 관련된 모든 정보 의미 (단순히 사용자의 상태) (ex_ 사용자가 원하는 언어를 선택하거나 밝은/어두운 테마를 선택하는 등의 서버에서 일어나는 일과는 아무 관련이 없는 것)2. Server State- 서버 상태는 서버에 저장되지만 클라이언트에 표시하는 데 필요한 데이터 (ex_데이터베이스 등 블로그 게시물 데이터)- 데이터는 여러 클라이언트에 표시되어야 하기에 서버에 저장됨 2. React Query 특징 1. React Query는 클라이언트에서 서버 데이터 캐시를 관리 React Code ↔ React Query Cache ↔ S.. 2025. 3. 15. [ReactQuery] (3) ReactQuery - customHooks (feat. Nextjs) 접근 (요약)reactQuery를 활용해 custom hooks을 작성한다. (queryKey와 queryFn) 1. queryKey Object (queryKey Namespace) 패턴으로 정리- queryKey : 데이터 요청을 식별하는 중요한 역할- 쿼리 키 네임스페이스 패턴을 활용한 효율적 데이터 관리- ./react-query/index.ts 2. hooks 폴더 내에 customHooks 작성 => useExampleQuery.ts- app/hooks/queries/useExampleQuery.ts- app/hooks/queries/mutation/useExampleMutation.ts 3. useExampleQuery.ts (CustomHooks 코드 형식)- Data Fet.. 2025. 3. 15. [NEXT.js] 5. Link 컴포넌트 사용 이슈 ( new- link ) 1. 정의 & 특성 2. Nextjs 13 버전 업데이트 후 사용법상세 1. 정의 & 특성기존의 태그는 하위에 태그를 포함해서 작성해야 했습니다.그러나, Nextjs 13 버전으로의 업데이트 이후 태그를 사용하지 않아도 되는 것으로 변경 됐습니다. next/link : 태그 없이 사용 가능 # 기존방식 Home # --------------------------# 변화된 방식 Home. 2. Nextjs 13 버전 업데이트 후 사용법 npx @next/codemod new-link . - codemod 를 실행해 new-link를 설치하고, 업데이트 된. 버전의 nextjs13 Link 태그를 사용하게 된다. next/link 2024. 6. 19. [NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout 1. 정의 & 특성 2. 코드 예시 3. 관련 에러상세 1. 정의 & 특성Next.js 에는 Layout 컴포넌트가 존재하고 이는 여러 경로간에 공유되는 UI입니다. Layout 컴포넌트는- 파일에서 React 구성요소를 내보내도록 정의할 수 있고,- 렌더링 중에 하위에 레이아웃(page UI)가 존재할 경우, 하위 요소를 받아오기 위한 children props를 작성해야 합니다. ㄴ 이를 하기 위해서는, { children }: { children: ReactNode } 구문을 사용해서 이뤄질 수 있습니다. { children }: { children: ReactNode } 이 구문은 TypeScript의 객체 구조 분해와 타입 정의를 결합한 것입니다.(따라서, 객체의 특정 .. 2024. 6. 18. [NEXT.js 14] 4. Font 바꾸기 NEXT.js 에서는 'next/font/google'와 같이 google font 라이브러리를 내장하고 있어 접근성이 좋습니다.뿐만 아니라 'next/font'는 모든 글꼴 파일에 자동적으로 자체 호스팅이 내장돼 있고,이를 적용하고서 레이아웃(뷰)의 쉬프트(깜빡임, 글꼴의 순간적 변화 등) 없이 폰트를 사용할 수 있습니다. Font 바꾸기 1. import {...} from 'next/font/google'; 2. layout.tsx 또는 Font.ts 컴포넌트에 사용할 Font 작성 3. tailwind.config.ts 작성 4. tailwind css 표기로 사용하기상세 1. import {...} from 'next/font/google'; # app/font.tsimpor.. 2024. 6. 17. [NEXT.js 14] 3. CSS 사용 2가지 방법 (css module 생생 / global.css : tailwind css) CSS 사용 방법 1. 첫번째 방법 : css module 사용 2. 두번째 방법 : global.css 사용 3. 파일의 위치 4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세 1. 첫번째 방법 : css module 사용: 일반적인 표준 css 이지만, css 파일에 특정한 이름을 지정함으로 특정 컴포넌트로 스코핑.=> module.css를 import 하면 그 파일들로부터 객체를 불러올 수 있다 import classes from './main-header.module.css';main-header.js (컴포넌트)에 적용할 css 파일을 경로 depth가 동일할 수 있게 생성해주고, import 해준다. 'classes' 라고 명명한 객체를.. 2024. 6. 14. [NEXT.js 14] 2. loading.js & Suspense & streamed Response (세분화 로딩상태 관리) loding.js (지연) 1. 정의 2. 참고예시 3. 파일의 위치 4. suspense & streamed Response를 이용한 세분화 로딩상태 관리상세 1. 정의: loading.js 파일은 Suspense 기반의 즉각적인 로딩 상태를 생성할 수 있음.- 기본적으로 Server side 이지만 'use client'; 를 주며 client side 로 사용될 수 있다. => Data를 호출하는 페이지에서 페이지의 새로고침을 할 때 지연(loading.js)시간을 두게 되면, 페이지가 깜빡이며 나타나게 된다.=> 그러나, 서로 다른 페이지간의 이동에서는 깜빡임없이 페이지간 전환이 이뤄진다.>> ★ 그 이유는, NEXT는 아주 강력한 캐싱을 하는데, 페이지에 첫 접속 때에 화면구성.. 2024. 6. 14. [NEXT.js 14] 1. Image 태그 관련 <Image> 태그 1. 정의 2. 참고예시 3. 속성값 (lazy & srcset ..) 4. priority 설정 (명시적)상세 1. 정의: 는 최적화된 방법으로 이미지를 출력하게 도와줌: 페이지에서 실제로 보이는 경우에만 이미지가 표시되도록 이미지를 지연 로딩하여 구현해줌 (추가적인 구성설정 없이도!): 이미지를 설정하는 프로세스 등을 단순화시킴 2. 참고예시 => 태그에서의 {logoImg.src} 속성값이 아닌 전체 객체 logoImg를 사용=> nextJS에 의해 생성된 객체는 유용한 정보를 포함하게 되어 최적화된 방법으로 image 컴포넌트를 띄울 수 있도록 함 (= import logoImg ~~ 객체가 자동으로 이미지 사이즈를 감지해주는데, 가장 간단한 형식으로도 이를 구현하기에 충.. 2024. 6. 11. 이전 1 2 다음 more
