vue 시작하기

참고사이트

Vue.js
Vue.js 입문서
vue free video
- lesson resource github repo : https://github.com/Code-Pop/Intro-to-Vue-3.git
todo example
http-vue-loader
router

vue

Vue.js 는 MVVM(Model, View, View Model) 아키텍처 를 사용한다.
1. Vue.js 의 역할은 View Model 로 DOM 과 자바스크립트 객체를 연결해 주면 뷰모델이 이들간의 동기화를 자동으로 처리한다. 또한 Vue.js 는 가상돔(Virtual DOM)을 사용 함으로써 필요한 부분만 신속하게 업데이트 할 수 있다.
2. Angular의 장점(데이터바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.
재사용을 극대화
1. 템플릿 : 이미 구조화된 것. 문서일수도 있고 특정 디자인일수 도 있다.
2. vue에서는 컴포넌트를 통해서 코드의 재사용을 높임
데이터 바인딩
1. 웹화면의 요소가 서로 양방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어 있는 다른쪽에 자동으로 반영
2. view와 model중 어느 한쪽에 변경이 일어나면 다른 한쪽에 자동으로 반영
가상 돔
1. HTML DOM은 웹화면에 요소가 많아질수록 작은변화가 있을때마다 DOM 트리를 모두 갱신하는 비효율성이 증가
2. Virsual DOM은 DOM의 문제를 개선하기 위하여 실제 DOM을 추상하하여 화면에서 DOM을 직접 처리하는 방식이 아닌 가상의 DOM을 반들어서 메모리에서 처리한 다음 실제 DOM과 동기화한다.
선언적 랜더링
1. DOM과 연결된 상태와 속성이 변경될때 자동으로 DOM 앨리먼트가 업데이트됨. 변수를 선언하고 값을 넣으면 자동으로 DOM에 업데이트 됨
2. jquery는 명령형 랜더링으로 DOM 앨리먼트에게 다시 랜더링할 것을 명령함

랜더링

참고사이트 : https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80
서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
랜더링 엔진은
1. HTML 문서를 파싱해서 DOM 트리를 만든다
2. CSS를 파싱하여 CSSOM 트리를 만든다
3. DOM CSSOM를 결합하여 랜더링 트리를 형성한다. head, display=none인 요소는 포함되지 않음
4. 랜더링 트리에서 각 노드의 크기와 위치를 계산 기기의 뷰포트 내에서 노드의 위치와 크기 계산. 레이아웃 또는 리플로우 단계임
5. 개별 노드를 화면에 그린다. 페인트 이벤트를 발생시켜 랜더링 트리를 화면 그린다. 페인팅 또는 래스터화라고 한다.
6. 레이아웃이 변경되면 리플로우, 리페인트가 발생 레이아웃이 변경되면 리플로우 -> 리페인트를 거치고 레이아웃에 영향을 주지않는 가시성에 영향을 주는 앨리먼트가 변경되면 리페인트만 거치게 된다.

이름작성규칙

camelCase : 연결되는 단어부터 첫글자를 대문자
PascalCase : 모든 단어의 첫글자를 대문자
kebak-case : 단어 사이에 하이픈(‘-‘)
snake_case : 단어 사이에 언더라인(‘_’)

Vue는 PascalCase를 사용하여 등록된 컴포넌트에 대한 kebab-case 태그 해석을 지원합니다. 이것은 MyComponent로 등록된 컴포넌트가 <MyComponent> 또는 <my-component>를 통해 템플릿에서 참조될 수 있음

VS code에 확장프로그램 설치

es6-string-html
Vue VS Code Extension Pack : vuter을 비롯하여 인텔리센스, 포맷팅 지원함
- Vetur : 프로그래밍 문법에 맞는 Syntax Highlighting을 지원. 코딩시 문법에 대한 가이드
- Prettier : code fomatter
- Formattin Toggle,
- Bookmarks,
- JavaScript(ES6) code snippets,
- npm intellisense,
- jumpy
- Bracket Pair Colorizen
- Night Owl

크롬 브라우저에 확장 프로그램 설치

Vue.js devtools 6.0.0 beta 앱 설치

Vue.js not detected 오류발생시 : 로컬경로 문제로 파일 URL에도 접근을 허용
   1. Simply go to chrome://extensions
   2. 세부정보에서  " Allow access to file URLs "  체크

snippet

특정 코드를 미리 작성하고 등록하여 단축키로 불러와서 바로 사용할 수 있는 기능
1. File -> Preferences -> User Snippets
2. vue.json 선택
3. prefix-> 단축어, body->단축어 입력시 완성될 코드, description->단축어 입력시 노출될 설명문

vue Instance 생성

Optionals API 방식
- 옵션 속성이란 불리는 data, methods, computed 등을 정의
- 코드가 길어지면 가독성이 떨어짐.

const app = Vue.createApp({
    data() { },       //어떤 데이터인가?
    components : {}   //하위 컴포넌트
    methods: { },     //어떤 처리를 하는가?
    computed: { },    //어느 데이터를 사용하여 계산하는가
    watch: { },       //어느 데이트를 감시하는가? 데이터의 변화를 감지하여 지정된 콜백함수 호출
    mounted() { },    //vue 인스턴스가 마운트된 다음에 실행 
    updated() { }
});
app.component(...)
app.mount('#app')

컴포지션 API의 setup
- 컴포넌트가 생성되기 전에 props를 반환(resolved)되면 실행되는 컴포넌트 옵션으로 composition API의 진입점 역할을 합니다
- setup()함수에서 반환하는 객체는 화면을 담당하는 HTML에서 사용 가능
- 참고사이트
  - <script setup> : setup함수에서 반복적으로 사용되는 내용을 줄여준다.

//  props, context 매개변수를 가지고 데이터를 리턴
function setup(props: Data, context: SetupContext): Data

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    }
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })    
    return { count, increment }
  }
}
</script>

