Thumbnail
개발 · 프로그래밍 프레임워크 및 라이브러리
Vue.js 제대로 배워볼래?
(4.8)
8개의 수강평 ∙ 71명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자 : 개발자의 품격
총 43개 수업˙총 8시간 36분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 59 공유
초급자를 위해 준비한
[프레임워크 및 라이브러리, 웹 개발] 강의입니다.

이 강의는 철저하게 Vue.js 자체, Vue.js를 가장 잘 이해하고, 그 어떤 Vue.js 개발자 보다 기본기를 탄탄히 쌓을 수 있도록 해줍니다. 이 강의는 Vue.js의 기본기를 완벽히 쌓고, 여러분이 앞으로 치루게 될 무수히 많은 실전을 재미있고 유익하게 그리고 잘 수행할 수 있는 기초 역량을 쌓을 수 있는 그런 강의가 될 거예요.

✍️
이런 걸
배워요!
Vue.js 개발
Vue CLI를 통한 프로젝트 생성 방법
라우터 설계 방법
Vuex를 통한 상태관리
Vue 3.x 버전 신규 기능
Vue.js에서 다루는 모든 기능

프론트엔드 개발자의 필수 코스!
Vue.js 기본기부터 차근차근 쌓아보세요 😋

Vue.js(프론트엔드 프레임워크)를 제대로 학습하기 원하는
초심자를 위한 가장 탄탄한 기초 강의입니다.

인스타그램 클론, 페이스북 클론, 넷플릭스 클론...
이런 클론 코딩 강의 많이 들어보셨죠? 아마 이런 클론 코딩 강의 직접 수강 해보신 분들도 계실 거예요.

이 강의에서는 클론(따라하기) 코딩을 제공하지 않아요.

여러분이 인스타그램 클론, 페이스북 클론, 넷플릭스 클론 등 이런 클론 강의 듣는다고 해서 여러분이 정말 이런 애플리케이션 만들 수 있을까요?
여러분을 무시하는 말이 아니고, 이건 엄연한 현실입니다.
만약에 여러분이 그런 클론 코딩 강의 듣고 그런 애플리케이션 만들 수 있다면, 페이스북이나 넷플릭스 같은 회사에 개발자가 수백명, 수천명 일 필요가 없겠죠?

물론 클론 코딩은 이런한 애플리케이션을 만드는 것에 대한 간적 경험을 쌓을 수 있게 해주기 때문에 매우 유용합니다.
하지만 이러한 강의의 전제 조건은 탄탄한 기본기가 갖춰져 있을 때 그 효과를 볼 수 있다는 거예요. 그리고 사실 이런 애플리케이션은 보여지는 UI 보다 보이지 않는 곳에서 처리하고 있는 로직이 무수히 많아요.
그래서 눈에 보이는 UI를 흉내냈다고 해서 이러한 애플리케이션을 만들 수는 없는 거예요.

그래서 중요한 건 바로 기본기를 탄탄히 다지는 거예요.

기본기를 잘 쌓는 것 만큼 중요한 건 없어요. 여러분이 지금 이 글을 본다는 것은 여러분이 지금 프로그래밍 언어에 관심을 가지고 있고, 아마 개발자가 되고 싶은 분들일 거예요.

우리는 단지 1~2년 이 일을 하기 위해서 공부하고 있는게 아니예요. 최소한 수십년, 이 일을 하기 위해서 준비하고 있는 거예요. 그렇다면, 우리가 좀 더 멀리보고 착실히 준비해야 해요.

여러분이 기본기를 착실히 익힌다면, 몇년 뒤에는 그런 대단한 애플리케이션을 만드는 팀의 일원이 될 수 있을 것이고, 또 몇년 뒤에는 그런 대단한 애플리케이션을 직접 만들 수 있는 개발자가 되어 있을 것예요.

이 강의는 철저하게 Vue.js 자체, Vue.js를 가장 잘 이해하고, 그 어떤 Vue.js 개발자 보다 기본기를 탄탄히 쌓을 수 있도록 해줍니다.

기본기를 학습하지만 지루하지 않고, 실무에서 어떤 것을 고려해야 하는지 경험을 전달 드립니다.
초심자도 잘 따라 올 수 있도록, 최대한 개념/문법/기능을 잘 쪼개서 모든 내용에 대한 예제 코드를 제공합니다.

