본문 바로가기

전체 글

 (152)
[NEXT] STANDARD플러스주차 복습 #5 1. Streaming : 서버가 클라이언트로 데이터를 한 번에 전달하지 않고, 준비된 부분부터 점진적으로 전송하는 방식. UX와 SEO를 동시에 개선할 수 있다. 2. Suspense : React에서 비동기 작업의 상태를 관리하는 컴포넌트. 로딩 중에는 fallback 속성을 통해 대체 UI를 보여줄 수 있다. 3. Trigger : 데이터베이스에서 특정 이벤트(예: INSERT, UPDATE)가 발생했을 때 자동으로 실행되는 SQL 함수. (js 의 이벤트리스너와 유사하게 동작함)  Loading UIhttps://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI and S..
[NEXT] - STANDARD플러스주차 복습 #6 오늘은 코드리뷰를 했다.   queryClient 생성 컨벤션 export default function Providers({ children }: Props) { const [queryClient] = useState(() => new QueryClient()) return ( {children} );}   page.tsx 상단에 “use client” 선언하지 않는 것을 권장합니다. use client 아래에 있는 코드들은 모두 JS번들파일이 됩니다. 정적인 부분들은 굳이 JS 번들파일이 될 필요가 없습니다. loading.tsx 를 전역적으로 선언하는 방식을 권장드리지 않습니다.SSG 컴포넌트나 CSR 컴포넌트에서도 찰나에 로딩화면에 보였다가 사라질 수 있어,..
[NEXT]Basic zoom (2) middleware & supabase ssr middleware란? middleware는 페이지 요청, API 요청(중요한 작업) 전에 **중간에서 처리(검사, 체크하기)**하는 역할을 한다.예를 들어, ✈️ 항공사의 주요한 역할은 고객을 안전하게 이동시키는 것이다. 이때, 안전하게 이동하기 위해 공항 검색대에서 ✅ 위험한 물건을 체크한다. 위험한 물건이 없다는 것이 확인했다면 더 안전하게 이동할 가능성이 높아진다.  페이지 이동 및 API 요청 전에 하면 좋은 일들 예시인증 확인 (로그인 여부 체크)리다이렉션 처리 ex) 로그인이 되지 않은 경우 강제로 로그인 페이지를 보여준다.접근 권한 확인 ex) 관리자 계정인지, 일반 사용자 계정인지 체크지역/언어 설정 ex) 현재 지역에 따라 다른 웹사이트를 보여준다.  middleware를 만드는 법은?..
[NEXT]Basic zoom (1) route handler route handler - Next.js에서 백엔드 API를 만들기   [주의]route handler는 client component에서만 요청하세요.server component에선 route handler를 요청하지 않습니다.app 폴더 내에서 route.ts 파일을 만든다.폴더 구조에 따라 api 주소가 바뀐다. 단, page.tsx 의 경로와 같으면 페이지 요청에 문제가 있을 수 있으니 경로를 항상 신경써야 한다.app/route.ts ⇒ fetch("/")⇒ app/page.tsx 와 주소가 겹칠 수 있음app/api/route.ts ⇒ fetch("/api")app/api/user/route.ts ⇒ fetch("/api/user")app/api/rotation/route.ts ⇒ fetc..
[NEXT] 마지막 갠 과제에 쓴 거 정리 (2) 1. fetchChampionRotation [TypeScript: 제네릭(Generic), 타입 지정] async function fetchChampionRotation(): Promise { fetchChampionRotation함수가 반환하는 값의 타입을 제네릭을 사용하여 ChampionRotation라고 명시해줬다.마치, 이 함수가 반환하는 값이 ChampionRotation타입의 데이터로 이루어진 Promise야!라고 말하는 거와 같다. 여기서 Promise를 쓴 이유는, 잠시 후 데이터를 반환할게라고 약속한는 형태로 동작하기 때문이다. 즉, 비동기 작업을 반환하는 의미다. 2. API Route  const response = await fetch("/api/rotation"); /page/a..
[NEXT] 마지막 갠 과제에 쓴 거 정리 (1) 1. Record (유틸리티)객체의 키와 값의 타입을 명확하게 정의할때 사용된다.Record 키: 객체의 키가 될 수 있는 문자열, 숫자, 유니언 타입type Example = Record;const obj: Example = { a: 1, b: 2 }; // 문자열 키와 숫자 값   과제 응용Record string은 챔피언 데이터 객체의 키가 문자열임을 의미한다.여기서 ChampionData는 값의 타입이다.    2. Object.entries  Object.entries는 객체를 키밸류 쌍의 배열로 반환해주는 내장함수다.const obj = { a: 1, b: 2 };console.log(Object.entries(obj));// 출력: [["a", 1], ["b", 2]]    과제응용Objec..
[NEXT]CH 5 주특기 플러스주차 과제-Riot API를 활용한 리그 오브 레전드 정보 앱 만들기 - Trouble Shooting 🐞 Trouble Shooting    1. Hydration Error 발생 문제클라이언트와 서버의 HTML이 일치하지 않아 Hydration Error가 발생했습니다.Warning: Text content does not match server-rendered HTML. 해결로컬 스토리지 상태를 서버와 클라이언트 사이에 불일치가 없도록 조정했습니다.**suppressHydrationWarning**를 태그에 적용하여 클라이언트 사이드와 서버 사이드의 차이를 무시하도록 했습니다.   2. Next.js Image 최적화 및 경고 해결 문제Image 컴포넌트를 사용할 때 parent height 설정 누락과 LCP 경고가 발생했습니다.Image with "fill" and a height value ..
[NEXT]주요렌더링 // import ProductList from "./components/ProductList";// //1. SSG// export default async function Home() {// return (// // // // );// }// export interface Product {// id: string;// isNew: boolean;// handle: string;// availableForSale: boolean;// title: string;// description: string;// descriptionHtml: string;// options: { name: string; values: string[] }[];// ..

티스토리툴바