본문 바로가기

전체 글22

아이폰 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.
[크로스브라우징] safari fixed bug - 키보드 오픈 시 * 해당 문서는 vuejs를 기반으로 작성되었습니다. * safari는 항상 예상치 못한 곳에서 버그가 발생합니다.. 🥲 간단한 수정 요청이였는데, 해당 버그로 시간을 많이 잡아먹었습니다..만! 그래도 해결해서 글을 작성하게 되었습니다. container에 fixed bottom 0 을 설정해 둔 상태에서 키보드 오픈 시 container가 키보드 뒤로 가려지는 현상이 발생했습니다. (코드는 핵심 코드만 약식으로 작성) .modal{ width: 100vw; height: 100vh; position: fixed; bottom: 0; background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; z-index: 9; } .container{ width: 100%; he.. 2022. 10. 18.
여러개의 object를 중복 없이 하나의 object로 합치기 해당 글은 lodash를 사용합니다. 우선 여러개의 object를 만들어줍니다. const a = { A: ['1', '2'], B: ['3', '4'] } const b = { A: ['2', '3'], B: ['3', '4'] } const c = { A: ['5', '6'], B: ['4', '5', '8'] } 위 object들을 하나의 object로 합쳐줍니다! const res = lodash.merge(a, b, c) console.log(res) /* --------------------------- */ { A: ['1', '2', '2', '3', '5', '6'], B: ['3', '4', '3', '4', '4', '5', '8'] } 여기서 결과값을 보면 배열 안에 중복된 값들이 .. 2022. 8. 16.
SCSS mixin css에 반복적으로 사용되는 속성들을 묶어 함수처럼 호출하는 방식 선언 @mixin name{ // code } // 또는 @mixin name($arg, $arg1, $arg2, ...) { // code } 호출 div{ @include name; } // 또는 div{ @include name(arg1, arg2, arg3, ...); } 예제 기본값 셋팅도 가능! // 기존 css div { padding: 0 24px; color: green; background-color: blue; } // mixin을 사용하면 // 선언 @mixin name($arg, $arg2: red, $arg3: blue){ padding: $arg; color: $arg2; background-color: $arg.. 2022. 8. 1.
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.

티스토리툴바