Vue.js 시작하기 전에 준비

Vue.js

 '심심해서 vue.js를 한번 다시 공부해볼까?'

 

 이런 생각을 하다가 2년전에 한번 간단하게 보긴 했었는데 다시 또 입질이 와서 심심풀이용으로 사이트 하나 만들어보고자 합니다. 제가 좋아하는 게임인 삼국지 14를 하면서 무장이나 도시 같은 정보를 한눈에 보고 적재적소에 무장을 배치하고 도시를 관리했으면 좋겠다는 요구사항(?)을 수렴하여 한번 정보제공 사이트를 만드는데 써먹어보기로 결정했습니다.

 

 공부를 시작하기 전에 간단히 준비를 해야겠지요? 아래 필요한 것들을 설치해보았습니다.

 

VueCLI

 Vue.js는 간단하게 진행하기 위해 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 VueCLI(Command Line Interface)를 제공합니다. 어차피 취미생활을 위한 간단한 사이트를 만들거기 때문에 요걸로 하겠습니다. 설치는 어렵지 않습니다. VueCLI Guide를 참고하시면 됩니다.

 ※ 단, VueCLI를 사용하기 위해선 Node.js가 설치되어 있어야 합니다. 

Vue CLI

 

WebStorm

 제가 좋아하는 개발 툴인 IntelliJ IDEA를 만든 JETBRAINS의 WebStorm을 개발 툴로 사용해보겠습니다. 30일간 무료로 이용해볼 수 있습니다. 제가 한동안 PM을 하느라 개발을 좀 쉬었더니 버전들이 많이 올라갔네요. 

WebStorm

 

Vue Devtools 

 Vue를 사용할 때, 브라우저에 Vue Devtools를 설치하면, Vue APP을 보다 사용자 친화적인 인터페이스에서 검사하고 디버깅할 수 있습니다. 브라우저에 확장 프로그램으로 설치하여 개발자 도구에서 사용할 수 있습니다.

Vue Devtools 크롬 확장 프로그램

 

 이제 준비를 마쳤으니, 공부를 시작해보겠습니다. 출바알~~!