아마 이 강의를 끝까지 수강하신다면, 여러분 옆에 있는 Vue.js 고수 보다 더 탄탄한 기본기를 쌓을 수 있을 거예요. 어쩌면 여러분이 Vue.js 자체만 봤을 때는 옆에 있는 고수 보다 더 많은 걸 알게 될지도 모릅니다.
하지만, 고수가 왜 고수이겠어요! 많은 실전 경험을 가지고 있기 때문이죠. 😉

이 강의는 Vue.js의 기본기를 완벽히 쌓고, 여러분이 앞으로 치루게 될 무수히 많은 실전을 재미있고 유익하게 그리고 잘 수행할 수 있는 기초 역량을 쌓을 수 있는 그런 강의가 될 거예요.

Vue.js란?

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework 입니다. 여기서 Progressive라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발된 것을 뜻합니다.

예를 들어 웹의 경우는 별도의 설치 없이 브라우저만 있으면 접속이 가능하기 때문에 접근성이 매우 뛰어납니다. 그리고 네이티브 앱의 경우는 일반적인 웹보다 빠르고 더 뛰어난 사용자 경험을 제공합니다.

결국 Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱을 만들 수 있는 프레임워크를 제공하는데 있습니다.

왜 배워야 하나요?

프론트엔드 개발자가 되고 싶다면, 반드시 Vue.js와 같은 프론트엔드 프레임워크를 알아야 합니다.
이미 웹 애플리케이션은 모바일 전용 네이티브 애플리케이션 만큼 성능 향상을 이루고 있고, 대다수의 서비스 및 비즈니스 애플리케이션의 Vue와 같은 프론트엔드 프레임워크를 이용해서 개발이 되고 있습니다.
그렇기 때문에 프론트엔드 개발자가 되기 위해서는 반드는 Vue와 같은 프론트엔드 프레임워크를 배워야 합니다.

아마 여러분 역시도 Vue.js 외에도 React.js, Angular.js를 두고 많은 고민은 했을 것입니다. 누구는 리액트가 좋다고 하고, 누구는 앵귤러가 좋다고 하고, 또 누구는 Vue가 좋다고 합니다.

이 3가지 프론트엔드 프레임워크를 실무에서 수년간 모두 사용해 본 사람으로써 말씀드리면 뭐가 되었든 하나를 잘 다룰줄 알게 되면, 나머지도 모두 쉽게 배울 수 있게 됩니다.

하지만 만약 이 3가지 중에서 하나를 선택해야 한다면 저는 과감히 Vue.js를 먼저 시작하라고 말씀드리겠습니다.

왜냐하면,
제일 배우기 쉽기 때문입니다.

Vue는 HTML 코드를 구현하는 영역, 자바스크립트 코드를 구현하는 영역, 디자인 CSS를 구현하는 영역이 완벽하게 분리되어 있어서 코드에 대한 가독성이 매우 뛰어납니다.

개발자가 웹 디자이너, 웹 퍼블리셔와 협업 시 훨씬 효과적입니다.

애플리케이션을 개발 할 때는 개발자 혼자 작업을 하는 경우는 극히 드물고, 일반적인 경우는 웹 디자이너 혹은 웹 퍼블리셔로 부터 HTML, CSS 같은 결과물을 전달 받게 되고, 이것을 프로그램에 적용해야 합니다. Vue는 HTML, CSS 코드가 완벽히 분리가 되어 있어서 리액트나 앵귤러보다 협업 프로젝트 진행시 훨씬 이점을 가지고 있습니다.

강의 특징

  • Vue.js의 기본 문법을 차근 차근 모두 알려드립니다.
  • Vue.js의 최신 버전 Vue 3.x 버전을 다룹니다. (최근 추가된 기능을 상세히 다룹니다)
  • 초심자도 쉽게 따라 할 수 있도록 예제 코드를 가장 작은 단위로 분리해서 진행합니다.
  • 실무 프로젝트가 진행되는 순서에 맞춰서 각 단계에서 어떤 작업을 진행해야 하는지 알려드립니다.
  • 모든 예제 코드는 깃허브를 통해서 제공됩니다.

이 강의를 통해서

