7개 프로젝트로 완벽 대비하는 Next.js 실무 (ft. 성능 개선)
초격차 패키지 Online.
7개 프로젝트로 완벽 대비하는
Next.js 실무
ft. 성능 개선
-
01 기초-심화를 아우르는 7개 프로젝트
다양한 규모와 도메인의 7개 프로젝트로 Next.js의 상황별 활용법 완벽 학습
-
02 현업 프로세스 그대로, 완벽한 실무 대비
요구사항 분석부터 유지 보수까지 커버하며 단계별 의사결정 & 개발전략 수립 실습
-
03 빅테크 & 스타트업 개발자의 노하우
빅테크 기업 및 유명 스타트업 출신 개발자의
경험 기반 Next.js 활용 꿀팁
프론트엔드 개발자에게 꼭 필요한 Next.js를 학습할 때
유의해야 할 3가지
3가지 포인트를 모두 만족시키는 패스트캠퍼스만의 Next.js 강의로
바로 실무에 적용할 수 있는 실력을 갖춰보세요
Next.js 마스터를 위해 작정하고 준비한
강의 핵심 포인트 8가지
Point 1
7개의 기초-심화 프로젝트로 완벽 정복하는
Next.js 개념 & 실무 활용
Next.js의 필수 개념 이해부터 실무 활용까지, 세 가지 파트로 나뉘어진 7개의 실습 프로젝트를 통해
Next.js의 개념을 이해하는 것을 넘어 바로 현업에서 활용할 수 있도록 도와드립니다.
-
| 학습 목표
∙ 퀴즈앱을 React, Next 12, Next 13으로 반복 구현하며 각 스택의 차이를 학습
∙ React > Next.js, Next.js 12 > Next.js 13 마이그레이션 대비 -
| 학습 목표
일기예보 앱을 React, Next 12, Next 13으로 반복 구현하며 각 스택의 차이를 학습 및 React > Next.js, Next.js 12 > Next.js 13 마이그레이션 대비
-
| 학습 목표
∙ 페이지 특성에 따른 렌더링 전략 선택 실습
∙ Meta Data, Referral을 고려한 SEO 개선
∙ 하이브리드 웹 애플리케이션의 동작 이해
∙ Page Router > App Router 마이그레이션 -
| 학습 목표
∙ RAG(Retrieval Augmented Generation) 기반의 기업용 챗봇 구현 실습
∙ Dynamic Prompting 사용
∙ OpenAI API의 Function Calling 사용
∙ Next/image, Next/font로 이미지 및 폰트 최적화
∙ Next.js의 캐싱 기능을 사용하여 로딩 속도 개선
∙ Sitemap, Metatag로 SEO 적용하기
∙ API Route와 Supabase로 API 만들기
| N가지 구현 기능
01 쇼핑몰 홈페이지
∙ 회원가입
∙ 로그인
∙ 상품리스트
∙ 찜한 상품
∙ 상품 검색
더보기
02 상품 상세 페이지∙ 이미지 캐러셀
∙ 찜하기
∙ 상품 상세 컨텐츠
∙ 같은 태그의 상품
03 상점 상세 페이지
∙ 정보 수정
∙ 리뷰
∙ 팔로우 & 팔로워
∙ 판매 리스트
∙ 상품 목록
04 상품 등록 페이지
∙ 이미지 업로드
∙ 시군구 설정
∙ 태그 설정
05 상점 상세 페이지
∙ 텍스트 입력창
∙ 이미지 첨부
∙ 실시간 채팅
∙ 실시간 채팅 기능을 구현하며 실시간 데이터 컨트롤을 이해
∙ Prisma, MongoDB를 사용하여 서버 구축
∙ Route Handlers로 서버 구현하기
∙ Recoil로 전역 상태관리 하기
∙ 페이지별로 다른 렌더링 전략 세우고 적용하기
∙ Meta Data로 SEO 적용하기
| N가지 구현 기능
01 홈 화면
∙ 소셜 로그인
∙ 프로필
∙ 검색 필터 (지역, 날짜, 여행자)
∙ 숙소 리스트
∙ 위시리스트
더보기
02 숙소 상세∙ 찜하기
∙ 공유하기
∙ 후기
∙ 위치 정보
∙ 예약하기
03 숙소 예약
∙ 예약 정보 수정 (날짜, 체크인 시간, 게스트 수)
∙ 예약금 결제
04 숙소 등록
∙ 숙소 등록/수정/삭제
Point 2
고성능 서비스 구축을 위한 아키텍처 설계 &
성능 개선 전략 마스터
프론트엔드 개발자 채용 공고라면 빠지지 않고 등장하는 키워드 [성능]
Next.js를 활용해서 웹 성능을 높일 수 있습니다.
✓ Check 01
고성능 프론트엔드 환경 구성을 위한
4개의 대표 렌더링 전략 실습
비용효율적으로 웹 성능을 높이기 위해선 페이지의 특성에 따라 적절한 렌더링 방식을 선택해야 합니다.
다양한 목표와 규모의 4개 서비스를 만들어보며 대표 렌더링 방식을 학습합니다.
✓ Check 02
Next.js 환경에서 써보는
7가지 성능 개선 전략
프론트엔드 개발 시 자주 쓰이는 성능 개선 기법과
Next.js에서만 제공하는 기능을 어디에, 어떻게 사용하여 성능을 개선하는지 알려드립니다.
| Next.js에서만 제공하는 3가지 성능 개선 전략 |
-
Server Actions
w. 상품 등록 페이지서버에서 실행되는 함수를 클라이언트에서 호출하여, 서버와 클라이언트 간의 데이터 통신을 간소화하고 코드의 재사용성을 향상.
-
Parallel Routes
w. 숙소 예약 페이지동일한 레이아웃에서 하나 이상의 페이지를 렌더링할 수 있게 해주며, 복잡한 라우팅 패턴을 구현하는 데에 사용.
-
Next/image
w. 상품 썸네일next/image 컴포넌트를 사용하면 장치의 크기에 맞춘 적절한 이미지 사이즈와 최신 이미지 포맷을 지원.
| Next.js 환경에서 써보는 4가지 프론트엔드 성능 개선 전략 |
-
Lazy Loading
w. 추천 리스트페이지 내에서 바로 필요하지 않은 이미지들의 로딩 시점을 뒤로 미뤄, 로딩 속도를 개선하고 유저의 리소스 비용을 감소.
-
Throttle / Debounce
w. 검색 기능 (자동 완성)불필요한 API 호출의 빈도를 줄이는 기법으로, 짧은 시간 동안 이벤트가 계속 발생하면 그 중 마지막 이벤트만 처리.
-
Tree-Shaking
w. 전 페이지 로딩 속도 향상특정 모듈에서 실제로 사용하고 있는 코드만 빌드하여 번들 크기를 줄이고, 결과적으로 로딩 속도가 향상.
-
Meta Data
w. 전 페이지 SEO 개선HTML 헤드 요소 내의 메타 및 링크 태그를 정의하는 데 사용할 수 있는 메타데이터 API로, 향상된 SEO가 가능.
Point 3
실무에서 완벽히, 대응하기 위해
Next.js Ver12 /13 모두 한 강의에서
Ver. 12와 Ver. 13의 차이가 큰 Next.js 특성상 실무에서 100%
대응하기 위해 두 가지 버전 모두 심화 강의 + 실습을 진행합니다.
-
| React
∙ React Router Dom 적용
∙ React 컴포넌트 생성
| Next.js 12
∙ Page Router로 라우팅
∙ Next Auth 인증
∙ 컴포넌트 생성
| Next.js 13
∙ App Router로 라우팅
∙ RSC(React Server Component) 생성 -
| 버전 마이그레이션
∙ API Route를 사용하여 API 만들기
∙ App Route의 Nested App Layout으로 전환하기
∙ 각 컴포넌트를 React Server Component로 전환하기
∙ 달라진 Next/image, next/font 톺아보기 -
| 구현
∙ Route Handlers를 사용하여 API 만들기
∙ App Layout으로 페이지 레이아웃 구현하기
∙ 달라진 next/image, next/font로 최적화하기
Point 4
현업과 99% 유사한 대규모 서비스 고도화 경험!
국내 최대 중고거래 플랫폼 만들기
각 기능의 특징에 따라 성능 개선 전략이 달라지고, 개선된 상태를 유지하며 마이그레이션을 진행해야 합니다.
기능구현, 성능개선, 마이그레이션까지 실제 서비스와 유사한 대규모 환경에서 적용해봅니다.
커머스 필수 기능 + 어느 도메인에서나 쓸 수 있는 플러스알파 기능까지 구현!
-
∙ 회원가입/로그인
∙ 상품 검색
∙ 오늘의 상품 추천 리스트 -
∙ 이미지 캐러셀
∙ 찜하기
∙ 상품 상세 컨텐츠
∙ 같은 태그의 상품 -
∙ 리뷰
∙ 팔로우 & 팔로워
∙ 판매 상품 목록 -
∙ 이미지 업로드
∙ 시군구 설정
∙ 태그 설정 -
∙ 텍스트 입력창
∙ 이미지 첨부
∙ 실시간 채팅
실무 빈출 조합으로 3가지 CI/CD 파이프라인 구현
-
Next.js를 개발하는 Vercel에서 제공하는 Deploy 서비스를 사용하여 가장 간편한 Next.js Application 배포를 경험합니다. -
AWS의 가상머신 EC2를 사용 하여 범용적으로 사용할 수 있는 Next.js Application 배포 환경을 경험합니다. -
AWS의 Elastic Beanstalk 서비스를 사용하여 Container화 된 Next.js Application 배포를 경험합니다.
커머스 플랫폼의 기능별로 성능 개선 전략 6가지 실습
-
Throttle/Debounce로
검색 기능 최적화 -
Virtual Scroll으로
대용량 리스트 최적화 -
Next/image로
이미지 최적화 -
Next.js의 캐싱 기능을 활용하여
전 페이지 로딩 속도 개선 -
Meta Data로
SEO 최적화
성능 개선을 유지한채로 Next.js 13으로 전환하고,
13의 신규 기능까지 적용해보자!
| 전환 |
API Route & Supabase를 사용하여 API 만들기
App Route Layout 마이그레이션 진행하기
각 컴포넌트를 App Route에 맞추어 전환하기
| 신규 적용 |
Parallel Routes로 페이지 최적화
Server Component로 초기 로딩 속도 개선
개선된 Meta Data 기능으로 SEO 강화하기
많은 회사들이 버전 12로 쓰였던 Next.js 프로젝트를 버전 13으로 마이그레이션하고 있습니다.
그 업무 중 일부는 주니어에게 주어지니, 대규모 서비스 환경에서 마이그레이션을 해본 경험은 반드시 필요합니다.
Point 5
최신 버전인 Next.13으로 구현과 성능 개선까지
풀스택 숙박 예약 플랫폼 만들기
실시간으로 페이지에 예약 현황이 반영되어야 하는 숙박 예약 플랫폼은 성능 개선이 필수!
글로벌 숙박 예약 플랫폼을 숙소 예약, 등록 기능까지 클론해보며 상황에 따른 성능 개선 전략을 실습해보세요.
✓ Check 01
실시간으로 예약 현황이 반영되는 숙박 예약 플랫폼, Next.js 13으로 구현
-
결제까지 구현하는
숙소 예약 기능 -
바로 숙소 리스트에 반영되는
숙소 등록 기능
-
리뷰를 남길 수 있는
숙소 상세 페이지 -
날짜와 위치 설정에 따라 달라지는
숙소 리스트
✓ Check 02
Next.js 13의 핵심 기능으로 성능 개선하고, 비즈니스 목표까지 달성
-
성능 측정∙ Lighthouse로 성능 측정하기
∙ @next/bundle-analyzer로 성능 측정하기 -
성능 개선∙ Lazy Loading으로 로딩 시간 줄이
∙ Throttle, Debounce로 검색 성능 개선하기
∙ Tree-shaking 및 코드 정리로 번들 크기 줄이기
∙ Parallel Routes로 성능 개선하기
+ Meta Data로 SEO 개선하기 -
비즈니스 목표 세팅∙ Google Analytics 적용하기
∙ Godaddy에서 내가 원하는 도메인으로 변경하기
∙ Google Search Console에 사이트 등록하기
실무 상황에서 개발자는 기획자와 마케터와 긴밀하게 협업하며 이들에게 적절한 정보를 제공할 수 있도록 코드를 세팅해야 합니다.
구글 애널리틱스 및 서치 콘솔 등록까지 아우르며 프로젝트를 개발힐 뿐만 아니라, 비즈니스를 더 깊이 이해하고 사용자에게 편리한 서비스를 제공해봅시다.
Point 6
Next.js 100% 실무 활용을 위한
풍성한 부록 제공
현업에서 어려움을 만날 때 검색, 도서, 커뮤니티 대신
언제나 참고할 수 있는 백과 형식의 텍스트 & 영상 가이드를 제공드립니다.
-
01
개발 효율과 협업 역량 향상을 위한!
프론트엔드 개발도구 가이드
Next.js 개발의 효율 & 퀄리티를 높히는 개발 도구를 소개합니다!
∙ 디자인 시스템의 이해
∙ 스토리북 작성법
∙ Chrome DevTools 활용법
∙ Speed Insights 성능 측정법 -
02
개발 중 에러로 인해 답답한 사람들을 위한
Next.js 13 에러핸들링 가이드
아직 에러가 많은 Next.js 13,
자주 발생하는 에러를 감지하고 처리하기 위한 에러핸들링 해설 강의 -
03
앞서나가는 포트폴리오를 위한
취업/이직을 위한 Next.js 포트폴리오
스타트업에서 대기업 S사로 이직한 강사님이 알려주는 프론트엔드 포트폴리오 구성법
∙ 프론트엔드 포트폴리오의 이해
∙ Next.js 포트폴리오 만들어보기
Point 7
Next.js의 세상으로 이끌어줄 강사님
대규모 서비스에서 Next.js를 사용해오신
유명 IT 기업 출신의 현직 개발자분들에서 실무를 배워보세요!
안재원 님
| 경력
카카오 FE 신입공채 교수자
패스트캠퍼스 강사
| 담당 파트
∙ Next.js 기초 & 마이그레이션 실습
∙ Next.js로 채팅 서비스 만들기
장동훈 님
| 경력
현) 스캐터랩 프론트엔드 개발자
전) 두들린 프론트엔드 개발자 (창업 멤버)
| 담당 파트
∙ Next.js로 블로그 + 챗봇 구현 & 성능 개선하기
박병현 님
| 경력
현) K사 프론트엔드 개발팀 팀장
전) 플루토스디에스 프론트엔드 개발자
| 담당 파트
∙ Next.js로 중고거래 플랫폼 구현 & 성능 개선하기
개발자 H님
| 경력
현) 대기업 S사 프론트엔드 개발자
전) 핀테크 스타트업 프론트엔드 개발자
| 담당 파트
∙ Route Handlers로 풀스택 숙박 예약 플랫폼 만들기
∙ 부록
Point 8
진짜 실무를 가르쳐줄
강사 디스코드 커뮤니티 운영
따라서 프로젝트를 진행하다 막히는 부분이 생기면 디스코드 커뮤니티를 활용해보세요!
수강생끼리 소통할 수 있는 즉문즉답 질문센터를 운영합니다.
이렇게 이용하면 활용도 200%
✓ 강의를 듣는 중 이해가 안가는 부분이 생기면 바로 질문
✓ 질문을 올리면 7일 이내로 강사가 직접 답변
* 본 커뮤니티는 디스코드를 통해 2023.12.06 ~ 2026.08.28 동안 운영 됩니다.
* 강사님이 채널에 입장하시지만 답변이 필수로 제공되지 않는 커뮤니티 형식의 공간입니다.
* 강사님이 현업 중 답변하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.
대체재 대비 구성은 Upgrade!
가격은 단 21만원에! Downgrade!
약 80시간의 강의를 한 번 구매로 평생소장 할 수 있습니다.
상세 커리큘럼.
아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
1. Next.js 기초 & 마이그레이션 실습
2. Next.js로 채팅 서비스 만들기
3. 나만의 블로그
4. 나만의 블로그 + 챗봇 성능 개선하기
5. Pages Route를 사용하여 번개장터 클론 앱 만들기
6. 번개장터 클론 앱 최적화하기
7. App Route로 마이그레이션 하기
8. Next.js 13으로 숙박 예약 플랫폼 만들기
부록
해당 강의는 사전 예약 상품입니다.
영상 공개는 다음과 같이 4회에 걸쳐 공개됩니다.
(강의 1회 결제시 모든 영상을 평생 반복 수강 가능합니다.)
-----
1차 공개 : 23년 12월 6일 (수)
2차 공개 : 24년 1월 8일 (월)
3차 공개 : 24년 2월 8일 (목)
전체 공개 : 24년 3월 8일 (금)