1: 넥스트 시작 

소스 : 

https://github.com/braverokmc79/macaronics_nextjs_the_complete_developers_guide

2: 데이터 변경하기 - 뮤테이션 활용 (Changing Data with Mutations)

SQLite와 Prisma를 활용한 코드 스니펫 저장소 설정

1. 프로젝트 및 코드 편집기 준비

   • 프로젝트를 생성하고, 코드 편집기를 snippets 디렉터리 내부에서 실행.

2. 데이터 저장 방식 결정

   • 코드 스니펫을 영구적으로 저장하기 위해 SQLite 데이터베이스를 사용.
   • SQLite는 파일 기반 데이터베이스로, 프로젝트 디렉터리 내에 저장됨.

3. Prisma 설치 및 초기 설정

   • 데이터베이스 관리를 위해 Prisma 라이브러리를 활용.
   • 터미널에서 프로젝트 디렉터리 내에서 실행:

     pnpm install prisma
     

   • Prisma 초기화 실행:

     npx prisma init --datasource-provider SQLite
     

   • 실행 후, 프로젝트 루트 디렉터리에 prisma 폴더가 생성됨.
   •  

4. 데이터 모델 정의

   • prisma 폴더 내 schema.prisma 파일을 열어 데이터 모델을 정의.
   • 코드 스니펫을 저장하기 위한 Snippet 모델 추가:

     
     model Snippet {
       id    Int     @id @default(autoincrement())
       title String
       code  String
     }

5. 마이그레이션 실행 (DB 생성 및 구조 적용)

   • 터미널에서 다음 명령어 실행:

     npx prisma migrate dev
     

   • 마이그레이션 이름을 입력 (예: add_snippets).

6. Prisma를 활용한 데이터 관리

   • Prisma는 데이터베이스와 상호작용할 수 있는 코드도 자동 생성해줌.
   • 이를 활용해 데이터 추가, 수정, 삭제 등의 작업 가능.

7. 프로젝트 실행 및 확인

   • 서버 실행:

     pnpm run dev
     

   • 브라우저에서 localhost:3000 접속하여 정상 동작 확인.

3: React 서버 컴포넌트로 콘텐츠 스트리밍하기

(Streaming Content with React Server Components)

4: 서버 액션 완벽 가이드 (Server Actions in Great Detail)

5: useFormState 훅을 활용한 서버 폼 처리

(Server Forms with the UseFormState Hook)

6: Next.js의 캐싱 시스템 이해하기 (Understanding Next's Caching System)

7: Next-Auth를 활용한 인증 구현 (Authentication with Next-Auth)

8: 데이터 활용 - 데이터베이스 쿼리 (Using Data - Database Queries)

9: 요청 메모이제이션을 활용한 캐싱 (Caching with Request Memoization)

10: 검색 기능 구현하기 (Implementing Search Functionality)

11: 기타  React Primer