BEST

프론트엔드

Vue로 Nodebird SNS 만들기

Name: Vue로 Nodebird SNS 만들기
Price: 66000 KRW
Rating: 4.8 (49 reviews)

Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

(4.8) 수강평 49개

수강생 638명

제로초(조현영)

Vue.js Node.js AWS MySQL Vuex

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

Vue
Nuxt
Vuex
Vuetify
Vue Router
SSR + SEO
Node.js + MySQL
AWS 배포

제로초의 Vue로 만드는
풀스택 SNS 강좌!

트위터와 비슷한(이라고 쓰고 짝퉁이라 읽는다) 제로초의 시그니처 프로젝트 NodeBird SNS를 만들어보며, Vue + Vuex + Nuxt.js(SSR) + Vuetify + Node + Express + Sequelize(MySQL)를 배웁니다.
검색엔진 최적화와 AWS 배포(간단하게 EC2 + Lambda + S3 + Route53 사용)는 보너스!

실습을 통해 직접 만들며
배워볼 수 있어요!

로그인, 게시글 작성, 이미지 업로드, 좋아요, 댓글, 리트윗

인피니트 스크롤링, 팔로우, 언팔로우

해시태그 검색, 유저 프로필

#1
소스 코드를
제공합니다.

_{https://github.com/zerocho/vue-nodebird (바로가기)}

해당 강의의 소스 코드를 모두 제공합니다.

#2
질문에 빠르게
대답해 드립니다.

제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드려요.
강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부해 보세요.
내용을 이해하기에 더 도움이 될 거예요!

참고 사항

선수 과목: Vue 기초 강의(무료)
프론트를 중점으로 다루고 백엔드는 부가적인 역할을 합니다.

연관 강좌

[리뉴얼] Node.js교과서 - 기본부터 프로젝트 실습까지
노드에 대한 핵심 개념을 익힌 후,
실전 예제를 통해 실무에 뛰어들 준비를 갖춥니다.
Node.js교과서를 먼저 수강하면 백엔드 이해에 도움이 됩니다.

React로도 만들어 볼까요?

React로 Nodebird SNS 만들기
React로 배우는 20시간짜리(어마어마)
풀스택 강좌!

TypeScript로도 만들어 볼까요?

Node.js에 TypeScript 적용하기(feat. NodeBird)
NodeBird(트위터 따라 만들기) 강좌의 예제를
타입스크립트로 전환해봅니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

Vue로 웹사이트를 만들고 싶은 분
SSR을 통해 검색엔진최적화를 하고싶은 분
풀스택 강좌를 원하시는 분

선수 지식,
필요할까요?

Vue 기본 문법(무료 강좌 시청하기)

안녕하세요
입니다.

66,445

명

수강생

1,676

개

수강평

9,753

개

답변

4.8

점

강의 평점

개

강의

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자
– ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중
– 현) 스모어톡 CTO
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
Operator of ZeroCho.com
Currently running a YouTube channel ZeroCho TV, covering development topics
CTO at SmoreTalk
Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

커리큘럼

전체

71개 ∙ (15시간 11분)

섹션 1. Nuxt와 Vuetify 도입하기

9개 ∙ (1시간 50분)

1. 1-1. 강좌 필수 안내 사항
09:10
2. 1-2. nuxt 설치하고 pages 만들기
15:10
3. 1-3. nuxt router와 layout, head
16:12
4. 1-4. nuxt를 vuetify와 연결하기
11:31
5. 1-5. vuetify 레이아웃과 아이콘
07:44
6. 1-6. vuetify 그리드 시스템
08:36
7. 1-7. 기본 페이지 화면 만들기
14:05
8. 1-8. 폼 검증하기
15:18
9. 1-9. eslint 도입하기
12:23

섹션 2. Vuex로 데이터 관리하기

7개 ∙ (1시간 27분)

