shp 파일 JSON으로 변환하기

2025.08.28 09:36

1. mapshaper 사이트 접속https://mapshaper.org/ mapshaper mapshaper.org 2. 파일첨부.dbf .shp .shx 파일 모두 첨부 3. Simplify1. 우측 상단 Simplify 클릭2. Visvlingam / weighted area 선택, Apply 클릭3. 게이지 조절 4. 파일 저장1. 우측 상단 Export 클릭2. GeoJSON 선택3. Export 인코딩이 깨져서 나올 때파일 오픈 시 옵션을 입력해줘야 한다. 1. 파일 첨부 전 with advanced options 체크2. 파일 첨부 (.dbf .shp .shx 파일 모두 첨부)3. input 창에 encoding=cp949 입력4. Submit 좌표계 문제 (GeoJSON..

forEach와 Promise.all

2025.02.05 22:02

ForEach의 동작먼저 예시 프로그램을 하나 보겠습니다.function test() { const testFunction = num => new Promise((resolve) => setTimeout(() => resolve(`${num}`), num)); const list = [3000, 2000, 3000, 4000, 1000, 1000, 2000, 3000, 1000, 1000]; list.forEach( val => { const result = testFunction(val); result.then(cosole.log); })}test(); list 에는 순서대로 timeout의 값들이 들어가 있고, forEach를 통해 순회하면서 testFunction을 실행하여 해..

깃(Git) 개념과 상황별 팁

2025.02.02 00:18

기본 개념과 명령어초기화깃을 올바로 사용하려면 깃이 파일의 변경 내용을 추적하는 방식을 이해하는 것이 무척 중요하다. 그렇지 않고 백업 용도로만 깃을 사용하면 장님이 코끼리 만지는 것처럼 딱 그만큼만 알게 되기 때문이다. 깃은 폴더의 어떤 파일이라도 모두 트래킹 할 수 있다. 원하는 폴더로 이동해 깃 초기화 커맨드부터 시작한다.$ git init .git 이라는 이름의 숨김 폴더가 하나 생긴다. 이것을 저장소라고 하는데 깃은 이 폴더의 모든 변경 내용을 여기에 저장한다. 이 파일을 지우면 더 이상 깃으로 폴더의 변경사항을 추적할 수 없다.  스테이징깃이 파일의 변경 내역을 저장하는데 곧바로 저장하는 것이 아니라 스테이징이라는 단계를 거친다. 스테이징은 변경사항 중에서 저장하고 싶은 부분만 선택해 임시로 ..

Web Components : Custom Elements

2025.01.24 08:43

