개발 · 프로그래밍

풀스택

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

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

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

(4.1) 수강평 18개

수강생 985명

John Ahn

클론코딩 Node.js React Next.js TypeScript

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

이런 걸 배울 수 있어요

리액트
타입스크립트
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입니다.

82,814

명

수강생

2,632

개

수강평

2,428

개

답변

4.8

점

강의 평점

개

강의

안녕하세요.

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

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

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

커리큘럼

전체

103개 ∙ (17시간 39분)

해당 강의에서 제공:

수업자료

섹션 1. 강의 자료

4개

1. 도표 자료
2. 소스 코드 자료
3. PDF 자료
4. pgAdmin 사용법

섹션 2. 강의 소개 및 필요한 프로그램 설치

5개 ∙ (14분)

5. 강의 소개 영상
01:15
6. 강의 학습 순서
7. 리액트 설치를 위해서 필요한 것들(Node.js & Visual Studio Code)
05:55
8. 윈도우에서 도커 설치하기
04:03
9. 맥에서 도커 설치하기
03:26

섹션 3. 전체적인 구조 만들기

5개 ∙ (45분)

섹션 4. Entity 생성하기

11개 ∙ (1시간 47분)

섹션 5. 회원가입, 로그인

10개 ∙ (2시간 15분)

섹션 6. 커뮤니티 생성

20개 ∙ (3시간 37분)

섹션 7. 포스트 페이지 생성

6개 ∙ (1시간 12분)

섹션 8. 댓글과 투표 기능 구현

11개 ∙ (2시간 4분)

섹션 9. 무한스크롤 및 유저 페이지 생성

6개 ∙ (1시간 39분)

섹션 10. 애플리케이션 배포하기

6개 ∙ (59분)

섹션 11. 강의 업데이트

2개 ∙ (48분)

섹션 12. 부록) Nextjs & Typescript 기본

17개 ∙ (2시간 12분)

강의 게시일: 2022. 08. 09.

마지막 업데이트일: 2023. 11. 16.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

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

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