여러분은 다음과 같은 기술을 익히게 됩니다.

  • 개발 IDE 툴로는 비주얼스튜디오코드(Visual Studio Code)를 사용하게 됩니다. 비주얼스튜디오코드를 이용한 개발 방법 및 유용한 확장 프로그램을 알게 됩니다.
  • Node.js를 설치하고, Node.js가 무엇인지 알게 됩니다.
  • NPM(Node Package Manager)에 등록된 수많은 오픈소스를 활용할 수 있게 됩니다.
  • Vue CLI를 통해서 Vue 프로젝트를 빠르게 생성하고, 관리, 배포할 수 있는 방법을 알게 됩니다.
  • Vuex를 통한 상태관리 방법을 알게 됩니다.
  • Vue 라우터로 애플리케이션 메뉴를 어떻게 구성하고, 메뉴에 대한 코드 로드 시점을 분리하여 애플리케이션 성능을 향상 시킬 수 있는 방법을 알게 됩니다.
  • Vue 컴포넌트 개발과 관련된 모든 문법과 기능을 알게 됩니다.
  • Vue 3 버전에 추가된 컴포지션 API, Plugins 같은 유용한 기능을 알게 됩니다.

누가 들을 수 있나요? (선행 학습)

  • HTML을 알아야해요. HTML 태그들은 알아야 해요.
  • CSS을 알아야해요. 아주 조금. 클래스 사용법. width, height, color 정도의 스타일
  • 자바스크립트를 알아야해요. 최소한 기본 문법. if, for, object, array, 함수 선언
  • ES6 문법 중 Arrow Function, Async & Await 정도

이 강사 괜찮을까? 이 강의 들을만 할까?

유튜브 '개발자의품격' 채널을 운영하고 있어요. Vue.js 영상과 댓글을 한번 보세요.
개발자의 품격: http://www.youtube.com/c/개발자의품격
한시간만에 끝내는 Vue.js 입문: https://youtu.be/sqH0u8wN4Rs
꾸준히 기술 블로그을 운영하고 있어요 : https://seungwongo.medium.com
이 강사 꽤 쓸만합니다.

아래 영상은 '개발자의품격' 유튜브 채널을 통해 제공되었던 "한시간만에 끝내는 Vue.js 입문" 강의 입니다.

강사 소개

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 22년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT스타트업 대표이사 이기도 해요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

유튜브 '개발자의품격' 채널을 통해서 100여개의 유용한 강의 영상을 제공하고 있어요.
'디자인 씽킹을 넘어 프로그래밍 씽킹으로', 'The Essentials of Smart Contract Development for Solidity Developers' 책의 저자이기도 합니다.

기술 블로그 미디엄에 꾸준히 지식을 연재하고 있어요 

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
탄탄한 기초를 원하시는 분
프론트엔드 개발 입문자
웹 프론트엔드 개발을 제대로 하고 싶은 분
HTML,CSS,자바스크립트 공부를 했고, 제대로 된 프론트엔드 개발을 하고 싶은 분
다음주에 바로 Vue.js 프로젝트를 해야하는 분
📚
선수 지식,
필요한가요?
HTML
CSS
자바스크립트

안녕하세요
개발자의 품격 입니다.
개발자의 품격의 썸네일

소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 22년차 소프트웨어 개발자.
지식을 나누는 것을 좋아하고 항상 새로운 기술을 익히는 것을 즐겨요.

국내외 60개가 넘는 글로벌 기업 ERP 시스템을 구축하는 컨설턴트 및 개발자로 활동하였고, 직접 개발한 소프트웨어를 국내는 물론 해외 유수의 기업에 판매를 한 경험 또한 가지고 있어요. IT스타트업 대표이사 이기도 해요.

개발자 뿐만 아니라, UX 컨설턴트로, 때로는 비즈니스 컨설턴트로 일하면서 애플리케이션과 서비스 개발 시 기획에서 개발까지 전과정에 대한 수많은 경험을 쌓았고, 이제는 20년이 넘는 실무 경험을 바탕으로 후배들에게 정말 필요한 기술, 정말 제대로 된 지식을 전달하는 사명감을 갖고 지식 나눔에 일을 하고 있어요.

유튜브 '개발자의품격' 채널을 통해서 100여개의 유용한 강의 영상을 제공하고 있어요.
'디자인 씽킹을 넘어 프로그래밍 씽킹으로', 'The Essentials of Smart Contract Development for Solidity Developers' 책의 저자이기도 합니다.

기술 블로그 미디엄에 꾸준히 지식을 연재하고 있어요 

 

  • 주식회사 리턴밸류 대표이사
  • 팬임팩트코리아 유한회사 기술전문위원
  • 유튜브 채널 - ‘개발자의 품격’ 운영
  • 저서 - ‘디자인 씽킹을 넘어 프로그래밍 씽킹으로' <비제이퍼블릭>
  • 저서 - ‘The Essentials of Smart Contract Development for Solidity Developers’ <아마존>

 

이메일 - seungwon.go@gmail.com

