키모스토리

프로젝트 전체에 대한 global css를 적용하고 싶다면 먼저 global.css를 작성 (1) /app/styles/global.css 생성 reset css 를 포함하여 프로젝트 전체에 적용할 스타일을 작성https://meyerweb.com/eric/tools/css/reset//* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn,..

예를 들어 #8에서 테스트 했던 코드중에 MovieVidios fetch 를 처리 하는 도중 오류가 발생했을 경우해당 페이지 전체는 오류로 인해 페이지를 표시 할 수 없게 된다. 이때 error.tsx파일을 이용하여 애러를 처리 할 수 있다 (movies)/movies/[id]/page.tsx import { Suspense } from "react";import MovieInfo from "../../../components/movie-info";import MovieVideos from "../../../components/movie-videos";export const metadata = { title: "Movie Detail",}export default async function MovieD..

페이지에서 여러개의 api를 호출해야 하는 경우 동시에 병렬요청하는 방법import { API_URL } from "../../../(home)/page";export const metadata = { title: "Movie Detail",}async function getMovie(id:string) { console.log(`Fetching movies: ${Date.now()}`); await new Promise((resolve) => setTimeout(resolve, 2000)); const response = await fetch(`${API_URL}/${id}`); return response.json();}async function getVideos(id:string) { c..

Client Side Fetch"use client" 키워드 필요- 클라이언트에서 페이지 render 후에 useEffect를 이용하여 fetch 를 요청해서 ui를 다시 render 함- use client 를 선언해야 했기 때문에 meta data 도 해당 페이지에 적용 할 수 없음- React App API DB "use client"import { useEffect, useState } from "react"// use client 선언으로 metatdata 사용불가가// export const metadata = {// title: "Home Page",// }export default function HomePage() { const [isLoading, setIsLoading] = ..

페이지주소 뒤에 파라메터를 이용한 Route 방식 하위 폴더명을 대괄호를 이용해서 작성 => [id]  /app/(movies)/movies/[id]/page.tsx 요청 URL:  http://localhost:3000/movies/1 params, searchParams export const metadata = { title: 'Movie Detail',}export default async function MovieDetail({ params, // [id] 폴더이름 searchParams, // ?key=value&key=value 형식}: { params: Promise; searchParams: Promise; }) { const {id} = await params; const ..

html 문서의 metadata 데이터를 관리/app/layout.tsx 에 있는 내용이 모든 문서에 병합되어 등록됨 예) /app/layout.tsx 의 metadata  에 description 데이터를 등록export const metadata = { description: 'The best movies on the best',} /app/(home)/page.tsx  안에 metadata 코드를 추가 하면서 title 만 등록export const metadata = { title: 'Home | Next Movies',}export default function Page(){ return ( Hello NextJs!! )} - 아래 결과처럼 title..

layout.tsx Next.js 의 모든 페이지(page.tsx) 들은 layout.tsx를 시작으로 조립 되어 실행됨  (LIke index.js, index.html) export const metadata = { title: 'Next.js', description: 'Generated by Next.js',}export default function RootLayout({children, }: { children: React.ReactNode}) { return ( {children} )} 이전 예제에서 /app/page.tsx, /app/about-us/page.tsx 에 import 했던 Navigation 을 layout.tsx 에서 한번만 import 하면모..

원본문서 : Next.js에서의 렌더링 방식 https://voyage-dev.tistory.com/130 Pre-Renderig이란?일반적인 React를 사용한 웹 어플리케이션은 CSR 렌더링 방식을 사용하며, 이는 처음에 브라우저가 빈 HTML 파일을 받아 아무것도 보여주지 않다가, JavaScript가 다운로드 완료되 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다.하지만 Next.js는 모든 페이지를 사용자에게 전해지기 전에 미리 렌더링 즉, Pre-Render 한다. 이는 Next.js가 모든 일을 클라이언트 측에서 모든 작업을 수행하는 것이 아니라, 각 페이지의 HTML을 미리 생성하는 것이다.생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 그후 브라..

navigation app/components 폴더 생성 후 navigation.tsx 파일 생성 후 아래 코드 코딩'use client'import Link from "next/link";import { usePathname } from "next/navigation";export default function Navigation() { const path = usePathname(); console.log(path); return ( Home {path === "/" ? "💖" : ""} About-us {path === "/about-us" ? "💖" : ""} ..

1. 프로젝트 폴더 생성 후  npm init-ynpm init -y root/tsconfig.json 파일 생성됨 2. 필수 라이브러리 설치npm install react@latest next@latest react-dom@latest * pakage.json 수정 (scripts 필드){ "name": "nextjs", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" // npm run dev 명령어로 컴파일 실행이 되도록 설정 }, "keywords": [], "author": "", "license": "MIT", "description": "", "dependencies": { "next..

keyof  :  인터페이스 멤버를 key값으로 사용가능Partial  : 인터페이스 멤버를 모두 optional 하게 사용interface User { id: number; name: string; age: number; gender: "m" | "f";}// keyof 인터페이스의 멤버변수를 key 값으로 사용. type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'const uk:UserKey = "id"; console.log(uk);// Partiallet admin: Partial = { id:1, name:"Bob",};// Patial은 아래와 같이 모든 멤버를 optional 로 선언한것과 같다./..

함수 매개변수 Generic// Genericfunction getSize(arr: T[]): number { return arr.length;}const arr1 = [1,2,3];getSize(arr1); // 3const arr2 = ["a","b","c"];getSize(arr2); // 3const arr3 = [false, true, false];getSize(arr3); // 3const arr4 = [{}, {},{name: "Tom"}];getSize(arr4); // 3 interface Generic // 인터페이스 맴버변수 타입을 generic으로 선언하는 예interface Mobile { name: string; price: number; option: T;..