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

vue.js 실전 프로젝트(트위터 클론) 대시보드

(4.7)
18개의 수강평 ∙  237명의 수강생

44,000원

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

초급자를 위해 준비한
[풀스택] 강의입니다.

vue.js + firebase + tailwindcss 를 통해 실전 프로젝트를 만들어보세요. 이 강의를 수강하신다면 어떤 사이트든 만들 수 있습니다.

✍️
이런 걸
배워요!
vue3
tailwind css
firebase authentication
firebase firestore
firebase storage
firebase hosting

vue 3 + tailwind css + firebase를 이용하여
트위터를 직접 따라만들어 보세요! 💪

✔️ 강의 소개

언제까지 입문서만 읽고, TODO list 만들기 강의만 들으실 건가요? 기본이 중요하지 않다는 말이 아닙니다. 개발분야는 끝없이 새로운 기술이 나오고 매번 새로운 기술을 익히는데 많은 시간과 노력을 들여야 됩니다. 거기에 따른 가장 효율적인 학습 방법을 찾아야 뒤쳐지지 않을 수 있습니다. 그런 점에서 가장 효율적인 학습법은 클론 코딩입니다. 기본 문법을 이해하고, 데이터 베이스와 연결하고, 화면에 뿌리는 것은 누구나 강의를 듣고 책을 읽으면 어렵지 않게 하실 수 있습니다. 하지만, 실제 프로그래밍에서는 강의에서 보지 못했던 수많은 자질구레한 문제들을 마주치게 됩니다. 저랑 같이 하는 클론코딩에서 "왜 내가 원하는대로 작동하지 않는지?" 고민하고 해결해나가는 수백 수천번의 경험을 통해서 개발에 흥미를 조금 더 느끼셨으면 합니다.

✔️ 이 강의만의 특별한 점

  • 제가 학습자였을때 가장 무기력한 순간은 강의자의 막힘 없는 코딩, 이미 머리속에 다 들어있고 키보드로 쳐내기만 하면 되는 것 같았던 순간이었습니다. 저는 여러분들과 함께 만들어나가는 코딩을 하기 위해 제로베이스(물론, 시간절약을 위해 몇몇 이미지나 칼라셋같은 부분은 미리 준비해두었습니다.) 에서 강의를 촬영했습니다.
  • 전체 소스 코드를 지원 합니다. 각 강의 별로 커밋을 해두어서 잠깐 놓친 부분도 문제 없이 따라가실 수 있습니다.
  • 365일 24시간 질문에 답변을 드립니다. 강의를 듣다가 막혔는데, 강의자가 해결해 주지 않는다면 그 강의를 완강할 수 없습니다. 얼마나 간절한 순간인지 제가 잘 압니다. 24시간안에 최대한 빨리 답변을 드리겠습니다.

데모 사이트

https://twitter-clone-inflearn-76b0d.web.app/

깃헙 링크

https://github.com/jinsyu/twitter-clone-inflearn

예상 질문 🙋‍♀️🙋‍♂️

Q-1. vue.js 3버전 실제 프로젝트에 바로 투입 가능 한가요? 
A-1. 버전2와 크게 달라진 점은 없습니다. 모든 면에서 버전3로 넘어가지 않을 이유가 없습니다. 굳이 구버전 강의를 들으실 필요는 없겠죠? 이 강의를 들으신다면 vue.js 3 완벽히 익히실 수 있습니다.

Q-2. 강의 난이도는 어느정도 인가요?
A-2. vue.js 와 javascript 기본 문법(비동기 함수), css(flex)에 대해 알고 계신다면 무리 없이 수강 가능하십니다.

Q-3. 왜 하필 클론 프로젝트 만들기 인가요?
A-3. 비전공자로서 수년간의 공부한 경험에 비추어보면, 클론 프로젝트를 만들어 보았을 때 가장 큰 실력 향상을 얻었습니다. 정해진 프로젝트를 처음부터 끝까지 만들어 보면서, 여러 문제상황들에 좌절하기도 하지만 직접 내 손으로 해결해내고 마침내 완성시켰을 때의 성취감은 엄청 납니다. 기본 문법서를 보신다면 최대한 얇은 걸로, 기본 문법 강의를 들으신다면 최대한 짧은 강의를 들으시고 실전 프로젝트를 만들어 보시는걸 적극 추천드립니다.

Q-4. 프로그래밍 입문자 입니다. 여러 프로그래밍 언어, 프레임 워크들 중에서 vue.js, firebase, tailwind css를 이용하신 이유가 있나요?
A-4. 위 3가지 프레임 워크를 이용하신다면 만들지 못할 것이 없습니다. 강력하면서도 가장 쉬운 방법입니다. 잘 모르시겠다면 저만 믿고 따라오시면 됩니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
기본 학습을 마치고 실전 프로젝트를 만들어보고 싶으신 분
vue.js 3 배우고 싶으신 분
📚
선수 지식,
필요할까요?
javascript 기초 문법
vue.js 기본
비동기 문법 이해(async-await)

안녕하세요
진슈 입니다.
진슈의 썸네일

실용주의 프로그래밍을 지향하는 프리랜서 개발자 입니다.

python, js, golang, c#, django framework, djangorestframework,  flask, telegram bot, aws, vue.js, firebase, tailwind css... 닥치는대로 개발하고 있습니다.

