Developer_kade

• // 로컬스토리지에 토큰 저장
  localStorage.setItem("itemName", token)
  
  // 로컬스토리지에 토큰 가져오기
  const token = localStorage.getItem("itemName")
  
  // 로컬스토리지에 토큰 삭제
  localStorage.removeItem('itemName')

• beforeCreate() {
  	this.$store.dispatch("토큰 검사")
  }

• npm install mitt

• import {createApp} from 'vue'
  import App from './App.vue'
  import mitt from 'mitt'
  
  const emitter = mitt()
  const app = createApp(App)
  app.config.globalProperties.emitter = emitter
  
  app.mount('#app')

• main.js파일에 mitt을 import해준 후 globalProperties.emitter에 mitt을 넣어줍니다.
• 사용법
  • 데이터 전송

    • this.emitter.emit('이벤트 명', data)

  • 데이터 수신

    • this.emitter.on('이벤트 명', data => {
      	// data안에 수신한 데이터가 들어있음
      })

• https://next.vuex.vuejs.org/ 참고
• npm install vues@next --save
• store.js파일 생성

  • import {createStore} from 'vuex'
    
    const store = createStore({
    	state() {
        	return {
            	name : 'kade'
            }
        }
    })
    
    export default store

  • state() == data() 이렇게 생각하면 됩니다.
  • 사용법

    • <template>
      
      	<h1>{{$store.state.name}}</h1>
          <!-- kade출력 -->
      
      </template>​

• main.js에 store.js등록

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

• store에 있는 state는 외부에서 변경이 가능하지만 그렇게 변경을 하게되면 어디에서 변경이 일어났는지 추적이 어려움
• 유지보수 혹은 디버깅등을 위해 데이터 수정을 위한 함수를 정의하면 된다
  • mutations

    • const store = createStore({
      	state() {
          	return {
              	isClick : false
              }
          },
          mutations : {
          	clickFunc(state, data) {
              	//data에는 전송받은 데이터가 들어있음
              	state.isClick = !state.isClick
              }
          }
      })

  • 사용법

    • <template>
      
      	<h1>{{$store.state.isClick}}</h1>
      	<button @click="$store.commit('clickFunc', '전송할 데이터가 있으면 넣어줌')">click</button>
          
      </template>

• ajax, axios등 서버로부터 데이터를 요청해야 할 경우 actions에 함수를 만들어주면 된다

  • const store = createStore({
    	state() {
        	return {
            	name : 'kade'
                age : 0
            }
        },
        mutations : {
        	nameChange(state, changedName) {
            	state.name = changedName
            },
            ageChange(state, changedAge) {
            	state.name = changedAge
            }
        },
        actions : {
        	getAgeFromServer(context) {
            	axios.get('URL')
                	.then(data => {
                    	context.commit('nameChange', data.age)
                    })
            }
        }
    })

  • 컴포넌트에서 actions안에 함수 호출 방법
    • $store.dispatch('함수 명')

• 비동기통신시에 사용할수 있는 라이브러리
• npm install axios : 설치 필요

• import axios from 'axios'
  
  axios.get('데이터 요청 할 url')
  	.then(res => {
      	// 요청 성공시 실행할 코드
          // res 서버에서 보내준 데이터가 담겨있음
      })
      .catch(e => {
      	// 요청 실패시 실행할 코드
          // error코드가 담겨있음
      })

• api통신시에 get, post, put, delete를 사용한다
  • get : 데이터 요청(DB에서 select)
  • post : 데이터 입력 요청(DB에서 insert)
  • put : 데이터 수정 요청(DB에서 update)
  • delete : 데이터 삭제 요청(DB에서 delete)
  • 서버에 요청을 하면서 데이터를 보낼때

    • axios.post('url', data)
      	.then()
          ...

    • data부분에 서버에 요청과함께 데이터를 보낼 수 있다.

• uri가 #이 붙은 상태로 시작한다.
  • kade.com/#/home
• #뒤에 있는 내용이 서버로 전달되지 않고 그렇기때문에 uri가 변했을때 서버가 아닌 vue의 router가 안전하게 읽어올 수 있다는 장점이 있다.

• import { createRouter, createWebHashHistory } from 'vue-router'
  
  const router = [];
  const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })

  • history : createWebHashHistory()

• 흔히 보이는 구조이다 
  • kade.com/home
• vue를 이렇게 구성할 경우 서버가 /home의 요청을 가져가서 처리할수도 있기 때문에 서버가 있다면 hash mode를 쓰거나 ~~uri로 들어왔을때 어떻게 처리해라라고 서버에서 따로 한번 처리를 해줘야 할 수도 있다.

• import { createRouter, createWebHistory } from 'vue-router'
  
  const router = [];
  const router = createRouter({
    history: createWebHistory(),
    routes,
  })

  • history : createWebHistory()

• router를 등록하면서 beforeEnter속성을 추가해주면 해당 페이지로 이동하기 전 어떤 코드를 실행해 줄 수 있다.
  • ex) 로그인을 하지 않을 상태에서 마이페이지 접근

