Chuỗi bài học về Node và React để học bằng cách làm theo - Tạo trang Reddit (NextJS) (Bộ định tuyến trang)

Name: Chuỗi bài học về Node và React để học bằng cách làm theo - Tạo trang Reddit (NextJS) (Bộ định tuyến trang)
Price: 44000 KRW

Thông qua bài giảng này, bạn sẽ có thể từng bước tạo một trang web Reddit từ đầu.

(4.1) 19 đánh giá

994 học viên

John Ahn

Clone Coding

Node.js

React

Next.js

TypeScript

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Phản ứng
Bản đánh máy
PostgreSQL
docker
Tiếp theoJS
phân bổ

NextJS, Typescript, ExpressJS, Postgres
Nhân bản Reddit với những sự kết hợp đầy đủ hấp dẫn nhất! 👨‍💻

Trong bài giảng này?

Reddit, một trang web cộng đồng toàn cầu
Chúng ta hãy cùng nhau làm ngay từ đầu.

Khóa học này được thiết kế để giúp bạn tự tin hơn trong việc phát triển full-stack bằng cách xây dựng một ứng dụng khá phức tạp từ đầu bằng cách sử dụng sự kết hợp full-stack phổ biến nhất trong JavaScript hiện nay : NextJS, Typescript, ExpressJS và Postgres .

Một điểm nổi bật của khóa học này là bạn có thể học bằng cách theo dõi mã nguồn từ đầu, từng bước một. Chúng tôi giải thích mã nguồn từng dòng một, sau đó cùng nhau bắt đầu viết mã, để lặp lại nhiều lần. Mặc dù khóa học mang tính thực hành , chúng tôi vẫn đào sâu hơn vào các khái niệm khó hiểu hoặc phức tạp. Chúng tôi đã nỗ lực hết sức để làm cho tất cả các phần dễ hiểu trực quan thông qua sơ đồ .

Ngôn ngữ và khung được sử dụng 👉

Khi tạo một trang web Reddit , phần front-end sử dụng NextJS của React,
Phần backend sử dụng NodeJS và ExpressJS. Cả hai đều sử dụng TypeScript làm ngôn ngữ. Cơ sở dữ liệu là PostgreSQL và được điều khiển bằng TypeORM.

Giới thiệu những gì bạn sẽ học 📚

Phần 1

Tạo cấu trúc tổng thể

Chuẩn bị phần front-end, back-end và cơ sở dữ liệu để sử dụng.

Phần 2

Tạo một thực thể

Mỗi thực thể được tạo ra để tạo ra dữ liệu mà ứng dụng yêu cầu.

Phần 3

Đăng ký, đăng nhập

Chúng tôi tạo các trang đăng ký thành viên và đăng nhập và xử lý dữ liệu người dùng bằng React Context.

Phần 4

Tạo một cộng đồng

Triển khai các trang tạo cộng đồng, tạo cộng đồng, tải hình ảnh, v.v.

Phần 5

Tạo trang bài viết

Tạo bài đăng trong mỗi cộng đồng và tạo trang bài đăng.

Mục 6

Triển khai tính năng bình luận và bỏ phiếu

Triển khai tính năng bình luận và bỏ phiếu.

Mục 7

Tạo trang cuộn vô hạn và trang người dùng

Sử dụng useSWRInfinite và Intersection observer
Chúng ta sẽ triển khai chức năng cuộn vô hạn và tạo trang người dùng.

Mục 8

Triển khai ứng dụng

Chúng tôi sẽ triển khai ứng dụng đã tạo cho đến nay bằng cách sử dụng phiên bản EC2.

Người chia sẻ kiến thức
Bạn có tò mò về các bài giảng khác không? 📖

Với hơn 50.000 học viên tham gia, khóa học phát triển web này là một trải nghiệm vừa học vừa làm.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Bất kỳ ai muốn tạo một ứng dụng đầy đủ bằng JavaScript
Những người muốn học tập vui vẻ

Cần biết trước khi bắt đầu?

JavaScript
ReactJS
NodeJS

Xin chào
Đây là

84,079

Học viên

2,691

Đánh giá

2,430

Trả lời

4.8

Xếp hạng

Các khóa học

안녕하세요.

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

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

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

Chương trình giảng dạy

Tất cả

