VUE6 아이폰 Safari 뒤로가기시 alert 동작 안하는 이슈 안녕하세요.오늘은 테스트 중 발견된 이슈에 대해 기록을 남겨볼까 합니다. 현재 프론트 개발 환경은 Nuxt3 + Vue3 입니다.router의 경우 vue-router를 사용하고 있습니다.우선 오늘 발견된 이슈는 제목에 적어놓은 것과 같이아이폰 safari에서 페이지 A 진입 -> 뒤로 가기 하고 나면 alert과 confirm 등 system에서 띄우는 창들이 안 뜨고 먹통이 되고, 새로고침을 하면 정상 동작하는 이슈입니다. (맥에서는 정상 동작합니다.. 항상 모바일이 문제 ㅠㅠ)우선 특정 페이지만 그런 건지 확인해 봤는데,전체 페이지에서 동일한 이슈가 발생하는 것을 확인했습니다. 그래서 여러 가지 서칭해 본 결과!safari에서 활용되는 bfcache와 관련이 있다는 것을 알 수 있었습니다.bfcac.. 2024. 7. 25. Nuxt middleware 활용해 특정 페이지 진입시 로그인 확인 처리 // middleware/auth.js import { useAuthStore } from '~/store/auth.js'; export default defineNuxtRouteMiddleware((to, from) => { const useAuth = useAuthStore(); const isLoggedIn = useAuth.user !== null; if (!isLoggedIn) { return navigateTo('/login'); } }); //page.vue 로그인 체크를 원하는 페이지 (로그인 해야만 접근 가능한 페이지)에 auth라는 middleware를 사용해주면 됩니다. 위 코드에서는 isLoggedIn 이라는 변수로 체크해서 로그인이 안된 경우 navigateTo를 통해 로그인 페이.. 2024. 3. 29. nuxt vue2 라이브러리 window is not defined 해결 기존 php 기반 legacy에서 nuxt 로 마이그레이션 하면서 vue-scroll-picker를 nuxt vue2에서 사용해야하는 상황 1. 우선 제공받은 가이드대로 바로 local components 에 추가했다. 결과는..... window is not defined 500error로 접속되지 않았다. 2. nuxt에서 개발하면서 가장 많이 접해본 window is not defined. 제일 간편하게 사용했던 아래 방법으로 진행해보았다. 결과는 똑같이 window is not defined. 아직 원인을 찾아보지는 못했지만, 아마 ScrollPicker 자체에서 랜더링 전에 window를 호출하는게 아닐까 의심중이다. 3. 혹시몰라서 components를 비동기방식으로 import 해보았다. .. 2022. 6. 28. vue-scroll-picker@vue2 ios 스타일의 timepicker를 알아보던 중 발견한 라이브러리입니다. 단일 scrollpicker를 여러개 이어 붙여서 하나의 timepicker를 만들었습니다. 라이브러리 설치 npm i --save vue-scroll-picker@vue2 실제 사용 코드 import { ScrollPicker } from 'vue-scroll-picker' import 'vue-scroll-picker/dist/style.css' const AMPM = [ { value: '오전', name: '오전' }, { value: '오후', name: '오후' } ] export default { name: 'CommonTimeScrollPicker', components: { ScrollPicker }, data().. 2022. 6. 16. axios 사용법 보편적으로 많이 사용하고 있는 http 비동기 통신 라이브러리입니다. 프론트엔드와 백엔드의 통신을 쉽게 해줍니다! 예전 프로젝트에서는 ajax를 사용했지만, 현재는 axios만 사용하고있습니다. 여러가지 특징이 있지만, 가장 편리한점은 응답 데이터를 JSON 형태로 자동 변경해준다는 점인데 프론트엔드에서 따로 데이터를 가공할 필요 없이, 백엔드에서 내려주는 데이터를 바로 활용할 수 있다는 점이 참 편리합니다. - 제가 사용중인 axois 기본 틀 - //axios.post(url, data) axios.post('/api/test/', { _method: 'get', name: name, content: content, }) .then((response) => { console.log(response) .. 2022. 4. 7. vue scss v-deep (scope 유지) 일반적으로 vue에서 style 에 scoped 속성을 사용한다. *scoped : 해당 컴포넌트에만 style 적용. scope 속성으로 style이 적용 된 경우, v-html로 작성된 태그에는 style이 적용 되지 않는데 v-deep을 사용하면 scoped 속성을 유지 하면서 v-html로 작성된 태그에 스타일 효과를 적용할 수 있다. 2021. 11. 24. 이전 1 다음
