자기소개

Mikihiro Saito

전직 엔지니어

2020년 3월 말부터 필리핀 개발업무

Javascript(Typescript)

Vue 3.0이 올 뻔했어!

새로운 배포 기능

Composition API

Fragment

Portal

Suspense

프로그램 설계를 다시 활성화하는 것은 무엇입니까

해결하기 위해

복잡한 시간 개념

명령의 실행 순서를 관리할 수 없습니다.

끊임없는 답조

명령의 실행 순서를 관리할 수 없습니다.

코드가 읽기 어려워졌어요...

해결하기 위해

React hooks

Vue Composition API

Angular RxJS

두 개념으로 나누다

처리 시간의 "behavior"

값 처리 이벤트

이번 얘기.

Composition API

Composition API

가상 버전의 hooks 읽기

공식 React hooks 설치 예

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

이걸 Vue로?

지금까지의 Vue 표기법

<script>
export default {
  name: 'demo',
  data: {
    branches: ['master', 'dev'],
    currentBranch: 'master',
    commits: null
  },
  created: function () {
    this.fetchData()
  },
  watch: {
    currentBranch: 'fetchData'
  },
  filters: {
    truncate: function (v) {
      var newline = v.indexOf('\n')
      return newline > 0 ? v.slice(0, newline) : v
    },
    formatDate: function (v) {
      return v.replace(/T|Z/g, ' ')
    }
  },
  methods: {
    fetchData: function () {
      var xhr = new XMLHttpRequest()
      var self = this
      xhr.open('GET', apiURL + self.currentBranch)
      xhr.onload = function () {
        self.commits = JSON.parse(xhr.responseText)
        console.log(self.commits[0].html_url)
      }
      xhr.send()
    }
  }
}
</script>

decorator로 Class-based로 적어주세요.

<script>
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined

  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Emit()
  onInputChange(e) {
    return e.target.value
  }
}

</script>

아직 미묘해?

Composition API 사용

<template>
  <div>
    <p>{{text}}</p>
    <button @click="increment">
      Count is: {{ state.count }}, double is: {{ state.double }}
    </button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  props: {
    text: {},
    isOpen: {type: Boolean, default: false},
  },
  setup(props) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      props,
      state,
      increment
    }
  }
}
</script>

실제로 해보세요!

라이프 사이클 연결

beforeCreated ⇒ setup
created ⇒ setup
beforeMount => onBeforeMount
updated => onUpdated
beforeDestroy => onBeforeUnmounted
destoryed => onUnmounted
errorCaptured => onErrorCaptured

라이프 사이클 연결 2

디버깅용

onRenderTracked
onRenderTriggered

Composition API의 장점은 무엇입니까?

this 탈출

테스트 가능한 코드 구현

코드 재사용

Typesciprt 유형 지원

Vuex 탈출(DI 활용)

store

const StoreSymbol = Symbol()

export function provideStore(store) {
  provide(StoreSymbol, store)
}

export function useStore() {
  const store = inject(StoreSymbol)
  if (!store) {
    // throw error, no store provided
  }
  return store
}

const App = {
  setup() {
    provideStore(store)
  }
}

const Child = {
  setup() {
    const store = useStore()
    // use the store
  }
}

전 세계에 주입할 수 있는 상점!

제품 가져온 소감.

graphql(vue-apollo) 등을 합치면 정보량이 적다

코드량이 적고 깔끔함

자유도 증가, 깨끗한 구조, 의존관계 어떻게 구성해야 할지 몰라(학습중)

자신의 함수형 프로그래밍 지식이 약하다

Vue란 무엇인가...

감사합니다