Next.js 필수 개발 가이드 3시간 완성!

[Sucode] 3시간 만에 끝내는 Next.js 개발의 모든 것

필요한 것들만 담았습니다.

1. Next.js의 기본 구조와 원리: Next.js 프로젝트의 구조, 라우팅 시스템, 컴포넌트 모델 이해

2. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG): Next.js의 서버 사이드 렌더링과 정적 사이트 생성에 대한 개념 및 구현 방식

3. 데이터 페칭과 API 라우팅: Next.js를 사용한 다양한 데이터 페칭 방법과 API 라우팅 실습

4. 스타일링과 디자인 시스템: CSS-in-JS, TailwindCSS를 활용한 현대적인 UI 구축 방법

5. Prisma를 사용한 데이터베이스 관리: ORM 도구인 Prisma를 활용하여 데이터베이스 스키마를 설계하고 CRUD 작업을 수행하는 방법

6. Authjs를 통한 사용자 인증: Authjs를 사용하여 다양한 인증 방식(예: Google OAuth, 이메일/비밀번호 인증)을 구현하는 방법

7. 실전 프로젝트 구축: Next.js를 포함한 여러 도구들을 사용하여 실제 프로젝트를 구축하고 적용하는 실습 경험

8. 최적화 전략: 페이지 로드 시간 감소, SEO, 이미지 및 자산 최적화, 코드 분할 및 지연 로딩 등을 포함한
   Next.js 성능 최적화 방법, 서버와 클라이언트 사이드 렌더링의 효율적인 사용 및 웹사이트 속도와 사용자 경험 개선에 초점을 맞춘 전략

이런 분들께 추천해요

수강 후에는

• Next.js의 핵심 개념과 기능에 능숙해질 수 있습니다.

• 모던 웹 앱을 설계하고 구축하는 데 필요한 기술을 습득합니다.

• 실제 프로젝트에 Next.js를 효과적으로 적용할 수 있게 됩니다.

  
  

안녕하세요 Su입니다😸😸

개발자로서의 여정을 걸어오며, 저는 코드와 소스의 다양성 속에서 끊임없이 배워왔습니다. 하지만 때로는 정보의 바다에서 방향을 잃기도 했습니다. 이러한 경험은 저에게 중요한 깨달음을 주었습니다. 바로, 많은 정보 속에서 핵심을 파악하고 이를 명확하게 전달하는 것의 중요성입니다.

저는 각 주제의 핵심을 추출하고 이를 간결하고 명료하게 전달하는 데 큰 즐거움을 느낍니다. 이 강의를 통해 학습자 여러분이 개발의 핵심을 명확히 이해하고, 자신만의 중심을 찾는 데 도움이 되기를 바랍니다. 함께 배우고 성장하는 과정에서 여러분과 소통하며, 이 분야에 대한 제 열정을 나누고자 합니다.

이런 내용을 배워요

1. Next.js 기본

서버 사이드 렌더링 리액트 애플리케이션을 구축하기 위한 강력한 프레임워크인 Next.js의 핵심을 파헤쳐보세요. 이 섹션은 기본기에 대한 철저한 이해를 바탕으로 보다 고급 주제로 넘어가기 위한 기초를 제공합니다.

주요 특징:

• 프로젝트 구조: 효율적인 개발을 위한 Next.js 프로젝트의 표준 구조를 배웁니다.

• 라우팅 및 네비게이션: 내장된 라우팅 시스템과 동적 라우트에 대해 이해합니다.

• 클라이언트 및 서버 컴포넌트: 클라이언트 측과 서버 측 컴포넌트의 차이점과 상호 작용을 탐구합니다.

• 데이터 페칭: Next.js 애플리케이션에서 데이터를 가져오는 다양한 전략을 마스터합니다.

• 캐싱: 데이터 캐싱을 통한 성능 최적화 기법을 발견합니다.

• 정적 및 동적 렌더링: 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 비교하고 구현합니다.

2. 스타일링

