방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰108 [Vuejs] router view 그리고 transition 적용 잘 안될 때 vuejs 3버전에서 RouterView와 Transition을 힘들게 적용하여 보았습니다. 라우터 뷰(router-view) 에서 이넘의 트랜지션(transition)을 적용하는게 생각보다 어려웠었습니다. 공식 사이트에서도 정말 간단하게 설명해서..참.. 아래는 개발 환경에 사용된 package.json 파일의 일부 내용 입니다. * 파일이름 : package.json { "dependencies": { "vue": "^3.2.47", "vue-router": "^4.1.6", "vuex": "^4.1.0" }, "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "vite": "^4.1.4" } } 그리고 아래 코드는 공식 사이트에 설명된 router에 tr.. 2023. 4. 4. [Vuejs] vuex보다 편한 pinia에서의 세션 스토리지(sessionStorage) 적용 방법 vuex 환경에서 세선스토리지(sessionStorage)나 로컬스토리지(localStorage)를 사용하기 위해서는 아래와 같은 방법을 사용 하였습니다. 1. window 객체인 sessionStorage를 직접 적용하여 줍니다. 2. vuex-persistedstate 모듈을 추가 합니다(npm i vuex-persistedstate) 3. pinia-plugin-persistedstate 모듈을 추가 합니다(npm i pinia-plugin-persistedstate) 첫번째 방법은 일단 손도 많이가고 간단한 설정을 할 수 없기에 두번째 방법을 주로 사용하는데.. vuex-persistedstate 모듈(라이브러리)을 사용하기 위해 npm에 접속 해 보았더니.. 디프리케이티(deprecated)드 .. 2023. 4. 3. [Vuejs] 타입스크립트(Typescript) 적용, 모듈 또는 해당 형식 선언을 찾을 수 없습니다. * 개발도구 : vs코드(VSCode) * 운영체제 : 윈도우 뷰에서 타입스크립트(typescript)를 적용해 보았는데 아무 행위도 안했는데 만났던 오류 입니다. 난 그저 단지 설치하고 소스코드를 눌러서 보려고 했을 뿐 인데.. 뭐...라는거지 이해가 안되었습니다. 아무것도 안했는데 저러한 오류가나니...프로젝트를 다시 생성 해 보기도하고, 캐쉬클린까지 해 보았었습니다. 좀더 당황스러운 것은 저 상황에서도 빌드나 실행은 잘 되었습니다. 그래서 문뜩 든 생각이 "개발 도구 설정에 문제가 있겠다" 였습니다. 구글링을 하여보니 역시나 위 현상은 개발도구에서의 문제로 설명하고 있으며, 개발도구가 VS코드 인 경우 만날수 있다고 나와 있습니다. 이를 해결하기 위해서는 아래 단계를 따라가도록 합니다. 1. Ctr.. 2023. 3. 24. [Vuejs] 카카오맵, 티맵 API 길 찾기 연동 뷰(Vuejs) 환경에서 카카오맵과 T맵 API를 간단하게 연동하는 방법 입니다. 이러한 외부 서비스를 사용하기 위해서는 해당 API를 검색하여 가입을 한 뒤에 사용할 컴퓨터 IP를 등록하고, 등록된 인증 키를 받아서 호출해야 합니다. * 카카오맵 API 가입 및 키 받는 방법 https://apis.map.kakao.com/web/guide * 티맵 API 가입 및 키 받는 방법 https://tmapapi.sktelecom.com/main.html#webv2/guide/apiGuide.guide1 각각의 키를 받은뒤에는 해당 라이브러리를 등록 해 주어야 합니다. 웹 기반 환경 이므로 추가로 설치하는 것은 없습니다. * 대상(부트스트랩하는 html 파일) : index.html 위 스크립트 테그에서 잊.. 2023. 3. 23. [Vuejs] vite 환경에서 프록시(proxy) 설정 일반 서버와의 개발 환경 구성을 위해서는 역시 프록시 설정을 해 주어야 합니다. 서버에서 교차출처 리소스 공유(cors)를 허용 해 주는 것도 방법이 될 수 있겠습니다. 방법은 아주 간단합니다. vite 설정 파일에 아래와 같이 추가를 해 주면 됩니다. * 파일이름 : vite.config.js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToP.. 2023. 3. 22. [Vuejs] vuex 에서 "namespaced" 의 중요성 vuex에서 여러개의 store를 사용하려면 1개의 기본이라 할 수 있는 스토어(store) 객체를 만들고 모듈(modules) 라는 속성에 만들어준 store를 추가하면 됩니다. 아래는 샘플 사진 입니다. 여기서 아무 생각이 없었던 것이 바로 저 네임스페이스(namespaced) 항목 이였습니다. 아에 스토어(store) 객체에 추가조차 안했었습니다. 간단한 샘플 코드에서도 크게 언급을 안했었으니까요.. * 공식문서에는 설명이 나와있었죠..ㅠ 네임스페이스의 디폴트 값은 거짓(false)이며 해당 값이 true 와 false 인 경우에 차이는 분명 했습니다. 먼저 네임스페이스(namespaced) 속성을 주지 않는 경우에 헬퍼로 불리우는 맵뮤테이션(mapMutations)의 모습 입니다. 네임스페이스를 .. 2023. 3. 22. 이전 1 2 3 4 5 6 ··· 18 다음