103 bài giảng ∙ (17giờ 39phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. tài liệu bài giảng

4 bài giảng

1. dữ liệu đồ họa
2. tài liệu mã nguồn
3. tài liệu PDF
4. Cách sử dụng pgAdmin

Phần 2. Giới thiệu bài giảng và cài đặt chương trình cần thiết

5 bài giảng ∙ (14phút)

5. Video giới thiệu bài giảng
01:15
6. Trình tự học bài giảng
7. Những thứ cần thiết để cài đặt React (Node.js & Visual Studio Code)
05:55
8. Cài đặt Docker trên Windows
04:03
9. Cài đặt Docker trên Mac
03:26

Phần 3. Tạo cấu trúc tổng thể

5 bài giảng ∙ (45phút)

Phần 4. Tạo một thực thể

11 bài giảng ∙ (1giờ 47phút)

Phần 5. Đăng ký, đăng nhập

10 bài giảng ∙ (2giờ 15phút)

Phần 6. Tạo một cộng đồng

20 bài giảng ∙ (3giờ 37phút)

Phần 7. Tạo trang đăng bài

6 bài giảng ∙ (1giờ 12phút)

Phần 8. Thực hiện chức năng bình luận và biểu quyết

11 bài giảng ∙ (2giờ 4phút)

Phần 9. Cuộn vô hạn và tạo trang người dùng

6 bài giảng ∙ (1giờ 39phút)

Phần 10. Triển khai ứng dụng của bạn

6 bài giảng ∙ (59phút)

Phần 11. Cập nhật khóa học

2 bài giảng ∙ (48phút)

Phần 12. Phụ lục) Nextjs & Khái niệm cơ bản về bản đánh máy

