GIS 데이터 시각화GIS 데이터를 다루면서 시각화 렌더링시에, 위도/경도가 어느 지역에 속하는지 분류하는데 예를 들면 다음과 같다.지역1: (127.123, 36.231), (127.154, 36.271), (127.203, 36.181)지역2: (127.423, 36.531), (127.454, 36.571), (127.503, 36.581) (경도, 위도) 가 특정 지역에 적중하는지 판단하는 알고리즘은 d3.geoContains 같은 게 있다.d3.getContains는 내부적으로 어떤 알고리즘을 사용할까? 이름만 들어보자. Ray-Casting: 다각형 내 포함 여부를 판단하기 위해 주로 Ray-Casting 알고리즘을 사용합니다. 이는 주어진 점에서 임의의 방향으로 반직선을 그렸을 때, 다각형의..

지도 데이터, 시각화2024.10.01 - [JS,Node,React] - React, D3.js를 이용한 지도 시각화 React, D3.js를 이용한 지도 시각화지도 시각화 방법네이버, 카카오, Mapbox 등 지도 데이터를 제공하는 api를 활용한다면?장점 - 지도를 그릴 필요 없고, 적은 코드로 시각화 기능을 구현할 수 있다.단점 - 기본 디자인을 바꾸기 어렵cornpip.tistory.com저번에 지도 데이터에 대해 약간 다루었다.원하는 지도 데이터를 얻기 위한 mapshape 명령어를 더 살펴보자. https://github.com/vuski/admdongkor대한민국 행정동 GeoJson을 받고 https://mapshaper.org/mapShaper 웹 콘솔에 명령어를 입력하며 원하는 지도 ..

지도 시각화 방법네이버, 카카오, Mapbox 등 지도 데이터를 제공하는 api를 활용한다면?장점 - 지도를 그릴 필요 없고, 적은 코드로 시각화 기능을 구현할 수 있다.단점 - 기본 디자인을 바꾸기 어렵고, 원하는 시각화 기능이 없을 수 있다. 사용량에 따라 요금이 부과될 수 있다. svg나 canvas 같은 도화지에 지도부터 그린다면?장점 - 그려지는 모든 요소를 컨트롤할 수 있고, d3 같은 시각화 라이브러리를 사용하면 동적인 그래픽을 만들 수 있다.단점 - 더 많은 코드와 더 많은 상태 관리가 생긴다. 지도 데이터 준비아무튼 지도를 직접 그리기로 했다면 지도 데이터에 대해 알아보자.GeoJSON, TopoJSON 특징GeoJSONTopoJSON데이터 구조단순한 지리적 구조 (점, 선, 다각형)토폴..

문제 Message 하나를 우클릭해서 contextMenu 열고 닫을 때 마다 모든 Message 가 재실행된다. //Chat.tsx const [menuState, setMenuState] = useRecoilState(contextMenuState); ... return ( {user.sub !== "0" && {menuState.show && } } ) Chat 컴포넌트 구성은 다음과 같고 Messages 안에는 Message 컴포넌트가 있다. //Message.tsx const [menuState, setMenuState] = useRecoilState(contextMenuState); ... const msgPContextHandler = (e: React.MouseEvent) => { e.pr..

onContextMenu 우클릭 박스는 onClick말고 onContextMenu가 따로 있다. export const Wrapper = styled.div` width: 80px; background-color: rgb(58, 58, 58); border-radius: 10px; box-shadow: 0 12px 35px rgba(0, 189, 25, 0.2); position: absolute; left: ${props => props.x}px; top: ${props => props.y}px; ` export const Menu = styled.ul` padding: 1px 2px; margin: 0; ` export const Item = styled.li` list-style: none; fon..

Each child in a list should have a unique "key" prop. {responseMsgArr.map((responesMsg, idx) => { const createAt = new Date(responesMsg.createdAt); return ( {responesMsg.text} {`${createAt.getHours().toString().padStart(2, "0")}:${createAt.getMinutes().toString().padStart(2, "0")}`} ) })} 다음 상황에서 자식요소에 unique key를 달라는 에러가 나온다. {responseMsgArr.map((responesMsg, idx) => { const createAt = new Date..

const Messeges = () => { { reMsgArr.map((v: responseMsgDto[], idx) => { return }) } setInputMsg(e.target.value)} onKeyDown={keyDownHandler} /> Send } 위와 같은 구성에서 textArea 변경할 때 setInputMsg 돌면서 Messages 재실행 그리고 Message 도 재실행된다. Message 컴포넌트는 inputMsg 값과는 무관한 컴포넌트이고 재실행 될 이유가 없으므로 export default memo(Messege); 다음과 같이 React.memo를 붙여 export 해준다. textArea 변경해도 Message는 재실행되지 않는다.

chat 어플리케이션을 만들면서 한 User의 연속 채팅일 때는 프로필을 첫 채팅에만 보이려고 한다. 그래서 [ responseMsg, responseMsg, responseMsg ... ] 를 [[ responseMsg, responseMsg ], [responseMsg, responseMsg responseMsg ...]] 이런 형태로 바꿔야 한다. 앞의 메세지 주인과 뒤의 메세지 주인이 같다면 한 배열에 있도록 자기 앞 인덱스의 상태를 기억하고 있어야 하기에 누산기인 reduce가 생각났다. useEffect(() => { if (msgArr.length != 0) { const resArr: responseMsgDto[][] = []; let cacheArr: responseMsgDto[] = [..

React hook 최적화 React.memo useCallback useMemo