• const routes = [
  	{
      	path: '/mypage',
          component: MyPage,
          beforeEnter: (목적지, 출발 페이지) => {
          	// code...
              // to.fullPath -> 전체 경로
              // to.params.id -> id파라미터 값
              // return 값 : false 라우팅 중단
  			// return이 없는경우 라우팅 페이지로 간다.
          }
      }
  ]

   
• https://next.router.vuejs.org/ 참고

• const routes = [
    {
      path: '/detail/:id',
      component: Detail,
    },
  ]

• router.js에서 위와같이 설정을 해줘야 파라미터의 변수를 받아올 수 있으며 :(콜론)으로 시작해서 변수명을 적어주면 detail뒤에 들어온 값은 파라미터값으로 인식한다.

• <template>
  	{{$route.params.id}}
  <template>

• router.js에서 설정한 파라미터를 컴포넌트에서 받아오는 방법이다.
• params까지가 문법이고 뒤에 id는 파라미터 명이다.
  • 상단 코드를 보면 파라미터 key를 id라고 해줬기 때문에 id를 써준것이다.
  • 만약 asdf라고 했으면 $route.params.asdf라고 하면 된다.

• /detail/0/comment > 0번 게시물의 상세 내용과 댓글
• /detail/0/author > 0번 게시물의 상세 내용과 작성자 정보
• 위와 같이 만들어주고싶을때 사용할 수 있다.

• const routes = [
  	{
      	path: '/detail/:id',
          component: Detail,
          children: [
          	{
              	path: 'comment',
                  component: Comment
              },
              {
              	path: 'author',
                  component: Author
              }
          ]
      }
  ]

  • children에 path값을 정해줄때는 절대 /를 넣으면 안된다.
• 사용방법은 똑같이 Detail컴포넌트로 가서 <template>안에 <router-view>를 입력해주면 동작한다.
• $router.push('uri') : 코드 실행시 이동
• $router.go(숫자) : 1앞으로 한페이지 이동, -1 뒤로 한페이지 이동
• https://next.router.vuejs.org/ 참고

• 혹시 에러가 난다면 npm run serve해서 켜놨던 서버를 종료하고 재설치를 해보거나 yarn add를 쓰는것도 좋은 방법이다

• import { createWebHistory, createRouter } from "vue-router";
  
  const routes = [
    {
      path: "uri경로",
      component: import해온 컴포넌트,
    }
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;

• 위의 코드를 router.js에 입력해주고 앞으로 만들 페이지들중 라우터에 등록하고 싶은 페이지가 있다면 router.js에 import 해 온후 path와 컴포넌트를 등록해준다.
  
  • path : www.sitename.com/이곳에 오는 값이 uri // uri의 값을 정하고 해당 uri가 입력되면 해당 컴포넌트를 보여주겠다는 의미이다.

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

• <template>
  	<h1>My Page</h1>
  	<router-view></router-view>
  </template>

• <router-view>를 사용한 부분에 라우터로 가져온 페이지를 보여줍니다.

• <template>
  	<router-link to="/write">글 작성</router-link>
      <a href="/write">글 작성</a>
  </template>

• 두가지 태그 모두 동일하게 동작합니다.

• beforeCreate()
  • 인스턴스가 생성되기 전에 어떤 동작을 실행 할 수 있다.
• created()
  • 인스턴스가 생성된 후 어떤 동작을 실행 할 수 있다.
• beforeMount()
  • 인스턴스가 html로 렌더링 되기 전에 어떤 동작을 실행할 수 있다.
• mounted()
  
  • 인스턴스가 html로 렌더링 된 후에 어떤 동작을 실행할 수 있다.
  • 보통 이 부분에서 비동기로 데이터를 가져오는 작업을 한다.
• beforeUpdate()
  • 바인딩 된 데이터가 변경되면서 업데이트가 일어나기 전에 어떤 동작을 실행할 수 있다.
  • ex) input태그에 입력시 정규식 체크
• updated()
  • 바인딩된 데이터가 변경되고 업데이트가 일어난 후에 어떤 동작을 실행할 수 있다.
• beforeUnmount()
  • 해당 인스턴스의 종료전에 어떤 동작을 실행할 수 있다.
• unmounted()
  • 해당 인스턴스의 종료 이후에 어떤 동작을 실행할 수 있다.

<transition name="트랜지션 명">
	<h1>내용</h1>
</transition>

<style>
/* 트랜지션 시작 시 */
.트랜지션 명-enter-from { 애니메이션 동작 전 상태 }
.트랜지션 명-enter-active { 애니메이션 동작 중 상태 }
.트랜지션 명-enter-to { 애니메이션 동작 후 상태 }

/* 트랜지션 종료 시 */
.트랜지션 명-leave-from { 애니메이션 동작 전 상태 }
.트랜지션 명-leave-active { 애니메이션 동작 중 상태 }
.트랜지션 명-leave-to { 애니메이션 동작 후 상태 }
</style>