Front-End Study/Next.js

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..

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

정적 생성 (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 {..

에러 페이지와 환경 변수 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..

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..

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..

페이지 레이아웃 생성 0. 시작하기 전.. - 코딩앙마님의 강의를 참고하였습니다! (강의영상 바로가기) 1. 페이지 레이아웃 생성 - 페이지 레이아웃을 생성해봅시다! - #1. 생성하기 전에 먼저 다음과 같은 코드를 VScode의 터미널에 입력해, 시맨틱 UI react를 설치해줍니다. → 이를 이용해서 레이아웃을 작업할 예정입니다. npm install semantic-ui-react semantic-ui-css - #2. 그 후, 만들었던 next 폴더에 src 폴더를 생성한 뒤, 그 폴더 안에 component 폴더를 더 생성합니다. - #3. component 폴더 안에 Top.js 파일과 Footer.js 파일을 생성합니다. - #4. Top.js 파일에 다음과 같이 입력해줍니다. import ..

Next.js 설치 1. Next.js 설치 - 이제 Next.js를 설치해봅시다! (Next.js 사이트를 참고하였습니다) - #1. 먼저 원하는 폴더를 생성 후, 터미널에 들어가 다음과 같이 입력해줍니다. → 여러 선택사항이 나오는데, 원하는 것을 선택하면 됩니다. npx create-next-app@latest - #2. 설치가 끝났으면 VScode로 들어가 다음과 같이 입력하여 접속해봅시다. → 브라우저에 localhost:3000을 입력하면, Next.js 페이지가 나오게 됩니다! npm run dev - #3. index.js에 들어가 다음과 같이 수정해보고 다시 들어가봅시다. → 수정되어 출력되었음을 확인할 수 있습니다. import { Inter } from "next/font/google..

Next.js 1. Next.js란? - Next.js는 React 기반의 웹 애플리케이션을 쉽게 개발할 수 있게 도와주는 오픈 소스 JavaScript 프레임워크입니다. - 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 지원합니다. 2. 특징 및 장점 - 서버 사이드 렌더링(SSR) - 페이지를 서버에서 렌더링하여, 초기 로딩 속도를 향상시키고 검색 엔진 최적화를 개선합니다. - 정적 사이트 생성(SSG) - 빌드 시점에 미리 페이지를 생성하여, 성능을 향상시킵니다. 특히 정적 컨텐츠에 적합합니다. - API 라우팅 - 페이지 간의 이동이 간편하며, 파일 시스템을 기반으로한 경로 매핑이 가능합니다. - 개발 환경 간편화 - 자동 리로딩, 코드 스플리팅, 모듈 사티일링 등..