17 bài giảng ∙ (2giờ 12phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

19 đánh giá

4.1

19 đánh giá

jung ae Kim
Đánh giá 9
∙
Đánh giá trung bình 4.8
4
97% đã tham gia
제가 업무에서는 사용하지 않는데.. 노드, 리액트, 도커, aws 배포 등에 궁금증과 관심이 있어서 강좌를 듣기로 결정했습니다. 강좌교재도 잘 정리되어 있고 매 강의마다 시간도 길지 않아서 강의따라서 구현하기도 좋고 설명도 잘 해주셔서 좋았습니다. 그런데 좀 아쉬운건, 배포하는 부분에서 좀 헤매다가 겨우 배포했네요 ㅋ 도커, aws에 배포하는 것.. 이 2가지가 젤 익숙하지 않은 부분이라서 가장 강좌를 통해서 경험 해보고자 했던 부분인데 앞부분에서 화면구현에서는 자세하게 잘 설명이 되었는데 배포부분에서는 강좌교재와 영상부분이 많이 아쉬웠습니다. 전반적으로 기본개념 잡고 구현해가에 충분히 좋은 강좌라고 생각합니다!
hi2177
Đánh giá 3
∙
Đánh giá trung bình 5.0
5
68% đã tham gia
강의좋아요
dev.jun28
Đánh giá 9
∙
Đánh giá trung bình 5.0
5
100% đã tham gia
좋은 강의 감사합니다.
이은영
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
97% đã tham gia
최신 typescript 강의를 들을수 있어서 너무좋았습니다 섬세히 알려주셔서 끝까지 완성할수있었습니다 감사합니다
양효준
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
90% đã tham gia
NextJS와 Docker에 대해 맛볼수 있는 좋은 강의였습니다! 다음에 새로운 강의 출시되면 또 구매해야겠어요

926.720 ₫

Khóa học khác của John Ahn

Hãy khám phá các khóa học khác của giảng viên!

따라하며 배우는 리액트 네이티브 기초

John Ahn

이 강의를 통해서 리액트 네이티브를 이용해서 애플리케이션 개발을 할 수 있습니다.

Basic

React Native, React, expo

따라하며 배우는 리액트 네이티브 기초

John Ahn

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

Basic

React, Next.js, TypeScript

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

이 강의를 통해 도커에 대해서 배울 수 있으며, CI 환경을 구성할 수 있습니다.

Basic

GitHub, AWS, Docker

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

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

Intermediate

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

이 강의를 통해서 Google에서 제공하는 API를 사용해서 챗봇을 만들어 볼 수 있습니다.

Basic

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

John Ahn

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

Basic

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

따라하며 배우는 자바스크립트 A-Z

John Ahn

웹 개발의 기초가 되는 자바스크립트의 기초부터 중급까지 배울 수 있습니다.

Beginner

JavaScript

따라하며 배우는 자바스크립트 A-Z

John Ahn

따라하며 배우는 HTML, CSS

John Ahn

이 강의를 통해서 HTML, CSS 기본을 다질 수 있습니다.

Beginner

HTML/CSS

따라하며 배우는 HTML, CSS

John Ahn

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

Intermediate

React

따라하며 배우는 웹 게임

John Ahn

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

Basic

React, React Context, 웹앱

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

John Ahn

따라하며 배우는 NestJS

John Ahn

이 강의를 통해 NestJS에 대해서 배울 수 있습니다.

Basic

NestJS, PostgreSQL, TypeORM

따라하며 배우는 NestJS

John Ahn

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

Basic

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

Basic

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

출시 전부터 많은 관심을 받았던 데노가 드디어 나왔습니다. 이 강의에서 데노가 노드와 어떻게 다르며 어떻게 데노를 다루는지를 배울 수 있습니다.

Basic

Deno

따라하며 배우는 데노(DENO) - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

Basic

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드등의 개념만이 아닌, 실질적으로 어떻게 웹 사이트를 만드는지를 배울 수 있습니다.

Basic

React, Node.js, 웹앱

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

Basic

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

Basic

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

webstoryboy

강의를 통해 React 프레임워크와 YouTube API를 이용하여 자신만의 리액트 유튜브 영상 사이트를 만들어봅니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용하는 것을 목표로 합니다.

Basic

React, HTML/CSS, JavaScript

리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

webstoryboy

얄코의 가장 쉬운 Node.js

얄팍한 코딩사전

실무 프론트/백엔드 개발 이전에 꼭 알아야 할, Node.js의 핵심 원리와 실전 기술을 담았습니다.

Basic

Node.js

얄코의 가장 쉬운 Node.js

얄팍한 코딩사전

손에 익는 Next.js - 공식 문서 훑어보기

하조은

공식 문서로 최신 Next.js를 배워봅니다. 문제 해결의 도구로써 Next.js가 필요한 이유를 이해하실 수 있어요!

Basic

Next.js, next.js13, React

손에 익는 Next.js - 공식 문서 훑어보기

하조은

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

Basic

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

이 강의를 통해 리액트와 노드의 개념을 익히는 것뿐만이 아닌 실질적으로 어떻게 웹사이트를 만들 수 있는지를 배울 수 있습니다.

Basic

MongoDB, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

John Ahn

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

Basic

React, Next.js, TypeScript

따라하며 배우는 리액트 A-Z[19버전 반영]

John Ahn

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

Basic

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

Intermediate

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

Basic

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

Intermediate

React, Next.js, cursor

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

Basic

express.js, Node.js, routing

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편

애프터캠프

도메인 주도 개발(DDD) 방법으로 체계적인 백엔드 설계 및 이것을 마이크로서비스에 적용해봅니다!

Intermediate

DDD, Node.js

클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편

애프터캠프

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

Basic

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

아바타 커뮤니티앱 만들기 (React Native Expo)

Kyo

리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

Basic

React Native, TypeScript, expo

아바타 커뮤니티앱 만들기 (React Native Expo)

Kyo

[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

코드팩토리

TypeScript(타입스크립트)를 하나도 모르더라도 강의 하나로 Typescript 문법 고수로 만들어주는 고농축 Typescript 문법 강의입니다.

Basic

TypeScript

[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

코드팩토리

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

Beginner

TypeScript, JavaScript, ES6

공식문서로 배우는 실전 타입스크립트

어쩔코딩

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

Beginner

클론코딩, HTML/CSS, 웹 디자인

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

GraphQL: REST API를 대체할 기술

Burger

GraphQL의 프론트엔드와 백엔드를 한번에 배울 수 있는 기회

Basic

GraphQL, Spring Boot, Node.js

GraphQL: REST API를 대체할 기술

Burger

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]

권태뽕

본 강의는 Flutter와 Firebase로 넷플릭스 UI를 클론 코딩하는 강의입니다! 가장 빠르게 앱 개발을 공부할 수 있는 Flutter를 시작하세요:)

Basic

Flutter, 클론코딩, Firebase

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]

권태뽕

Chuỗi bài học về Node và React để học bằng cách làm theo - Tạo trang Reddit (NextJS) (Bộ định tuyến trang)

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Ngôn ngữ và khung được sử dụng 👉

Giới thiệu những gì bạn sẽ học 📚

Người chia sẻ kiến thức Bạn có tò mò về các bài giảng khác không? 📖

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học khác của John Ahn

Khóa học tương tự

Người chia sẻ kiến thức
Bạn có tò mò về các bài giảng khác không? 📖

Khuyến nghị cho
những người này

Xin chào
Đây là