1,2강: Intro to Vue 3 & Creating App

시작하기 앞서...

인프런에서 내돈내산한 캡틴판교님의 vue.js 입문/중급 강의 수강한지 거의 한달 반..

수업은 너무 좋았다. 나같은 비전공자에게 사소하지만 알아두면 쓸모있는 기초 지식을 쉽게 알려주셔서 정말 감사할 따름..💕

하지만 강의 연식이 좀 됐고, Vue는 (그리고 다른 언어들도) 진화의 진화를 거듭하여 Vue 2가 아닌 Vue 3가 공식 문서의 기본 버전이 되었다.

나는 Vue 3로 프로젝트를 생성하고 있는데 Vue 2의 내용으로 진행되는 강의를 완전히 이해하기 힘들어 추가로 VueMastery.com 에서 Vue 3 입문 수업을 다시 들을 수 밖에 없었다. 비전공자가 개발 업계에 감히 발을 담그려면 공부한거 또 하고 또 비슷한거 공부하고 무한 반복 하는 수 밖에.. 🥲

누가 이걸 반복문 짤로 쓰셨던데 반복문 아니고 내 상황..ㅋ

이 시리즈는 intro to vue3 의 복습 일지이다.
강의당 평균 6~7분 정도이고 11 레슨밖에 없어서 동시에 캡틴판교님의 vue.js 중급 수업을 강행하며 공부하려 한다.

아마 강의 들은 시간보다 일지 정리하는 시간이 더 클 듯 싶다.😅

그럼 시-작-⭐

강의 목표 : 2강에서는 뷰를 통해 브라우저 창에 Socks 란 단어가 나타나도록 한다. (쉽네ㅋ)

Vue Mastery에서 제작/관리하는 깃헙 링크로 들어간다.
vs code 터미널에서 코드 복사/붙여넣기 후 git checkout L2-start를 입력하면 내가 굳이 새 프로젝트를 만들지 않아도 강의 패키지가 짜라란~ 열린다.

Start Vue3 with CDN

npm 이나 yarn 설치로 vue3를 시작할 수 있지만 우선 입문 강의니까😉 거창하게 하지 않고 공식 문서의 cdn을 복사해서 사용했다. CDN link here

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Creating a Vue App

1. Vue App 만들기

Vue2와 Vue3의 가장 큰 차이점은 Vue App 만드는게 아닌가 싶다. 뜬금없이 createApp이 어디서 나오나 했더니.. Vue 3에서 나왔군요...

const app = Vue.createApp({ })

2. 양말 쇼핑몰을 만들 예정이니 data에 product: 'Socks'를 넣어준다.

//main.js
const app = Vue.createApp({
    data(){
        return{
            product:'socks'
        }
    }
})

3. main.js 파일을 index.html로 import 한다.

//index.html
<script src="./main.js"></script>

Mounting App

4. app을 만들었으니 DOM 안에 우리가 방금 만든 app을 mount ( 템플릿을 실제 DOM 상에 삽입하는 것) 해야한다.
index.html 파일에 script tag를 넣는다.

<script>
	const mountedApp = app.mount('#app')
</script>

mounting한게 누구랑 연결되나 봅시다.

5. h1 태그에 콧수염 괄호{{ }}를 이용하여 product data를 렌더링한다.

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

결과

Voilà !!

Vue instance 작동원리

마법의 문장

const app = Vue.createApp.({ Options Object })

Options Object을 전달함으로써 어플리케이션을 구성할 수 있는 옵성 속성 추가, Vue 어플리케이션의 핵심인 Vue instance가 생성되서 모든 기능을 지원한다.

main.js로부터 app을 importing 하고 DOM에 마운팅 함으로써 돔에 앱을 연결하여 HTML을 앱에 직접 연결 할 수 있다.

Vue Reacativity

• 데이터를 변경하면 화면이 변경되는 것

만약 화면에 sock대신 Boots가 뜨게 하고 싶으면 무엇을 바꿔야 할까?

//main.js

const app = Vue.createApp({
  data(){
    return {
      product: 'Boots' //data value를 업데이트함
    }
  }
})

//index.html : 바뀐 내용 없음.
<div id = "app">
  <h1> {{ product }} </h1> 
</div>  

제품에 의존하는 index.html h1 태그가 자동으로 새 값을 받아서 DOM은 'Boots'를 표시하도록 업데이트한다.

이것이 Vue의 Reactivity!!