블로그 - https://seungwongo.medium.com
유튜브 - https://www.youtube.com/c/개발자의품격

커리큘럼 총 43 개 ˙ 8시간 36분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
섹션 1. 개발환경 구성
개발환경 구성 12:30
섹션 2. Vue 프로젝트 생성
Vue CLI 설치하기 05:24
Default 옵션으로 Vue 프로젝트 생성하기 13:11
사용자 선택(Manually select features) 옵션으로 Vue 프로젝트 생성하기 08:48
Vue 프로젝트 매니저를 이용해서 Vue 프로젝트 생성하기 13:11
섹션 3. 메뉴 구성하기
Vue Router 설치하기 13:49
Lazy Load (비동기 컴포넌트) 구성하기 18:58
섹션 4. Vue 컴포넌트 개발 - 기본편
Vue 컴포넌트 기본구조 이해하기 미리보기 19:57
원시 HTML 데이터 바인딩 03:57
입력폼 데이터 바인딩 - input text, number, textarea 12:11
입력폼 데이터 바인딩 - select, checkbox, radio 13:43
속성(attribute)에 데이터 바인딩 08:17
클래스와 스타일에 데이터 바인딩 10:24
리스트 랜더링 11:01
랜더링 문법 미리보기 10:17
이벤트 처리 10:46
Computed 미리보기 07:39
Watch 09:46
조회화면, 저장화면 실습 21:49
외부 패키지 사용하기 07:40
섹션 5. Mock(가짜) 서버 이용하기
Mock 서버 준비하기 09:41
API 등록 및 서버 데이터 바인딩 17:59
섹션 6. Vue 컴포넌트 개발 - 고급편
컴포넌트에서 다른 컴포넌트 사용하기 14:16
부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 11:55
부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기 06:52
부모 컴포넌트에서 자식 컴포넌트의 메소드 실행시키기 03:57
부모 컴포넌트에서 자식 컴포넌트의 데이터 변경하기 03:02
자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달하기 05:46
부모 컴포넌트에서 자식 컴포넌트의 데이터 값 동기화하기 06:26
Slot 10:18
Provide/Inject 09:40
섹션 7. Vue 컴포넌트 재활용 & 공통 함수 개발
믹스인(Mixins) 22:20
컴포지션(Composition) API 25:10
컴포지션 API에서 Provide/Inject 06:13
Custom Directives 05:51
플러그인(Plugins) 16:26
섹션 8. Vuex (상태관리)
Vuex 25:34
섹션 9. Vue 프로젝트 배포
프로젝트 빌드(Build)하기 04:57
섹션 10. 소셜 로그인 구현
카카오 계정으로 로그인 29:46
네이버 아이디로 로그인 19:35
구글 계정으로 로그인 14:19
섹션 11. 미니 프로젝트 소개
제품 판매 웹앱 구현 미니 프로젝트 소개 영상 06:29
강의 게시일 : 2021년 03월 19일 (마지막 업데이트일 : 2021년 03월 19일)
수강평 총 8개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
8개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
정훈 thumbnail
정말 좋은 강의였습니다. 플러그인 / 믹스인/ 컴포지션 API 부분과 라우터의 코드스플릿팅 등 어플리케이션 전반적이게 어떻게 설계하고 공통화를 뽑아내는지 생각할 수 있는 계기가 된 거 같습니다.
2021-03-21
지식공유자개발자의 품격
좋은 리뷰 정말 감사드립니다. 앞으로 더 좋은 강의 만들도록 하겠습니다.
2021-03-21
OMG thumbnail
좋은 강의 감사합니다.
2021-05-02
지식공유자개발자의 품격
수강해 주셔서 감사합니다
2021-05-02
lalazin thumbnail
아주 좋아요!!!
2021-03-24
지식공유자개발자의 품격
감사합니다.
2021-03-25
김요환 thumbnail
굿 구글 관련 좀만더 알려주시지./;
2021-03-30
지식공유자개발자의 품격
유튜브 개발자의품격 채널을 통해서 요청하신 부분 다뤄보도록 하겠습니다. 감사합니다.
2021-03-30
springstar thumbnail
구수한 강의 좋아요~! 유튜브도 구독 좋아요 알림설정 했어요
2021-03-24
지식공유자개발자의 품격
감사합니다. 유튜브에도 꾸준히 좋은 강좌 올릴게요.
2021-03-25
77,000원

월 15,400원

5개월 할부 시
내 목록 추가 59 공유
지식공유자 : 개발자의 품격
총 43개 수업˙총 8시간 36분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스