<script setup>
  import { ref } from 'vue'
  const count = ref(0);
  const increment = () => {
    count.value++;
  }
</script>

데이터 표시

머스태시() : Vue 인스턴스에 있는 데이터를 HTML 템플릿에 표현(보간법)

   //자바스크립트 함수 사용
      //계산식
            //data 전체를 표시

지시자(directive)

디렉티브 : vue가 어떤 일을 하는지 지정하는 명령어

표현식	설명
v-text	문자를 있는 그대로 표시
v-html	html로 표시
v-bind 또는 콜론(:)	요소의 속성에 데이터 지정
v-movel	양방향 바인딩. 입력폼과 데이터 연결

    <div id="app">
        <ul>
            <li>머스태시 </li>
            <li>v-text <span v-text="product"></span> </li>
            <li>v-html <span v-html="product"></span></li>
            <li>v-bind <span v-bind:class="productname"></span></li>
            <li>v-model <input v-model="productname"></li>
        </ul>
    </div>

표현식	설명
v-on 또는 앳(@)	이벤트와 연결
v-if	조건에 따른 표시
v-elseif
v-else
v-for	반복표시

vue 컴포넌트의 생명주기

생명주기
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
- activated
- deactivated
- renderTracked
- renderTriggered
- errorCaptured
optional API에서 후킹(hooking)

mounted(){}

composition API에서 후킹

setup(){
  onMounted( ()=>{} )
}

이벤트 리스너

v-on 지시자

<태그 v-on:click="스크립트 코드 혹은 함수호출">
<태그 @click="">

이벤트 수식어

<태그 @click.stop="스크립트 코드 혹은 함수호출">
<input @keyup.enter.prevent="스크립트 코드 혹은 함수호출">

이벤트 수식어	설명
.stop	이벤트 전파를 방지
.prevent	기본동작을 금지(submit, a)
.capture	이벤트리스너의 apture 옵션을 활성화
.self	이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출
.once	한번의 클릭만 허용
.passive	이벤트 리스너의 passive 옵션을 활성화
.exact	정확히 해당키만 눌렸을 때 핸들러를 호출
.left	마우스의 왼쪽 버튼이 눌렸을 때 핸들러를 호출
.right	마우스의 오른쪽 버튼이 눌렸을 때 핸들러를 호출
.middle	마우스의 가운데 버튼이 눌렸을 때 핸들러를 호출

ajax

XmlHttpRequest
jQuery ajax ($.ajax)
fetch
axios
- https://github.com/axios/axios#example

yumi

참고사이트

vue

랜더링

이름작성규칙

VS code에 확장프로그램 설치

크롬 브라우저에 확장 프로그램 설치

snippet

vue Instance 생성

데이터 표시

지시자(directive)

vue 컴포넌트의 생명주기

이벤트 리스너

ajax