react (4) 썸네일형 리스트형 [WEB] #5. 캔버스에 스파이뷰 추가하기 지도기반의 위치정보를 표출하는 웹서비스를 오랫동안 개발하면서 openlayers(ol)를 정말 잘 활용했었다. openlayers에 layer spy라는 예제가 있었는데, 이 로직을 기반으로 캔버스를 이용하여 스파이뷰를 작업해 보았다.캔버스에 이미지를 올리고, 이미지에 벡터영역을 그리기 위해 위치를 잘 잡을 수 있도록 가이드라인과 스파이뷰가 필요해졌다.캔버스에 마우스오버 시 확대된 스파이뷰를 표현할 예정이다.#0. 실행환경[WEB] #4. 캔버스 이미지 처리 프로젝트에 덧붙여 진행1차로 새로운 캔버스를 생성하여 작업했으며,가능하다면 ol처럼 레이어 관리를 통해 진행해 볼 예정이다.#1. 디렉터리 구조...∨ canvas/ ... > interaction/ > guideLine... [React-Antd]#1. upload render 디자인 커스텀하기 서론 React 기반으로 백오피스 구축하다보면 빠른 개발을 위해 ant.design을 사용하는 경우가 종종있다. 빠르게 사용하기위해 제공되는 디자인을 이용하지만, 간혹 커스텀이 필요한 경우도 발생한다. ant.design 에 문서가 잘 나와있지만, 나중에 참고하기위해 정리하고자한다. 최신버전이 아닌 4.1x 버전의 라이브러리를 사용하고있다. 기본 antd Upload.Dragger는 파일업로드 폼과, 파일 리스트 폼 구조가 따로있다. 자사에서 사용중인 화면은 단건 업로드로, 업로드 후 업로드폼이 사라지고 파일리스트가 나타나야하기때문에 그부분도 추가 작업했다. antd 속성을 이용한 커스텀과, itemRender에서 직접커스텀하는 두가지 방식으로 정리 했으며, 카드형 타입으로 사용 #0. 실행환경 reac.. [WEB] #2. jotai 세팅 및 활용하기 # 서론 초기 angular로 개발하다가 React로 변경하게 되면서 redux를 많이 들었었다. 짧은기간에 환경세팅부터 통합테스트까지 진행해야 한다는 핑계로 react도 튜토리얼을 건너뛰고 진행했었고, 때문에 redux는 아예 배제하고 개발을 진행했었다. 다행히(?)도 openlayers를 이용한 지도기반 사이트 구축을 중심으로 했기 때문에, 전역상태관리 패키지가 없어도 진행할 수 있었다. ( 전역변수로 사용될 map 컴포넌트안에서 모든 위젯 컴포넌트 호출.. ) React가 점차 성장하면서 redux, contextAPI, recoil 그리고 jotai 등 다양한 상태관리 패키지들이 나타나고있다. 그 중 jotai 를 이용하여 웹지도를 다시 구현해보려고 한다. openlayers와 vworld api.. [WEB] #1. 무한스크롤 만들기 무한스크롤을 아직까지 사용해본 적은 없으나, 기술연습이나 과제 등으로 활용되어 정리하고자 함 #1. element 속성을 이용한 무한 스크롤 #2. Intersection Observer API를 이용한 무한 스크롤 #2.1. IntersectionObserver API (component) #2.2. useIntersection Hook #1. element 속성을 이용한 무한 스크롤 document.documentElement.scroll 속성을 이용하여 활용한 방식으로 예전에 많이 활용하던 방식 리스트 중 특정 데이터 자동 포커싱 등에 활용 그림1. 은 html로 그려지는 요소(element) 의 사이즈 속성 정보를 표현 브라우저에 나타나는 부분을 viewport 라고 볼 때, clientHeigh.. 이전 1 다음
