공개되지 않은 강의로
수강이 제한됩니다.
수강이 제한됩니다.
초급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.
정보의 홍수 속에서 어디서부터 시작해야 할지 막막하셨나요? 명확하고 간결한 이 강의로 Next.js 풀스택 웹 개발의 첫걸음을 시작해보세요!
✍️
이런 걸
배워요!
이런 걸
배워요!
Next.js (넥스트제이에스)
풀스택 웹 개발
프론트엔드 개발
리엑트 (React) 개발
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
React 기초를 이해한 개발자 분들
프론트엔드 개발자로 성장하고자 하는 분들
풀스택 개발에 관심 있는 분들
성능과 생산성 향상을 추구하는 개발자
취업이나 프리랜서로 경쟁력을 갖추고자 하는 분들
기술 스택을 현대화하고자 하는 기업 개발팀
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
HTML & CSS
JavaScript
React
TypeScript
안녕하세요
Su 입니다.
Su 입니다.
커리큘럼
총 68 개
˙ 2시간 52분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Next.js: 기초
9 강
∙ 31분
Next.js - 개발환경 설정
미리보기
01:20
Nextjs - FirstNextApp
미리보기
02:02
Next.js - 프로젝트 구조(Project Structure)
미리보기
02:42
Next.js - 라우팅과 네비게이션(Routing and Navigation)
미리보기
04:42
Next.js 클라이언트 컴포넌트와 서버 컴포넌트(Client and Server Component)
미리보기
07:41
Next.js - 데이터 패칭(Data Fetching)
미리보기
07:39
Next.js - 캐싱(Caching)
미리보기
02:07
Next.js - 정적 렌더링과 동적 렌더링(Static and Dynamic Rendering)
미리보기
03:25
Next.js: 기초 요약
섹션 1. Next.js: Styling
5 강
∙ 11분
Next.js - 글로벌 스타일(Global Styles)
01:44
Next.js - CSS Modules
03:36
Next.js - TailwindCSS
02:33
Next.js - DaisyUI(Tailwind Library)
04:00
Next.js - Styling 요약
섹션 2. Next.js: 라우팅과 네비게이션
11 강
∙ 45분
Next.js 라우팅 동작 방식(Routing)
04:56
Next.js - 다이나믹 라우트(Dynamic Routes)
04:57
Next.js - 캐치올세크먼트(Catch All Segments)
02:32
Next.js - 쿼리스트링(QueryString Parameters)
06:25
Next.js - 레이아웃(Layouts)
05:26
Next.js - 네비게이션(Navigation)
03:16
Next.js - 프로그래메틱 네비게이션(Programmatic Navigation)
03:53
Next.js - 로딩 UI 출력(Loading UIs)
04:52
Next.js - Not Found Errors 처리
03:01
Next.js - 예상치 못한 오류 처리(Unexpected Errors)
05:45
Next.js - 라우팅과 네비게이션 요약
섹션 3. Next.js: APIs 생성
8 강
∙ 14분
Next.js - 객체 컬렉션 가져오기(GET)
02:58
Next.js - 단일 객체 가져오기(GET)
01:13
Next.js - 객체 생성하기(POST)
01:49
Next.js - 객체 업데이트하기(PUT)
02:09
Next.js - 객체 삭제하기(DELETE)
01:29
Next.js - Zod 라이브러리를 활용해 유효성 검사하기(Zod)
02:49
Next.js - APIs Mini Project
02:12
Next.js: APIs 생성 요약
섹션 4. Next.js: 프리즈마를 활용한 데이터베이스 구축(Prisma)
11 강
∙ 22분
Next.js - MySQL 설치
01:17
Next.js - Prisma 설치
02:36
Next.js - 데이터 모델 정의(Prisma)
02:17
Next.js - 마이그레이션(Prisma Migration)
02:09
Next.js - 프리즈마 클라이언트 생성(Prisma Client)
02:20
Next.js - 데이터 읽어오기(GET)
03:37
Next.js - 데이터 생성하기(POST)
02:25
Next.js - 데이터 업데이트하기(PUT)
01:59
Next.js - 데이터 삭제하기(DELETE)
01:57
Next.js - Products Mini Project
01:38
Next.js: 프리즈마를 활용한 데이터베이스 구축(Prisma) 요약
섹션 5. Next.js: 파일 업로드
4 강
∙ 9분
Next.js - Cloudinary 설정하기
01:42
Next.js - Cloudinary 이미지 업로드하기
03:07
Next.js - Cloudinary 업로드한 이미지 렌더링하기
03:42
Next.js - Cloudinary 파일 업로드 위젯 설정하기
01:22
섹션 6. Next.js: authjs(NextAuth)를 활용한 인증 기능 구현
11 강
∙ 25분
Next.js - authjs(nextauth) 설정
02:35
Next.js - 구글 로그인 설정(Google Provider)
04:09
Next.js - authjs인증 세션 이해하기(Authentication Sessions)
01:51
Next.js - 클라이언트단에서 세션에 접근하기(Accessing Sessions on the Client)
02:55
Next.js - 서버단에서 세션에 접근하기(Accessing Sessions on the Server)
01:19
Next.js - 로그아웃 구현하기
00:52
Next.js - 조건부 라우트 구현하기(Protected Routes)
02:43
Next.js - 데이터베이스 어댑터 설정하기(Database Adapter)
03:34
Next.js - 크레덴셜 프로바이더 설정하기(Credentials Providers)
02:51
Next.js - 회원가입 기능 구현하기(Signing up)
02:34
Next.js authja(NextAuth)를 활용한 인증 기능 구현 요약
섹션 7. Next.js 배포
4 강
∙ 6분
Next.js 앱 빌드하기(npm run build)
02:05
Next.js 깃헙에 업로드하기(Uploading the code to Github)
01:30
Next.js 배포하기(Vercel)
01:39
Next.js 배포 오류 처리하기(Troubleshooting Deployment Errors)
01:45
섹션 8. 섹션 8: Next.js: Optimizations (Optional)
5 강
∙ 4분
Next.js: 이미지 최적화
03:09
Next.js: Search Engine Optimization(SEO)
01:13
Next.js: Script for Googla Analytics
Next.js: Fonts
Next.js: Lazy Loading
강의 게시일 : 2023년 12월 05일
(마지막 업데이트일 : 2024년 01월 08일)
수강평
수강생분들이 직접 작성하신 수강평입니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️