GRIMTONG

간혹 캔버스로 동적 다이어그램 및 토폴로지를 만들다 보면 두 지점사이의 거리를 구해야 할때가 있다. 피타고라스 정리만 머리속에 있다면 큰 문제 될것 없지만 갑자기 생각이 안날때를 대비해서 자바스크립트 기반으로 거리 구하는 방법을 적어본다. function getDistance( ax, ay, zx, zy ){ var dis_x = ax - zx; var dix_y = ay - zy; dist = Math.sqrt( Math.abs( dis_x * dis_x ) + Math.abs( dix_y * dix_y ) ); return dist; } var a = { x : 100, y : 200 }; var z = { x : 250, y : 300 }; console.log( getDistance( a.x, a..

개발하다 보면 오늘 또는 특정 날짜를 기준으로 하여 하루 또는 일주일 등 특정 날짜를 구해야할때 사용할수 있는 방법입니다. 예 ) 하루전 var yDate = new Date( new Date()-1000 * 60 * 60 *24 ); 예 ) 일주일전 var yDate = new Date( new Date()-1000 * 60 * 60 *24 * 7 ); 오늘기준(특정날짜기준) - ( 밀리초 * 초 * 분 * 시 * 일수 ) new Date().getTime() : 1970년 1월 1일 자정을 기준으로 밀리초

Vue.js + Electron으로 간단한 데스크탑용 앱을 만드는 도중 문제가 발생.. 바로 CORS ( Cross-Origin Resource Sharing ) .... 허용하지 않은 크로스 도메인에서의 데이터 요청시 보안문제로 인한 거부가 발생합니다. 서버설정으로 해결하면 좋겠지만 그렇지 못할때 해결하는 방법입니다. 필요한 라이브러리는 vue-axios-cors 이용하며 기존 vue-axios를 이용하였습니다. 설치는 npm install vue-axios-cors main.js에 추가한 소스 import axios from 'axios' import AxiosPlugin from 'vue-axios-cors'; Vue.use(AxiosPlugin); axios.defaults.headers.comm..

많이 사용되는 replace 문자열 치환 정규식 모음입니다. 개발시 유용한 자료는 계속 업데이트하겠습니다. 좌측 공백 제거 : 문장의 좌측 공백을 제거합니다. string.replace(/\s+/, ""); 우측 공백 제거 : 문장의 우측 공백을 제거합니다. string.replace(/\s+$/g, ""); 앞뒤 공백 제거 : 문장의 앞과 뒤의 공백을 제거합니다. string.replace(/^\s+|\s+$/g,''); 행바꿈 제거 : 행바꿈 문자열을 모두 제거합니다. string.replace(/\n/g, ""); 엔터 제거 : 엔터 문자열을 모두 제거합니다. string.replace(/\r/g, ""); 세자리 마다 콤마(,)찍기 : 숫자 표현할때 3자리 마다 콤마를 찍습니다. 물론 소수점 아래..

20년 넘게 플래시를 사용했던 여러 분야의 사용자분들은 이번 플래시 플레이어의 웹 또는 기타 activex 컨트롤을 사용하던 애플리케이션에서 컨텐츠가 미구동되는 난감한 상황을 맞이하게 되었다. 이전부터 예고는 있었지만 예상외로 오프라인 컨텐츠까지 영향이 있을것이라고 미처 생각하지 못했다. 플래시를 통해 개인적으로 할 수 있었던 것들을 보면 1. 웹애니매이션(배너, 애니메이션, 인포그래픽 등등) 2. 웹애플리케이션(대시보드 등) 3. 모바일앱(Android + iOS) 4. 데스크탑용 애플리케이션(Air) 대략적인 분류로 보면 위에서 기술한 종류에서 개인적으로 현재는 어떤 업무에서도 플래시를 사용하지 않고 있다. 현재까지 개인적으로 대체한 방법을 기술하면 1. 웹애니메이션 html5 Canvas 기반 Cr..

플래시를 초창기부터 사용하면서 현재는 사장되는 기술이라는게 마음한구석 뭔가 아쉬움이 많이 남지만 어차피 기술은 기술일뿐이라는...몇년전부터 플래시 대신 사용하기 시작한 CREATE.JS 라이브러리는 Canvas 기반으로 기존 플래시에서 그래픽적으로 구현되던 것을 거의 흡사히 구현이 가능한 라이브러리다. 현재 Adobe Animate 에서 출판하면 이 라이브러리를 이용한다. 드로잉 관련 Easel.js모션관련 tween.js사운드관련 sound.js리소스 로딩 관련 preload.js 구성은 크게 4가지며 필요에 따라 각각 또는 모두 사용할수도 있다.아직 플래시만큼의 성능은 아니지만 stagegl 을 이용하면 gpu 기반으로 성능도 만족스럽게 나온다.다만 3D 구현은 Three.js 나 기타 다른 라이브러..

웹개발을 하다 보면 챠트를 사용하는 경우가 종종 있다. 하지만 간단한 Bar 챠트를 사용하기 위해 Chart.js 또는 기타 챠트 라이브러리를 사용하기가 비효율적일때 사용하면 적당한 방법이다. CSS를 통해 애니메이션은 덤이고 아주 쉽게 만들수 있는 예제로 각 상황에 맞게 수정해서 사용하면 된다. 0

웹폰트를 사용하다보면 특정 폰트의 작은 크기 글자가 깨지는 경우가 있다. 모바일 환경과 맥환경에서는 거의 없으나 윈도우 환경의 브라우저에서 발생한다. 이럴때 쓰는 트릭으로 transform:rotate(-0.03deg); 0.03도 시계방향이든 반시계방향이든 미세하게 회전시켜주면 부드럽게 나오는것을 확인할 수 있다. 이게 윈도우에서의 서체 렌더링에 문제가 있는건지 아니면 다른 문제인지는 모르나 위의 방법으로 해결할 수 있다. 단 span 의 경우 display:inline-block; 를 적용애한다. 위의 그림에서 상단박스 텍스트는 일반이고 아래 박스의 텍스트에는 적용한 상태이다. 큰글자 및 작은 글자에서도 확연이 다르게 텍스트가 렌더링 되는것을 볼수 있다.