10. 2-1. Vuex 모듈 시스템
11:53
11. 2-2. Vuex actions
09:14
12. 2-3. 로그인/회원가입 더미 데이터
14:32
13. 2-4. 게시글 작성 폼 만들기
16:49
14. 2-5. 게시글 작성/삭제 더미 데이터
13:37
15. 2-6. 댓글 작성 더미 데이터
14:43
16. 2-7. 닉네임 수정 더미 데이터
07:00

섹션 3. 프론트엔드 기술들

9개 ∙ (1시간 57분)

17. 3-1. 팔로우/팔로잉 더미 데이터
14:42
18. 3-2. 라우팅 미들웨어
09:31
19. 3-3. 동적 라우팅
15:06
20. 3-4. 인피니트 스크롤링 준비하기
11:24
21. 3-5. fetch와 인피니트 스크롤링 구현
17:35
22. 3-6. virtualized list 이해하기
05:27
23. 3-7. 더보기 구현하기
17:46
24. 3-8. 기타 라우트 구현하기
11:01
25. 3-9. Q&A
14:40

섹션 4. 백엔드 만들기

17개 ∙ (3시간 50분)

섹션 5. 기능 구현해나가기

17개 ∙ (3시간 33분)

섹션 6. AWS에 배포하기

12개 ∙ (2시간 32분)

강의 게시일:

마지막 업데이트일:

수강평

전체

49개

4.8

49개의 수강평

pedrail380603
수강평 5
∙
평균 평점 5.0
5
83% 수강 후 작성
率直に受講評を残します。短所から申し上げれば精神がないのです。 1. チャットウィンドウ 2. 単純なタイプミスの後で編集なしで後で修正 3. 単にサーバーを開けなかったもの 2、3回はデバッグするときああ、このようなエラーが出たかと思いますが、集中度を落とすようです。 2,3番ではない構造の問題や、私が抜いたものを後で直すのはよかったです。それにもかかわらず5つ星をつけたのは、実務とすごく関連が深いということです。私はインフラでリアクト、vue講義だけ7～8個を聞きました。その中には整理と編集はうまくいきましたが、今何をすべきですか？単純に学んだ内容だけでは私が望むビジネスモデルを作れない講義があり、フロントは製作できるほど理解したがバックエンドは？という講義もありました。もちろん、先に他の講義を見てきて、そのことを理解するのは難しくありませんでした。実務をすぐに投入しなければならない場合は、前にこの講義をお勧めします！親切ではありませんが、ついてきて理解すれば実務投入が可能だと思います
ssasun941205
수강평 1
∙
평균 평점 5.0
5
100% 수강 후 작성
2年間中小企業でハードウェア、エンベデッド、ウェブ、アプリ、させていただくと、ますます異道じゃない人になっていくようで自信が底だったのに退社して偶然にチョ・ヒョンヨン様無料講義を見始めてここまで来ましたね。今回イプロジェクトを作ってみて、また自信が生まれるようになりましたね。ありがとうございます！講義内容は公式文書で確認可能な部分はすばやく進んで、本当に必要な部分を硬くつけて説明していただきました。私はやはり注射式の講義より必要な部分を直接探しながら調べるようにする点がよりよく近づいてきたようです。そんな部分が開発者にとって必須な部分でもあります。頑張ってチョ・ヒョンヨン様のような開発者になろう！ * 中古新入で入社してから一年ぶりに年俸67%引き上げに成功しました。ありがとうございます！ 2022-05-01
- ssasun941205
  就職も成功しました本当にありがとうございます~~~
juwon76
수강평 27
∙
평균 평점 4.8
4
100% 수강 후 작성
精神なく頑強まで来ましたね。
mannahoffnung2395
수강평 2
∙
평균 평점 5.0
5
52% 수강 후 작성
完全に良いです！ここで学ぶ内容の大部分は実務で応用できて助けて本当にたくさんなりました。良い講義ありがとうございます！これからも良い講義をお願いします〜個人的にgraphql講義を楽しみにしています！
dfsdfsdfffwefwefew
수강평 2
∙
평균 평점 5.0
5
31% 수강 후 작성

