방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰108 [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. 리코일 set, get 그리고 async(recoil get set async) 리코일에서 제공하는 함수 중 셀렉터(selector)가 있습니다. 요녀석은 리코일의 set, get 기능을 편리하게 사용 할 수 있게 해주는 기능 입니다. 또한 다양한 리코일의 상태(atom)을 키 값을 통해서 반환 하기도 합니다. 이번에 만난 이슈는 리코일의 셀렉터(selector)를 활용 할 때의 동기화 이슈 였습니다. 아래와 같이 세션 스토리지에 간단하게 사용자 정보를 저장하는 기능을 구현 하였습니다. import { atom, selector, } from "recoil"; import { recoilPersist } from 'recoil-persist'; //yarn add recoil-persist //리코일 상태값을 "sessionStorage" 에서 적용하게 합니다. const { per.. 2023. 3. 6. React Drag and Drop 기능구현 시 주의 할 점(드래그 앤 드롭) 리엑트에서 파일 드래그 앤 드롭 기능을 구현하기 위해서 아래 속성을 부여하여 보았습니다. * onDrop : 대상이 드랍되면 이벤트가 발생 합니다. * onDragEnter : 드래그한 대상이 드랍영역에 다다르면 이벤트가 발생 합니다. * onDragLeave : 드래그한 대상이 드랍하지 않고 떠나는 경우 이벤트가 발생 합니다. import Reactfrom 'react' import '../App.css'; function DragAndDrop() { const dragFunction = (event, type) => { event.preventDefault(); event.stopPropagation(); console.log(type) } return dragFunction(event, 'drop'.. 2022. 6. 14. 리엑트 + 오픈레이어스(React Openlayers) 리엑트에서 오픈레이어스(Openlayers)를 적용하는 방법 입니다. 오픈레이어스(Openlayers)는 지도와 관련된 라이브러리 입니다. 지형정보 서버로부터의 맵 이미지를 받아서 네이버나 구글지도같은 기능을 구현하여 줍니다. 오픈레이어스는 NPM명령어를 통해서 쉽게 설치할 수 있습니다. npm install ol 오픈레이어스는 버전 4 부터 ECMA6문법을 적용한 클래스형태의 구조로 되어 있습니다. 그러므로 오픈레이어스 버전 3이하의 문법을 사용하신 분 이라면 함수명이 비슷 할 지라도 다소 차이가 있겠습니다. 간단하게 맵을 그려보겠습니다. 설치가 완료되고 나면 기본적인 클래스를 import 하여 줍니다. import 'ol/ol.css'; //스타일 import { Map as OlMap, View }.. 2021. 12. 10. 이전 1 2 3 4 5 6 7 ··· 18 다음
