NEXT.JS_3. 404Page , js.config, Showcase component

Eunsu·2021년 12월 7일

🎉 DJ Event Page 3

진짜 근데 NEXT왜 배우는지 몰랐는데, 짱 편함.. 핵 편해,,
404 따로 안 지정해주고, pages안에 404.js 생성하기만 하면 바로 이게 404 page가 됨.. 짱 편해,,

❗ 404 페이지 만들기

 // pages/404.js
import Layout from "../components/Layout";
import { FaExclamationTriangle } from "react-icons/fa";
import Link from "next/link";
import styles from "../styles/404.module.css";
export default function NotFoundPage() {
  return (
    <Layout title="Page Not a Found">
      <div className={styles.error}>
        <h1>
          <FaExclamationTriangle /> 404
        </h1>
        <h4>Sorry, there is nothing here</h4>
        <Link href="/">Go Back Home</Link>
      </div>
    </Layout>
  );
}

Tip!
◾ react-icons 쓸때 react-icons/[fa, fas, ai]에서 불러와서 바로 아이콘 이름만 import해서 쓸 수 있음. 예전에 어케 썼는지 까먹었는데 먼가 새로 배운 느낌임 ㅎㅎㅎㅎ

이렇게 404 페이지만 생성해주면 pages에 없는 경로에 접근하면 내가 생성한 404페이지가 보여짐!

⛏ jsconfig.json 설정

◾ jsconfig.json이란?

Js 설정파일임. 스크립트 관련해서 (대부분 사람들은 경로 지정할 때 사용하던데..) 그런 JS관련된 설정을 할 때 사용한다.
속성
- exclude : include 프로퍼티에 의해 프로그램에 포함되는 파일들 중 제외시킬 파일들의 목록을 지정한다.
- include: 프로그램에 포함하고 싶은 파일들의 목록을 지정한다.
- compilerOptions : 그외부분은 모두 compilerOptions 내에 속성관련 내용

◾ jsconfig.json

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

상대 경로 이기때문에 ../../ 이너무 많으면 복잡하고 안예쁨.

이렇게 파일경로가 자동생성 됨!

➕ Showcase.js 생성

Tip! 이미지 불러오기

public에 박제시켜 놓고 필요할 때 불러서 쓰면 됨. background 일때.

이미지로 사용할 때는

import ProfileImage from './public/image/user1.jpg'

로 사용하면 됨.

//components/Showcase.js
import styles from "@/styles/Showcase.module.css";
export default function Showcase() {
  return (
    <div className={styles.showcase}>
      <h1>Welcome To The Party</h1>
      <h2>Find the hottest DJ Events</h2>
    </div>
  );
}

Layout.js에도 Showcase.js 추가해주기

//components/Layout.js
export default function Layout({ title, keyword, description, children }) {
  const router = useRouter();
  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta name="keywords" content={keyword} />
      </Head>
      <Header />
      {router.pathname === "/" && <Showcase />}
      <div className={styles.container}>{children}</div>
      <Footer />
    </div>
  );

다음 포스팅은 API 불러오는거 할꺼임!

Eunsu

function = (Develope) => 'Hello World'

이전 포스트

NEXT.JS_2. Install & Directory

다음 포스트