방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글674 [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. [Vuejs] vuex 설정시 만날 수 있는 경고(warn) vuejs 3버전에서 vuex를 연습하기 위해서 이곳저곳의 글을 참조하여 연습하던 중 만난 경고 문구 입니다. [Vue warn]: A plugin must either be a function or an object with an "install" function. 분명 시키는데로 했는데..왜 이러한 경고 문구가 발생하는지.. SPA의 기술이 이럴 때 마다 참 아쉽습니다. 기존의 개발방식이나 방법을 아에 없애는 경우도 허다하니까요. 아무튼, 해당 문제의 원인은 Vuex를 use 라는 함수에 넣어서 발생한 경우 였습니다. 해당 기능을 설명하는 vuex의 index.d.ts 타입스크립트를 따라가봐도 Vuex로 시작하는 export하는 구간은 없습니다. 제가 vuex 연습을 위해 참고 하였던 해당 포스팅에서.. 2023. 3. 17. [Vuejs] 글로벌 컴포넌트 등록시 경고(warning compilerOptions isCustomElement) 컴포넌트를 부트스트랩하는 파일에서 글로벌하게 등록하여 사용하면 다른 컴포넌트에서 별도의 import 없이 해당 컴포넌트를 어디서든지 불러올 수 있습니다. 아래는 메인 동작(부트스트랩, bootstrap)을 담당하는 샘플 파일모습 입니다. import { createApp } from 'vue' import App from './App.vue' import './assets/main.css' import 글로벌하게사용할컴포넌트 from './경로/이름.vue'; const app = createApp(App); app.component('별명', 글로벌하게사용할컴포넌트); //"별명" 값으로 글로벌하게 사용 합니다. app.mount('#app'); 요렇게 등록을 하고나면 따로 import하는 곳 없이 해.. 2023. 3. 15. 이전 1 ··· 4 5 6 7 8 9 10 ··· 113 다음