특별히 배우고 싶거나 만들고 싶은 프로젝트가 있으시면 jinsyu.com@gmail.com으로 연락주세요.

커리큘럼 총 54 개 ˙ 9시간 44분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 프론트엔드
트위터 클론 완성 사이트 소개 및 소스코드 활용 미리보기 10:15 기본 프로그램 설치하기 미리보기 11:09 사이드메뉴 만들기 미리보기 18:40
프로필버튼만들기 07:25
사이드메뉴 반응형으로 수정하기 07:03
홈페이지 트위팅 섹션 10:33
홈페이지 트윗 만들기 12:25
홈페이지 트렌드 만들기 16:20
사이드 메뉴 반응형 만들기 (여백 조정) 03:20
컴포넌트 분리하기 02:29
알림 페이지 만들기 10:58
쪽지 페이지 만들기 - 쪽지 목록 08:41
쪽지 페이지 만들기 - 채팅 섹션 13:29
프로필페이지 20:54
트윗 컴포넌트 03:28
섹션 1. vue.js + 백엔드
vue router 만들기 미리보기 06:59 메뉴 router 연결하기 미리보기 08:34
레이아웃 만들기 11:38
회원가입 페이지 11:51
로그인 페이지 02:56
firebase 프로젝트 생성 12:30
firebase authentication 08:04
firebase authentication 회원 가입 & firestore 데이터 저장 12:22
로그인 10:55
input validation 04:21
vuex 16:32
navigation guard 16:48
firestore 정보 사용하기 & 현재 메뉴 색 변경 11:37
tweet 입력 12:46
firestore onsnapshot 14:36
트윗에 유저 정보 추가하기 10:37
트윗 모달 팝업 미리보기 16:02
트윗 모달 반응형 수정 05:06
트윗 모달 트윗 펑션 연결 09:54
코멘트 모달 팝업 16:24
코멘트 모달 실제 정보 넣기 03:40
코멘트 입력하기 09:57
리트윗 컬렉션 추가 11:19
리트윗 분기 처리 11:19
리트윗 유무 표현하기 02:10
좋아요 구현하기 06:07
트윗페이지 만들기 19:43
트윗 정보 가져오기 06:23
트윗 페이지 - 버튼 구현 및 코멘트 가져오기 12:29
프로필 페이지 - 데이터 연결 10:20
프로필 페이지 - 트윗, 리트윗, 좋아요 트윗 가져오기 09:09
프로필 페이지 - 다른 사용자 프로필 조회 06:26
프로필 페이지 - 프로필 수정 모달 팝업 구현 18:09
프로필 페이지 - 이미지 스토리지 업로드 21:52
프로필 페이지 - 팔로우&언팔로우 12:06
알림 페이지 09:39
쪽지 페이지 25:51
트윗 삭제 07:03
firebase hosting deploy 03:23
강의 게시일 : 2021년 03월 04일 (마지막 업데이트일 : 2021년 02월 26일)
수강평 총 18개
수강생분들이 직접 작성하신 수강평입니다.
4.7
18개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
smlee thumbnail
5
굳이 자세한 문법은 생략하고 전체적인 개념을 파악할 수 있도록 해 주는 강의라 좋았습니다. 자세한 문법은 찾아보면 되니까요.
2021-07-29
지식공유자 진슈
좋은 평가 감사드립니다. 좋은 자세이십니다ㅎㅎ
2021-09-01
JH Lee thumbnail
4
강의 내용은 다 좋은데 왜 거의 모든 예제가 정치적인 내용, 그것도 특정 정당이어야 하는지 모르겠네요
2023-01-02
지식공유자 진슈
수강평 남겨 주셔서 감사합니다. 만들 당시 실제 트위터 트윗을 보면서 만들어서 그렇게 된 것 같네요. (트럼프 트윗이 있던 걸로 기억합니다.) 당시 대한민국 대통령으로 단순 치환해서 예시 트윗을 적었는데, 불편하셨다면 죄송합니다. 특별히 정치적인 부분을 집어넣으려는 생각은 전혀 없었습니다.
2023-01-02
parkyj3213 thumbnail
5
반정도 수강 했는데 너무 유익하네요 웹개발로 늦깎이 입사한 개발자인데요 막연하게 혼자 공부하면서 배웠던 vue인데 클론코딩하면서 흩어져있던 개념들이 자기 자리로 찾아가는 느낌이 듦니다. 좋은 강의 감사합니다.
2023-05-26
백가희 thumbnail
4
강의 특성 상 프론트 작업이 많고 파이어베이스 최신 버전과 구문의 차이가 있어 수강 속도가 더뎌지는 면이 있습니다만 강의 자체는 재미있습니다.
2024-03-28
질문또는답변 thumbnail
4
vue.js 기본강의듣지 않고 들으시면 추천하기 어려울것같습니다. 따로 문법에 대한 설명없이 빠른템포로 진행하기때문에 저같은 입문자는 중급자의 영역으로 느껴졌습니다. 그 이외에는 소스파일의 경우 매 강의 마다 깃허브에 커밋해주셔서 실제소스와 비교해가면서확인작업이 가능해 조금은 오래 걸리긴 했지만 우여곡절 완강은 했습니다.
2021-12-30