Vue로 Nodebird SNS 만들기
Vue로 Nodebird SNS 만들기
수강정보
(16개의 수강평)
284명의 수강생
스킬태그 #Vue.js, #Node.js, #AWS, #MySQL
66,000원
지식공유자 : 조현영
71회 수업 · 총 15시간 11분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상

이 강의는

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

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

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

(이 강좌는 시리즈이며 추후 TS등을 사용한 다른 버전의 NodeBird도 제작됩니다.)

 제 강좌의 장점은 Q&A입니다. 질문하시면 하루 안에 답변드립니다. 단순히 강좌만 시청하는 것보다는 강좌 관련 내용을 자유롭게 질문하시면서 능동적으로 공부하시면 많은 도움이 됩니다. 강좌 내용에서 설명이 부족하거나 이해가 안 가는 부분이 있다면 언제든지 질문주세요. 다른 분들이 이미 했던 질문을 읽어보시는 것도 도움이 됩니다.

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

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

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

연관된 강좌

Node.js교과서 - 기본부터 프로젝트 실습까지 
노드에 대한 핵심 개념을 익힌 후,
실전 예제를 통해 실무에 뛰어들 준비를 갖춥니다.

React로도 만들어 볼까요? :)

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

참고 사항

  • 선수 과목: 뷰 무료 강좌
  • 프론트를 중점으로 다루고 백엔드는 부가적인 역할을 합니다. (노드교과서 코드와 비슷하게 갑니다.)

  • Node.js교과서 이나 강좌를 먼저 보고 오시면 백엔드 이해에 도움이 됩니다. 필수는 아닙니다.

  • 소스 코드: https://github.com/zerocho/vue-nodebird

이런 걸 배워요

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

도움 되는 분들

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

선수 지식

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

공개 일자

2019년 9월 04일 (마지막 업데이트 일자 : 2019년 9월 11일)

지식공유자 소개

– Node.js교과서 저자 
– ZeroCho.com 운영자
– 현재 유튜브에서 ZeroCho TV로 방송중 
– 스타트업 CTO
– 글로벌SW전담개발자

4.6
16개의 수강평
default_profile.png
hwd3527 9달 전
정신없이 완강까지 왔네요. 몇번 더봐야 제대로 알것 같습니다만 좋은 강의 잘 들었습니다. 감사합니다.
image
앙앙 4달 전
무언가를 알려주려고 강의를 만든게 아니라 자신이 공부한 걸 정리한 수준입니다. 가격도 비싸니 많이 아쉽습니다. 데모사이트인 nodebird사이트를 보면 조금 답답해집니다. 1. 먼저 Vuetify를 이렇게 사용하지 않을거면 왜 선택했는지 모르겠어요. 설마 강의 홍보용인가요? 2. 강의 중간중간에 나오는 카톡이나 알림소리는 좀 없애고 올리셨어야 합니다. 신경이 많이 쓰여요. 3. 프론트와 백을 완전히 분리해서 내용 연결이 안됩니다. 실무에서는 백단을 상상하며 코딩하지 않아요. 4. 알려주기 복잡한 것들도 힘드시겠지만 설명을 하셨어야해요. 개념설명은 하지 못하더라도 강의에 쓰인 코드만큼은 이걸 왜 쓰는지 설명을 해줘야 하지 않았을까요. 5. 무한스크롤(infinite scroll)이 가장 안좋았어요. 요새는 event 여기저기 붙여가며 만들지 않아요. Intersection Observer를 이용하죠. 이 부분 강의하실때 너무 성의 없으셨어요. Vue는 오래했지만 Nuxt는 처음이었고 우리나라에 Nuxt 강의가 없어서 외국강의와 자료들만 보며 익힌 후 개발을 해오다 이 강의를 우연히 알게되었습니다. 솔직히 다른 사람은 nuxt로 어떻게 만드는지 궁금해서 이 수업을 들었어요. 그래도 꽤 열심히 들었다고 생각합니다. 조심스런 결론이지만, 제 개인적인 생각으로는 이렇게 강의하시면 안될거 같아요. 초급자들이 익힐수 있는 친절함도 아니고 중급자들이 익힐 수 있는 노하우도 없고 아마 스스로도 인정하시겠지만 nuxt만의 장점이나 특징을 살린부분도 없어요. 무엇보다 강의 성의가 너무 없었어요. 유튜브 무료 강의가 아니잖아요. aws, vuetify, seo, mysql 같은 멋진 브랜드들로 강의를 홍보했지만, 솔직히 말해서.. 저런 (쓸만한)내용이 있었나요? 너무 상술에만 치중하신거 아닌가요? 나쁜 평을 적어 미안합니다. 제 개인적인 생각이었습니다.
조현영

조현영 2달 전
1. 필요한 디자인은 모두 Vuetify로 하였는데 뭘 더 해야하는지 모르겠습니다. 2. 이 부분은 더 신경쓰도록 하겠습니다. 3. 풀스택 개발자가 아닌 이상에는 프론트와 백이 분리돼서 개발되는 게 일반적입니다. 프론트 개발자가 부재중인 상황에서도 백엔드 개발은 되어야하고, 반대도 마찬가지니까요. 이 부분은 제 강좌가 실무적인 것 같네요. 4. 제가 뭘 설명을 안 했나요? 5. Intersection Observer는 아직 공식 스펙이 아닙니다. 공식 스펙이 아닌 걸로 강의할 수는 없잖아요? 제 강좌는 Vue를 막 입문하여 이제야 문법을 뗀 분들께 가장 쉽게 웹사이트를 전체 개발할 수 있는 방법을 알려드리는 강좌입니다. 앙앙님의 실력이 중급 이상이셔서 이 강좌가 시시하게 느껴지는 것 같네요.

