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` 를 동시에 눌러 경로를 복사합니다.  터미널을 실행합니다...

javascript scroll event 제어

2024.07.03 09:31

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 `overflow-y: hidden` 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 `scroll`, `mousewheel`, `touchmove` 등의 이벤트를 걸어 `e.preventDefulat()`로 이벤트를 막아볼 수 있겠지만, `mousewheel` 이벤트와 같이 스크롤과 관련 된 이벤트는 기본적으로 `passive`로 처리되어 있어 추가 옵션을 설정 할 수 없다. 아래와 같은 오류 발생[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. ..

사파리 overflow:hidden + border-radius 관련 이슈 해결법

2023.09.08 15:18

사파리의 렌더링 엔진 Webkit의 버그 해결법.box {border-radius:1.2rem; overflow:hidden; isolation: isolate; } https://www.sungikchoi.com/blog/safari-overflow-border-radius/ 사파리 overflow:hidden + border-radius 관련 이슈 해결법사파리에서 overflow:hidden + border-radius 관련 문제를 해결했던 과정을 공유합니다www.sungikchoi.com

ios mobile fix item + keypad 이슈

2023.04.06 22:36

ios mobile에 키패드 이슈 모바일 기기에서 input에 focus 되었을 때 가상 키패드가 올라오게되는데, OS에 따라 키패드가 올라왔을때의 영역이 다르게 동작해서 크로스브라우징 이슈가 있었다. ios에서 상단 fixed 헤더가 위로 밀려버리는 문제가 발생했다. 헤더가 위로 밀려버리는 현상 자체를 해결할순 없었고, 키패드가 올라왔을때 스크롤이 되지않게 input blur를 해주는 방향으로 작업되었다. 우선 모바일일 때 body에 mobile 클래스를 넣어준 후 키보드가 올라올만한 input에 focus 시 keyboard-on 클래스를 body에 추가해줬다. 그리고 그 상태에서 input이 아닌 다른곳을 터치하게 되면 input에 focus를 blur처리해줬다. 모달팝업 내에 가상키패드도 문제였기..

[CSS] 웹 접근성을 고려한 .blind .hidden 처리

2023.02.24 20:05

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다. 대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

SVG 도넛차트

2022.12.05 21:40

도넛 모양의 차트를 구현한 일이 있었는데,디자인 상의 그라데이션과 100% 채워졌을때의 디자인이 일반 SVG 도넛차트와 달라서 여러 방법으로 테스트를 하던 중,비슷한 라이브러리를 찾아 구현할 수 있었다. chart sample chart sample https://github.com/aluvy/chart-donutgauge GitHub - aluvy/chart-donutgaugeContribute to aluvy/chart-donutgauge development by creating an account on Git..