Daniel
close
프로필 배경
프로필 로고

Daniel

  • 분류 전체보기 (27)
    • FE (20)
      • Javascript (7)
      • NextJS (6)
      • React (5)
      • Trouble Shooting (1)
      • 면접 준비 (1)
    • 알고리즘 (7)
      • 백준 (7)
      • 프로그래머스 (0)
      • LeetCode (0)
  • 홈
  • 태그
  • 방명록
NextJS 공식문서 파헤치기 (Linking and Navigating)

NextJS 공식문서 파헤치기 (Linking and Navigating)

NextJS 에서 경로를 탐색하는 방법 컴포넌트 사용useRouter 훅 사용(클라이언트 컴포넌트)redirect 함수 사용(서버 컴포넌트)네이티브 Histroy API 사용1️⃣ 컴포넌트 컴포넌트는 HTML 태그를 확장하여 경로간 prefetching 과 클라이언트 측 탐색을 제공하는 내장 컴포넌트이다.NextJS에서 경로를 탐색하는 기본적이고 권장되는 방법next/link 에서 import 하여 사용할 수 있다.컴포넌트에 href prop을 전달하여 사용 가능 import Link from 'next/link'export default function Page() { return Dashboard}2️⃣ useRouter() 훅클라이언트 컴포넌트에서 useRouter 훅을 통해 경로를 변경할 수..

  • format_list_bulleted FE/NextJS
  • · 2024. 11. 14.
  • textsms
NextJS 공식문서 파헤치기 (Defining Routes, Pages, Layouts and Templates)

NextJS 공식문서 파헤치기 (Defining Routes, Pages, Layouts and Templates)

Defining Routes1️⃣ 경로 생성폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다.각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다.page 파일이 없는 폴더는 공개적으로 액세스할 수 없다.2️⃣ UI 만들기NextJS 공식문서 파헤치기(1) 에서 알아보았던 파일 컨벤션에 따라 각 경로 세그먼트에 대하여 UI를 만들 수 있다.// app/page.tsx// 각 폴더에 page 파일을 사용하여 해당 폴더 라우트에 액세스할 수 있게 해준다.export default function Page() { return Hello, Next.js!}Pagespage.js는 경로에 고유한 UI 이다.컴포넌트를 내보내는 페이지를 정의할 수 있다.ex) index 페이지를 ..

  • format_list_bulleted FE/NextJS
  • · 2024. 11. 14.
  • textsms
NextJS 공식문서 파헤치기 (Routing Fundamentals)

NextJS 공식문서 파헤치기 (Routing Fundamentals)

라우팅 기본 사항1️⃣ App RouterNextjs 13 버전에서 React Server Components 를 기반으로 새롭게 구축 하였다.app 이라는 이름의 디렉토리를 통해 기본 레이아웃을 정의한다.기본적으로 내부 컴포넌트는 React Server Components 이다. use client 예약어를 사용하여 Client Components를 사용할 수도 있다.(Server Components에 대한 자세한 내용은 추후에 다루도록 하겠다.)2️⃣ 폴더와 파일의 역할폴더는 경로를 정의하는 데 사용된다.파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용된다.경로의 각 폴더는 경로 세그먼트를 나타낸다. 각 경로 세그먼트는 URL 경로 의 해당 세그먼트 에 매핑된다.파일 이름 규칙layout: 세그..

  • format_list_bulleted FE/NextJS
  • · 2024. 11. 13.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • 5
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (27)
    • FE (20)
      • Javascript (7)
      • NextJS (6)
      • React (5)
      • Trouble Shooting (1)
      • 면접 준비 (1)
    • 알고리즘 (7)
      • 백준 (7)
      • 프로그래머스 (0)
      • LeetCode (0)
최근 글
인기 글
최근 댓글
태그
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바