에러 발생 Formik을 사용하면서 SelectBox에서 선택한 text가 input 창에 입력되지 않는 오류가 발생했는데, 크롬 console창에는 다음과 같은 오류가 나타났다. A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 에러 원인 input 태그의 value가 undefine..
Node 서버의 비정상적인 종료 express를 가동중에 터미널창이 비정상적으로 사라지면서 http://localhost:6001이 백그라운드에서 계속 가동되는 상황이 발생되었다. yarn start로 서버를 재기동했지만 에러가 발생하여 백그라운드에 실행중인 서버를 종료 해야했다. CMD 창에서 강제 종료하기 단건 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 현재 실행중인 목록을 볼 수 있다. netstat -ano 종료하고싶은 포트번호의 PID값을 입력하면 포트가 강제 종료된다. taskkill /f /pid 피드번호 # ex) taskkill /f /pid 7518 전체 종료하기 윈도우 cmd 창에서 아래 명령을 입력하면 실행중인 모든 노드를 종료시킬 수 있다. Taskkill/IM node...
비어있는 공간 채우기 openLayers를 통해 지도를 표출하니 지도에 조그마한 점이 군데군데 보였다. 처음에는 코드에서 문제가 있다고 생각했었지만 결국엔 레이어에 아주 조그마한 빈 공간이 있는 것을 발견했다. 방법 1 - Fill Ring 위 비어있는 공간을 채우고자 QGIS에서 고리 채우기(Fill Ring) 기능을 알게 되었다. 1. 레이어 편집모드 2. 비어있는 영역을 Fill Ring으로 영역을 지정 후 오른클릭을 하면 해당 영역이 생성된다. 3. 생성된 영역와 feature를 병합시킨다. 방법 2 - 홀 삭제 이 방법은 직접 적용해보진 않았지만 다른 방법을 발견하여 참고 글을 가져왔다. 1. '입력 레이어'는 경계를 지정한다. 2. '다음 면적 미만 구멍 삭제' 값은 해당 값보다 작은 홀만 제..
Label Decluttering openlayers에서 지도를 축소시키면 지역명(text)이 밀집된 지역은 겹치게 된다. 이때 declutter 옵션을 사용하면 확대, 축소시 자동으로 표출되는 글자를 조절해주는 편리한 옵션이다. 사용법은 declutter 옵션을 적용할 레이어에 속성값을 true로 설정해 주면 된다. const vectorLayer = new VectorLayer({ background: 'white', source: new VectorSource({ url: 'https://openlayers.org/data/vector/us-states.json', format: new GeoJSON(), }), style: function (feature) { const label = featur..
지도에 마우스를 hover하면 속성 데이터를 표출 기능이 필요했다. map.on("pointermove",fucntion(event){}) 기능을 사용하여 hover시 속성 데이터를 표출 가능하다. 하지만 레이어가 여러겹 있을 경우 어떤 속성 데이터를 표출할지 지정해 주어야한다. 레이어에 이름 지정 VectorLayer 생성시 layerName을 넣어준다. 임의의 속성을 부여했기 때문에 layerName이 아닌 name 등 다른 이름으로 속성을 지정해 주어도 된다. const vectorLayer = new VectorLayer({ source: vectorSource, style: myLayerStyle, // 위에서 정의한 스타일을 적용 layerName: 'myLayer', // 레이어 이름을 부여..
텍스트 ...으로 표시하기 텍스트가 너무 길 경우 ...으로 생략 하려고 했다. text-overflow : ellipsis 속성을 적용했지만 반응이 없어 조금 더 조사했다. text-overflow ellipsis 안먹힘 해결 방법 다음과 같은 조건으로 CSS가 작성되었는지 점검한다. 텍스트를 감싸고 있는 부모 요소는 블록 엘리먼트 요소(div, table, ul, ol, header, footer..)이다. 따라서 width값을 설정할 수 있고 이에 따라 text-overflow가 발생할 수 있다. white-space: nowrap - 문자 간 공백은 축소되고 개행(줄 바꿈)은 방지된다. overflow: hidden - 위 속성의 영향으로 문자의 개행이 방지되었기 때문에 텍스트가 한 줄로 길게 늘..
splice splice 함수를 사용하여 제거 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - 배열의 변경을 시작할 index deleteCount - 배열에서 제거할 개수 - 0일 경우 제거하지 않는다. (이 경우 최소한 하나의 새로운 요소를 추가해야한다.) item1, item2...(Oprional) - 배열에 추가할 요소 - 생략할 경우 요소를 제거하기만 한다 Return - 제거한 요소를 담은 배열 - 아무것도 제거하지 않을 경우 빈 배열을 반환 Code import React, { useState } from 'react'; function MyComponent() { const [myArray, setMyArray] =..
테이블에 추가할 CSV 데이터를 준비한다. 두 테이블의 한글 이름을 기준으로 데이터를 연결할 예정이라 구분자의 이름이 완전히 같아야 한다. 레이어 → 레이어 추가 → 구분자로 분리된 텍스트 레이어 추가 선택 csv 파일을 import 후 UTF-8로 인코딩하면 한글 이름이 표출된다. (EUC-KR 등 예시 데이터가 깨지지 않는 인코딩을 선택한다.) 레이어 부분에 추가한 CSV 데이터(행정동코드)가 정상적으로 등록된 것을 확인할 수 있다. 추가하고자 하는 레이어의 속성을 클릭한다. 결합 → 하단 + 버튼 → 결합 반영할 테이블 선택, 결합할 필드와 대상필드를 선택한다. → 확인
shp 파일의 속성 테이블의 필드 이름 중 CD → AMD_CD로 변경하려고 한다. 공간처리 툴박스에서 필드 재작성 메뉴 실행 이름 부분을 변경할 이름(CD → AMD_CD)으로 수정 및 실행한다. - 소스 표현식은 추후 자동으로 변환된다. - 소스 표현식 이름을 변경할 경우 해당 필드 데이터가 모두 NULL로 변경될 수 있기 때문에 주의한다. 실행 후 레이어에 재작성 산출물이 생성된 것을 확인할 수 있다. 재작성 산출믈의 속성 테이블 열기를 눌러 최종 결과를 확인한다.
