Thumbnail
개발 · 프로그래밍 풀스택

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router) 대시보드

(4.5)
13개의 수강평 ∙  911명의 수강생

44,000원

지식공유자: John Ahn
총 103개 수업 (17시간 39분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[풀스택, 프론트엔드] 강의입니다.

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

✍️
이런 걸
배워요!
리액트
타입스크립트
PostgreSQL
도커
NextJS
배포

NextJS, Typescript, ExpressJS, Postgres
가장 핫한 풀스택 조합으로 레딧을 클론코딩해요! 👨‍💻

이 강의에서는?

세계적인 커뮤니티, 레딧 사이트
처음부터 같이 만들어봅니다.

요즘 자바스크립트 스택에서 가장 많이 쓰이는 풀 스택 조합인 NextJS Typescript ExpressJS Postgres 조합으로 어느 정도 복잡한 애플리케이션을 처음부터 함께 만들어 보게 되므로, 풀 스택 개발에 자신감을 가질 수 있게 이 강의를 만들게 되었습니다.

이 강의의 특징은 모든 소스코드를 처음부터 하나씩 따라하면서 배울 수 있다는 것입니다. 소스코드를 한 줄씩 설명하고 그 이후에 코딩을 함께하기 시작해서 여러 번 반복학습을 하게 됩니다. 실습 위주의 강의지만 헷갈리거나 어려운 개념은 깊게 학습하고 넘어가게 됩니다. 모든 부분은 도표를 통해 최대한 시각적으로 이해할 수 있도록 노력했습니다.

사용되는 언어와 프레임워크 👉

레딧 사이트를 만들 때 프론트엔드 부분은 리액트의 NextJS를 사용하고,
백엔드 부분은 NodeJS와 ExpressJS를 사용합니다. 두 부분 모두 언어는 타입스크립트를 사용합니다. 데이터베이스는 PostgreSQL을 이용하며 TypeORM을 이용해서 컨트롤하게 됩니다.


학습할 내용을 소개해요 📚

Section 1

전체적인 구조 만들기

프론트엔드와 백엔드, 데이터베이스를 사용할 수 있도록 준비를 합니다.

Section 2

Entity 생성하기

어플리케이션에서 필요한 데이터들을 생성하기 위해 각각의 Entity들을 생성해줍니다.

Section 3

회원가입, 로그인

회원가입과 로그인 페이지를 생성하며 유저에 관한 데이터는 React Context를 이용해 처리해줍니다.

Section 4

커뮤니티 생성하기

커뮤니티 생성하는 페이지, 커뮤니티 생성, 이미지 업로드 등을 구현합니다.

Section 5

포스트 페이지 생성하기

각 커뮤니티에 들어있는 포스트들을 생성하고 포스트 페이지를 만들어줍니다.

Section 6

댓글과 투표 기능 구현하기

댓글과 투표 기능을 구현합니다.

Section 7

무한 스크롤 및 유저 페이지 생성하기

useSWRInfinite와 Intersection observer를 이용한
무한 스크롤 기능을 구현해주며 유저 페이지를 생성해주겠습니다.

Section 8

애플리케이션 배포하기

EC2 인스턴스를 이용해서 지금까지 만든 애플리케이션을 배포해주겠습니다.

 

지식공유자의 
다른 강의가 궁금하다면? 📖

누적 수강생 50,000+명, 따라하며 배우는 웹 개발 시리즈 

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
자바스크립트로 풀스택 앱을 만들고 싶은 사람
재미있게 공부하고 싶은 사람
📚
선수 지식,
필요할까요?
자바스크립트
리액트JS
노드JS

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

즐겁게 개발하고 있는 개발자입니다. 

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼 총 103 개 ˙ 17시간 39분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
도표 자료
소스 코드 자료
PDF 자료
pgAdmin 사용법
섹션 1. 강의 소개 및 필요한 프로그램 설치
강의 소개 영상 미리보기 01:15
강의 학습 순서
리액트 설치를 위해서 필요한 것들(Node.js & Visual Studio Code) 05:55
윈도우에서 도커 설치하기 04:03
맥에서 도커 설치하기 03:26
섹션 2. 전체적인 구조 만들기
NextJS Typescript를 이용한 프론트엔드 구현하기 미리보기 01:57 Node.js Express Typescript 를 이용한 백엔드 구현하기 미리보기 15:37
도커를 이용한 Postgres 실행 12:24
데이터베이스와 애플리케이션 연결 12:57
TypeORM에 대해서 02:49
섹션 3. Entity 생성하기
Entity 생성하기 미리보기 12:23
User Entity 생성하기 09:35
One to many, Many to one Relationship 03:53
Sub Entity 생성하기(Community) 15:28
Class-transformer 06:09
이 프로젝트에서 Class Transformer를 이용하는 방법 08:17
URI, URL, URN 02:42
Post Entity 20:35
Vote Entity 06:17
Comment Entity 18:55
서버실행해서 지금까지 나오는 에러 해결 03:38
섹션 4. 회원가입, 로그인
회원 가입 페이지 UI 생성하기 21:30
회원 가입 페이지 기능 생성(1) 05:35
회원 가입 페이지 기능 생성(2) 24:11
회원 가입 페이지 기능 생성(3) 19:43
로그인 페이지 UI 생성하기 03:04
로그인 페이지 기능 생성 24:52
로그인 시 Cookie 처리 04:43
유저 정보 Context에 담아주기(1) 15:29
유저 정보 Context에 담아주기(2) 08:47
유저 정보 Context에 담아주기(3) 07:33
섹션 5. 커뮤니티 생성
커뮤니티 생성 페이지 UI 만들기 09:21
커뮤니티 생성 페이지 기능 만들기 14:23
User, Auth 미들웨어 생성하기 08:55
커뮤니티를 생성하는 핸들러 생성하기(1) 11:26
커뮤니티 생성 핸들러 생성하기(2) 05:58
로그인된 사람만 커뮤니티 생성 페이지 들어갈 수 있게 해 주기 17:47
커뮤니티 페이지 생성하기(Navagation Bar) 15:28
미들웨어에 있는 버그 해결하기 04:10
로그아웃 기능 추가하기 08:20
커뮤니티 리스트 생성하기 07:16
useSWR을 이용한 커뮤니티 리스트 가져오기 20:13
커뮤니티 리스트 UI 생성 09:39
SWR이란? 03:49
커뮤니티 상세 페이지 생성하기 10:50
상세 페이지 UI 생성하기 13:26
InstantceToPlain 03:45
이미지 업로드 하기 21:29
이미지 업로드 라우터 생성하기(1) 14:21
이미지 업로드 라우터 생성하기(2) 12:59
이미지 업로드시 나는 에러 처리하기 03:58
섹션 6. 포스트 페이지 생성
메인 페이지 이미지 버그 수정하기 04:04
사이드 바 생성하기 12:25
포스트 Create 페이지 UI 생성 11:56
포스트 Create 페이지 기능 생성 19:30
포스트 페이지 생성하기 14:01
포스트 페이지 UI 생성하기 10:59
섹션 7. 댓글과 투표 기능 구현
포스트 댓글 생성하기 미리보기 19:21
포스트 댓글 가져오기 12:19
useSWR mutate 07:58
포스트와 댓글을 위한 Vote (좋아요 싫어요) 기능 구현하기 10:34
Vote 함수 호출하기 07:57
Vote 핸들러 생성하기 18:02
포스트와 댓글의 Vote 적용 시 바로 업데이트 하기 04:25
아이콘 변경 안 되는 부분 해결하기 07:38
커뮤니티 페이지에 포스트 나열하기 07:56
포스트 카드 UI 작성하기 14:30
Vote 함수 생성하기 및 router.pathname 사용 13:52
섹션 8. 무한스크롤 및 유저 페이지 생성
useSWRInfinite 16:32
포스트 나열하기 08:13
Intersection observer 미리보기 22:02
유저 페이지 생성하기 18:41
유저 페이지 UI 생성하기 15:53
전체적인 UI 수정하기 18:26
섹션 9. 애플리케이션 배포하기
배포 방법 소개 01:54
EC2 에서 도커 설치 및 실행 18:25
클라이언트 배포를 위한 소스 코드 변경 14:44
서버 배포를 위한 소스 코드 변경 06:08
Client 실행 14:41
Server 실행 03:38
섹션 10. 강의 업데이트
한글 slugify 문제 해결
NextJS 13 48:42
섹션 11. 부록) Nextjs & Typescript 기본
NextJS 란 07:55
NextJS 기본 파일 구조 03:18
Pre-rendering 05:42
Data Fetching 12:53
Typescript 란? 04:14
Nextjs와 Typescript 만들 앱 소개 01:11
메인 페이지 UI 만들기(마크다운 파일 생성) 11:49
마크다운 파일을 데이터로 추출하기 17:58
Typescript Type 05:03
Typescript 추가 제공 타입 13:22
type annotation, type inference 05:21
type assertion 04:10
getStaticProps를 이용한 포스트 리스트 나열 08:52
포스트 자세히 보기 페이지로 이동(file system 기반의 라우팅) 06:41
포스트 데이터를 가져와서 보여주기(remark) 20:47
애플리케이션 스타일링 03:22
.
강의 게시일 : 2022년 08월 10일 (마지막 업데이트일 : 2023년 11월 17일)
수강평 총 13개
수강생분들이 직접 작성하신 수강평입니다.
4.5
13개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
jung ae Kim thumbnail
4
제가 업무에서는 사용하지 않는데.. 노드, 리액트, 도커, aws 배포 등에 궁금증과 관심이 있어서 강좌를 듣기로 결정했습니다. 강좌교재도 잘 정리되어 있고 매 강의마다 시간도 길지 않아서 강의따라서 구현하기도 좋고 설명도 잘 해주셔서 좋았습니다. 그런데 좀 아쉬운건, 배포하는 부분에서 좀 헤매다가 겨우 배포했네요 ㅋ 도커, aws에 배포하는 것.. 이 2가지가 젤 익숙하지 않은 부분이라서 가장 강좌를 통해서 경험 해보고자 했던 부분인데 앞부분에서 화면구현에서는 자세하게 잘 설명이 되었는데 배포부분에서는 강좌교재와 영상부분이 많이 아쉬웠습니다. 전반적으로 기본개념 잡고 구현해가에 충분히 좋은 강좌라고 생각합니다!
2022-09-04
hi2177 thumbnail
5
강의좋아요
2022-12-28
dev.jun28 thumbnail
5
좋은 강의 감사합니다.
2022-12-26
양효준 thumbnail
5
NextJS와 Docker에 대해 맛볼수 있는 좋은 강의였습니다! 다음에 새로운 강의 출시되면 또 구매해야겠어요
2022-10-10
이은영 thumbnail
5
최신 typescript 강의를 들을수 있어서 너무좋았습니다 섬세히 알려주셔서 끝까지 완성할수있었습니다 감사합니다
2022-12-09
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!