방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/뷰(Vuejs)20 [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. [Vuejs] vuex subscribe 함수 vuex에서 세션 스토리지나 로컬 스토리지를 사용하기 위해서 이것저것 뒤지던 중 "vuex-persistedstate" 플러그인을 추가하면 된다는 내용을 찾았습니다. 그래서 해당 플러그인을 찾기위해 npm을 검색하고 내용을 읽어보려 클릭하였는데.. 아아...deprecated 되버린 문구를 보고선 바로 마음을 접었습니다. 사용 할 수는 있겠지만 굳이 그러고 싶지 않았기 때문 입니다. 아무튼 조금더 편한 방법이 없을까 하여 뒤져보던중 구독(subscribe) 함수가 있는 것을 발견 하였습니다. 구독(subscribe) 하기 함수는 구현한 스토어 객체에 대해서 값의 변화 유무에 대해서 변화한 행동을 감시(watch) 하는 기능 입니다. RXJS에서의 subscribe와 거의 비슷한 기능이라서..구현 방법은 .. 2023. 3. 20. 이전 1 2 3 4 다음