₩66,000

제로초(조현영)님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

초급

React, React Native, Hybrid App

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

タイプスクリプト/JavaScriptでペイントを作成し、さまざまなデザインパターンの使い方と長所と短所を学びます。 canvas apiを学べるのはボーナス！

중급이상

Design Pattern, oop, TypeScript

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

[改訂3版] Node.js教科書 - 基本からプロジェクト実習まで

zerocho

ノードとは何か、最新のJavaScript文法、ノードのAPI、npm、モジュールシステム、データベース、テストなどについて学び、5つの実例を使ってプロジェクトを作成します。サービスをクラウドにデプロイしたり、ノードプロジェクトをTypeScriptに変換したりすることもできます。

초급

Node.js, Express, MySQL

[改訂3版] Node.js教科書 - 基本からプロジェクト実習まで

zerocho

Next + React Query で SNS サービスを作成する

zerocho

React19 & Next15 & ReactQuery5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택을 사용하여 Twitter(X.com)와 유사한 SNS 서비스를 만들어보겠습니다. 마지막으로 검색 엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

Next + React Query で SNS サービスを作成する

zerocho

テスト with Jest: ゼロ秒に正しく学ぶ

zerocho

このレッスンでは、テストが必要な場合とテストを行う際の利点をJestフレームワークで紹介します。リアクト、Expressなどにユニットテスト、統合テストを適用してみます。

초급

Software Test, Jest, react-testing-library

テスト with Jest: ゼロ秒に正しく学ぶ

zerocho

[リニューアル]タイプスクリプトオールインワン：Part1。

zerocho

タイプスクリプトの基本文法を学び、他の人が作成したタイプを分析する方法と、私が直接タイプを作成する方法を学びます。

초급

TypeScript

[リニューアル]タイプスクリプトオールインワン：Part1。

zerocho

非専攻者の専攻者に追いつく - ネットワーク、HTTP

zerocho

HTTPを扱う開発者であるか、開発者になりたいのですが、コンピュータ学科を専攻していないため、ネットワークが弱い方、この講座一つで生涯知識を得てください！

입문

Network, tcpip, websockets

非専攻者の専攻者に追いつく - ネットワーク、HTTP

zerocho

配信アプリクローンコーディング [with React Native]

zerocho

リアクトネイティブでライダー用の配信アプリを作成します。 6年間リアクトネイティブで5つ以上のアプリを作成し、カカオモビリティに売却した開発者の講義です。

중급이상

React Native

配信アプリクローンコーディング [with React Native]

zerocho

非専攻者の専攻者追いつく - データベース、SQL

zerocho

すでに開発者や開発者になりたいのですが、コンピュータ学科を専攻していないため、データベースが弱い方、この講座一つで生涯知識を得てください！

입문

DBMS/RDBMS, SQL, MySQL

非専攻者の専攻者追いつく - データベース、SQL

zerocho

Slack クローンコーディング [React を使用したリアルタイムチャット]

zerocho

Slack サービスを参考に、本格的な React Web 開発を始めましょう。会員登録、ログイン、ルームの作成、リアルタイムチャットまで!

중급이상

Clone Coding, React, TypeScript

Slack クローンコーディング [React を使用したリアルタイムチャット]

zerocho

Node.jsにTypeScriptを適用する（feat. NodeBird）

zerocho

Node.jsにタイプスクリプトを適用し、既存のnpmパッケージにタイプを追加するか、直接タイプスクリプトライブラリを作成しましょう。

중급이상

Node.js, Web Application, TypeScript

Node.jsにTypeScriptを適用する（feat. NodeBird）

zerocho

Node.jsでWebをクロールする

zerocho

ネイバー、アマゾン、Twitter、YouTube、Facebook、Instagram、unsplash.comなどのサイトをクロールして本番に適用します。

