[완] Vue.js, 20개만 쓸 줄 알면 끝남

vue.js는 굉장히 쉽습니다.

혹시 vue에 대해서 추가적인 공부를 할지 고민되나요? 또는 vue에서 실력이 부족한건지 js,html,css에서 실력이 부족한건지 잘 모르겠나요?

더도말고 덜도말고 아래 문법만 사용할 줄 알면 vue를 충분히 알고 있다는 것입니다. 그러니 불필요하게 강의보면서 시간 버리지 말고 이 글을 통해 vue를 실무에 적용할만큼 충분히 알고 있는지 확인해보세요.

1. vue 프로젝트 생성

vue create "프로젝트 이름"

위 커맨트로 프로젝트 생성 후에 생성된 폴더에 들어가서 작업하면 됨

2. vue 파일 템플릿

모든 vue 파일은 아래 템플릿으로 시작함.
보통은 vue 파일 만들고 '<'만 입력해도 자동완성으로 템플릿이 만들어짐

<template>
HTML 내용이 들어가는 부분
</template>

<script>
JS 내용이 들어가는 부분
</script>

<style>
CSS 내용이 들어가는 부분
</style>

3. 데이터 바인딩

동적으로 변하는 데이터는 <script> </script>에서 정의해주고 HTML 내에서는 {{ }} 안에서 데이터를 호출하면 됨. 예를들어 'price'라는 데이터를 페이지에서 보여주고 싶다면

<script>
export default {
  name : 'App',
  data(){
    return {
      price : 1000
    }
  }
}

</script>

<template>
  <p> {{ price }} </p>
</template>

이런식으로 하면 됨.

4. 태그 속성 바인딩

변수를 태그 속성 안에 바인딩하고 싶다면 콜론을 활용하면 됨

<template>
  <div>
    <h4 :style="태그속성"> 내용 </h4>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      태그속성 : 'color:red'
    }
  }
}
</script>

5. 태그 반복문 v-for

<div>
  <a v-for="숫자 in 10" :key="숫자">Home</a>
</div>

위와 같은 방식으로 <a>태그를 10개 만들 수 있음
key라면 속성에 들어가는 값은 반복문으로 복사되는 태그를 서로 구분할 수 있는 식별자 역할을 함. 따라서 서로 다른 값이 들어가야 함.

숫자말고 iterable한 데이터를 통해 반복문을 만들 수 있음

<div>
  <a v-for="(영어, i) in ['a','b','c']" :key="i">Home</a>
</div>

6. 이벤트 핸들러

기존 HTML에서 onClickListner과 같은 역할을 하는 이벤트 핸들러는 @click로 만들 수 있음
버튼을 누르면 값이 1이 올라가는 UI를 만들려면 아래와 같이 할 수 있음

<template>
  <div>
    <h4>{{ i }}</h4>
    <button @click="i++">더하기</button>
  </div>
</template>


<script>
export default {
  name : 'App',
  data(){
    return {
      i : 0
    }
  }
}
</script>

@click으로 함수를 실행시킬 수 있는데, methods에 함수를 정의하고 호출하면 됨

<template>
  <div>
    <h4>{{ i }}</h4>
    <button @click="increase">더하기</button>
  </div>
</template>


<script>
export default {
  name : 'App',
  data(){
    return {
      i : 0
    }
  },
  methods : { 
  increase(){ 
      this.i += 1 
    },
  }
}
</script>

7. 조건문은 v-if

특정 조건에만 특정 태그를 보여주는 것은 v-if를 통해 구현할 수 있음

<div v-if="1 == 1">
	true일 때만 보이는 부분
</div>

8. import / export

a 파일에 있는 내용을 App.vue에서도 활용하려면

(a.js)

var a = 10;
var b = 100;
export { apple, apple2 }

(App.vue)

import { a, b } from './a.js'

console.log(a+b)

9. component 만들기

모든 요소들을 하나의 파일에 넣게 되면 관리가 힘들어집니다. 그래서 파일을 나눠서 component를 관리하고 활용할 수 있습니다.

<template>
  <newComponent>
  <newComponent/>
</template>


<script>
  import newComponent from './newComponent.vue'

  export default {
    data() {

    },
    components : {
      newComponent,
    }
  }
</script>

10. 하위 component에 props를 통한 데이터 전달

하위 component에 데이터를 전달하려면 상위 component에서는:을 활용하여 데이터 전달이 가능 함
하위 component에서는 props를 통해 데이터를 전달 받을 수 있음.

(App.vue)

<newConponent :전달할 데이터="data" />

(newConponent.vue)

<script>
  export default {
    name : 'newConponent',
    props : {
      전달할 데이터 : Object,
    }
  }
</script>

11. 커스텀 이벤트를 이용한 상위 component로 데이터 전달

하위 component에서 상위 component로 데이터를 전달하려면 커스텀 이벤트를 활용해야 함.
커스텀 이벤트는 $emit으로 하위->상위 component로 데이터 전달할 수 있음

(newComponent.vue)
<h4 @click="$emit('커스텀이벤트')"> 이거 누르면 App.vue로 이벤트 전달 </h4>

(App.vue)
<newComponent @커스텀이벤트="이벤트가_발생하면_실행되는_코드"/> 

커스템 이벤트와 데이터를 같이 보내고 싶다면 데이터를 수신받는 쪽에서 $event를 활용하면 됨
$event에 데이터가 담겨 있음

