[NPM] shortid package 사용방법

 

안녕하세요. 혀코입니다.

이번 시간에는 shortid npm package를 사용하는 방법에 대해서 알아보겠습니다.

 

설치하는 방법

npm install -D shortid

 

Vue.js에서 다음과 같이 사용합니다.

<template>
  <div>
    <h1>Company</h1>
    <ul>
      <li v-for="{id, name} in newCompanies" :key="id">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
import shortid from 'shortid'
export default {
  data() {
    return {
      companies: ['Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss']
    }
  },
  computed: {
    newCompanies() {
      return this.companies.map(company => ({
          id: shortid.generate(),
          name: company
        })
      )
    }
  }
}
</script>

 

<script> 태그에서 shortid package를 가져와서 shortid로 사용합니다. 

id 값으로 shortid.generate() 지정하면 랜덤한 id가 생성됩니다.

 

 

이렇게 shortid npm package를 사용하는 방법에 대해서 알아봤습니다.

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

감사합니다. :)