next142 [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. 이전 1 다음