(newComponent.vue)
<h4 @click="$emit('커스텀이벤트', '전달할데이터')"> 이거 누르면 App.vue로 이벤트 전달 </h4>

(App.vue)
<newComponent @커스텀이벤트="이벤트가_발생하면_실행되는_코드; console.log($event)"/> 

12. input은 v-model로

<template>
  (생략)
  <input v-model="입력_받은_데이터"> 
</template>
<script>
export default {
  data(){
    return {
      입력_받은_데이터 : 0
    }
  }
}
</script>

13. 데이터 감시는 watch

입력 받은 데이터가 특정 조건에 알맞은지 확인하기 위해 watch를 활용할 수 있음

<script>
export default {
  data(){
    return {
      입력_받은_데이터 : ''
    }
  },
  watch : {
    입력_받은_데이터(){
      //'입력_받은_데이터'가 변경될 때 실행할 코드
    }
  }
}
</script>

14. 페이지 이동은 vue-router

1. 우선 vue-router을 설치해야함

npm install vue-router

2. 그다음 src 폴더 내에 router.js를 만들어야 함

(router.js)

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: 컴포넌트_내용,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router; 

3. main.js에도 vue-router을 설정해야 함

(main.js)
import router from './router'
createApp(App).use(router).mount('#app') 

4. <router-view></router-view> 사용하기
   HTML 내에 <router-view></router-view>를 쓰면 url에 따라 이 태그 안의 내용이 바뀜

5. 예시

(router.js)

import List from './components/List.vue';

const routes = [
  {
    path: '/list',
    component: 리스트_컴포넌트,
  },
  {
    path: '/admin',
    component: 어드민_컴포넌트
  }
];

(App.vue)
<router-link to="/list">리스트_컴포넌트 보여줘</router-link>
<router-link to="/admin">어드민_컴포넌트 보여줘</router-link>

<router-view></router-view>

15. URL 파라미터

게시물 url 보면 '~/list/0' 이런식으로 구성되어있는데 이런건 router에 직접 하드코딩할 수 없으니 아래와 같이 할 수 있음

(router.js)
const routes = [
  {
    path: '/리스트_컴포넌트/:id',
    component: 리스트_컴포넌트,
  },
];

:id를 App.vue에서 사용하려면

{{ $route.params.파라미터명 }}

16. ajax는 axios로

우선 axios 설치를 해야 함

npm install axios

이제 아래와 같이 활용하면 됨

import axios from 'axios';

axios.post('서버URL', '보낼데이터').then( 결과 => {
  POST요청 성공시 실행할 코드~~
}).catch( ()=>{
  실패시 실행할 코드
})

17. vuex를 통한 상/하위 component 간에 데이터 전달

커스텀 이벤트, props로 데이터를 전달하게 되면 굉장히 번거로움
특히 component안에 있는 component와 데이터 교환이 굉장히 번거로움

이러한 문제를 해결하기 위해 vuex를 씀

1. src 폴더 내에 store.js를 만들고 아래 내용 넣기

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      
    }
  },
})

export default store

2. 그리고 main.js 에도 vuex를 추가해야 함

(main.js)

import store from './store.js'
app.use(store).mount('#app')

3. 이제 어느 컴포넌트에서든

 {{ $store.state.데이터명 }}

로 데이터를 활용할 수 있음

18. store에 있는 데이터 변경

vuex를 통해 {{ $store.state.데이터명 }}에서 직접 데이터를 변경할 수 있지만 그렇게 되면 디버깅이 굉장히 힘들어짐. 따라서 mutation을 활용하여 데이터를 변경하도록 권장됨

(store.js)
const store = createStore({
  state () {
    return {
      clickNumber : 1,
    }
  },
  mutations :{
    클릭_수_더하기(state){
      state.clickNumber++
    }
  },
}

mutation에 있는 함수는 $store.commit()으로 호출할 수 있음

(App.vue)

<button @click="$store.commit('클릭_수_더하기')">버튼</button>

19. store의 데이터를 axios로 변경

axios와 같이 작업시간이 오래 걸리는 함수를 mutation을 통해 데이터를 변경하려면 오류가 발생할 수 있습니다. 오래걸리는 작업은 mutaion 대신에 action을 활용해야 함

(store.js)
const store = createStore({
  state () {
    return {
      clickNumber : 1,
    }
  },
  mutations :{
    클릭_수_더하기(state){
      state.clickNumber++
    }
  },
  actions : {
  데이터가져오기(context){
    axios.get('').then(()=>{ 
      context.commit('클릭_수_더하기') 
      })
    }
  }
}

20. vue lifecycle

처음 페이지가 로드되었을 때, 페이지가 소멸될 때 등 다양한 상황에 특정 명령을 실행할 수 있도록 기능을 지원함
이 기능을 활용하려면 lifecycle에 대해 알아야 하는데 아래와 같은 것들을 활용할 수 있음

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()

이걸 활용하려면

data(){
  return {
  
  }
},
beforeCreate(){
  요런 식으로 활용하면 됨
}

보통은 처음 페이지가 로드되었을 때 데이터를 서버에서 가져오기 위해 활용되는데, 이 때 mounted() 또는 created가 자주 활용 됨

21. 디버깅은 Vue devtools

chrome 개발자 도구에서 Vue devtools를 설치하여 vue 개발을 편리하게 할 수 있음!