Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전) 대시보드

(4.7)
54개의 수강평 ∙  614명의 수강생
공개되지 않은 강의로
수강이 제한됩니다.
지식공유자: 개발자의 품격
총 43개 수업 (8시간 36분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이 강의는 강사의 저서 <Vue.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다. 철저하게 Vue.js 자체, Vue.js를 가장 잘 이해하고, 그 어떤 Vue.js 개발자 보다 기본기를 탄탄히 쌓을 수 있도록 해줍니다. 이 강의는 Vue.js의 기본기를 완벽히 쌓고, 여러분이 앞으로 치루게 될 무수히 많은 실전을 재미있고 유익하게 그리고 잘 수행할 수 있는 기초 역량을 쌓을 수 있는 그런 강의가 될 거예요.

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

기초가 남다른 프론트엔드 개발!
Vue.js, 제대로 배워보세요 ✨

Vue.js 프로젝트 투입 일주일 전 저자 직강

What is Vue.js?

모든 웹 브라우저에는 인터프리터(Interpreter)가 내장되어 있어서 자바스크립트를 실행할 수 있어요.

웹&네이티브 앱의 장점을 한번에 잡는 프론트 개발!
프로그레시브 프레임워크 Vue.js로 경험해보세요.

Vue.js는 사용자 인터페이스 개발을 위한 프로그레시브 프레임워크(Progressive Framework)입니다. 여기서 Progressive란, 웹과 네이티브 앱의 이점을 모두 수용하며 표준 패턴을 사용해 개발되었다는 뜻입니다.

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

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


Vue.js, 왜 배워야 할까요?

프론트엔드 개발자가 되고 싶다면,
반드시 Vue.js와 같은
프론트엔드 프레임워크를 알아야 합니다.

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

아마 여러분 역시도 Vue.js뿐만 아니라 React, Angular 등을 두고 많은 고민을 했을 것입니다. 누구는 리액트가 좋다고 하고, 누구는 앵귤러가 좋다고 하고, 또 누구는 Vue가 좋다고 합니다. 이 3가지 프론트엔드 프레임워크를 실무에서 수년간 모두 사용해 본 사람으로써 말씀드리면, 뭐가 되었든 하나를 잘 다룰줄 알게 되면, 나머지도 모두 쉽게 배울 수 있게 됩니다.

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

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

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

웹 디자이너, 웹 퍼블리셔와
협업할 때 훨씬 효과적입니다.

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


기초부터 제대로 배우는 Vue.js.

이 강의에서는
클론(따라하기) 코딩
제공하지 않습니다.

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

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

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

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

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

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

Vue.js 자체를 철저히!
그 어떤 개발자보다 기본기를
탄탄히 쌓을 수 있도록 도와드립니다.

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

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

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


이 강의의 특징!

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

이미지를 클릭하면 github로 이동해요.이미지를 클릭하면 깃허브로 이동합니다.


무엇을 배우나요?

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

선수 지식을 확인하세요.

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

이 강의를 만든 사람은
누구일까요?

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

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

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

‘개발자의품격’ 유튜브 채널에 공개된 
‘한시간만에 끝내는 Vue.js 입문’ 강의입니다.

다른 강의 함께 보기

자바스크립트 제대로 배워볼래?
기본기가 탄탄한 자바스크립트 학습

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
탄탄한 기초를 원하시는 분
프론트엔드 개발 입문자
웹 프론트엔드 개발을 제대로 하고 싶은 분
HTML,CSS,자바스크립트 공부를 했고, 제대로 된 프론트엔드 개발을 하고 싶은 분
다음주에 바로 Vue.js 프로젝트를 해야하는 분
📚
선수 지식,
필요할까요?
HTML
CSS
자바스크립트

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

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

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

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

 

  • (현)주식회사 더그레잇 대표이사
  • (현)주식회사 썬슈어 CTO
  • (현)주식회사 리턴밸류 CTO
  • (현)팬임팩트코리아 유한회사 기술전문위원

 

이메일 - seungwon.go@gmail.com

커리큘럼 총 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일)
수강평 총 54개
수강생분들이 직접 작성하신 수강평입니다.
4.7
54개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
lalazin thumbnail
5
아주 좋아요!!!
2021-03-24
지식공유자 개발자의 품격
감사합니다.
2021-03-25
krug thumbnail
5
vue.js는 이 강의를 통해서 처음 접했는데 설치부터 예제까지 강의 구성이 좋습니다. 군더더기 없고 강의가 스피드하게 진행되는점, 강의가 짧아서 부담없이 듣기 좋네요. 완강 & 실습을 모두 한다면 다른 기초 강의는 더 안 들어도 될 것 같습니다. ( 참고로 고급웹개발자이고 vue.js는 처음입니다.)
2021-12-15
지식공유자 개발자의 품격
수강평 정말 감사드립니다.
2021-12-15
정훈 thumbnail
5
정말 좋은 강의였습니다. 플러그인 / 믹스인/ 컴포지션 API 부분과 라우터의 코드스플릿팅 등 어플리케이션 전반적이게 어떻게 설계하고 공통화를 뽑아내는지 생각할 수 있는 계기가 된 거 같습니다.
2021-03-21
지식공유자 개발자의 품격
좋은 리뷰 정말 감사드립니다. 앞으로 더 좋은 강의 만들도록 하겠습니다.
2021-03-21
김요환 thumbnail
5
굿 구글 관련 좀만더 알려주시지./;
2021-03-30
지식공유자 개발자의 품격
유튜브 개발자의품격 채널을 통해서 요청하신 부분 다뤄보도록 하겠습니다. 감사합니다.
2021-03-30
springstar thumbnail
5
구수한 강의 좋아요~! 유튜브도 구독 좋아요 알림설정 했어요
2021-03-24
지식공유자 개발자의 품격
감사합니다. 유튜브에도 꾸준히 좋은 강좌 올릴게요.
2021-03-25