글

작성일자

eslint error : ‘…’ is missing in props validation

아래의 컴포넌트는 다음과 같은 lint 에러가 표시된다. 가볍게 무시해도 되는데 이 에러를 표시하지 않도록 해보자.

export default function Experience({ loaded }) {  
  ...
}

이런 해당 에러는 컴포넌트의 props에 대한 유효성 체크를 위한 사항을 지정하라는 의미이다. 여기서는 loaded인데, 이 load의 타입을 지정하기 위해 다음처럼 코드를 추가로 입력한다.

Experience.propTypes   = {
  loaded: PropTypes.bool
}

추가적으로 loaded가 필수 속성일 경우 다음처럼 지정하면 됩니다.

Experience.propTypes   = {
  loaded: PropTypes.bool.isRequired
}
작성일자

엑스알 지오코더 (XrGeocoder) v4.5 임대 라이선스 및 사용 설명

이 프로그램은 지오코딩과 리버스 지오코딩 기능을 제공합니다. 지오코딩은 주소를 좌표로 변환하고 반대로 리버스 지오코딩은 좌표를 주소로 변환합니다. 아래의 링크를 클릭해 내려 받아 설치하시면 됩니다.

기간 라이선스를 구매해야 사용할 수 있는 프로그램으로 사용 기간에는 변환 건수에 제한 없이 사용할 수 있습니다. 행정처리 상 여러번의 인터넷 결제가 어려운 관공서 및 회사에 추천 드립니다. 각 라이선스 기간에 대한 비용은 다음과 같습니다. 라이선스 신청은 프로그램을 실행하여 간단히 하실 수 있으며, 신청하시면 담당자가 확인 후 전화로 진행을 도와 드립니다.

라이선스 기간 허용 PC (동일 IP 대) 비용 (VAT 포함)
1개월 최대 1대 2,200,000원
6개월 최대 2대 4,400,000원
12개월 최대 3대 7,700,000원

만약 라이선스 없이 이용하고자 할 경우 별도의 설치 없이 이용할 수 있는 웹 기반의 지오서비스웹을 사용하시기 바랍니다. 이 프로그램과 지오서비스웹의 지오코딩은 동일한 엔진을 사용하여 같은 성능과 정확도를 제공합니다. (단, 인터넷 환경 및 동시 사용자가 많을 경우 속도가 느려질 수 있으며 1 건당 평균 0.01초 소요)

사용 설명

주소를 좌표로 변환하기

변환할 주소는 아래의 그림처럼 엑셀 또는 메모장을 통해 CSV 포맷으로 저장하여 사용할 수 있습니다. CSV는 각 데이터를 컴마(,)로 구분하는 데이터 형식이며 첫줄은 반드시 영문의 필드명으로 구성되어야 합니다.

이 입력 데이터를 GeoCoder-Xr 프로그램에서 “입력파일” 버튼을 통해 읽은 후 주소 필드를 지정하고 결과 포맷으로 저장할 SHP 파일을 지정하면 아래의 화면처럼 구성됩니다.

이제 좌표로 변환하기 위한 시작 버튼을 누르면 좌표로 변환됩니다. 성공적으로 변환되면 아래의 화면처럼 변환된 지점이 지도에 표시됩니다.

좌표를 주소로 변환하기

반대로, 좌표를 주소로 변환할 수 있으며 아래 화면과 같은 CSV 데이터를 사용합니다.

위의 CSV 데이터를 입력 파일로 지정한 화면은 다음과 같습니다.

지원되는 좌표계(EPSG)

주소를 좌표로 변환할 때 적용되는 좌표계는 EPSG 방식으로 지정할 수 있으며 현재 지원되는 EPSG는 다음과 같습니다.

  • EPSG:4326 – WGS84 타원체의 경위도 좌표계
  • EPSG:3857 – Google, VWorld의 좌표계
  • EPSG:5174 – 경도 10.405초 보정된 Bessel 타원체의 TM 중부원점
  • EPSG:5179 – GRS80 타원체의 UTM-K 좌표계
작성일자

TypeScript의 배열로 Union Type 정의하기

다음과 같은 배열이 있다.

const SideTypes = [ "FRONT", "BACK", "DOUBLE" ] as const;

위의 배열 객체를 가지고 FRONT와 BACK 또는 DOUBLE 문자열을 갖는 Union Type을 정의하는 코드는 다음과 같다. (as const를 반드시 붙여야 한다.)

type OptionType = {
  side: typeof SideTypes[number];
};

즉, 위의 코드는 아래와 코드와 동일하다. 하지만 아래처럼하면 배열 객체의 값과 유니온 타입을 정의하기 위한 값에 대한 코드가 중복되는 문제가 있다. 이는 반드시 고쳐야 하는 아주 나쁜 리펙토링 대상이다.

type OptionType = {
  side: "FRONT" | "BACK" | "DOUBLE";
};

이제 OptionType은 다음처럼 사용될 수 있다.

const options: OptionType = {
  side: "FRONT"
};

이제 lil-gui 라이브러리에서 다음처럼 효과적인 코드로 작성될 수 있다.

const gui = new GUI();
gui.add(options, "side", SideTypes).onChange(v => {
  if(v === "FRONT") {
    material.side = THREE.FrontSide;
  } else if(v === "BACK") {
    material.side = THREE.BackSide;
  } else if(v === "DOUBLE") {
    material.side = THREE.DoubleSide;
  }
});

위의 코드가 적용된 실행 화면인데, 화면의 우측 상단의 GUI를 위해 적용된 코드다.