본문 바로가기
공부/개발일지

Vue.js 완전 처음 시작하기

by 파리삼이 2020. 1. 9.
728x90

일단 Vue.js 가 뭘까 , 아니 React.js 는 뭘까.

자바스크립트 프론트엔드 프레임워크.

프론트엔드 프레임워크를 써본 적이 Angular 정도였는데, 물론 꼬꼬마 모래 만지는 수준이었다.

그래서 새롭게 Vue부터 공부해보도록 하겠다.

 

제대로 해보지못한 쭈굴뱅이였지만 나름 찾아본 결과(Angular는 제외), React를 하면 Vue는 쉽게 할 수 있는 편이고,

React가 진입장벽이 조금 더 높고, 큰 시스템에 적용이 된다고 한다.

나는 가벼운 프로젝트만 먼저 해보고 싶었기 때문에 Vue를 선택했다.

리액트에 비해 간단하며, 일단 동작한다, 라는 말에 맛보기? 처럼 Vue를 먼저 조금 써보기로.

 

 

일단, 크롬 브라우저에서 확장프로그램 설치를 한다.

https://chrome.google.com/webstore/category/extensions

 

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com

링크에서 vue.js를 검색해서 가장 상단의 확장 프로그램을 받으면 된다!

 

vscode에서 라이브 서버를 켜서 실시간으로 확인을 하면서 console에서 속성을 변경하며 사용해볼 수 있다.

아래의 사이트에서 하는 단계를 하나하나 따라해보면 , 작은 실수(괄호, 콤마,,등등)을 제외하면 생각보다 어렵지 않게 따라가며 익히는 중.

 

도움을 받은 사이트 : https://kr.vuejs.org/v2/guide/index.html

 

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

동영상으로 보면 조금 더 이해가 쉽다.

영어라고 걱정하지마세오.. 님이 치는 거의 모든 코드도 영어니까오..

 

일단, html, js, css정도의 파일만 만들고

html 안에 스크립트를 추가하면 된다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

일단 몇가지들을 계속 써보고 분석해서 따로 포스팅을 해야할 듯.

아직은 나도 익숙치 않아서 연습중이라 함부로 포스팅을 해서 이상한 소리를 쓰면 안되니까..ㅠㅠ

모두들 저 강의를 보며 배워봅시다-ㅎㅎ 마지막 Tabs 항목은 유료지만, 일단 그 전까지 해보고 유투브나 다른 블로그를 참조합시다😂

728x90