Vue.JS 시작하기
프론트엔드 프레임워크를 시작하려는 이유?
바닐라 JS로 MVC모델을 구현함으로써 프론트엔드를 작성하는 것은 원리를 이해하는데는 도움이 되지만, 빠르게 웹개발을 해야하는 상황에서는 적합하지 않습니다. 또한, 웹개발을 진행하는데 있어 장고, 스프링 같은 프레임워크들은 서버사이드렌더링을 지원하는 풀패키지 도구들이기 때문에 프론트엔드 개발이 서버 개발에 종속적이라는 단점도 존재했습니다. 이 단점은 전체 프로젝트를 지연시키기고 프로젝트의 품질 또한 낮추기 때문에 새로운 방법이 필요했습니다. 정답은 HTTP API 인터페이스를 통해 가능한 프론트와 백엔드를 분리시키는 것이고 프로젝트 초기 단계에 HTTP API 명세를 개발자들 서로 상세히 의논하여 데이터만 주고 받는 개발 방식입니다.
따라서, SPA 형식으로 웹서비스를 구현하는 것은 덤이고 각자 파트를 확실히 분리하여 효율적인 개발루틴을 가져가기 위해서 Vue.JS 프레임워크를 선택했습니다.
리액트말고 왜 Vue.JS를 사용했는가?
현재 구현하려는 웹서비스는 “풋살 매칭 플랫폼”(가제) 입니다. 예상 개발기간은 3~4 주이고 빠르게 개발해야 하기 때문에, 상대적으로 러닝커브가 높은 리액트는 배제하게 되었습니다. 따라서 3인 팀으로 이루어 졌고 추가 유지보수는 없을 것으로 예정되기 때문에 Vue.JS를 사용하게 되었습니다.
Vue.JS 개발환경
- WebStorm (IDE)
- Node.js 최신 LTS 버전 (서버측 자바스크립트 런타임)
- lite-server (가벼운 개발서버 핫리로딩 지원)
Vue.JS의 설치방법
크게 두가지로 나뉩니다.
CDN을 이용하여 html코드에 넣어서 사용 => 구글에 vuejs cdn 검색
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> </html>
뷰를 직접다운 받아 사용
터미널을 열고 전역적으로 npm을 이용해 설치
1
npm install vue
마무리
오늘은 간략히 제가 Vue.JS 를 선택한 이유와 설치 방법 까지 알아봤습니다. 내일부터는 자바스크립트로 프로그램을 짜고 이를 다시 Vue로 짜는 방식으로 포스팅을 하겠습니다.