강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

Vue로 Nodebird SNS 만들기

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

(4.8) 수강평 49개

수강생 638명

난이도 중급이상

수강기한 무제한

  • 제로초(조현영)

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

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

4.8

5.0

서기현

83% 수강 후 작성

솔직하게 수강평 남기겠습니다. 단점부터 말씀드리면 정신이 없다 입니다. 1. 채팅창 2. 단순한 오타도 후에 편집 없이 나중에 고침 3. 단순히 서버를 키지 않은것 2,3번은 디버깅할때 아 이래서 이런 오류가 나왔나 싶기도 하지만 집중도를 떨어트리는 것 같습니다. 2,3번이 아닌 구조의 문제나 내가 빼먹은 것들을 나중에 고치는건 좋았습니다. 그럼에도 별 5개를 준점은 실무와 굉장히 연관이 깊다는 것 입니다. 저는 인프런에서 리액트,vue강의만 7~8개를 들었습니다. 그중에는 정리와 편집은 잘됬으나 이제 뭐해야지? 단순이 배운내용만으론 제가 원하는 비지니스 모델을 만들수 없는 강의가 있었고, 프론트는 제작할 수 있을만큼 이해했으나 백엔드는? 하는 강의도 있었습니다. 물론 앞서 다른 강의들을 보고 와서 그런지 이해하는데 어려움도 없었고 이제 제가 어떤 서비스를 어떻게 진행해야 하는지 확실하게 감이 잡혔습니다. 실무를 당장 투입하셔야 한다면 전 이 강의를 추천드립니다! 친절하지는 않지만 따라오면서 이해한다면 실무 투입이 가능할 것이라고 생각합니다

5.0

sizz F

100% 수강 후 작성

2년동안 중소기업에서 하드웨어, 인베디드, 웹, 앱, 시키는거 다하다보니 점점 이도저도 아닌사람이 되어가는것 같아 자신감이 바닥이었는데 퇴사하고 우연히 조현영님 무료강의를 보기 시작해서 여기까지 왔네요. 이번에 이프로젝트 만들어 보면서 다시 자신감이 생기게 됐네요. 감사합니다! 강의 내용은 공식문서에서 확인 가능한 부분은 빠르게 넘어가고 진짜 필요한 부분을 딱딱 집어서 설명해주셔서 좋았습니다. 저는 역시 주입식 강의보다 필요한 부분들을 직접 찾아가면서 알아내도록 하는점이 더 좋게 다가온것 같아요. 그런부분이 개발자에게 꼭필요한 부분이기도 하고요. 열심히 해서 조현영님 같은 개발자가 되길! * 중고신입으로 입사한지 일년여만에 연봉 67%인상에 성공했습니다. 감사합니다! 2022-05-01

5.0

김시훈

52% 수강 후 작성

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

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

  • 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 기본 문법(무료 강좌 시청하기)

안녕하세요
입니다.

67,785

수강생

1,750

수강평

9,765

답변

4.8

강의 평점

27

강의

제 강의의 장점은 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

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

커리큘럼

전체

71개 ∙ (15시간 11분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

49개

4.8

49개의 수강평

  • 김시훈님의 프로필 이미지
    김시훈

    수강평 2

    평균 평점 5.0

    5

    52% 수강 후 작성

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

    • 서기현님의 프로필 이미지
      서기현

      수강평 5

      평균 평점 5.0

      5

      83% 수강 후 작성

      솔직하게 수강평 남기겠습니다. 단점부터 말씀드리면 정신이 없다 입니다. 1. 채팅창 2. 단순한 오타도 후에 편집 없이 나중에 고침 3. 단순히 서버를 키지 않은것 2,3번은 디버깅할때 아 이래서 이런 오류가 나왔나 싶기도 하지만 집중도를 떨어트리는 것 같습니다. 2,3번이 아닌 구조의 문제나 내가 빼먹은 것들을 나중에 고치는건 좋았습니다. 그럼에도 별 5개를 준점은 실무와 굉장히 연관이 깊다는 것 입니다. 저는 인프런에서 리액트,vue강의만 7~8개를 들었습니다. 그중에는 정리와 편집은 잘됬으나 이제 뭐해야지? 단순이 배운내용만으론 제가 원하는 비지니스 모델을 만들수 없는 강의가 있었고, 프론트는 제작할 수 있을만큼 이해했으나 백엔드는? 하는 강의도 있었습니다. 물론 앞서 다른 강의들을 보고 와서 그런지 이해하는데 어려움도 없었고 이제 제가 어떤 서비스를 어떻게 진행해야 하는지 확실하게 감이 잡혔습니다. 실무를 당장 투입하셔야 한다면 전 이 강의를 추천드립니다! 친절하지는 않지만 따라오면서 이해한다면 실무 투입이 가능할 것이라고 생각합니다

      • sizz F님의 프로필 이미지
        sizz F

        수강평 1

        평균 평점 5.0

        5

        100% 수강 후 작성

        2년동안 중소기업에서 하드웨어, 인베디드, 웹, 앱, 시키는거 다하다보니 점점 이도저도 아닌사람이 되어가는것 같아 자신감이 바닥이었는데 퇴사하고 우연히 조현영님 무료강의를 보기 시작해서 여기까지 왔네요. 이번에 이프로젝트 만들어 보면서 다시 자신감이 생기게 됐네요. 감사합니다! 강의 내용은 공식문서에서 확인 가능한 부분은 빠르게 넘어가고 진짜 필요한 부분을 딱딱 집어서 설명해주셔서 좋았습니다. 저는 역시 주입식 강의보다 필요한 부분들을 직접 찾아가면서 알아내도록 하는점이 더 좋게 다가온것 같아요. 그런부분이 개발자에게 꼭필요한 부분이기도 하고요. 열심히 해서 조현영님 같은 개발자가 되길! * 중고신입으로 입사한지 일년여만에 연봉 67%인상에 성공했습니다. 감사합니다! 2022-05-01

        • sizz F

          취업도 성공했습니다 정말 감사합니다~~~

      • hwd3527님의 프로필 이미지
        hwd3527

        수강평 27

        평균 평점 4.8

        4

        100% 수강 후 작성

        정신없이 완강까지 왔네요. 몇번 더봐야 제대로 알것 같습니다만 좋은 강의 잘 들었습니다. 감사합니다.

        • 앙앙님의 프로필 이미지
          앙앙

          수강평 1

          평균 평점 1.0

          1

          87% 수강 후 작성

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

          • 제로초(조현영)
            지식공유자

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

        ₩66,000

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

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

        비슷한 강의

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