Next.js로 웹서비스 만들기
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 | |
수강생 리뷰
관련강좌
도커 Docker & Container
웹서버를 만들든 파이썬으로 AI모델을 돌리든 뭘하든 도커와 컨테이너라는 용어를 자주 듣게 될텐데 왜냐면 이전과 다르게 프로그램을 컨테이너로 싸매서 배포 & 실행하는 경우가 많아졌기 때문입니다. …
신청하기50,000₩30,000₩
쉽게 배우는 Spring Boot & JPA
옆집 철수도 백엔드 개발자되는 시대라길래 6개월짜리 학원 며칠 다녀봤지만 막상 스프링 부트 배워보면 1. 어렵고 복잡함 2. 암기식임 3. 노잼 이런 이유 때문에 매년 …
신청하기180,000₩85,000₩
(무료) 매우쉽게 알려주는 git & github
코드짜다가 갑자기 2일 전으로 시간을 돌리고 싶으면? 팀원과 코드 충돌없이 협업하고 싶으면? 팀원 중에 이 코드 누가짰는지 범인을 찾고 싶으면? 버전 컨트롤을 도와주는 소프트웨어인 …
신청하기무료
훌륭하신분이네요.
늘 열심히 듣고 있습니다.
리액트 네이티브도 부탁해요.
빡대가리님의 설명을 듣다보면 저절로 이해가 되는듯해요.
너무 감사해요. ^^
리액트 타입스크립트 입문때도 집중 잘되고 좋았습니다.
오픈 기념 50%세일 소리듣고 선결제 별점 5점 밖고 시작합니다.
기다렸던 강의
리액트 네이티브 강의 기다리고 있었습니다
코딩애플 평생 함께야
ㅠㅠ
기다렸습니다
Next.js 강의 기다렸는데 감사합니다~
이제 리액트 네이티브 존버하겠습니다.
아 next.js 올라오는 날만 손꼽아 기다렸습니다....
믿고 보는 코딩애플님이라 보기도 전에 별점부터 5개 드려요ㅠㅠ
너무 감격스러워여 ㅎㅎㅎ
혹시 리액트쿼리 강의는 생각 없으신지요?ㅠㅠ
이 강의 기다렸습니다
기다렸던 강의였는데 만들어주셔서 감사합니다
혹시 추후에 리엑트 쿼리 강좌도 만들어 주시면 감사하겠습니다
Nextjs만 기다리고 있었습니다
혼자 배우며 고생이란 고생은 다 하고 있었는데.. 그런 저에게 이 강의는 그저 빛 같은 존재입니다
백엔드 커리를 타려고 하지만, 그래도 편하게 랜더링하려고 NEXT.js 들으려고 합니다
어느순간 클라이언트 사이드 랜더링보다는 서버 사이드 랜더링이 유행탄다고 해서 부랴부랴 배워놓고 웹 사이트 뚝딱 만들어보고 싶습니다 ㅋㅋㅋㅋ 아 근데 자바스크립트 배웠는데 문법만 주구장창 배워서 하나도 기억이 안나요 ㅠㅠ 그거 배우고 다시 올께요
야미
.
너무 좋습니다.
우연히 유튜브에서 보고 2년전부터 듣고 있습니다. 알찬 내용과 꼭 배워야 하는 기능 등등.. 만족합니다.
항상 감사합니다^^
첫 입문용으로 너무 좋습니다.
아주 맨족해요
구매 이틀만에 65퍼나 들었네요
어여 듣고 공문도 봐가면서 더 딥하게 공부할게요
고민하시는 분들 시간 아까우니까 어여 구매해요
빡대가리입니다.
빡대가리도 뇌를 쓰면 쓸수록 대가리가 되고 더 쓰면 쓸수록 가리(??)가 된다고 믿습니다.ㅠ
5-26
빡대가리인 저도 이해할수있게 설명해주시네요
넥스트 강의 찍먹자
챗지피t에 자리 뺏길 새라 기웃거리는 와중에 넥스트 강의하신다고 해서(게다가 50퍼 할인 개이득) 일단 결제부터 하고 본 1인입니다.
초반부 찍먹 완료자로 몇 자 추가하자면, 리액트 경험자일 경우 서버 설명 전까지는 강의는 막힘없이 들을 수 있습니다. 예상하건데 노드를 배우셨다면 뒷부분도 술술 들을 수 있을 것 같습니다. (몽고 db로 수업) 중간중간에 필요한 개념들을 떠먹여주시기 땜에 입문+흥미유발용 강의로는 최고라고 감히 생각하고요(입문이라지만 내용이 부실한 것도 아니고 가르쳐줄 건 다 가르쳐주심), 특히 다른 강의에 비해 접근성이 높은 이유 중 하나가 강의력 대비 합리적인 가격 때문이 아닌가 싶습니다. 강추합니다!
설명도 잘해주시고 , 진도도 빨라서 너무 좋아요
성격이 급해서 답답한 강의 진짜 싫어하는데
코딩애플은 시원시원해서 좋습니다.
선생님.. 바로 React Native 강의 가시지요...
선생님.. 바로 React Native 강의 가시지요...
기다리고 있겠습니다.
재밌어요!
aws로 배포하는 건 성공하지 못했는데 이건 따로 공부를 해봐야 할거같아요!
덕분에 막막했던 nextjs 재밌게 공부했습니다 ㅎㅎ
다음 강의도 기대할게요 !
그는 신이야!
코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!코딩애플펀치!
감사합니다 온라인 스승님.
은혜 잊지 않겠습니다
2사단 근무하셨을거같은 스승님.