codinghatso

1장은 github에 준비되어 있는 학습자료를 내 로컬환경에 set up 하는 내용입니다.2장은 로컬환경에서 정상 작동하는지 확인하는 챕터입니다.3장은 편집 후에 Fast Refresh가 되는지 확인하는 챕터입니다. (저장 후 페이지 새로고침 없이 적용되는 현상)4장은 앞으로 학습할 내용을 미리 공지하는 챕터입니다.통합 파일 시스템 라우팅을 사용해 new page를 만들기.Link component를 client-side 에서 페이지간 탐색을 어떻게 하는지 학습.code splitting과 prefetching을 우한 튼튼한 기반 학습.5장은 1장을 건너띈 학습자를 위한 챕터인 것 같습니다.6장은 Next.js의 파일시스템 기반 라우팅을 복습하는 챕터입니다. page/posts/first-post.js ..

이번 장에서 배울 내용* 메타데이터란 무엇인가.* 메타데이터 유형.* 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법.* 메타데이터를 사용하여 파비콘을 추가하는 방법. 메타데이터란 무엇인가?웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부 정보를 제공합니다. 메타데이터는 페이지를 방문하는 사용자에게 보이지 않습니다. 대신, 페이지의 HTML에 내장된 비하인드 스토리에서 작동하며, 일반적으로  요소. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요합니다.메타데이터가 중요한 이유는?메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하여 검색 엔진과 소셜 미디어 플랫폼에서 더 쉽게 접근하고 이해할 수 있게 합니다. 적절한 메타데이터는 검색..

-ai를 사용해 개념정리 했음을 공지합니다.- 이번 장에서 배울 내용* 인증이란 무엇인가요.* NextAuth.js를 사용하여 앱에 인증을 추가하는 방법.* 미들웨어를 사용하여 사용자를 리디렉션하고 경로를 보호하는 방법.* React's 사용 방법 useActionState 보류 중인 상태와 폼 오류를 처리합니다.인증이란 무엇인가? (Authentication)인증은 오늘날 많은 웹 애플리케이션의 핵심 부분이고, 시스템이 사용자가 누구인지 확인하는 방식입니다.보안 웹사이트는 종종 사용자의 신원을 확인하기 위해 여러 가지 방법을 사용합니다. 예를 들어, 사용자 이름과 비밀번호를 입력한 후 사이트에서 기기로 인증 코드를 보내거나 Google Authenticator와 같은 외부 앱을 사용할 수 있습니다. 이..

-ai를 사용해 개념정리 했음을 공지합니다.- 이번 장에서 배울 내용* 사용 방법eslint-plugin-jsx-a11y Next.js와 함께 접근성 모범 사례를 구현합니다.* 서버 측 양식 검증을 구현하는 방법.* 반응 사용 방법useActionState 양식 오류를 처리하여 사용자에게 표시합니다.useActionState 접근성이란 무엇인가 - What is accessibility?접근성은 장애인을 포함한 모든 사람이 사용할 수 있는 웹 애플리케이션을 설계하고 구현하는 것을 말합니다.키보드 내비게이션, 시맨틱 HTML, 이미지, 색상, 동영상 등 다양한 분야를 다루는 방대한 주제입니다.이 과정에서는 접근성에 대해 자세히 설명하지 않습니다.Next.js에서 제공하는 접근성 기능과 애플리케이션의 접근성..

이번 장에서 배울 내용* 스페셜 사용 방법error.tsx 경로 세그먼트에서 오류를 발견하고 사용자에게 폴백 UI를 보여주기 위해 파일을 작성합니다.* 사용 방법notFound 함수 및not-found 404개의 오류를 처리할 파일입니다(존재하지 않는 리소스의 경우).next.js에서 에러 핸들링을 어떻게 하는지 배운 챕터챕터를 시작하면서 데이터베이스와 관련된 에러는 치명적일 수 있기 때문에 try catch문을 사용하는 걸 권장한다.Error Handling 2가지 개념을 소개한다.error.tsx 와 not-found.tsx 이다.점차 폴더 기반 시스템에 익숙해지는 중이라면 이해하기 쉬울 것이다.우선 invoices 폴더 내의 error를 관리하는 게 목적이니 해당 폴더의 자식으로 error.tsx ..

-ai를 사용해 개념정리 했음을 공지합니다.- invoices page에서 invoices 생성, 업데이트 및 삭제 기능을 추가하는 작업을 진행할 것이다.이번 장에서 배울 내용* React Server Actions란 무엇이며, 이를 사용하여 데이터를 변경하는 방법입니다.* 양식 및 서버 구성 요소 작업 방법.* 현지인과 협력하는 모범 사례 FormData 객체, 유형 검증 포함.* 클라이언트 캐시를 다시 검증하는 방법 revalidatePath API.* 특정 ID로 동적 경로 세그먼트를 만드는 방법. 📌 React Server Actions 정의React Server Actions는 Next.js에서 서버에서 직접 실행할 수 있는 비동기 함수를 의미해요.이를 사용하면 클라이언트에서 서버로 데이터를 ..

-ai를 사용해 개념정리 했음을 공지합니다.- invoices page를 완성하는 챕터입니다. invocies page에는 검색기능과 6개의 고객 정보를 담는 테이블 6개를 넘어서면 다음 page의 데이터를 가져오는 Pagination 기능 총 3가지를 구현합니다.검색 원리 분석/dashboard/invoices?page=1&query=pending URL쿼리를 객체로 묶어 보면 이렇게 표시할 수 있다.{page: '1', query: 'pending'}.'use client';import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';import { useSearchParams, usePathname, useRouter } from 'next/..

-ai를 사용해 개념정리 했음을 공지합니다.- 📌 Next.js의 부분 프리렌더링 (Partial Prerendering, PPR)**부분 프리렌더링(Partial Prerendering, PPR)**은 Next.js 14에서 도입된 실험적 기능으로,정적(Static) 콘텐츠와 동적(Dynamic) 콘텐츠를 한 페이지에서 동시에 활용할 수 있도록 해주는 새로운 렌더링 방식이에요.✅ 기존 렌더링 방식의 문제점Next.js에서는 기존에 페이지를 렌더링 할 때 두 가지 방식을 사용했어요.정적 생성(Static Generation, SSG)빌드 시 HTML을 생성하여 빠르게 제공.데이터가 거의 변경되지 않는 페이지에 적합.하지만, 실시간 데이터가 필요할 경우 사용하기 어려움.서버 사이드 렌더링(Server-S..