본문 바로가기

Programing/웹

(21)
[AngularJS] {{value}}의 렌더링 문제 AngularJS를 책으로 배우고 나서 그동안 jQuery로만 점점 늘어만 가는 자바스크립트 코드를 줄여줄 수 있는 괜찮은 프레임워크구나 생각을 했다. 막상 실무에 적용을 하고 보니 몇 가지 문제가 있었다.1. 구 IE지원의 문제: 사실 프레임워크의 문제라기 보다 IE의 구현에 문제가 있지만 이미 사용하고 있으니 어떡한담. 고객사에서 아직도 IE6를 사용하고 있다는 것을 들은 적이 있다. jQuery 2.x로 넘어가기 힘든 원인도 같은 맥락.2. {{value}}로 값을 매핑할 수 있는데 가끔 이 값 자체가 화면에 보였다가 사라져서 난감 했다. 현재 고객은 UI에 엄청 민감하다. 2번 사항에 대해 찾아보니 이미 많은 글들이 있었다.URL을 정리해본다. thierry.nicola Faster Angular..
[jQuery] 엘리먼트의 이벤트 목록 구하기 브라우저마다 에벤트가 많이 다름을 느꼈다. 코드function getAllEvents(element) { var result = []; for (var key in element) { if (key.indexOf('on') === 0) { result.push(key); } } return result.join(' ');} 인자로 객체를 넘기면 된다.jQuery를 사용할 경우 확장객체의 일부를 넘기면 된다. 클래스가 fixed인 것을 아래와 같이 선택했다면,var fixedElem = $(".fixed");alert(getAllEvents(fixedElem[0])); 인덱스로 지정이 가능하다.
[HTML] IMG 엘리먼트에 base64를... asp.net을 방문해서 글을 읽다가 보니 이미지 로딩이 페이지가 보이고 나서 나타나서 신기해서 소스를 확인해 보았다.url : Creating ASP.NET Web Projects in Visual Studio 2013 img 엘리먼트는 동일한데 src에 흔히 보지 못하는 문자가 있었다. 구글에 검색을 해보니 linuxchannel.net에 "한번의 커넥션으로 이미지 모두 전송하는 방법"라는 글이 있었다. (링크)요지는 RFC 2397(The "data" URL scheme)에 따르면 URL 스킴에 데이터를 넣을 수 있는 방법이라고 할 수 있겠다.데이터는 바이너리일 경우 base64를 통해 인코딩 할 수 있을 것이다.하지만 asp.net에서는 html에 데이터를 넣은 게 아니라 data-original..
[CSS] CSS 스프라이트(CSS Sprites) 스타일로 말해요 pp.244~245에 잘 나와 있다.문제는 어떻게 쉽게 반복되는 작업에 적용을 해야 하는 가랑 샘플?검색을 해보니 툴 소개 해주는 블로그가 있었다.http://bezzera.tistory.com/289 NHN의 개발도구 N-MET에 대한 소개를 하고 있었다.http://nuli.navercorp.com/sharing/fe/nmet에서 받으면 된다. 테스트로 작성을 해보자. CSM Type이라는 게 있는데 선택옵션은 CS-O, CS-O4, CS-E 세 가지가 있다.차이를 비교해보자.CS-O.PrintList_printAll{display:block;overflow:hidden;position:relative;width:65px;height:88px;margin:-1px;padding:1px..
[JavaScript] 브라우저 크기 구하기 : 화면 해상도 구하기 기기에 브라우저 장치가 되는데 디스플레이 크기를 구해야 되었다.처음에는 이미지를 표시해서 몇 픽셀인지 구하려다가 자바스크립트에 화면 크기를 구하는 방법이 있다는 것이 생각났다. 참고: http://stackoverflow.com/questions/2474009/browser-size-width-and-heightvar size = { width: window.innerWidth || document.body.clientWidth, height: window.innerHeight || document.body.clientHeight } 이것을 바탕으로 HTML을 만들어보았다. 전체화면 모드일 경우에는 모니터 해상도를 구할 수 있다. 1) HTML HTML에 가로, 세로를 표시할 span 엘리먼트를 추가했다..
[JavaScript] 시각화(visualization) 라이브러리(그래픽, 차트 등) 요즘 데이터 시각화에 관해 관심이 많다.웹 쪽에서는 자바 스크립트를 가지고 차트를 그리는 라이브러리가 많이 있는 것으로 알고 있다. 이름 사이트 라이센스 특징 1 Highcharts JS http://www.highcharts.com/ 비상용전제 하에 Free (링크) 다양,고품질,다양한레퍼런스, 상용 2 Flotr http://www.flotcharts.org/ MIT License (링크) 3 Flotr2 http://humblesoftware.com/flotr2/ MIT License (링크) 4 gRaphaël http://g.raphaeljs.com/ MIT License (링크) SVG 5 Protovis http://mbostock.github.io/protovis/ BSD License d..
[JavaScript] 부동소수점의 오류 예 컴퓨터의 부동소수점의 정밀도 문제는 오래전 부터 알려진 사실이다. 자바스크립트에서도 그 예를 쉽게 찾을 수 있는데, 기록을 해놓지 않으면 예를 들 때 바로 생각해 내지 못하는 경우가 있어서 기록을 해둔다. 예)> 0.1 + 0.2;0.30000000000000004 이런 것은 결합법칙에서 문제가 된다. (A + B ) + C = A + (B + C)> (0.1 + 0.2) + 0.3;0.6000000000000001> 0.1 + (0.2 + 0.3);0.6> 돈과 관련된 경우에는 정밀도는 민감한 사항이기 때문에 실수가 아닌 정수형으로 계산을 하라고 한다.최소 단위를 일의 단위로 이용을 한다면 문제가 없다.> (1 + 2) + 3;6> 1 + (2 + 3);6> ((1 + 2) + 3)/10;0.6> (1..
[JavaScript] null 값과 비교할 때는 반드시 비교 연산자로 === 또는 !==를 사용 Maintainable JavaScriptp.129 null 비교 금지null 값과 비교할 때는 반드시 비교 연산자로 === 또는 !==를 사용해야 한다. 실제 잘못 사용 예) 문자열이 IP 패턴을 하고 있는지 확인하는 함수function isIPAddress(ip) { var ipFormat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; return (ip.match(ipFormat)!=null);} 수정 예function isIPAddress(ip) { ..