본문 바로가기

Nuxtjs10

[Nuxtjs]Lottie json 적용하기

1. 설치 yarn add vue-lottie@0.2.1 2. 컴포넌트 작성 import Lottie from 'vue-lottie/src/lottie.vue'; import * as tearChildsLottie from 'assets/img/tear-child-lottie.json'; import * as noTearChildsLottie from 'assets/img/no-tear-child-lottie.json'; export default { name: '오예~', components: { Lottie, }, data() { return { tearlottieOptions: { animationData: tearChildsLottie.default, loop: false, }, noTearlot.. 2022. 8. 9.

[Nuxtjs] @vue/unit-tests 환경 만들기

간신히 해냈다. nuxt 프레임워크를 사용해서, @nuxt/unit-tests를 사용해야 할 것 같지만, 공식 문서에 내용이 부족하고, 레퍼런스가 부족하여, @vue/test-utils를 사용하였다. (nuxt.js의 공식 문서는 빠진 부분이 정말 많은 것을 매번 기능을 추가하면서 느끼는 부분이다. 정말 짜증나게 시간을 잡아먹게 된다.) 테스트 코드 실행 성공 방법 참고: https://test-utils.nuxtjs.org/setup 참고: https://heropy.blog/2020/05/20/vue-test-with-jest/ 1. 설치 @vue/test-utils로 작업했다. @babel-core: 7 버전 이상을 사용하라. yarn add --dev @vue/test-utils@1.2.1 추가 .. 2022. 7. 13.

[Tiptap + Nuxtjs] 에디터 구현하기

Tiptap https://tiptap.dev/ 에러 RangeError: Adding different instances of a keyed plugin (plugin$) 기능 만들기 Youtube 넣기 작업 결과 https://tiptap.dev/api/nodes/youtube YouTube – Tiptap Editor tiptap.dev 컴포넌트 코드 import { Editor, EditorContent } from '@tiptap/vue-2'; import StarterKit from '@tiptap/starter-kit'; import Youtube from '@tiptap/extension-youtube'; export defualt { name: "TiptapComponent", mount.. 2022. 7. 13.

[Nuxtjs] 뒤로가기 기능 구현 방법

뒤로가기 방법 window.history.go(-1) 이 방법을 사용하면, 이전 페이지에 스크롤 위치로 돌아간다. 무한 스크롤을 적용하고 있는 목록이라면, 상세페이지 접근 -> 목록 페이지로 돌아왔을 때, 스크롤 위치를 보존할 수 있다. nuxt-link 컴포넌트를 사용 목록페이지로 이동만 해준다. 스크롤은 최상단으로 간다. 2022. 6. 23.

[Nuxt.js] 무한 스크롤 구현한 사례

개요 Nuxt.js에서 무한 스크롤을 구현한 방법을 소개한다. 무한 스크롤 구현에 사용한 기술은 Javascript에 new IntersectionObserver 이다. 이 객체는 html element를 지정할 수 있으며, viewport에 얼만큼 노출되느냐를 옵션으로 설정해서 사용자가 지정한 함수를 호출할 수 있게 해준다. 컴포넌트 구조 components +- List.vue 👈 목록 데이터를 패치해서 store에 저장함 +- ListItem.vue 👈 observe 객체가 있음. 함수가 첫 호출됨 pages +- index.vue 👈 첫 번째 페이지 목록 데이터를 패치받음 pages/index.vue 첫번째 페이지네이션 page=1페이지 목록 데이터를 받아온다. template script imp.. 2022. 6. 1.

[nuxtjs] $auth auth._token_expiration.local

개요 auth와 nuxt/axios를 사용 중입니다. auth에 토큰 올려두고, axios로 요청을 보내는데, 유효기간이 만료되면, 토큰은 남아있고, auth._token_expiration.local에 유효시간이 만료되면, auth._token_expiration.local가 false가 되고, 로컬 스토리지에 토큰은 남아 있는 일이 발생했습니다. auth._token_expiration.local가 false처리가 된 경우, 브라우저에서 일어나는 일은.. - 로그아웃 됨. $auth.loggedIn = false - 로컬스토리지에 토큰이 남아 있음. 문제 여기서, 문제는 로컬스토리지에 토큰이 사라지지 않고 남아 있다는 겁니다. 그래서, axios에서 이 남아 있는 토큰으로 요청을 보내다보니, 아래와 .. 2022. 5. 18.

[nuxtjs + auth] 로그아웃 리다이렉트 페이지 이동 방법

nuxt auth를 사용하다가, 회원 탈퇴를 구현할 일이 있었다. 탈퇴가 되면, 탈퇴 확인 페이지로 넘어가야 한다. 그런데, 계속 '/'로 라우팅되는 것이었다. this.$auth.logout();를 할 때 그랬다. 로그아웃 하면, '/'로 돌아가는 건 좋은데, 회원 탈퇴 페이지에서만큼은 '/탈퇴 완료' 페이지가 보여야 하는 요구사항이었다. 그래서 첫 번째로 알아보았다. -> 스택오버플로우 plugins/auth.js는 nuxt.config.js에서 plugins에 등록하는게 아니라, auth.plugins에 등록해야 한다. nuxt-auth 문서 링크 되었다. 2022. 5. 17.

[nuxtjs + service worker] 구현 방법

nuxt/pwa: https://pwa.nuxtjs.org/ OneSignal Module: https://github.com/nuxt-community/onesignal-module nuxt/pwa 기능 오프라인 캐싱에 대해서 service worker를 등록하게 해준다. manifest.json 파일을 자동으로 생성해 준다. 검색 엔진 최적화에 친근하게 meta data를 추가할 수 있다. 앱 아이콘을 다른 크기로 자동으로 만들어 준다. OneSignal을 사용해서 푸시 알림을 사용 가능 OneSignal Module 웹 사이트와 모바일 애플리케이션을 위한 notification service를 푸시하는데 사용된다. 2022. 5. 16.

[nuxtjs] fetch

두 가지 경우에 호출되어 실행되는 훅 - 서버 사이드 렌더링을 위해 서버에서 화면을 구성할 때, - 브라우저에서 URL 주소 변경으로 페이지를 이동할 때 fetch 실행 시점 created() 훅 -> fetch() 훅 -> mounted() Nuxt lifecycle 참고 https://nuxtjs.org/docs/concepts/nuxt-lifecycle/ 2022. 4. 21.

[Nuxtjs&Vuejs]AWS S3 업로드한 파일 브라우저에서 다운로드 버튼으로 다운로드 하는 기능 만들기

요규사항 사용자가 s3에 업로드한 파일을 브라우저 상에서 버튼을 클릭해서 다운로드 Vue 컴포넌트 파일 구현 코드 html 저장 · 다른 이름으로 저장 script export default ({ // ... async mounted() { await fetch(this.feedback.attachment, { method: 'GET' }) .then(res => { return res.blob(); }) .then(blob => { const url = window.URL.createObjectURL(blob); this.$refs.save.href = url; }); }, }) 2022. 4. 15.

티스토리툴바