중급이상

JavaScript, Node.js, Web Crawling

Node.jsでWebをクロールする

zerocho

Slack クローンコーディング [NestJS + TypeORM を使用したバックエンド]

zerocho

Node.js の Spring と呼ばれる NestJS を学び、Dependency Injection の利便性を体験しましょう。API 開発から、Express との比較、デプロイ、テストまで、すべてを学びましょう。

중급이상

NestJS, TypeORM, Express

Slack クローンコーディング [NestJS + TypeORM を使用したバックエンド]

zerocho

[リニューアル]タイプスクリプトオールインワン：Part2。実戦分析編

zerocho

タイプスクリプトの基本的な文法を学んだことで、有名なライブラリの複雑なタイプを分析する方法を学びましょう。

중급이상

TypeScript

[リニューアル]タイプスクリプトオールインワン：Part2。実戦分析編

zerocho

非専攻者の専攻者追いつく - 資料構造(with JavaScript)

zerocho

アルゴリズム勉強の必須選手科目である資料構造！様々な資料構造をJavaScriptで学びましょう！

초급

JavaScript, Algorithm, Coding Test

非専攻者の専攻者追いつく - 資料構造(with JavaScript)

zerocho

[リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

zerocho

本講義ではJavaScriptを活用してプログラミング思考力を養う練習を行います。ウェブゲームである球球団をはじめとする、数字野球、反応速度テスト、チックタクト、宝くじ抽選機、はさみロック、カードマッチングゲーム、テキストRPG、地雷探し、2048ゲーム、ほくろ捕獲まで一緒に作ってみましょう。

초급

JavaScript

[リニューアル]コーディング自律学習ゼロ秒のJavaScript入門

zerocho

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

Webゲームを作成して学習するReactにTypeScriptを適用する

zerocho

リアクトで作ったウェブゲームとReact Router、Redux、MobXにタイプスクリプトを貼り付けてリアクトとタイプスクリプトを一緒に使ってみましょう。

중급이상

React, TypeScript

Webゲームを作成して学習するReactにTypeScriptを適用する

zerocho

Redux vs MobX（両方を学ぼう！）

zerocho

RedoxとMob Xを選ぶのを心配していますか？一度、両方を学んでから悩みましょう！

초급

Redux, MobX

Redux vs MobX（両方を学ぼう！）

zerocho

Webゲームを作って学ぶVue

zerocho

簡単な8つのWebゲームを作成し、Vue.jsとVueで使用されるVuex、Vue Routerを学びます。

초급

Vue.js, Webpack, Vuex

Webゲームを作って学ぶVue

zerocho

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)

jeonghwan

すでに構築済みの開発環境を理解できます。最初から自分で開発環境を構築できます。

중급이상

Node.js, Webpack, Babel

フロントエンド開発環境の理解と実践 (webpack, babel, eslint..)

jeonghwan

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

独自のフルスタックアプリケーション開発からプログレッシブWebアプリ（PWA）まで！

초급

Vue.js, PWA, supabase

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

Do it!プログレッシブウェブアプリを作成

easyspub

グローバル企業の次世代モバイル戦略、PWA（プログレッシブWebアプリ）を学ぼう！

초급

PWA, Web Application, Vue.js

Do it!プログレッシブウェブアプリを作成

easyspub

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

コーディング1位 YouTubeのジョコーディングの本番圧縮！簡単で楽しいWebフルスタック開発講義

입문

HTML/CSS, JavaScript, Node.js

コーディングのコーディング基礎とWebフルスタックの開発

jocoding

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

"Vue 3 完全マスター" 後続の講義で最新の Vue 3 バージョンのプロジェクト設定と最新のスペックを習得する講義です。

초급

Vue.js, Vue 3, TailwindCSS

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

Spring Bootで直接作りながら学ぶ大規模システム設計 - 掲示板

kuke

大規模なデータとトラフィックをサポートするシステムを、Spring Boot を使用して直接作成しながら学習します。

