코린이[코딩 어린이]

[Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

에러원인 : :key중복으로 인한 업데이터 오류

해결방안

변경 전

<div v-for="(item, index) of items" :key="index">
    내용
</div>

<div v-for="(item, index) of items2" :key="index">
    내용
</div>

변경 후

<div v-for="(item, index) of items" :key="'a' + index">
    내용
</div>

<div v-for="(item, index) of items2" :key="'b' + index">
    내용
</div>

다른 v-for루프에서 동일한 :key가 경고를 발생시키기 때문에, 다른 키를 사용하여 해결

jQuery 사이트 바로가기

jQuery CDN 바로가기

CDN주소 가져오기

jQuery 사이트 --> Download --> Google CDN

jQuery 사이트에 들어가서 왼쪽 위 다운로드를 클릭하고 아래로 내리다보면 구굴 CDN링크가 있다. 클릭 !

nuxt.config.js

script: [
    { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' }
]

추가해주면 된다.

 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

NUXT JS에서 v-for문을 돌리던 도중 갑작스레 생긴 에러.

문제없이 동작은 하는데, 경고문이 갑작스레 떳다.

에러 원인을 보니 v-for를 돌릴때 key값이 문자열이나 숫자값을 사용하지 않으면 뜨는 내용인듯하다.

해결방안

변경 전

<div v-for="item in banners" :key="item">
    내용
</div>

변경 후

<div v-for="(item, idx) in banners" :key="idx">
    내용
</div>

index번호(숫자값)로 변경해서 해결.

Font Awesome 바로가기

npm nuxtjs/fontawesome 바로가기

$ npm install

$ npm install @nuxtjs/fontawesome@1.1.2
$ npm install @fortawesome/free-brands-svg-icons@6.1.1
$ npm install @fortawesome/free-regular-svg-icons@6.1.1
$ npm install --save @fortawesome/free-solid-svg-icons@6.1.1

$ npm install @fortawesome/fontawesome-svg-core@6.1.1
$ npm install @fortawesome/vue-fontawesome@2.0.6

JS생성 : fontawesome.js

const solid = [ 'fas' ]

const regular = [ 'far' ]

const brands = [ 'fab' ]

export { solid, regular, brands }

nuxt.config.js

import * as FontAwesome from './plugins/fontawesome'

buildModules: [
    [
      '@nuxtjs/fontawesome', { component: 'fontAwesome', suffix: true }
    ]
  ],
  fontawesome: {
    icons: {
      solid: FontAwesome.solid,
      regular: FontAwesome.regular,
      brands: FontAwesome.brands
    }
},

.vue 파일

<!-- suffix: true로 인해 -icon 생략가능(기존: font-awesome-icon-layers) --> 
<font-awesome-layers class="">
    <font-awesome-icon icon="fa-solid fa-bars" />
</font-awesome-layers>

<!-- 아이콘 크기변경 fa-lg, fa-2x, fa-3x, fa-4x, fa-5x CLASS를 적용하여 기본 크기 외에 다양한 크기의 아이콘을 나타낼 수 있다. -->

사용한 플러그인 [ 슬라이드 플러그인 ]

npm install vue-carousel

사용방법

1. nuxt설치한 폴더에 npm install을 해준다. : npm install vue-carousel
2. 원하는 곳에 js파일을 만들어준다. ( vue 내용을 추가해준다. )
3. nuxt.config.js파일에 { src: '~경로', ssr: false }를 추가해준다.
4. 슬라이드를 사용한다

npm 설치

JS파일 생성

import Vue from 'vue'
import VueCarousel from 'vue-carousel/dist/vue-carousel.min.js'

Vue.use(VueCarousel)

nuxt.config.js파일에 경로 추가

:: js파일을 만든곳 경로를 설정

{ src: '~/plugins/vue-carousel', ssr: false },

.vue 파일에 슬라이드 추가

HTML부분

<div class="carousel-wrapper">
  <client-only>
    <carousel v-bind="options">
      <slide v-for="i in 5" :key="i" class="img-wrapper">
        <img :src="banners[0].image" :alt="banners[0].alt">
      </slide>
    </carousel>

    <navigationNextLabel />
    <pagination />
  </client-only>
</div>

JS부분 [ data() { } 부분에 추가해준다 ]

options: {
    loop: true,
    perPage: 1,
    paginationEnabled: false,
    autoplay: 5000
}

구글 폰트 바로가기

구글폰트 접속

원하는 폰트를 클릭하고 아래로 내려보면

+ Select this style이 보인다. 원하는 폰트 클릭 ( 다중 선택 가능 )

그럼 오른쪽에 link가 나온다. ( 복사 )

nuxt.config.js

export default {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet' }
    ]
}

링크부분에 내가 원하는 링크를 넣어준다.

NuxtJS 홈페이지

nuxt 정적 이미지 추가하기

<img src="~/assets/imgs/logo.png" alt="Logo">

nuxt 동적 이미지 추가하기 ( 백틱을 사용해 줘야함 ` ` )

<img :src="require(`~/assets/imgs/${image}.jpg`)" alt="Logo">

글로벌 설정 [ nuxt.config.js파일 안에 리소스 include하기 ]

export default {
  css: [
    '~/assets/reset.scss'
  ],
}

~/assets/reset.scss

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

정말 오래된 에릭마이어의 CSS Reset 

에릭마이어의 CSS 바로가기

NUXT JS 외부 리소스 바로가기

NUXT JS 사용하기

글로벌 설정 [ nuxt.config.js파일 안에 리소스 include하기 ]

export default {
    script: [
    	{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
}

로컬 설정 [ pages 디렉토리의 .vue파일 안에서 리소스 include하기 ]

export default {
    script: [
    	{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ]
}

두 방법은 같기 때문에, 전체적으로 jQeury를 사용해야 하는 상황이면 nuxt.config.js파일에, 부분적으로 사용해야 하는 상황이면 .vue파일 안에 include해주면 된다.

Carousel 사이트 바로가기

Vue3 이미지 슬라이드 플러그인

vue3-carousel 설치

npm install vue3-carousel

HTML

<div class="image_slider" slideWidth="100%">
  <carousel :items-to-show="1" :wrapAround="true" :autoplay="5000">
    <slide v-for="slide in items[0].menus" :key="slide">
      <div class="carousel__item">
        <figure>
          <img :src="slide.image" :alt="slide.alt" />
          <figcaption><em>{{slide.caption}}</em><span>{{slide.description}}</span></figcaption>
        </figure>
      </div>
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</div>

Script

<script>
    import 'vue3-carousel/dist/carousel.css'
    import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
    
    export default {
        components: {
            Carousel,
            Slide,
            Pagination,
            Navigation
        },
        data() {
            items: [
                {
                  title: 'Carousel Slider',
                  description: 'Carousel를 이용한 이미지 슬라이드 효과',
                  menus: [
                    {
                      image: require('../assets/images/slider01.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    },
                    {
                      image: require('../assets/images/slider02.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    },
                    {
                      image: require('../assets/images/slider03.jpg'),
                      alt: 'image1',
                      caption: 'Responsive Site',
                      description: '슬라이드 플러그인을 이용한 반응형 이미지 슬라이드'
                    }
                  ]
                }
            ]
        }
    }
</script>

이후 간단한 CSS조작만 해주면 간단하게 이용할 수 있다.

Available Props