Thumbnail
FE 깜짝 할인 중(D-8)
개발 · 프로그래밍 풀스택
vue.js 실전 프로젝트(트위터 클론)
(4.7)
11개의 수강평 ∙ 129명의 수강생

25%

33,000원

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일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.7
11개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
h승현 thumbnail
강의 내용 좋고 강의 결과물 좋고 실력좋으시고 단 한가지 아쉬운점이 있다면 풀스택 강의라서 조금은 디테일하게 알려주시면 좋을텐데 백엔드 부분에서 좀 어려웠습니다
2022-04-30
조운 조 thumbnail
초보~중수 에게 매우 좋은강의 라고 생각합니다
2022-04-11
박성재 thumbnail
현직 주니어 개발자로 일하고 있는데, Vue.js 로 개발을 하게 되다 보니 스스로 공부하는데 한계가 있었습니다. 간단한 api를 활용하여 props 기능 등 기본적은 vue.js 문법을 활용하여 완성은 했으나, 실제 백엔드와의 협업은 어떻게 이루어지는지 깊게 알고 싶어 firebase로 먼저 접해보고자 강의를 들었는데, tailwind css 라이브러리도 처음 써보게 되면서 생각보다 효율이 좋아 너무 좋았고, vue.js의 ref, 데이터 바인딩 그리고 백엔드 연결까지 전체적으로 훑을 수 있는 계기가 되어 너무 좋았습니다!!
2021-11-01
지식공유자진슈
과한 평가네요. 감사합니다.
2021-11-02
질문또는답변 thumbnail
vue.js 기본강의듣지 않고 들으시면 추천하기 어려울것같습니다. 따로 문법에 대한 설명없이 빠른템포로 진행하기때문에 저같은 입문자는 중급자의 영역으로 느껴졌습니다. 그 이외에는 소스파일의 경우 매 강의 마다 깃허브에 커밋해주셔서 실제소스와 비교해가면서확인작업이 가능해 조금은 오래 걸리긴 했지만 우여곡절 완강은 했습니다.
2021-12-30
lalazin thumbnail
좋아요!!!
2021-12-12
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스