Next.js에서 스타일링의 비밀을 탐구하세요. 이 섹션은 현대적인 CSS 프레임워크를 사용하여 시각적으로 매력적이고 반응형 디자인을 만드는 데 중점을 둡니다.

주요 특징:

• 글로벌 스타일: Next.js 애플리케이션 전반에 걸쳐 보편적인 스타일을 적용하는 방법을 배웁니다.

• TailwindCSS: 유틸리티 중심의 스타일링을 위해 TailwindCSS를 실습합니다.

• DaisyUI: TailwindCSS 플러그인인 DaisyUI를 사용하여 컴포넌트 기반 디자인을 구현합니다.

3. 라우팅 및 네비게이션

Next.js에서 라우팅 및 네비게이션의 고급 측면을 깊이 있게 다룹니다. 이 포괄적인 섹션은 기본 라우팅부터 우아한 에러 처리에 이르기까지 모든 것을 다룹니다.

주요 특징:

• 동적 라우트 및 세그먼트: 동적 라우트와 모든 세그먼트를 구현하고 관리합니다.

• 쿼리스트링 파라미터: 쿼리 스트링을 사용하여 동적 콘텐츠를 제공합니다.

• 레이아웃 및 네비게이션: 효과적인 레이아웃을 설계하고 네비게이션 패턴을 이해합니다.

• 프로그래매틱 네비게이션: 복잡한 시나리오를 위해 코드를 통한 네비게이션 제어 방법을 배웁니다.

• 로딩 UI 및 오류 처리: 로딩 인터페이스를 만들고 '찾을 수 없음' 및 예기치 않은 오류를 우아하게 처리하는 방법을 배웁니다.

4. API

Next.js 생태계 내에서 API를 구축하고 관리하는 방법을 배웁니다. 이 섹션에서는 Zod를 사용하여 검증을 포함한 생성, 업데이트 및 관리 컬렉션에 대해 다룹니다.

주요 특징:

• CRUD 작업: 생성, 읽기, 업데이트 및 삭제 컬렉션의 전체 주기를 이해합니다.

• Zod: 스키마 정의 및 데이터 유효성 검사를 위해 Zod를 사용합니다.

5. Prisma

현대적인 개발을 위한 ORM인 Prisma를 사용하여 Next.js에서 CRUD 작업을 집중적으로 다룹니다.

주요 특징:

• Prisma를 사용한 CRUD: Prisma를 사용하여 생성, 읽기, 업데이트 및 삭제 작업을 수행하며, 이를 Next.js 애플리케이션과 원활하게 통합합니다.

6. 파일 업로드

Cloudinary를 통합하여 이미지 관리에 중점을 둔 파일 업로드를 구현하는 방법을 배웁니다.

주요 특징:

• Cloudinary 통합: 이미지 및 비디오 관리를 위한 클라우드 기반 서비스인 Cloudinary를 사용하여 파일 업로드를 마스터합니다.

7. Authjs

Next.js에서 인증의 복잡성을 탐색합니다. 이 섹션에서는 Authjs를 사용하여 다양한 인증 전략을 구현하는 방법을 다룹니다.

주요 특징:

• Authjs 설정: 사용자 인증을 위해 Authjs를 구현합니다.

• Google 제공자 및 자격증명: Google OAuth 및 기타 자격증명 기반 인증 방법을 통합합니다.

• 데이터베이스 어댑터: 사용자 데이터를 저장하기 위해 데이터베이스 어댑터를 사용하는 방법을 배웁니다.

8. 배포 (Vercel)

Vercel을 사용하여 애플리케이션을 배포하는 방법을 배우면서 Next.js 여정을 마무리합니다. Vercel은 정적 사이트와 서버리스 함수를 위한 클라우드 플랫폼입니다.

주요 특징:

• Vercel을 사용한 배포: Next.js 애플리케이션을 Vercel에 배포하는 과정을 이해하며, 최상의 관행과 흔한 함정에 대해 배웁니다.

궁금한 점이 있나요?

수강 전 참고 사항