📌소개

강의링크 바로가기

📌배운내용 정리

How to create - 404 Page

// create - 404 Page steps
// step 1 - create "./routes/NotFound.tsx"
// step 2 - use "./routes/NotFound.tsx"

// golden_keyword is 'errorElement:' 💖💖💖

golden_keyword is 'errorElement:' 💖💖💖

// "./routes/NotFound.tsx" file content
export default function NotFound() {
    return <h1>404</h1>;
}

// "./router.tsx" file content
// (일부생략)
import NotFound from "./routes/NotFound";

const router = createBrowserRouter(
    [
        {
          // 💖💖💖 errorElement: <NotFound />,
			path: "/", 
			element: <Root />, 
			errorElement: <NotFound />, 
			children: [
        {path: "", element: <Home />},
    ]
        },
    ]
);

errorElement: 는 기본적으로 제공해주는 기능이므로 단순히 사용만 하면 된다.

VStack & HStack - from @chakra

// "./routes/NotFound.tsx" file content
import { Heading, Text, VStack, Button } from '@chakra-ui/react'

export default function NotFound() {
    return <VStack>
          <Heading>Page Not Found</Heading>
          <Text>It seems that you're lost.</Text>
          <Button>Go home &rarr;</Button>
    </VStack>; // HStack 도 있다. VStack = 수직정렬, HStack = 수평정렬
}
// 위 코드의 실제 화면은 아래와 같다.
// chakra 가 제공하는 놀라운 기능

위 그림과 같이 특정 component 위에 마우스를 올려두면 해당 컴포넌트에 대한 설명이 적혀 있는 공식문서의 링크가 뜬다. 해당 링크에 방문하면 해당 특정 컴포넌트에 대한 상세한 설명과 사용예시 등이 자세히 설명되어 있다. 꼭 꼭 꼭 방문해서 한 번 읽어보는건 너무나 너무나 너무나 너무나 너무나 큰 도움이 될 것이다 ㅎㅎㅎ 😆👍😂😁😎😍💖❤🎈🤗🤩🤣👌💕✌🤞🎁🐱‍👓

"→" and "←"

HTML 웹 특수문자표 참조 링크 바로가기

📌Grab a Keyword

errorElement: ,

VStack & HStack from @chakra

📌Grab a pocket

HTML web 특수문자 "→" 화살표 같은 특수문자를 바로 사용할 수 있는 표기법 참고로 한번 봐보는 것도 나쁘지 않아요 😋 [링크 바로가기]