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

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

What is Vue.js?

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

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

결국 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.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 같은 유용한 기능을 알게 됩니다.

---

선수 지식을 확인하세요.

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

---

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

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

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

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

• 유튜브 ‘개발자의품격’ 채널을 통해 100여개의 유용한 강의 영상을 제공하고 있어요.
• 기술 블로그 미디엄에 꾸준히 지식을 연재하고 있어요.
• ‘디자인 씽킹을 넘어 프로그래밍 씽킹으로’, 'The Essentials of Smart Contract Development for Solidity Developers' 책의 저자이기도 합니다.

---

다른 강의 함께 보기