Frontend/Vue.js

[Vue.js]Vue.js 시작하기

GAEBAL 2022. 5. 4. 01:04
728x90

시작하기 전, Vue.js란?

Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크입니다.
컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며,
재사용이 가능한 UI들을 묶어서 사용할 수 있습니다. -> 얘가 Vue3 부터 나온 Composition이라는 애인듯!

 

React와 Angular의 장점을 모아서 만든 것이 Vue.js라고 생각하면 됨!

 

https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/

 

The State of JS 2021: Front-end Frameworks

You can click on any technology name to get extra details and a more in-depth look at its related data.

2021.stateofjs.com

여기 들어가면 최근 트렌드를 알 수 있는데 꾸준히 사용자가 느는 등, 치고 올라오는 것을 알 수 있음!

 

 

Vue.js 시작하기

https://kr.vuejs.org/v2/guide/

 

시작하기 — Vue.js

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

kr.vuejs.org

Vue.js 공식 문서!

 

뭐든 공부할 때는 공식 문서를 참고하는 습관을 들이자!

 

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

이걸 사용할 html 문서의 <head> 태그 안에다 넣어줘야 Vue.js를 사용할 수 있다!

 

 

Vue.js 개발 환경 구축

  1. vscode 설치
  2. chrome: vue.js devtools 설치
    • ssafy project 웹: 과제, 실습 보안
    • ssafy project 웹 연결하지 말 것!!!
    • vue.js devtools 삭제하고 다시 설치
  3. node.js 설치
    • vue CLI
    • vue project 폴더 구조
  4. vscode extensions 설치
    • live server
    • vuter
    • vue 3 snippets
  5. vscode 환경 설정

 

포스팅 계획?

공부를 쭉하면서 알게되는 것들을 이 블로그에 기록하려 했는데 저 위에 링크 걸어둔 공식 사이트에 가이드가 너어어어어ㅓㅓㅓㅓㅓㅓㅓㅓ무 잘 되어있어서 뻔하거나 당연한 얘기들은 기록하지 않을 예정이다 ㅋㅋㅋㅋㅋㅋㅋ

여기에는 내가 진행하는 프로젝트나 주의할 점, 새롭게 알게되는 신기한 점 등을 기록해야겠다!!!

728x90