[TIL]221214

checkbox / radio 구현

웹표준만 적용하지 않는다면 vue/react에서는 checkbox / radio 기능이 구현이 가능하므로 따로 CSS으로 숨기거나 하는 방법이 아니라 커스텀으로 만들 수 있다.

mutationObserver method

React / Vue의 로우레벨에서는 위의 패턴과 방법으로 실시간 감지 기능이 쓰여지고 있다.

MutationObserver - Web API | MDN

observer pattern

[모던JS: 브라우저] Observers

Github

• 문제: remote에 기존에 있던 브랜치들이 정리되어 같은 이름의 새로운 브런치가 생성되었는데… 로컬에서 계속 branch를 인식하지 못하고 에러를 낸다.
• 해결 : git remote prune origin 를 사용해서 branch를 잘라내고 remote와 맞춰서 동기화 시킬 수 있도록한다.
  

Popup

Introduction

이슈

• 문제 : 다이나믹 모달이 잘 적용 되지 않는다.
• 임시 해결 : 설정하는 부분을 String이 아니라 Component로 넣었더니 되었다.

  // pages/index.vue
  <script lang="ts">
  import { defineComponent, reactive, inject, ref } from 'vue'
  // import { $vfm } from 'vue-final-modal'
  import ModalDialog from '@/components/base/modal/ModalDialog.vue'
  
  export default defineComponent({
    
    setup(){
      // const state = reactive({
      //   $vfm: inject('$vfm')  })
  
      const state = reactive({
        isBaseModal: false,
        isDialogModal: false,
        $vfm: inject('$vfm') 
    
      })
  
      const showDialogModal = () => {
        state.$vfm.show('ModalDialog')
      }
  </script>

vue vscode단축어

//vueinit ⇒ vue template 설정 
<template lang="">
  <div>
    
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="">
  
</style>

//scriptcomposition ⇒  vue composition설정
<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  setup() {
    
  },
})
</script>