중급이상

Spring Boot, MySQL, Redis

Spring Bootで直接作りながら学ぶ大規模システム設計 - 掲示板

kuke

Node.jsでWebをクロールする

zerocho

ネイバー、アマゾン、Twitter、YouTube、Facebook、Instagram、unsplash.comなどのサイトをクロールして本番に適用します。

중급이상

JavaScript, Node.js, Web Crawling

Node.jsでWebをクロールする

zerocho

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

Spring BootとReact.jsで超簡単掲示板を手軽に構築する実践講義！この講義は、理論は少なめに、実習に集中して素早く完成させるウェブアプリケーション開発過程を盛り込んでいます。

입문

Spring Boot, react.js, JPA

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

カカオ、Google SNSログイン（springboot3, vue3）

bradkim

SpringBootを活用して、カカオ、Googleログインを実装します。JWTトークンベースのログインが実装されます。Vue3を通じて簡単な画面を構成します。

초급

OAuth, oauth2, JWT

カカオ、Google SNSログイン（springboot3, vue3）

bradkim

PHPプログラミング実務完全征服！ with MySQL

usefulit

本講義はPHPプログラミング活用概念の習得と実習のための講座として企画されており、PHPプログラミング活用概念を習得したい受講生のための講座です。

입문

PHP, phpmyadmin, MySQL

PHPプログラミング実務完全征服！ with MySQL

usefulit

Strapiでコーディングせずに独自のAPIサーバーを作成する

teracokr

独自のバックエンドAPIサーバーを、NodeベースのStrapi v4を利用して、数回のクリックで特別なコーディングなしで作成し、AWS EC2にデプロイ試してみる過程です。 Strapi v5もほぼ同じように適用できます。講義A / Sもありますので参考にしてください〜

중급이상

strapi, Node.js, ec2

Strapiでコーディングせずに独自のAPIサーバーを作成する

teracokr

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

タイプスクリプトを正しく理解するには、公式文書を一度見てください。文書の重要な部分だけがコックを拾い、分かりやすく伝えます。実戦に必要な内容も一緒にお知らせする講義です！

입문

TypeScript, JavaScript, ES6

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

초급

React, Java, AWS

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

セクシーPHP講座 - PHP基本からMYSQL、XML、ネイバーショッピング検索を利用した活用まで

shop2world0005

強力なWeb言語であるPHPについて基礎から深化まで学ぶことができます。

초급

MySQL, PHP

セクシーPHP講座 - PHP基本からMYSQL、XML、ネイバーショッピング検索を利用した活用まで

shop2world0005

Inflearnクローンコーディングで学ぶオールインワンLMSソリューション：Next.js・Flutter・AWS・Supabase・prismaで実装する多言語HLSストリーミング基盤MVPプロジェクト

ludgi

この講義は単純なクローンコーディングや基礎講義ではありません。 Inflearn(Inflearn)のようなLMS(Learning Management System)プラットフォームをMVP(エムブイピー)レベルで最初から最後まで実装しながら、フリーランサー・1人開発者・スタートアップ初期メンバーが実務ですぐに活用できるオールインワンソリューションを提供します。 Next.js、Flutter、Supabase、Firebase(FCM)、AWS、Vercel、Xcode、Android Studio、ElevenLabs、トスペイメンツまで実際の実務で使用するスタックを一度に扱います。ウェブとアプリを同時に開発し、ソーシャルログイン、多言語自動ダビング、HLSストリーミング基盤講義再生、決済連動、アップストア・プレイストア配布まで全過程を直接経験できます。この講義は細かいコード一行よりも、実務で重要な流れ、設定、配布過程に重点を置きました。したがってフリーランサーとして独立しようとする開発者、スタートアップで迅速にMVPを検証しなければならないチーム、そして実務全般を経験したいジュニア開発者に適しています。

중급이상

Flutter, AWS, supabase

ludgi