기본 설명Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용할 수 있다.기본적으로 두 가지 타입으로 생성한다.표준 HTML 요소를 상속하지 않은 Elements. 요소는 상속하지 않지만 HTML Element는 상속 한다.표준 HTML 요소를 상속한 Element.이렇게 생성한 Element는 Lifecycle callback을 class 안에 정의하여 특정 시점에 동작 하도록 한다.  기본 사용법독립적인 사용자 정의 요소class MyComponent extends HTMLElement { constructor() { // 항상 super를 호출 해야 한다. super(); this.innerHTML = `T..

svg see: SVG 파일 미리보기 extention

2024.11.25 10:24

svg 미리 보기 활성화 하는 방법파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다.  확장 프로그램 설치 하기https://github.com/tibold/svg-explorer-extension/releasesSVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다.(32bit -> x86, 64bit -> x64)    https://mu08.tistory.com/198 [윈도우 팁]SVG 파일, 이제 미리보기로 확인해보자(svg see)안녕하세요 무택입니다 :) 오늘은 아주 간단하게 SVG 미리 보기 활성화하는 방법에 대해 포스팅해 보도록 하겠습니다! 웹 디자인 작업 ..

맥북 (Mac OS) M2 톰캣 설치하기

2024.09.03 15:02

1. 톰캣 설치아파치 톰캣 사이트에 접속합니다.https://tomcat.apache.org/ 페이지 왼쪽의 `Download` 카테고리에서 다운로드 할 톰캣 버전을 클릭합니다.내게 맞는 톰캣 버전을 찾는 방법 참고: https://itworldyo.tistory.com/88  `Binary Distributions` 항목에서 `tar.gz` 파일을 클릭 해 다운로드 합니다.  저장 경로를 설정하고 `저장` 버튼을 클릭합니다.다운로드가 시작됩니다.   설치 된 `tar.gz` 파일을 더블 클릭하여 압축을 해제 합니다.  2. 톰캣 실행  `Finder`에서 톰캣이 설치된 경로로 접속합니다.키보드에서 `command` + `option` + `c` 를 동시에 눌러 경로를 복사합니다.  터미널을 실행합니다...

shp 파일 JSON으로 변환하기

2025.08.28 09:36

1. mapshaper 사이트 접속https://mapshaper.org/ mapshaper mapshaper.org 2. 파일첨부.dbf .shp .shx 파일 모두 첨부 3. Simplify1. 우측 상단 Simplify 클릭2. Visvlingam / weighted area 선택, Apply 클릭3. 게이지 조절 4. 파일 저장1. 우측 상단 Export 클릭2. GeoJSON 선택3. Export 인코딩이 깨져서 나올 때파일 오픈 시 옵션을 입력해줘야 한다. 1. 파일 첨부 전 with advanced options 체크2. 파일 첨부 (.dbf .shp .shx 파일 모두 첨부)3. input 창에 encoding=cp949 입력4. Submit 좌표계 문제 (GeoJSON..

forEach와 Promise.all

2025.02.05 22:02

ForEach의 동작먼저 예시 프로그램을 하나 보겠습니다.function test() { const testFunction = num => new Promise((resolve) => setTimeout(() => resolve(`${num}`), num)); const list = [3000, 2000, 3000, 4000, 1000, 1000, 2000, 3000, 1000, 1000]; list.forEach( val => { const result = testFunction(val); result.then(cosole.log); })}test(); list 에는 순서대로 timeout의 값들이 들어가 있고, forEach를 통해 순회하면서 testFunction을 실행하여 해..

WAI-ARIA 요소 - 자동완성 편집창의 올바른 구현방법

2023.01.24 16:50

편집 가능한 텍스트 편집창에 사용자가 내용을 입력할 때, 추천 목록을 제공하여 키보드 또는 마우스로 원하는 추천항목을 선택하여 완성하는 자동완성 편집창 기능을 WAI-ARIA를 중심으로 다룹니다. 이번 아티클은 크게 두 개의 부문으로 나뉩니다. 자동완성 편집 창의 유형 접근 가능한 자동완성 편집 창 구현하기 자동완성 편집 창의 유형 자동완성 편집창은 사용자의 상호작용 방법에 따라 크게 다음과 같은 세 가지 유형으로 나눌 수 있습니다. 직렬완성(inline) 형 목록선택(list) 형 복합(both) 형 직렬(inline)형 자동완성 직렬 완성형 자동완성 기능은 편집 중인 사용자에게 목록을 별도로 제공하지 않고, 캐럿 뒤에 사용자가 입력한 글자로 시작하는 단어가 입력되며, 블록으로 선택됩니다. 사용자가 추..

WAI-ARIA 요소 - alert, alertdialog

2023.01.24 16:48

웹 페이지에서는 사용자에게 다양한 목적의 알림을 제공합니다. 이러한 알림으로는 회원가입 양식과 같은 폼 필드에서 잘못된 값 입력 시 즉각적으로 제공되는 오류 메시지나 인터넷 뱅킹과 같이 보안이 중요한 사이트에서 로그인 시간 연장과 같은 것들이 있습니다. 스크린리더 사용자에게 웹페이지의 알림을 전달하는 방법에는 여러 가지 방법이 있지만, 이번 시간에선 ARIA 역할 중 alert과 alertdialog 역할로 알림을 제공하는 방법과 alert, alertdialog 역할을 바르게 사용하는 방법을 살펴보겠습니다. alert, alertdialog 역할을 사용하여 알림을 제공할 수 있는 사례는 다음과 같은 것들이 있을 수 있습니다. 채팅 페이지에서 특정 사용자가 온라인 또는 오프라인과 같은 사용자의 상태 전환..

스크린리더가 이미지를 무시하는 방법 4가지

2023.01.03 23:31

1. CSS의 background 속성 사용 .image {background-image: url(bg.gif);} 2. 태그에 alt 속성을 빈 값으로 사용 3. aria-hidden="true" 사용 4. role="presentation" 사용 참고:) https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore#less-than-img-greater-than-aria-hidden 제발 나를 무시해 주세요. - WCAG 2.1 항공사 WAI-ARIA 적용사례 1번 방법으로 사용하게 되면 스크린리더는 해당 영역을 "p"로 읽게 되어 스크린리더 사용자는 무엇을 읽는지 알 수 없게 된다. 2번 방법으로 사용하면 스크린리더는 해당 문구를 읽으려고 부단히 aoa.gitbo..