프로그래밍/Frontend

화면분할 코드(leaflet side-by-side.js)를 공공기관 지도에 활용하기 (feat. 스마트서울맵 SMAP, 통계청 SGIS) 몇년 전까지만 해도 leaflet, mapbox 라이브러리를 이용한 웹맵을 많이 개발했었는데, 최근 국내 공공기관에서도 지도 라이브러리들을 만들었다는 것을 알게되었어요. 첫번째로, 서울시의 스마트 서울맵 입니다. https://map.seoul.go.kr/smgis2/ 스마트서울맵, 더 스마트한 서울지도 스마트서울맵은 도시생활지도, 3D 서울지도, 시민말씀지도, 코로나19 지도, 시민참여지도 등 대표 서울지도 서비스입니다. map.seoul.go.kr 스마트서울맵 사이트의 우측상단에 있는 OpenAPI를 통해 스마트서울맵 지도를 사용할 수 있습니다. 기본적인 녹지,한..

프로그래밍/Frontend

echarts에서는 모든 라벨(legends)의 전체선택, 선택된 라벨 반전의 기능이 존재합니다. 하지만 전체선택 해제 기능은 없더라구요?! echarts.js 소스코드에 legend 전체선택 해제 기능을 추가하는 방법을 작성해보려고 합니다!! 1. 전체선택, 반전선택 먼저 기존에 존재하는 전체선택("all")과 반전("inverse")는 이미 존재하는 기능이니 차트를 만들 때 옵션에 추가만 해주면 되게끔 만들어져있습니다. 아래와 같이 legend 안에 selector를 추가해주면 차트를 만들 때, 전체선택, 반전 버튼이 생성됩니다. options = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', selector: ..

프로그래밍/Frontend

가끔 javascript 사용하다가 구글링하기에는 귀찮고 함수 이름을 보면 알 것 같은데 뭐였는지 기억이 안날 때 활용할 수 있는 방법을 기록하려고 합니다. console 을 예로 들면 console.log() 함수가 있고, console.debug(), console.dir(), console.clear() 등등이 있는데요. 이 외에도 많습니다. Object.getOwnPropertyNames(console); (25) ['debug', 'error', 'info', 'log', 'warn', 'dir', 'dirxml', 'table', 'trace', 'group', 'groupCollapsed', 'groupEnd', 'clear', 'count', 'countReset', 'assert', 'p..

프로그래밍/Frontend

제가 https 기반 웹사이트에서 m3u8 영상링크를 불러와 재생시키기 위해서 video.js 자바스크립트를 사용했는데요, 동적으로 움직이지 않을 때는 정상작동하지만, 비동기적으로 팝업창처럼 껐다켰다하는 화면에서는 재생이 되지 않더라구요!! 그래서 처음에는 video를 iframe으로 변경해서, 따로 /video 페이지를 만들어서 m3u8영상을 불러와 video로 보여주고 메인페이지에서 iframe으로 src에 /video를 넣어 출력했습니다. 근데 이때 발생한 오류... 1. 영상 URL이 http라서 block처리 당함 https 기반의 사이트에서 iframe에는 무조건 https만 가능하고, http는 불가능한 것을 알았습니다. 이 문제를 해결하기 위해 아래 티스토리를 참고했어요. https://d..

프로그래밍/Frontend

NodeList.prototype.forEach() NodeList 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다. 문법(Syntax) NodeList.forEach(callback[, thisArg]); 파라미터, 리턴 값, 예외처리 관련해서는 공식 문서를 참고하세요. https://developer.mozilla.org/ko/docs/Web/API/NodeList/forEach NodeList.prototype.forEach() - Web API | MDN NodeList 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다. developer.mozill..

프로그래밍/Frontend

원하는 구간만 계속해서 반복하여 복제하는 코드 html 이름 전화번호 추가 jquery/javscript 복제결과 !

프로그래밍/Frontend

section 클래스를 가진 div에 clone_div 클래스를 가진 div를 복제하여 붙여넣었습니다. 하지만 여기서 오류가 등장.. 아래 클릭이벤트가 호출되지 않습니다. clone_div = $(".clone_div").clone(); $(".section").append(clone_div); $(".clone_div").click(function(){ .... }) 요 문제를 해결하기 위한 두가지 방법! 1. 아래와 같이 document가 생성된 후 클릭하면 호출되도록 변경합니다 $(document).on("click", ".clone_div", function(){ .... }) 2. 복제시 파라미터로 true를 넣어주면 됩니다 clone_div = $(".clone_div").clone(true)..

프로그래밍/Frontend

캐싱(Caching)이란? 나중에 있을 요청에 대해 빠르게 응답해주기 위해 응답 결과를 사전에 저장해두고 재사용하는 것을 캐싱이라고 합니다. 캐싱에는 다양한 종류가 있습니다. 크게는 어플리케이션 단 캐시와 메모리 단 캐시로 볼 수 있는데, 메모리 단 캐시는 우리가 흔히 아는 CPU에서 볼 수 있습니다. 주기억장치에서 저장된 데이터를 읽어올 때, 자주 사용하는 데이터를 캐시 메모리에 저장한 뒤, 다음에 이용할 때 주기억장치가 아닌 캐시 메모리에서 먼저 가져오면서 속도를 향상시킵니다. 그리고 어플리케이션 캐시 중 하나인 웹 캐싱은 네트워크 트래픽을 최소화하기 위해서 설계된 HTTP 프로토콜의 기능 중 하나입니다. 웹 캐싱은 특정 조건으로 들어오는 HTTP 요청에 대해 HTTP 응답을 캐싱해서 매번 반복되어 ..

프로그래밍/Frontend

[오류해결] Uncaught TypeError: Cannot read properties of null / Uncaught TypeError: Cannot read properties of undefined JavaScript 개발자라면 정말 많이 봤을 법한 오류 문장이죠? 아래 오류는 정의되지 않은(undefined) 객체(object)의 속성(property) 값 또는 함수를 읽으려고 하거나 호출하려고 할 때 발생하는 오류입니다. 그리고 아래 테스트 결과는 실제로 크롬브라우저의 개발자도구(F12)의 Console 탭에서 오류를 발생하게 하여 출력해본 결과입니다. 보시다시피 domdomi 라는 변수가 있고 그 변수에 blog 라는 property 가 존재하는지 확인해봤을 때 애초에 정의조차 하지 않았기..