default_profile.png
김시훈 2019.09.26
완전 좋습니다! 여기서 배우는 내용 대부분 실무에서 응용할 수 있어서 도움 정말 많이 되었습니다. 좋은 강의 감사합니다! 앞으로도 좋은 강의 부탁드립니다~ 개인적으로 graphql 강의 기대하고 있습니다!

교육과정

모두 펼치기 71 강의 15시간 11분
섹션 0. Nuxt와 Vuetify 도입하기
9 강의 110 : 09
1-1. 강좌 필수 안내 사항
09 : 10
1-2. nuxt 설치하고 pages 만들기
15 : 10
1-3. nuxt router와 layout, head
16 : 12
1-4. nuxt를 vuetify와 연결하기
11 : 31
1-5. vuetify 레이아웃과 아이콘
07 : 44
1-6. vuetify 그리드 시스템
08 : 36
1-7. 기본 페이지 화면 만들기
14 : 05
1-8. 폼 검증하기
15 : 18
1-9. eslint 도입하기
12 : 23
섹션 1. Vuex로 데이터 관리하기
7 강의 87 : 48
2-1. Vuex 모듈 시스템
11 : 53
2-2. Vuex actions
09 : 14
2-3. 로그인/회원가입 더미 데이터
14 : 32
2-4. 게시글 작성 폼 만들기
16 : 49
2-5. 게시글 작성/삭제 더미 데이터
13 : 37
2-6. 댓글 작성 더미 데이터
14 : 43
2-7. 닉네임 수정 더미 데이터
07 : 00
섹션 2. 프론트엔드 기술들
9 강의 117 : 12
3-1. 팔로우/팔로잉 더미 데이터
14 : 42
3-2. 라우팅 미들웨어
09 : 31
3-3. 동적 라우팅
15 : 06
3-4. 인피니트 스크롤링 준비하기
11 : 24
3-5. fetch와 인피니트 스크롤링 구현
17 : 35
3-6. virtualized list 이해하기
05 : 27
3-7. 더보기 구현하기
17 : 46
3-8. 기타 라우트 구현하기
11 : 01
3-9. Q&A
14 : 40
섹션 3. 백엔드 만들기
17 강의 230 : 23
4-1. 백엔드 코딩 준비하기
12 : 59
4-2. 백엔드 기본 개념 이해하기
14 : 39
4-3. 시퀄라이즈 도입하기
07 : 03
4-4. 서버로 데이터 보내기
17 : 43
4-5. 시퀄라이즈 모델과 회원가입
16 : 03
4-6. cors와 bcrypt
10 : 35
4-7. 모델 수정과 응답 종류
09 : 13
4-8. 로그인 개념 이해하기
16 : 37
4-9. passport 세팅하기
18 : 43
4-10. 프론트와 회원가입, 로그인 연동하기
15 : 26
4-11. 로그아웃과 라우터 분리
10 : 52
4-12. 1대다 관계 알아보기
10 : 18
4-13. 다대다 관계 알아보기
13 : 21
4-14. 미들웨어와 exports
11 : 05
4-15. 이미지 업로드와 FormData
10 : 48
4-16. multer 사용하기
18 : 01
4-17. 게시글 업로드
16 : 57
섹션 4. 기능 구현해나가기
17 강의 213 : 43
5-1. 댓글 등록 및 조회하기
11 : 36
5-2. 게시글 불러오기
16 : 16
5-3. 게시글 삭제와 유저 정보 조회하기
11 : 38
5-4. 이미지 저장하기
12 : 08
5-5. 이미지 캐루셀
09 : 59
5-6. 서버사이드에서 데이터 가져오기
10 : 36
5-7. 같은 테이블에서의 관계 이해하기
12 : 39
5-8. 리트윗, 좋아요, 좋아요 취소 라우터
13 : 24
5-9. 좋아요, 좋아요 취소 화면 구현
15 : 37
5-10. 리트윗 화면 구현하기
07 : 52
5-11. 팔로잉, 언팔로잉 구현하기
17 : 26
5-12. 팔로잉, 팔로워 불러오기
14 : 45
5-13. 팔로잉, 팔로워 끊기
08 : 59
5-14. lastId 방식과 쓰로틀링
11 : 49
5-15. 다른 사람 타임라인 만들기
11 : 59
5-16. 타임라인 디버깅
12 : 40
5-17. 해시태그 검색 결과 만들기
14 : 20
섹션 5. AWS에 배포하기
12 강의 152 : 35
6-1. 개별 포스트 SSR하기
06 : 46
6-2. bundle analyze와 빌드
19 : 37
6-3. meta 태그 SSR
12 : 48
6-4. favicon과 static 폴더
04 : 49
6-5. EC2 생성하고 연결하기
11 : 20
6-6. start script와 고정 아이피
12 : 01
6-7. 백엔드 서버 배포하기
18 : 52
6-8. pm2로 관리하기
07 : 40
6-9. 도메인 연결하기
10 : 26
6-10. S3에 이미지 업로드하기
17 : 13
6-11. 람다 함수 만들기
10 : 50
6-12. 람다 배포하기
20 : 13
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스