방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/리엑트(React.js)9 리코일 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. 리엑트 파이어베이스 데이터 저장소 연동(React firebase firestore) 리엑트에서 파이어베이스 데이터 저장소를 연동하는 방법을 소개 합니다. 파이어베이스에서 제공하는 데이터베이스는 클라우드형식의 저장소로 어디서는 접근이 가능한 장점이 있기 때문에 포트폴리오나 간단한 웹으로도 많이 쓰이는 것 같습니다. : - ) 연동단계는 아래와 같습니다. 파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득 > 로그인 등록 > 리엑트 프로젝트에 Lib 설치 > 사용 > 인증 써 놓고보면 단계가 상당하지만 천천히 하다보면 그렇게 어렵지 않습니다. #1. 파이어베이스 가입 > 프로젝트 생성 > 저장소 생성 > 인증정보 획득 먼저 파이어베이스에 가입해야 합니다. 네이버나 구글 검색엔진에 "firebase" 라고 입력을 한 뒤 가입하도록 합니다. 이때 구글계정이 필요합니다. 그리고.. 2021. 12. 8. 리엑트 익스플로러 동작(React explorer) 리엑트를 익스플로러에서 동작 시키는 방법 입니다. #첫번째 ───── 먼저 아래 모듈을 설치하여 줍니다. npm install react-app-polyfill package.json에서 설치되었는지 확인합니다. #두번째 ───── 다음으로 설치된 모듈을 index.js에 추가하여 줍니다. 여기서 index.js는 가장 먼저 부트스트랩(bootstrap)되는 파일을 의미 합니다. 이름을 바꾸셨다면 아래 사진처럼 리엑트와 관련된 내용이 있는 파일을 찾아서 수정하시면 됩니다. // IE11의 경우 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; #세번째 ───── 그리고 캐쉬라는 디렉토리를 제거 합니다. 위치는 node_module.. 2021. 5. 3. 리엑트 후크(React Hook) useEffect cleanup function 리엑트를 개발하면서 만난 경고(Warning)입니다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup 이러한 경고(오류)가 나오는 원인은 페이지 이동 이벤트(routing)가 일어나면서, 기존의 useEffect 내부의 내용이 이미 지나버린 페이지에 대해서 동작하였기 때문입니다. 아래와 같은 코드가 있었습니다. const [myData, setData] = useSt.. 2021. 4. 22. 이전 1 2 다음
