58일차 2024-05-22 (Vue 2일차)

ppt 24p 부터 시작

 

 

* 페이지 이동을 라우팅이라고 한다

.vue 파일은 확장명을 정의한 파일 (눈에 보이는 부분) 컴포넌트 구성

template와 style

여기에서 <a>태그를 사용하면 안된다. 우리는 SPA 방식으로 동작을 해야되는데 <a>태그를 사용하게되면 기존의 MPA 방식으로 동작하게 된다. (MPA 방식은 서버 통신)

router-link는 컴포넌트 이동 (모든 컴포넌트는 html에 다 담겨있다)

 

코드가 적용되는 위치를 이해하자.

 

이 코드에서 export된 구문이 보이지 않는다.

이 파일. App.vue는 나중에 모두 .js파일로 변하게 되고, 

import 되어 사용될 수 있다.

위의 코드는 create(메인컴포넌트=App).use(router).mount('#id') 로 사용된 것

 

라우터의 index.js는 경로에 해당하는 컴포넌트를 매핑시켜주는 역할을 한다.

 

 

** .vue가 붙은 파일은 컴포넌트이다.

 

어바웃 뷰를 위에서 import하고

컴포넌트에 넣어주어도 작동한다.

 

*history 정보를 이용하여 뒤로가기 가능

*routes -> 속성의 이름과 값이 같을 때는 하나만 써주어도 된다. (정석은 routes : routes)

 

# 라우터가 중요하다.

 

# 각각의 컴포넌트가 사용되는 흐름을 정리해보자.

 

import { createApp } from 'vue' // createApp은 export로 내보낸 것.
import App from './App.vue' // App은 export default로 지정되어 있기 때문에 {}로 나타내지 않음
import router from './router'
// import router from './router/index.js'

createApp(App).use(router).mount('#app') // index.html에서 id가 app인 태그에 적용

 

main.js에서 import하는 부분

어제 배운대로 한다면 import router from './router/index.js' 이렇게 사용해야되는데,

import router from './router' 이것으로 사용도 가능하다.

컴포넌트는 index.js 자체라고 이해하면 된다. 따라서 생략해주어도 매칭이 됨.

 

.vue 파일은 "template"(UI) + "script"(JavaScript) + "style"(CSS)로 구성되어 있다.

==> 사용하려면 최소한 "template"태그는 있어야 한다.

template를 포함한 모든 태그가 없으면 에러난다!

이 부분에서 HelloWorld 태그는 UI 컴포넌트.

src / components 폴더 아래에 있는 컴포넌트.

 

 

script에 setup이 있는 경우 "컴포지션 방식"

setup이 없는 방식은 "옵션 방식"

 

*옵션스 방식

 

*컴포지션 방식

 

 

RouterView - HomeView - img - HelloWorld컴포넌트

 

HelloWorld.vue 에서

<h1>{{ msg }}</h1>

중괄호 두개는 변수

props는 "속성"

 

<style scoped> --> scoped가 붙게되면 현재 그 컴포넌트 안에서만 적용이 된다.

 

** 하나의 View에 여러개의 컴포넌트가 있는데, 같은 태그의 style은 scoped를 붙이게 되면 충돌을 방지할 수 있다.

전체적인 스타일을 적용하려면 scoped를 빼주어야 한다.

 

 

설정 파일 6개

설정

 

 

 

* babel 역할 : 최신브라우저가 아니고, 예전 브라우저라면 해당 문법에 맞춰 바꾸어서 적용해준다.

 

 

 

 

우리가 프로젝트하는 것에 재구성을 하자.

 

 

에러가 나기 때문에

 

 

ESlint에 추가 설정

 

컴포넌트 폴더에 컴포넌트 생성해보자.

에러가 나는 이유는 기본적으로 뷰 파일이름이 단일 단어로 구성되어 있기 때문이다.

 

이것도 ESlint에서 에러처리가 가능하다.

 

이렇게 에러처리가 가능하지만,

가능하면 단일 단어로 파일네임을 구성하지 않는 것이 좋다.

 

 

하나 더 설치를 해준다.

 

import 해준다.

 

node_modules 폴더 아래에

bootstrap/dist/css/bootstrap.min.css

를 적용해주겠다는 의미

 

리스트.vue는 삭제.

 

컴포넌트의 template 밑에는 반드시 하나 이상의 구성요소(root element)가 필요하다. 없으면 에러

 

import문 없이 defineProps() 함수를 사용할 수 있도록 설정

 

 

App.vue 스타일에서

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

이것을 지우고

HomeView.vue에 넣어준다.

