뷰 JS CDN 으로 쉽게 시작하기 | 프론트엔드 프레임워크 시작하기

뷰 JS (Vue.js)는 웹 애플리케이션의 사용자 인터페이스를 만들기 위한 프론트엔드 프레임워크 입니다.

웹을 단순하게 정리해서 만들 수 있게 개발된 자바스크립트 프레임워크입니다.

이 문서에서 뷰 JS 를 시작하기 위해 설치하고 테스트를 해보겠습니다.

아래의 Vue.js의 공식 가이드에 접속하면 친절한 무료 강의도 볼 수 있습니다.

뷰는 HTML, CSS 및 JavaScript의 중간 단계의 지식을 전제로 하고 있어서 공식 홈페이지에서는 이제 막 프론트엔드를 배우는 분들에게는 권장하고 있지 있습니다.

* 주의사항을 확인했으니 웹사이트에 접속합니다. 설치를 클릭하면 다음 페이지에서 CDN 주소를 복사합니다. CDN은 간단히 인터넷 상에서 vue.js 를 가져와서 프로토타이핑이나 학습목적으로 사용할 수 있습니다.

시작하기 — Vue.js

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

kr.vuejs.org

CDN도 다양한 버전이 있지만 여기서는 학습용을 사용하겠습니다.

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

* Vue 가 잘 작동하는지 첫번째 예제를 실행해보겠습니다. 아래의 Vue 코드를 body 안에 넣습니다.


  <div id="app">
    {{ message }}
  </div>
  
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        message: '안녕하세요 Vue!'
      }
    })
  </script>

제대로 작동하면 브라우저에서 아래와 같은 메시지를 볼 수 있습니다.

* atom-live-server 를 설치하면 웹브라우저에서 소스파일이저장할 때 마다 Refresh 해서 업데이트한 결과를 보여줍니다.

* 짧으니까 전체의 소스파일을 보면서 동작에 대하여 살펴봅니다.

첫번째로 VUE의 CDN 파일을 포함시켜야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <title>Document</title>
</head>
<body>
  <h1>[뷰 JS 테스트]</h1>

  <div id="vue-app">
    <h1>{{ name2 }}</h1>
  </div>

  <script src="atom.js"></script>
</body>
</html>

다음은 js 자바스크립트 파일입니다. 전체를 제어하기 위한 Vue 인스턴스를 생성합니다.

el 은 요소 # 이 있는 것으로 id 라는 것을 확인할 수 있습니다. html 페이지의 id가 vue-app 인 div 태그에 연결됩니다. {{ name2 }} 은 뷰 객체의 data 에 바인딩 됩니다. 뷰의 data를 html 에 출력하는 것이죠.

var app = new Vue({
  el: '#vue-app',
  data: {
    name2: 'MR Ken'
  }
});

간단한 코드지만 뷰 객체를 생성해서 사용할 수 있게 되었습니다.

새로운 프로그래밍 언어나 프레임워크를 배울 때 보면 정말 간단해보이는데 설치과정이나 초기 세팅 등이 어려워서 몇 시간을 헤메이는 경우도 허다합니다. 세팅이 안정적으로 갖춰진 상황에서는 간단한 일도 미리 준비없이는 힘든 일이 됩니다. 세팅하는 과정이 새로운 언어를 배우기 힘든 이유 중에 하나 인 것 같습니다.

간단한 내용이지만 계속 웹에 문서를 만들어 놓는 이유는 까먹지 않게 기록하는 일이 중요하기 때문이죠. 지금은 간단한 내용이 1개월만 지나도 가물가물합니다.

HTML/CSS를 위한 에디터 설치는 아톰을 사용했습니다. 원래는 비주얼 스튜디오 코드를 사용하다가 웹개발은 아톰으로 세팅 해봅니다. 필요한 플러그인이 생기면 그 때 마다 추가하는 방법으로 쓰는 것도 나쁘지 않을 듯 합니다.

atom editor (아톰 에디터) 설치 가이드 | HTML 기본 플러그인 설치 (에밋(emmet) 외 | 윈도우10 (tistory.com)

atom editor (아톰 에디터) 설치 가이드 | HTML 기본 플러그인 설치 (에밋(emmet) 외 | 윈도우10

이 문서는 웹개발을 위한 텍스트 에디터 아톰을 설치합니다. 설치 후 웹페이지를 개발하기 위한 기본 확장 프로그램(플러그인 패키지) 3개를 설치하고 테스트를 해보겠습니다. 설치 환경은 윈도

digiconfactory.tistory.com