인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 프론트엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Vue.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

(5.0) 수강평 5개

수강생 197명

Vue.js
Thumbnail

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

이런 걸
배워요!

  • Vue 최신 구문

  • 믹스인, 플러그인, Custom Directive

  • 서버 통신

  • Vuex 상태관리

  • 유용한 외부 모듈 사용하기

  • UI 템플릿 구현

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

✅ 이 강의는 [풀스택 웹 개발자 로드맵] 시리즈 강의입니다.

  • 본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈 중 프런트엔드 부분을 다루는 강의입니다.
  • 웹 개발 풀스택 코스는 HTML&CSS → 바닐라 자바스크립트 → 부트스트랩 → Vue.js → 데이터베이스 → Node.js → 포트폴리오까지 풀스택 웹 개발을 위한 전 과정을 포함하고 있습니다.
  • 웹 개발 풀스택 코스를 모두 수강하면 여러분은 웹 개발에 대한 기초뿐만 아니라 실무에 바로 적용할 수 있는 기술을 익히게 됩니다.
  • 본 강의를 수강하기 전 [웹 개발 풀스택 코스] HTML&CSS → [웹 개발 풀스택 코스] 바닐라 자바스크립트 → [웹 개발 풀스택 코스] 부트스트랩 → [웹 개발 풀스택 코스] Vue.js 강의를 차례로 수강하는 것을 추천합니다.

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

What is Vue.js?

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

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

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

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

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

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

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

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

#1.
코드에 대한 가독성이
뛰어납니다.

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

#2.
디자이너, 퍼블리셔와
효과적인 협업이
가능합니다.

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

#3.
다수의 대기업이 선택한
표준 프레임워크입니다.

백오피스 시스템이란 기업 내의 업무와 연관된 시스템을 의미합니다. 예를 들어 ERP, CRM, HR 등이 백오피스 시스템입니다. 국내 대다수의 대기업이 백오피스 시스템 개발을 위한 표준 웹 프론트엔드 프레임워크로 Vue.js를 선택하는 비중이 크게 늘고 있습니다.

일반 사용자를 대상으로 하는 B2C 서비스와 달리 백오피스 시스템은 각 업무 별 화면이 모두 쪼개져 있고, 컴포넌트의 복잡도가 높지 않습니다. 이럴 경우 빠르고 안정적으로 개발할 수 있는 것이 가장 중요합니다. 또한 백오피스 시스템의 경우 개발팀과 운영팀이 별개인 경우가 대부분입니다. 운영팀의 경우 짧은 시간 내에 개발된 시스템을 인수인계받을 수 있어야 하므로 러닝 커브가 짧아야 하고, 직관적이고 협업이 편리해야 합니다. 이런 면에서 Vue.js가 가장 적합한 프론트엔드 프레임워크로 인정받고 있습니다.

기초에서 실무까지 완벽하게

상세한 설명을 통해 기초를 제대로!

기본기를 잘 쌓는 것만큼 중요한 건 없어요. 우리는 단지 1~2년만 이 일을 하기 위해 공부하고 있는 게 아니에요. 최소한 수십 년 동안 이 일을 하기 위해 준비하는 거죠. 그렇다면 좀 더 멀리 보고 제대로 준비해야 해요.

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

아마 이 강의를 끝까지 수강하신다면, 어떤 고수보다도 더 많이 알게 될지도 모릅니다. (하지만, 고수가 왜 고수겠어요! 많은 실전 경험을 가지고 있기 때문이겠죠. 😉)

표준 화면 패턴을 익혀 실무 역량까지 완벽히!

Vue.js의 기본기를 완벽히 쌓아 올린 다음, 바로 한 명의 좋은 개발자의 역할을 할 수 있도록 실무에서 가장 많이 개발되는 웹 화면 패턴을 익히게 돼요. 놀랍게도 대다수의 시스템은 전체 화면의 약 70% 이상이 단 몇 가지의 화면 패턴으로 이루어져 있어요.

ListToDetail 패턴, MasterDetail 패턴, MultipleEdit 패턴, Shuttle 패턴 등 표준 패턴에 대해서만큼은 완벽하게 이해하고 개발할 수 있도록 웹 화면 표준 패턴 개발 강의를 배우게 돼요. 그래서 여러분이 앞으로 치르게 될 무수히 많은 실전을 재미있고 유익하게! 그리고 잘 수행할 수 있는 실무 역량까지 쌓을 수 있는 그런 강의가 되어줄 거예요.

이 강의의 특징!

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

무엇을 배우나요?

  • 개발 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 같은 유용한 기능을 알게 됩니다.
  • 실무에서 가장 많이 개발하게 되는 UI 패턴 5가지를 완벽하게 익히게 됩니다. 이것만으로도 여러분은 실무에서 개발하게 되는 70% 이상의 화면을 구현할 수 있게 됩니다.

선수 지식을 확인하세요.

웹 개발 풀스택 코스,

다른 강의도 함께 만나보세요!

1. [웹 개발 풀스택 코스 - HTML&CSS 기초]

  • 웹의 기초 언어인 HTML과 CSS를 차근차근 배워요.

2. [웹 개발 풀스택 코스 - 바닐라 자바스크립트] 

  • 순수 자바스크립트를 제대로 익혀야 리드하는 개발자가 될 수 있어요.

3. [웹 개발 풀스택 코스 - 부트스트랩 기초]

  • 누구나 쉽게 멋진 디자인을 갖는 반응형 웹을 만들 수 있어요.

4. [웹 개발 풀스택 코스 - Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지] 현재 강의

  • 가장 쉽고 막강한 프론트엔드 프레임워크인 Vue.js를 익혀요.

5. [웹 개발 풀스택 코스 - 넷플릭스와 당근마켓 분석을 통해 배우는 데이터베이스 이해]

  • 넷플릭스, 당근마켓을 분석하면서 자연스럽게 데이터베이스를 설계하는 방법을 이해하게 돼요.

6. [웹 개발 풀스택 코스 - Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지]

  • 자바스크립트 언어로 백엔드까지 구현할 수 있습니다. Node.js면 가능합니다.

7. [웹 개발 풀스택 코스 - 포트폴리오]

  • 웹 개발 풀스택 코스를 통해 배운 모든 기술을 바탕으로 제품 판매 미니 웹을 개발합니다.

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

개발자의 품격

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

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

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

더 알아볼까요?

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Vue.js로 프로젝트를 시작하는 현업 개발자

  • 웹 프론트엔드 개발자

선수 지식,
필요할까요?

  • HTML

  • CSS

  • 자바스크립트

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

수강생 수

9,886

수강평 수

203

강의 평점

4.9

강의 수

8

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

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

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

 

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

 

이메일 - seungwon.go@gmail.com

커리큘럼

전체

35개 ∙ (23시간 59분)

수업 자료

가 제공되는 강의입니다.

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!