.home {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

 

HomeView / AboutView / App .vue 파일 등 수정

 

우리가 컴포넌트에 익숙해질 때까지

모든 컴포넌트는 card 레이아웃을 이용할 것이다.

---

# 중간 생각 정리

1. Vue 앱은 Vue 인스턴스를 생성하는 것으로 시작.

main.js파일에서 이루어진다.

import { createApp } from 'vue' // createApp은 export로 내보낸 것.
import App from './App.vue' // App은 export default로 지정되어 있기 때문에 {}로 나타내지 않음
import router from './router/index.js'

// Bootstrap 관련 JavaScript와 CSS 로딩
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

// App컴포넌트를 <div id="app"></div>에 내용으로 추가
createApp(App).use(router).mount('#app') // index.html에서 id가 app인 태그에 적용
// App 컴포넌트를 랜더링하여 DOM의 '#app'엘리먼트에 마운트시킴

 

2. 컴포넌트 구조

Vue 앱은 여러 컴포넌트로 구성.

각 컴포넌트는 'template', 'script', 'style' 섹션으로 나뉘고, 이를 통해서

HTML, JavaScript, CSS를 각각 정의한다.

 

3. 템플릿 컴파일

Vue는 템플릿을 컴파일하여 가상 DOM을 생성.

Vue 컴파일러에 의해 이루어지며, 이후 실제 DOM으로 렌더링 됨.

 

4. 데이터 바인딩 및 반응성 시스템

Vue는 'data' 속성의 변화를 추적한다. 데이터가 변경되면 이름 감지하여 관련된 DOM을 업데이트.

 

5. 컴포넌트 수명 주기

Vue 컴포넌트는 생성 - 소멸 되기까지 일련의 수명 주기 훅(lifecycle hooks)을 가짐.

• beforeCreate: 인스턴스가 초기화되기 전
• created: 인스턴스가 생성된 후
• beforeMount: DOM에 마운트되기 전
• mounted: DOM에 마운트된 후
• beforeUpdate: 데이터가 변경되어 DOM이 다시 렌더링되기 전
• updated: 데이터 변경 후 DOM이 다시 렌더링된 후
• beforeDestroy: 인스턴스가 파괴되기 전
• destroyed: 인스턴스가 파괴된 후

6. 이벤트 처리 및 사용자 입력

Vue는 사용자 입력과 이벤트 처리를 간편하게 할 수 있는 방법을 제공.

 

7. 라우터 및 상태 관리

복잡한 애플리케이션에서 Vue Router와 Vuex를 사용하여 라우팅 및 상태 관리를 한다.

- Vue Router : SPA 내에서 페이지 간 탐색을 관리

- Vuex : 중앙 집중식 상태 관리 라이브러리로, 상태를 일관되게 관리.

---

# 흐름 정리

 

1. 우선적으로 웹이 실행되면 index.html파일이 로드 된다.

그러면 main.js가 로드된다.

import Vue from 'vue'
import App from './App'
import router from './router'
// 제일 먼저 실행

Vue.config.productionTip = false


new Vue({
    el: '#app', // 여기에 있는 el 속성이 index.html의 id 값을 선택히여 Vue의 컴포넌트들을 마운팅 시켜준다.
    router, // router를 사용
    components: { App }, // App이라는 컴포넌트를 사용
    template: '<App/>' // 1. #app에 사용되는 컴포넌트는 App.vue
})

new Vue →  새로운 Vue의 인스턴스를 생성해주고 el 속성으로 index.html의 app id값을 선택한다는 코드.

components로 App을 사용하고 템플릿은 App을 사용한다는 의미.

 

 

2. App.vue

<template>
 <div id="app">
  <Navigation></Navigation>
  <router-view/> <!-- 3. 이 부분에서 어떤 것이 마운트 되는지 알아보려면 router/index.js 를 가보면 된다. -->
 </div>
</template>

<script>
// 2. main.js 파일을 실행하면 제일 먼저 마운트 돠는 속성이다.
    import Navigation from './components/Navigation'
    export default {
            name: 'App',
            components: {
                'Navigation': Navigation
            }
    }
</script>


<style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
}
</style>

App.vue 구성.

<router-view> 코드가 실행될 때 router를 찾아서 들어가게 된다.

 

 

3. index.js (router)

router를 만나 라우팅을 찾아 들어가게 된다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
Vue.use(Router)

 

export default new Router({

  routes: [
    {
      //  4. '/'로 접근 할 경우는 HelloWorld.vue를 실행
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

    {
      path: '/first',
      name: 'First',
      component: First
    }
  ]
})

Router 코드에서 component 설정을 위해 이전에 라우팅 설정을 위한 HelloWorld와 First를 import 해주어야 한다.

path가 '/' 이면 주소에 아무 것도 붙지 않았을 때 사용자가 들어오자마자 렌더링 되는 페이지를 의미한다.

'/first'는 주소에 first가 붙었을 때 렌더링 되는 페이지를 의미.

페이지 렌더링을 위해 component 속성을 사용하여 각각의 vue파일 이름을 작성해준다.

* 사용자가 맨 처음 사이트에 접속하게 되면 path : / 로 가기 때문에 HelloWorld.vue 파일을 찾아간다.

 

4. HelloWorld.vue

<template>
  <div class="hello">
      <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      title: 'totobiyo의 블로그 (made by 준혁)'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

vue.js 기본 신택스에 의해 데이터가 마운트 되는 방식이다.

 

# 순서 정리

index.html -> main.js : component를 App을 사용한다는 것을 앎 -> App.vue : <router-view>를 만남 라우팅을 찾아가기 위해서 router 폴더 밑에 index.js 를 찾아감 -> index.js : 라우팅을 분석함 -> path 에 따라서 다른 페이지가 랜더링된다.

 

# 개념

<router-view>는 Vue.js의 공식 라우터 라이브러리인 Vue Router에서 사용되는 컴포넌트.

<router-view>는 현재 라우트(routes에 등록된 경로)에 맞는 컴포넌트를 동적으로 렌더링하는 역할을 함.

URL이 변경되면 Vue Router는 해당 URL에 매핑된 컴포넌트를 찾아 <router-view>에 렌더링한다.