codinghatso

Next.js 는 프레임워크입니다. 때문에 프레임워크에서 추구하는 방향성과 제작과정을 준수해야 합니다.우선 폴더 구조부터 파악하고 접근할 필요가 있습니다.https://nextjs.org/docs/app/getting-started/project-structure Getting Started: Project Structure | Next.jsLearn the folder and file conventions in Next.js, and how to organize your project.nextjs.org 공식 문서에 첫 글에선 기본적인 폴더 구조를 소개합니다.app, pages, public, src 최상단 디렉토리 이하 루트 디렉터리에서 형상관리 저장소에 업로드하면 안 되는 파일들을 안내해주고 있습니..

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