Vue Mastery - Intro to Vue 3 #1 Creating the Vue App

심심해서 해보는 vue3, 아무런 이유 없음.

https://www.vuemastery.com/courses/intro-to-vue-3/creating-the-vue-app-vue3 강의 듣고 정리글

프로젝트 다운로드 및 개발환경 세팅

프로젝트 다운로드 방법

https://github.com/Code-Pop/Intro-to-Vue-3/tree/L2-start

위에 가면, 다운로드 가능

Vue Devtools 다운

Vue 3 부터는 Beta버전 Devtools 받아야 하는 것 같음

이거 다운받아줬음

html에 Vue 추가하기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Product goes here</h1>
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
  </body>
</html>

기존에 위처럼 3.0.0-beta 버전을 잘 임포트하고 있지만, 학습용으로 제공되는 게 따로 있음.

<script src="https://unpkg.com/vue@next"></script> 이거로 바꿔주었음.

설명보면 프로토타이핑이나 배우는 목적으로는 최신버전 사용하라 되어있음. 아마 버전 때문에 프로덕션에서 사용할꺼면 고정된 버전을 사용하라는 것 같음.

코드 작성해보기 1단계

main.js

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks'
        }
    }
});

Vue.createApp() 메소드 인자로 data()라는 메소드가 있는 오브젝트를 넣어줌. data라는 메소드가 반환하는 것은 {product: 'Socks'}라는 간단한 JSON임.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
  <script>
    const mountedApp = app.mount('#app');
  </script>
  </body>
</html>

index.html에는 기존에 있던 코드에 딱 2줄만 추가했음.

    <div id="app">
      <h1>{{ product }}</h1>
    </div>

위에서 {{ product }}라는 부분 그리고 아래에 이라는 부분도 추가함.

  <!-- Mount App -->
  <script>
    const mountedApp = app.mount('#app');
  </script>

위와 같은 과정을 거치니 결과 화면이 나오기 시작함.

내가 data()에서 반환했던 JSON의 product값임.

여태까지 일어난 일을 정리해보면?

Vue.createApp()이라는 메소드로 Vue 앱을 만들었음.
Vue.createApp() 내부 인자로 { data() { return { product: 'Socks' } } }를 줬음.
그리고 createApp()의 결과값을 const app이라는 곳에 할당함.
뷰 앱이 들어있는 app에서 .mount() 메소드를 이용해 이 뷰앱을 특정 div에 마운트함.
뷰 앱을 마운트 받은 div에서 {{ 변수명 }}과 같은 표현식을 이용해 뷰 앱 내부 data()가 반환하는 특정 JSON 프로퍼티(product)의 값을 가져옴.
뷰 앱 내부 data()가 반환하는 JSON product 프로퍼티의 값이 화면에 잘 표출됨

끝

강의에서 설명하는 절차 (How this is working?)

const App = Vue.createApp({}) 메소드에 Options object를 넘겨줌.
- 비록 Options object지만 사실 optional하진 않은 오브젝트임.
  - 옵션이 없다면 빈 오브젝트라도 넘겨줘야 함
- Vue 앱의 Configuration을 도와주는 역할을 함.
- 위 코드가 Vue Application을 만들었고, Vue 앱의 심장과 같은 역할임. 모든것을 동작시키는 역할을 함.
Options object에 data를 넘겨주었다.
app을 HTML 파일 내부로 임포트함.
DOM에 마운트했다.
- 뷰 앱을 "app"이라는 div 내부에 꽂아버림.
- 이후로부터 해당 div는 뷰 앱의 어느 부분에도 접근 가능하게 됐다.
{{ }}라는 것을 mustache syntax라고 부르는데 이것을 이용해서 뷰앱의 값을 불러옴.
- {{ }}가 자바스크립트 표현을 가능하게 해줌.
- HTML에서 유효한(Valid) 자바스크립트를 사용할 수 있게 해줌.
- {{ firstname + ' ' + lastname }}, {{ message.method() }}와 같은 표현식도 가능.

값을 바꾸면?

위와 같이 product의 값을 "Fucks"로 바꾸면 자연스레 화면의 값도 바뀜.
이를 Vue의 Reactivity라고 표현함.
- "It's all thanks to Vue's reactivity system"
mountedApp을 콘솔에서찍어보면?
- Proxy 객체가 나옴. 아마 reactivity system을 Proxy 객체로 구현한 것 같음.

Author And Source

이 문제에 관하여(Vue Mastery - Intro to Vue 3 #1 Creating the Vue App), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jakeseo_me/Vue-Mastery-Intro-to-Vue-3-1-Creating-the-Vue-App

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)