community-app 클론 코딩

🧀 named router view

동시에 두 개 이상의 컴포넌트를 표시해야 할 때 사용한다. router-view에 name을 등록할 수 있다. 등록하지 않으면 기본적으로 default를 name으로 사용한다.

📍 App.vue

name="header" 을 에 태그에 등록한다. name이 등록되지 않은 router-view는 default가 등록된다.

<template>
  <div id="app">
    <router-view name="header" />
    <router-view/>
  </div>
</template>

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

📍 route-index.js

하나의 patht에 components components로 두 개의 컴포넌트를 등록한다.

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostListPage',
      components: {
        header: () => import('@/components/AppHeader.vue'),
        default: () => import ('@/pages/PostListPage.vue'),
      },
    },
  ]
})

✂️ 구현된 화면

named router view의 구현된 모습

🧀 Vue Router의 동작 방식

Vue Router는 현재 URL이 어떤 라우트에 해당하는지 위에서 아래 순서대로 라우터를 읽어들인다. /post/:postId를 /post/create위에 선언하게 되면 라우터는 post/create 페이지를 :postId가 create인 컴포넌트를 찾으러 간다. 그렇게 되면 404 error를 만난다.

그래서 /post/create를 먼저 선언한 뒤, /post/:postId를 작성해야한다. Vue Router는 해당 페이지가 /post/create와 일치하는 URL을 가졌는지 먼저 검사하고, 일치하지 않으면 /post/:postId 라우트로 이동시킬 것이다.

📍 라우트 선언 순서

export default new Router({
  routes: [
    {
      path: '/post/create',
      name: 'PostCreatePage',
    },
    {
      path: '/post/:postId',
      name: 'PostViewPage',
    },
    {
      path: '/post/:postId/edit',
      name: 'PostEditPage',
    },
    {
      path: '/signup',
      name: 'Signup',
    },
  ]
})

🧀 비동기로 로그인(토큰) 체크

main.js에 진입을 했을 때, 동기식으로 로그인을 확인하고 있었다. then이나 catch와 같은 체이닝 메소드를 사용하면, 비동기식 로직이 완료된 것을 보장 받을 수 있다.

import Vue from 'vue'
import App from './App'
import store from './store'
import cookies from 'js-cookie';

Vue.config.productionTip = false

# 1. 비동기 처리를 위한 함수 정의
function init() {
  const savedToken = cookies.get('accessToken');
  if(savedToken) {
    return store.dispatch('signinByToken', savedToken);
  } else {
    return Promise.resolve();
  }
}

# 2. 정의된 함수 실행 및 체이닝메서드 then 추가
init().then(res => {
// init함수의 then 체이닝메서드 내부는 init함수가 종료되었음을 보장 받을 수 있다.
  new Vue({ 
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  })
})

🧀 props로 받은 데이터 변경하기

props로 받은 데이터는 부모 컴포넌트로 부터 받은 것으로 직접 변경하는 것을 권장하지 않는다! 되긴 되는데 오류가 뜬다.

그래서 data옵션에 다시 할당을 해서 사용하여 반응형 데이터로 만들어서 사용하거나 $emit을 통해 부모 컴포넌트로 다시 올려보내서 데이터를 변경해야 한다.

<script>
export default {
  name: 'post-edit-form',
  props: {
    post: {
      type: Object,
      required: true,
    }
  },
  data: () => ({
    title: '',
    contents: ''
  }),
  created() {
  // 데이터 옵션에 프롭스를 재할당
    this.title = this.post.title;
    this.contents = this.post.contents;
  }
}
</script>

🧀 데이터 Truthy와 Falsy 체크

자바스크립트는 데이터의 자료형을 엄격하게 체크하지 않는다. 그래서 불리언(Boolean) 자료형이 아니더라도 true와 false를 반환 할 수 있다.

❗️Truthy

true, 0보다 큰 숫자, 비어있지 않은 문자열, [] 빈 배열, {} 빈 오브젝트, function() {} 빈 함수

❕Falsy

false, 숫자 0, ''과 같은 빈 문자열, null, undefined, NaN

if문의 조건으로 !(not 연산자)와 함께 사용해서 데이터의 null 체크를 하는데에 유용하게 쓸 수 있다.

null    // false
!null   // true
!!null  // false

 

 

kangyerim/js-clone-basic