Snowpack

Snowpack은 더 빠른 웹 개발을 위한 최신의 프론트엔드 빌드 도구입니다.
JavaScript의 ESM(ES Modules)을 활용하여 동일 파일을 다시 빌드하지 않는 최초의 빌드 시스템을 생성해 변경사항을 브라우저에 즉시 적용할 수 있습니다.

바로 직전에 nanoid를 사용했는데 이때는 jsdelivr(무료 오픈 소스 CDN)를 사용했다. 이걸 Snowpack으로 변경해준다.

import { nanoid } from 'https://cdn.jsdelivr.net/npm/nanoid/nanoid.js'

skypack 사이트에서 nanoid 검색해서 나오는 첫 번째 글

<script type="module">
  import nanoid from 'https://cdn.skypack.dev/nanoid';
</script>

이벤트 버블링 제어하기

async onEditMode() {
      this.editMode = true
      this.title = this.todo.title
      window.addEventListener('click', () => {
        this.offEditMode()
      })
      await this.$nextTick()
      this.$refs.titleInput.focus()
    },
      

문제점: 수정 모드에서 다른 곳(window)를 클릭하면 수정 모드가 off되게 하려고 하는데 수정이 되지 않는다 -> 이벤트 버블링 현상

<button 
  @click.stop="onEditMode">수정!</button>
        

이 문제를 해결하기 위해, Vue는 v-on 이벤트에 이벤트 수식어를 제공한다.

.stop 수식어를 사용하면 클릭 이벤트 전파가 중단된다.

참고: Vue 이벤트 수식어

.stop
.prevent
.capture
.self
.once
.passive

watch & 스토리지

• 실제데이터 저장할 수 있는 구조 만들기
• 브라우저에 스토리지를 사용해서 저장해보기

watch : todo 데이터 변경 상황을 관찰하기 위함

현재 데이터는 배열(참조형)참조형안에 참조형이 또 들어있는 형태이다.
(배열 안에 객체)

그런데 watch 겉면만 본다.
깊게 감시하라는 뜻으로 옵션으로 deep: true를 줘야한다.

watch: {
    todos: {
      handler(newValue) {
        window.localStorage.setItem('todos', JSON.stringify(newValue))
      },
      deep: true
    }
  }

• localStorage는 window 객체에 내장되어있다. 작성 시 widdow는 생략가능하다.

• 스토리지에 저장할 때는 참조형 불가능하다. 문자형만 가능하다.
  그때 사용하는게 JSON.stringify 이다.

  slot

• slot은 부모 컴포넌트에서 자식 컴포넌트의 엘리먼트를 지정할때 사용

• 컴포넌트 재사용성면에서 좋은 장점을 가진다.

// 버튼 컴포넌트

const TheButton = {
  template: /*html*/ `
    <button>
      !!<slot></slot>??
    </button>
  `
}

const app = Vue.createApp(App)
app.component('the-button', TheButton)
app.mount('#app')

// 지정한 이름으로 사용하기 
<the-button @click="deleteTodo">
        삭제!
</the-button>