API Routes

API Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로그인 페이지 - 이번에는 로그인 페이지를 구현해보겠습니다. - #1. pages 폴더 안에 admin.js 파일을 생성 후, 다음과 같이 입력해줍니다. export default function Admin() { return admin; } - #2. Gnb.js 파일에서 다음과 같이 수정해줍니다. → 브라우저에서 실행해보면 제대로 나오는 것을 확인할 수 있습니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = u..

• format_list_bulleted Next.js
• · 2023. 12. 22.
• textsms

isFallback, getStaticPaths

isFallback, getStaticPaths 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. isFallback - isFallback은 Suspense 내에서 현재 자식이 로딩 중인지 여부를 나타내는 불리언(Boolean) 속성입니다. - 터미널에 npm run dev를 입력하여, 실행해보면 상품에 들어갈 때마다 새로 생성되는 것을 알 수 있습니다. - #1. 그것을 자세히 보기 위해, const Post => {...}안에 다음과 같이 추가하고 실행해보겠습니다. → 그러고 실행해보면 다음과 같이 true, false가 나오는 것을 확인할 수 있는데 이것이 로딩 중인지 여부를 나타냅니다. const router = useRouter(); console.log(..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms

정적 생성 (Static Generation)

정적 생성 (Static Generation) 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 정적 생성 - 저번 시간에는 서버사이드 렌더링으로 작업을 해보았으니, 이번엔 정적 생성으로 페이지를 작업해보겠습니다. ※ 정적 생성이란? (바로가기) - #1. index.js 에서 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import {..

• format_list_bulleted Next.js
• · 2023. 12. 18.
• textsms

에러 페이지와 환경 변수

에러 페이지와 환경 변수 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 에러 페이지 - 이번엔 에러 페이지를 만들어 봅시다. - #1. Gnb.js에 들어가 다음과 같이 입력해줍니다. → Contact 페이지는 만들지 않아서 에러 페이지가 발생하는데, 나오는 페이지는 기본으로 들어가 있는 페이지입니다. import { useRouter } from "next/router"; import { Menu } from "semantic-ui-react"; export default function Gnb() { const router = useRouter(); let activeItem; if (router.pathname === "/") { activeItem = "h..

• format_list_bulleted Next.js
• · 2023. 12. 13.
• textsms

서버사이드 렌더링

0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 로딩 페이지 제작 - 화면이 넘어갈 때, 사용할 로딩 페이지를 만들어보겠습니다. - #1. index.js 에 들어가 다음과 같이 입력해줍니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.module.css"; import { Divider, Header, Loader } from "semantic-ui-react"; export de..

• format_list_bulleted Next.js
• · 2023. 12. 12.
• textsms

Dynamic Routes

Dynamic Routes 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) - 사용된 API 1. Dynamic Routes 배우기 전 - 이젠 api를 통해서 상품을 불러오겠습니다. - #1. api 호출을 위해서 VScode 터미널에 npm i axios를 입력하여, 설치해줍니다. - #2. 이제 index.js에 다음과 같이 입력합니다. import Axios from "axios"; import Head from "next/head"; import { useEffect, useState } from "react"; import ItemList from "@/src/component/ItemList"; import styles from "@/styles/Home.m..

• format_list_bulleted Next.js
• · 2023. 12. 11.
• textsms