Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기 (이 페이지 복사해서 사용해주세요! by 수양)
프로젝트로 배우는
Next.js 완전 정복
확장성 높은 커머스 서비스 구축하기
-
01 Next.js로 할 수 있는 모든 것
Next.js의 기본/심화 기능을 익히고
완성도 높은 프로젝트를 구축부터 배포까지! -
02 커머스 서비스 Final Project
Next.js의 30가지 기능으로 구현하는
완성도 높은 프론트엔드 포트폴리오 -
03 개발자 사고방식 따라잡기
토스증권 프론트엔드 리드 강사님의 노하우로 현업 프론트엔드 개발자가 마주하는 문제 다루기
현재 토스증권 프론트엔드 챕터 리드로 재직 중인
최지민 강사님을 만나보세요.
Next.js, 시작할지 말지 고민하셨다면?
지금 이 강의로 시작해야 하는 6가지 이유
프론트엔드 실무를 200% 반영한 Next.js 프로젝트로
네카라쿠배당토에서 모셔가는 개발자로 트렌디한 역량을 키워보세요!
요즘 프론트엔드 개발자는 이런 고민을 합니다.
혹시..당신도?
모든 프론트엔드 개발자가 고민하는 대부분의 문제,
Next.js가 해결할 수 있습니다
-
SSR/SSG을 활용한 SEO 최적화
Next.js는 SSR(Server Side Rendering)/SSG(Static Site Generation)를
기본으로 제공하기 때문에,
SEO(Search Engine Optimization)에 대한 고민을 해결할 수 있습니다. -
API 간단하게 구성
Next.js의 API Routes 기능을 활용하여,
프론트엔드에 필요한
API를 간편하게 구성할 수 있습니다.
-
서비스 배포 시스템 구성
Next.js에서 제공하는
Frontend Deploy Platform인 Vercel을 활용하여,
빌드+호스팅+배포까지 편리하게 수행할 수 있습니다. -
대규모 서비스 구조 설계
TypeScript 와 함께 Next.js의 파일구조 기반 라우팅 시스템과
다양한 Example Project 들을 참조하여
확장성 높은 서비스 구조를 설계할 수 있습니다.
베테랑 개발자 강사님과 함께 Best Practice 기반으로 학습하고,
Next.js 실무 활용 능력을 마스터해보세요!
최지민 강사님 | 토스증권 프론트엔드 리드 |
Next.js는 프론트엔드 개발자들이 고민하고 있는 문제들에 대한 적절한 해결책을 제시하고, 이를 프레임워크에 잘 녹여내고 있습니다.
Routing이나 페이지 구조 및 서비스 구조 설계 등에 대해 개발자가 고민할 시간을 줄여주기도 하죠. 여러분이 익히 알고 있는 SEO를 위한 SSR의 기능을 가진 프레임워크로만 단정 짓기엔, 생태계에서 차지하는 비중과 위상이 높아졌습니다. 최근 많은 IT 기업들이 React를 활용한 프로젝트를 구성할 때 Next.js를 함께 활용하고 있다는 사실이, Next.js의 트렌디함을 증명하죠. 저와 함께 Next.js의 기본+심화 개념을 차근차근 익혀,
원하는 어떤 웹서비스라도 자유롭게 구현할 수 있는 프론트엔드 개발자로 성장해 보세요!
Point 01
앞서가는 프론트엔드 개발자를 위한 커리큘럼!
Next.js를 활용한 서비스 구축부터 서버리스 배포까지
| Step 01. Next.js 시작하기 [약 2시간]
∙ Next.js 프레임워크에 대해 이해하고, 학습 전 간단한 환경을 세팅해 봅니다.
∙ 프레임워크 구조, Data Fetching(SSR/SSG/CSR/ISR), Layouts / Image, Routing, API Routes 등 Next.js의 기본 기능을 학습합니다.
| Step 02. 실습 : 블로그 프로젝트 [약 2시간]
∙ 예제를 통해 Next.js의 기본 기능을 복습한 후, 본격적으로 블로그 연습 프로젝트를 시작합니다.
∙ 커스터마이징을 통해 나만의 블로그를 더욱 깊이 있게 구성하고, vercel로 배포합니다.
| Step 03. Next.js 심화 완성 [약 4시간]
∙ Next.js의 확장성을 향상하기 위해 SWC, Static Export, Custom App, 성능 측정, API 기능, 서비스 관리 등에 대해 심도깊게 학습합니다.
∙ React 18과 함께 Next.js를 살펴봅니다.
★ Final Project. ★
| Step 04. 커머스 서비스 프로젝트 [약 6시간]
∙ 웹 서비스 기능 전반을 다루는 커머스 서비스 프로젝트의 구조를 만들고, API 도구와 스타일링 라이브러리에 대해 알아봅니다.
∙ 상세페이지 구현과 상품 목록, 카테고리 외 10가지 기능에 대해 학습 및 실습합니다.
∙ Vercel로 서버리스하게 배포하고 프로젝트를 마무리하며, 웹 서비스 성능 최적화 접근법을 익힙니다.
30가지 이상의 기본&심화 기능 학습과 구현 실습을 동시에!
약 15시간 분량의 집중 공략 강의로, Next.js를 마스터 해보세요
Point 02
확장성 높은 2가지 프로젝트로
매력적인 포트폴리오를 완성해 보세요!
커스텀 블로그 & 웹 서비스 기능의 집합체인 커머스 서비스 프로젝트로
면접관의 시선을 끄는 포트폴리오를 만들어보세요
#Pre Project. 나만의 커스텀 블로그 만들기
Part .1에서 배운 Next.js의 기본 개념을 적용하고,
UI와 추가 기능들을 활용한 커스텀 블로그를 만들어봅니다.
⁕ 본 이미지는 이해를 돕기 위한 프로젝트 예시이며 실제 완성되는 작업물과 다소 차이가 있을 수 있습니다.
프로젝트를 통해 구현해 볼 기능 살펴보기 ▸
∙ Link와 Navigating 기능
∙ 블로그 프로젝트에서 Layout 이 어떻게 활용되는지
살펴보고, Styling 해보기
∙ Next.js의 특장점인 Pre-rendering과 Data Fetching 활용
∙ 자체 API를 구성하고 vercel로 배포
∙ 커스터마이징을 위한 UI 구성과 추가 기능 실습
실력 완성의 마지막 관문,
★ 커머스 서비스 프로젝트 ★
# Final Project. 커머스 서비스 프로젝트
웹 프론트엔드 기능 구현의 끝판왕 ‘커머스 서비스’
서비스 구조 설계부터 상세페이지, 상품 목록, 카테고리 등등 디테일한 기능 구현 후 서버리스 배포까지!
⁕ 본 이미지는 이해를 돕기 위한 프로젝트 예시이며 실제 완성되는 작업물과 다소 차이가 있을 수 있습니다.
∙ 서비스구조 설계, API 도구 알아보기(Notion Public API/PlanetScale&Prisma)
∙ 스타일링 라이브러리를 알아보고 Layout&Styling 해보기 (TailwindCSS /Emotion)
∙ 이미지와 콘텐츠로 구성된 상세페이지 만들어보기
∙ 페이지 네이션/무한 스크롤 등 페이지 구성 방식 구현하기
∙ 상품 조회 및 검색 기능 구현하기
∙ 회원 체계를 설계하는 방식 알아보고 Google OAuth 활용하여 가입&로그인 기능 구현하기
∙ Data Fetching을 활용하여 회원 별 데이터 저장/조회/수정 기능 구현하기
∙ 회원 별 게시판 개념의 장바구니 UI와 추가/수량 수정/삭제 기능 구현하기
∙ 구매 기능 구현을 위한 Form 다루기
∙ 상품의 댓글 / 게시판 개념의 후기 기능과 이미지를 포함하는 후기 기능을 구현하기
∙ Vercel로 자체 API를 구성하고 서버리스로 배포하기
[심화 기능]
Next.js Complier, Preview Model, Static Export, Custom App, Document, Error Page Performance 측정, Error Handling, Data Fetching API, Router, Link API, Configuration
하나의 완성된 웹서비스를 만들기 위해
12가지 이상의 다양한 기술 스택을 학습합니다
| 강사님 한 마디 |
커머스 서비스는 웹에서 구현할 수 있는 다양한 기능들을 담고 있습니다.
본 강의에서 학습하는 Next.js의 기능들을 자세하게, 최대한 많이 다룰 예정입니다. 또한 다양한 문제 상황에 대한 트러블슈팅, 그리고 성능 측정과 최적화 접근법을 직접 다루어보며, 수강생 스스로 프론트엔드 개발자의 사고방식과 문제 해결 방식을 발전시킬 수 있을 거라고 확신합니다.
Point 03
IT 대기업이 원하는
SPA 환경에서의 SSR 활용 역량 완벽 체득!
React에서 구현하기 어려운 SSR이 Next.js 로는 편리하게 구현 가능!
프로젝트로 경험하고, 우대받는 프론트엔드 개발자로 성장해 보세요!
React와 Next.js의 페이지 렌더링 방식 차이를 확인해보세요!
-
React의 페이지 렌더링 방식
프리-렌더링 불가
(React.js 기본 환경)
∙ SEO(검색 엔진 최적화)에 취약
∙ 페이지 초기 렌더링 느림 -
Next.js의 페이지 렌더링 방식
프리-렌더링 가능
(Next.js 사용 시)
∙ 검색엔진 노출이 원활하여 SEO에 용이
∙ 페이지 초기 렌더링 빠름
∙ Static Site Generation과 SSR 모두 지원
React로 만든 프로젝트를
Next.js로 전환하는 실습
-
STEP1.
CRA template 마이그레이션1. 페이지 별로 원하는 data fetching 전략 선택
2. SR을 사용하여 기존 페이지 업데이트
3. API 경로 사용하기 -
STEP2. React Router Dom 을 활용한
React 프로젝트 마이그레이션1. React Router 제거하기
2. 파일 시스템을 통해 애플리케이션 경로 정의
3. Next.js 프레임워크의 최신 개선 사항을 활용
Point 04
Next.js 출시 초기부터 다양한 서비스를 개발해 온
토스증권 프론트엔드 리드 강사님의 경험과 노하우
글로벌 커머스의 프론트엔드 영역을 제로 베이스에서부터 만들어보았고, 현재 재직 중인 금융 서비스에도 Next.js를 사용하고 있습니다.
수강생분들께 Next.js만을 다루는 강의는 조금 낯설 거라고 생각합니다.
그러나 다양한 기능을 가진 Next.js는 프론트엔드 개발자들이 고민하는 많은 부분을 해소시킬 수 있기 때문에, 충분히 배워둘 가치가 있습니다.
본 강의에서는 Next.js를 활용하여 문제를 해결하는 과정과 서비스를 만드는 과정을 직접 경험하실 수 있습니다. 제가 쌓아온 실무 노하우와 경험을 통해, 여러분들이 웹 서비스를 개발하면서 겪을 수 있는 다양한 부분들을 미리, 흥미롭게 경험해 보실 수 있도록 돕겠습니다.
Next.js라는 기술이 모든 문제를 해결해 주는 은 탄환은 아니지만, 규모가 있고 안정성 있는 서비스를 구성하는데 필요한 많은 기능들을 제공해 주는 훌륭한 도구라고 생각합니다. 그러한 기능들을 체계적으로 학습하고 이해한다면, 향후 커리어 패스를 개발해 나갈 때도 도움이 될 것입니다.
본 강의를 들으시는 모든 수강생분들이 원하는 수준의 웹 서비스를 스스로 만들 수 있다는 자신감을 얻으실 수 있도록 열심히 돕겠습니다.
-
| 최지민 Frontend Developer
현) 토스증권 Frontend Developer, Chapter Lead
전) 비바리퍼블리카 Frontend Developer
전) 와그트래블 Frontend Developer
전) 핀플 Web Developer
프론트엔드 개발자, 그리고 예비 프론트엔드 개발자를 위한
찐으로 도움 되는 선배의 노하우 흡수하기
Next.js만 배우고 끝나면 섭섭하죠!
오직 프론트엔드 개발자를 위한 취업&이직 준비 방법과,
문제해결력을 기를 수 있는 학습방법도 함께 전수해 드려요 :-)
-
취업&이직을 위한
자기소개서 작성 꿀팁 -
면접관 눈을 사로잡는
매력적인 포트폴리오 제작 방법 -
사전 과제 &기술 면접
대비 노하우 -
공식 문서로
부족한 부분 채우는 효과적인 방법 -
빠르게 변하는 프론트엔드 환경에서
트렌디한 기술 학습&중심잡기 노하우
가격은 더 낮게, 구성은 더 풍부하게!
프론트엔드 개발자에게 꼭 필요한 강의 내용을 쏙.쏙. 흡수하세요!
강사님의 뛰어난 강의력을 미리 확인해 보세요 👇
강의 목표
∙ Next.js에 대해 관심이 있으나 혼자 학습하기에는 조금 부담되는 분
∙ 요즘 각광받는 웹서비스를 만드는 기술에 대해 관심이 있는 분
∙ 패스트캠퍼스 ‘한 번에 끝내는 프론트엔드 개발 초격차 패키지’, ‘한 번에 끝내는 React의 모든 것 초격차 패키지’ 와 같은 강의를 듣고 조금 더 실무에 가까운 프론트엔드 웹 서비스 개발에 필요성을 느끼는 분
Node 16.15.1 (LTS) & ∙ VScode1.68
커리큘럼을 확인하세요.
아래의 모든 챕터 클립들을 강의 하나로 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!
강의에서 어떤 실습을 진행하는지 클립명을 통해 확인하세요! 😉
Part1. 오리엔테이션
Part2. Next.js 시작하기
Part3. Practice : 블로그 프로젝트
Part4. Next.js 심화
Part5. Final Project : 커머스 서비스 만들기
Part6. 강의를 마무리하며
-
상세 커리큘럼.
자세한 커리큘럼 및 내용은 여기서 확인하세요!
구매 안내.
결제 후, 언제 어디서나 하루 10분 공부 시작.
• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기