[Vue.js] 하면서 나의 메모 (SPA, @/, export default의 뜻, >) 설명 의미

먼저 소스를 보자

<template>
  <div id="app">
    <MainMap/>
    <SideBar class="side-bar"/>
  </div>
</template>

<script>
import MainMap from '@/components/MainMap'
import SideBar from '@/components/SideBar'

export default {
  name: 'App',
  components: {
    SideBar,
    MainMap
  }
}
</script>

<style lang="scss">
#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  > .side-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }
}
</style>

 

# SPA인 이유

Vue.js는 해보니 SPA인것을 깨달았다.

Vue 파일은 많이 생긴다. 아래 처럼 <MainMap/> , <SideBar /> 이것은 다 Vue파일이다.(MainMap.vue, SideBar.vue)

그래서 이 template 안에 MainMap, SideBar 가 각각 랜더링 하여 부분 부분으로 하나의 파일로 만들어진다.

그래서 SPA인것을 깨달았다.

 

# @/ 뜻

@/하면 루트 디렉토리 범위에서 해당 파일을 찾는것이다. 그래서 해당 경로에 있는 MainMap.vue를 가져올 수 있다.

 

# div id

div id가 있다 아래쪽에 보면 #app를  style로 받아서 사용하는 것을 알 수 있다.

 

# export default 

export default {

} 이것의 의미는 구문으로 정의된 객체는 해당 컴포넌트를 나타낸다. 이 객체는 컴포넌트의 구성 및 동작에 대한 정보가 포함 된다. 만약 이 코드가 없으면, 해당 파일은 Vue.js 컴포넌트를 정의하지 않게 되며, 따라서 Vue.js 애플리케이션에서 해당 컴포넌트를 사용할 수 없다. 즉 다른 Vue 컴포넌트에서 해당 컴포넌트를 임포트 하거나 사용할 수 없다.

 

여기에서는 선택자 App(Vue 파일 이름) 이름을 가진것에 (App2로 변경시 바로 에러뜸.) 아래와 같은 컴포넌트를 사용하겠다. SideBar, MainMap이라는 뜻임.  import MainMap, SideBar을 쓰겠다는 뜻.

각각 컴포넌트 쪼개진 컴포넌트를 뭉쳐줄 때 사용.

 

#  >

#app { > .side-bar { } }

>는 해당 id에 있는 .side-bar class만 side-bar의 style을 적용하겠다는 뜻.

즉 조건이다. 다른 곳에서는 적용 안되고 선택자인 #app만 적용하겠다는 뜻.