Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다.
이것만 사용해도 풀스택 웹개발이 가능합니다.
Next.js 사용시 서버사이드 렌더링이 쉽기 때문에
React, Vue만 사용해서 만든 사이트들 보다 로딩시간이 빠르고 검색엔진 친화적인 사이트를 만들 수 있습니다.
서버기능과 회원인증기능도 만들기 쉽습니다.
점점 서버사이드 렌더링이 유행타면서 백엔드 역량까지 많이 요구하고 있는데 Next.js 한입 해두면 든든하지 않겠습니까
프로젝트 2개를 만들어보며 기본 문법부터 서버기능까지 배워볼 것인데
생각없이 코드 따라치기만 하면 나중에 응용력이 하나도 없어지기 때문에
혼자 알아서 Next.js로 코드짜는 법을 중점으로 알려드립니다.
[배울 내용]
프로젝트1 : 문법학습용 그로서리 스토어
프로젝트2 : 냄새나는 게시판
state, component, useEffect 등 리액트 문법
서버사이드렌더링과 라우팅
서버기능과 API 만들기
MongoDB 입출력
게시물 발행, 수정, 삭제
S3 파일업로드
Next-auth 회원인증기능
캐싱, 에러처리 등 부가기능
AWS 클라우드에 배포
[필요한 사전지식]
- HTML/CSS 기초
- 자바스크립트 기초 (var, if, function, for, array, object)
- 자바스크립트 처음이면 자바스크립트 기초강의부터 추천드립니다.
리액트 그런건 몰라도 됩니다.
[업데이트]
- Server actions 추가
- refresh token 내용 업데이트
커리큘럼
Part 1 : 애플후레시 | |||
Next.js 많이 쓰는 이유를 알아보자 | 무료 | 00:06:00 | |
Next.js 설치와 개발환경 셋팅 | 무료 | 00:06:00 | |
페이지 레이아웃 만들기 (React 기초문법) | 무료 | 00:09:00 | |
여러 페이지 만들기 (라우팅) | 무료 | 00:12:00 | |
html을 반복문으로 줄이고 싶으면 map | 무료 | 00:11:00 | |
Next.js에서 이미지 넣는 법 2개 | 무료 | 00:10:00 | |
client/server component, import 문법 | 무료 | 00:13:00 | |
Component에 데이터 전해주려면 props | 00:11:00 | ||
좋아요 버튼 만들기 (useState, onClick) | 00:11:00 | ||
좋아요 버튼 만들기 2 (array, object state 변경하려면) | 00:10:00 | ||
Part 2 : 게시판 프로젝트 | |||
새로운 프로젝트 생성 / MongoDB 셋팅 | 00:06:00 | ||
Next.js에서 MongoDB 사용하기 | 00:12:00 | ||
글목록 조회기능 만들기 (DB 데이터 출력) | 00:10:00 | ||
상세페이지 만들기 1 (Dynamic route) | 00:15:00 | ||
상세페이지 만들기 2 (useRouter) | 00:09:00 | ||
글 작성기능 만들기 1 (서버기능 개발은) | 00:12:00 | ||
글 작성기능 만들기 2 | 00:11:00 | ||
수정기능 만들기 1 | 00:12:00 | ||
수정기능 만들기 2 | 00:10:00 | ||
삭제기능 만들기 1 (Ajax) | 00:12:00 | ||
삭제기능 만들기 2 (Ajax 추가내용과 에러처리) | 00:10:00 | ||
삭제기능 만들기 3 (query string / URL parameter) | 00:10:00 | ||
static rendering, dynamic rendering, cache | 00:13:00 | ||
JWT, session, OAuth 설명시간 | 00:09:00 | ||
회원기능 만들기 : Auth.js 사용한 소셜로그인 | 00:12:00 | ||
회원기능 만들기 : OAuth + session방식 사용하기 | 00:12:00 | ||
회원기능 만들기 : 아이디/비번 + JWT 사용하기 | 00:13:00 | ||
회원기능 만들기 : JWT 사용시 refresh token 사용하려면 | 00:05:00 | ||
댓글기능 만들기 1 (input 데이터 다루기) | 00:09:00 | ||
댓글기능 만들기 2 (useEffect) | 00:13:00 | ||
댓글기능 만들기 3 | 00:12:00 | ||
loading.js, error.js, not-found.js | 00:11:00 | ||
AWS Elastic Beanstalk에 Next.js서버 배포 | 00:05:00 | ||
이미지 업로드 기능 1 (AWS S3 셋팅) | 00:09:00 | ||
이미지 업로드 기능 2 (Presigned URL) | 00:12:00 | ||
Dark mode 기능 1 (cookies / localStorage) | 00:14:00 | ||
Dark mode 기능 2 | 00:12:00 | ||
서버기능 중간에 간섭하려면 Middleware | 00:12:00 | ||
Next.js의 Server actions 기능 | 무료 | 00:10:00 |
정말 좋은 강의입니다.
정말 좋은 강의 입니다. 장난스럽게 툭툭 던지듯이 얘기하지만 코딩애플님, 강의를 정말 잘 가르치십니다. 개발 쪽 강의는 특히 어려운 내용들이 많아서 내용만 복잡하고 핵심은 없이 지식 나열하고 갑자기 급발진하는 무작정 어렵고 불친절한 강의들이 대부분인데, 이분은 무심하게 얘기하는 것 같지만 정확히 수강자의 입장에서 필요한 부분들을 짚어주시고, 단계에 맞는 강의를 해주십니다. 그리고 대부분의 코딩 강의가 지루하고 재미가 없는데, 코딩애플님 강의는 들으면서 진짜 너무 웃기고 재밌다는 생각이 들면서 강의를 들을 수 있습니다. 어둠의 생활코딩님이라는 게 괜히 있는 말이 아니라는 걸 깨달았습니다. 코딩 강의에 수십만원을 쓴 제 경험에 비추어봤을 때, 내용이 많고, 복잡하고, 결과물이 화려한 강의들은 결과물만 보기 좋지, 결국 자기에게 남는 건 거의 없고, 강사는 혼자 강의하고 코드 따라치는 것 참으면서 시간 보내는 것 밖에 안 됐습니다. 모름지기 좋은 강의는 어려운 내용을 쉽게 가르치는 게 좋은 강의라고 생각합니다. next.js 20만원 하는 강의를 구매해서 들었었는데, 코딩애플님 강의 들으니 속이 뻥 뚫리는 것 같습니다. 강의 하나하나가 매우 알차고, 필요한 개념들을 짧고 굵게 핵심만 쉽게 알려주십니다. 풀스택 입문자분들에게 정말 추천하는 강의예요. 자바스크립트 할 줄 아시면 수업 듣는데 큰 지장은 없을 것 같습니다. 백엔드도 리액트도 크게 몰라도 됩니다. 진짜 좋은 강의입니다.
좋은 강의
Vue도 다루신 만큼 Nuxt.js도 기대하겠습니다!
감사합니다
알찬 수업내용과 찰떡같은 과제까지 처음 접하는 사람도 쉽게 이해할 수 있어 너무 좋아요!
재밌는 수업이였습니다
수업은 좋았는데 응용사항 혼자해보고 막혔을때 답이없어서 아쉬웠습니다
유튜브를 통해 알게되었는데
강의실력에 반해서 왔습니다 잘 부탁드립니다 🙂
5점 박고 시작합니다
굿
짱
쌤 최공
최고최고최고최고 ㅠㅠ
역시 믿고 보는 코딩애플
잘 배웠습니다 감사합니다
잘 배워갑니다~
덕분에 Next에 잘 스며들었습니다~
이 강의듣고 암이 낳았습니다
이 강의듣고 암이 낳았습니다
아직 보진않았지만 최고입니다
애플 센세 프리패스를 다 들은 학생으로서
오늘 넥스트 강의를 구매하고 아직 듣진않았지만
벌써부터 명강의임을 느낄수 있네요
몰입이 잘 되어서 좋았습니다
살면서 인강듣고 리뷰 처음 작성하는데 강의가 몰입이 잘 되어서 좋았습니다!!
일단 가장 좋았던 부분은 강의를 하실 때 용어를 통합해서 꾸준히 같은 용어로 강의를 해주시는 것이 가장 좋았습니다!!
다른 분야의 강의들보다 이상하게 프로그래밍 강의들 들어보면 같은 의미를 다른 용어로 설명하거나 쓸데없이 영어, 한글 섞어서 설명하거나 해서 강의를 듣는데
몰입이 깨지는 강의들이 굉장히 많았는데 코딩애플님 강의는 어려운 용어든 쉬운 용어든 강의 전체에서 일관되게 사용하면서 설명해주셔서 너무 좋았습니다.
그리고 복습할 때 해당 강의에서 쳤던 코드들을 폴더 다시 만들어서 강의 흐름따라 새로 코드 쳐보면서 복습하는 편인데 딸랑 소스코드 제공해 주는 것이 아닌
강의마다 강의 노트를 제공해 주셔서 그 흐름대로 따라가면서 복습하고 체크할 부분 체크할 수 있어서 더 효율적인 것 같아 그 점도 좋았습니다.
좋은 강의 감사드립니다!
최고입니다
중학생도 이해하는 최고의 강의입니다.
풀스택을 하기 위한 next.js 습득방법인것같네요
프론트엔드 입장에서 제일 중요한 seo나 metadata쪽 설명이 아예 없어서 아쉬웠습니다
온라인강의 철새인데.ㅋㅋㅋ
들어본것중에 가장 이해 쏙쏙 되게 설명해 주시네요 ㅋㅋㅋ
강사님 ㅋㅋ 말투 넘웃겨여 ㅋㅋㅋ
아주 좋습니다
다른 곳 강의 들으면서 클론코딩 할때는 따라치는 방식이라 내가 뭘 한다는 느낌이 없었는데, 이 강의는 내용은 당연히 좋고 숙제로 나오는 것들이 크게 어렵지 않으면서도 배운 내용 써먹어 보기에 좋은 심히 적절한 난이도라 공부하는 데 좋았습니다
+코딩애플님 말투 중독됨
굿
후딱 잘 배웠습니다.
굿!!!
Nuxt
Nuxt도 해주세요
와우
오우
강의 좋음
프로젝트에서 상당히 잘써먹어졌음 상세페이지 부분이랑 oAuth 써보고 DB 저장 입출력 등등 강의에서 배운거랑 응용 조금만 해보면 원하는 페이지 정도는 쉽게 만들수 있을 거임