오식랜드

모듈 설치 yarn add -D @nuxtjs/style-resources nuxt.config에서 불러오기 { buildModules: [ '@nuxtjs/style-resources', ], styleResources: { scss: [ '@/assets/styles/_mixin.scss', '@/assets/styles/_colors.scss', ], } }

@nuxtjs/device 모듈 설치 npm i @nuxtjs/device yarn add @nuxtjs/device nuxt.config에서 모듈 추가 modules: [ '@nuxtjs/device' ], 사용 (v-if 등) $device.isDesktop $device.isMobile $device.isTablet $device.isMobileOrTablet $device.isDesktopOrTablet $device.isIos $device.isWindows $device.isMacOS $device.isAndroid $device.isFirefox $device.isEdge $device.isChrome $device.isSamsung $device.isCrawler

라이브러리 설치 npm install express --save npm install body-parser npm install mongodb npm install @nuxtjs/axios -save 옵션을 사용해서 설치된 Node 모듈은 package.json 파일 내의 dependencies 목록에 추가된다.프로젝트 디렉토리에서 npm install 실행시 종속 항목 목록의 모듈은 자동으로 설치됨. nuxt.config 파일에 선언 serverMiddleware: ['~/api/index.js'], modules: ['@nuxtjs/axios'], axios: { proxy: true }, ~/api/index.js 파일 생성 후 Express 코드 작성 const MongoClient = requi..

어떨 때 쓰면 좋을까 Image Lasy loading 구현할 때 Content Lasy loading 구현할 때 Infinite scrolling 구현할 때 화면에 보이는 요소 에니메이션 처리할 때 구문 const observer = new IntersectionObserver(callback, options); 메서드 observe, unobserve, disconnect 메서드를 주로 사용하게 된다. observe(targetElement): 타겟 엘리먼트에 대한 관찰을 시작할 때 사용합니다. unobserve(targetElement): 타겟 엘리먼트에 대한 관찰을 멈출 때 사용합니다. disconnect(): 다수의 엘리먼트를 관찰하고 있을 때, 이에 대한 모든 관찰을 멈추고 싶을 때 사용합니다..

라이브러리 설치 npm install cookie-universal-nuxt --save nuxt.config.js modules: [ 'cookie-universal-nuxt', ], method const data = { anything: 'you want', } this.$cookies.set('thing', data, { path: '/', maxAge: 60 * 60 * 24 * 7 }); this.$cookies.get('thing');

ref에 스와이퍼의 이름을 부여해준다 @slideChange에 함수를 불러온다 함수에서는 this.$refs.mySwiper.$swiper.activeIndex 를 사용해서 현재 인덱스를 불러올 수 있다~ slideChange() { console.log(this.$refs.mySwiper.$swiper.activeIndex) }