프로그래밍/스크립트

Google Charts

(function($w, root) { if (!!!$w) return; if (!!!$w[root]) return; const Base = $w[root]; const Appl = Base.Core.namespace('pc'); const Page = Base.Core.namespace('pc.sample.googleCharts'); const Ctrl = Base.Control.Page.createControl(Page); Page.init= function(oContext) { Ctrl.init(oContext); this.isInit = true; return this; }; // Column Chart (google.visualization.ColumnChart) const columnChart..

프로그래밍/스크립트 2022. 12. 20. 15:17

JavaScript 모듈화 도구, webpack

* 출처 : http://d2.naver.com/helloworld/0239818 서버에서 처리하는 로직을 JavaScript로 구현하는 부분이 많아지면서 웹 서비스 개발에서 JavaScript로 작성하는 코드의 양도 늘어났습니다. 코드의 양이 많아지면 코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해집니다. 그러나 JavaScript는 언어 자체가 지원하는 모듈 시스템이 없습니다. 이런 한계를 극복하려 여러 가지 도구를 활용하는데 그 도구 가운데 하나가 webpack입니다.webpack은 모듈 시스템을 구성하는 기능 외에도 로더 사용, 빠른 컴파일 속도 등 장점이 많습니다. 이 글에서는 webpack의 기능과 사용법을 간략하게 설명하고 webpack의 장점을 살펴보겠습니다..

프로그래밍/스크립트 2016. 8. 8. 16:36

짧게 줄인 URL의 실제 URL 확인 원리 및 방법

* 출처 : http://metalkin.tistory.com/50 트위터의 제한된 글자수로 인해 짧은 URL 사용이 대중화되었다. 장점은 당연히 바이트수를 줄일수 있다는 거고, 단점이라 한다면 해당 URL 이 어디를 가르킬지 URL 만 봐서는 알수가 없다는 거다. 오리지널 URL을 확인해 볼 수 있는 사이트나 플러그인의 확인 원리 및 제공 서비스들에 대해 알아보자. 짧은 URL 의 실제 URL 확인 원리 짧게 줄인 해당 링크를 클릭했을 때 발생하는 GET Request 의 Response 로, 'HTTP 30x' 가 리턴되고 'Location :' 헤더에 실제 URL 정보가 표시된다. 따라서, Body 전체를 Response 할 필요없이, HTTP HEADER Request 를 지원하는 curl 등을 ..

프로그래밍/스크립트 2016. 8. 5. 11:53

웹프로그래밍시 지켜야 할 사항

Minimize HTTP Requests (HTTP요청을 최소화하라) Use a Content Delivery Network (CDN을 사용하라) Avoid empty src or href (이미지의 src 속성 이나 href 값이 비어 있는 것을 피하라) Add an Expires or a Cache-Control Header (해더에 만료시간 혹은 캐시-제어를 추가하라) Gzip Components (Gzip으로 압축하라) Put StyleSheets at the Top (스타일 시트는 위쪽에 넣어라) Put Scripts at the Bottom (스크립트는 아래쪽에 넣어라) Avoid CSS Expressions (CSS의 표현을 피하라) Make JavaScript and CSS External..

프로그래밍/스크립트 2016. 5. 19. 10:02

페이스북 좋아요 카운트 가져오기

//https://api.facebook.com/method/fql.query?query=select%20total_count,like_count,comment_count,share_count,click_count%20from%20link_stat%20where%20url=%27https://m.facebook.com/CJOshopping%27&format=json//https://api.facebook.com/method/fql.query?query=select%20total_count,like_count,comment_count,share_count,click_count%20from%20link_stat%20where%20url=%27https://m.facebook.com/CJOshopping%27..

프로그래밍/스크립트 2016. 2. 4. 17:36

왜 pushstae를 사용하는가?

* 출처 : http://www.slipp.net/wiki/display/SLS/pushstate pushstateSkip to end of metadataCreated by 정태원, last modified on 2014년 06월 19일Go to start of metadataIntroductionIntroductionpushstatepushstae란?왜 pushstae를 사용하는가?pushstate APIpushstate 지원 브라우저간단한 예제로 알아보는 차이점전통적인 html 방식의 화면 전환Single Page 어플리케이션 방식인 경우pushstate 를 이용하는 경우pushstatepushstae란?HTML5 에서 새로 추가된 history객체의 method로 session history 에 ..

프로그래밍/스크립트 2015. 10. 23. 10:25

세션 히스토리와 내비게이션

HTML55.3 Origin – 차례 – 5.6 오프라인 웹 어플리케이션 W3C 원본5.4 세션 히스토리와 내비게이션5.4.1 브라우징 문맥의 세션 히스토리5.4.2 The History interface5.4.3 The Location interface5.4.3.1 보안5.4.4 세션 히스토리 구현 노트5.5 웹 브라우징5.5.1 문서들간의 이동5.5.2 HTML 파일의 페이지 로드 처리 모델5.5.3 XML 파일의 페이지 로드 처리 모델5.5.4 텍스트 파일의 페이지 로드 처리 모델5.5.5 이미지의 페이지 로드 처리 모델5.5.6 플러그인을 사용하는 컨텐츠의 페이지 로드 처리 모델5.5.7 DOM 을 갖지 않는 인라인 컨텐츠의 페이지 로드 처리 모델5.5.8 조각 식별자(#)로 이동5.5.9 히스토..

프로그래밍/스크립트 2015. 10. 23. 10:11

jQuery - 마우스 오른쪽 버튼

출처 : http://linuxism.tistory.com/709 Open Email Save Close DEMO right-click me!! 출처 : http://www.trendskitchens.co.nz/jquery/contextmenu/ =================================================================================== 페이지 전체 뿐만 아니라 특정 부분에도 손쉽게 마우스 오른쪽 버튼을 막을 수 혹은 핸들링 할 수 있게 해줍니다.예제 코드:$(document).ready( function() { // Capture right click $("#selector").rightClick( function(e) { // Do someth..

프로그래밍/스크립트 2015. 9. 10. 13:56

JQUERY의 JSONP을 사용한 크로스도메인간 통신

원문 : http://www.codejs.co.kr/jquery-jsonp/ 웹은 Same origin policy이 동일한 도메인상의 요청만 가능하도록 제한하였지만, 도메인간 데이터 통신으로부터 다이나믹한 웹구현을 위한 방법으로 JSONP가 나오게 된것이다.jQuery의 ajax를 이용한 두가지 jsonp 요청 방법을 지금부터 소개 하겠습니다.첫번째, 요청 URL뒤에 ?callback=? 추가하여 jsonp 요청 구현하기jQuery 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSON 콜백은 url?callback=? 라는 구문을 사용하여 지정할 수 있다.$.getJSON() 방식을 살펴보면 u..

프로그래밍/스크립트 2015. 8. 26. 11:40

이벤트 설정 시에 jQuery의 .on()을 사용하자

원문 : http://www.mimul.com/pebble/default/2013/03/06/1362559765579.html jQuery 1.7에서 .bind(), .live(), .delegate()가 .on()으로 통합되었다길래 좀 살펴보았다. 개요.bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다. .bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다. foo에 이벤트를 설정하고 싶다면 아..

프로그래밍/스크립트 2015. 8. 25. 17:32

jQuery.on()

원문 : http://noritersand.tistory.com/218 참고문서http://api.jquery.com/on/http://www.jquerykorea.pe.kr/bbs/board.php?bo_table=jquery_api&wr_id=161&sfl=wr_subject&stx=on%28%29&sop=and .on() 하나 혹은 그 이상의 요소(노드)에 이벤트 핸들러를 부착(?)한다. Attach an event handler function for one or more events to the selected elements on( events [, selector] [, data], handler( eventObject ) )events: 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네..

프로그래밍/스크립트 2015. 8. 25. 17:26

CORS in expressjs

원문 : http://blog.niceilm.net/150176636784What is CORS?한마디로 Ajax를 사용할때 JSONP를 사용하지 않고 CrossDomain 통신을 할 수 있게 하는 것이다.http://en.wikipedia.org/wiki/Cross-origin_resource_sharinghttps://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORSWhat is expressjs?nodejs에서 가장 유명한 Web Apllication Framework 다.http://expressjs.com/How to?https://github.com/troygoode/node-cors/var express = require('express'..

프로그래밍/스크립트 2014. 9. 13. 11:02

event.stopPropagation(), event.preventDefault () 이해하기

event.stopPropagation(), event.preventDefault () 이해하기 TestEventHandler.html event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클..

프로그래밍/스크립트 2014. 5. 15. 10:16

console.log

2.1 console 객체 기존에 자바스크립트 코드를 디버깅하는 가장 단순한 방법은 바로 alert()을 사용하여 필요한 정보를 찍어보는 것이었다. alert()을 사용하는 방법은 훌륭하진 않지만, 간단히 사용할 수 있는 꽤 쓸만한 디버깅 방법이다. 다만, 일일이 확인 버튼을 클릭해 주는 일은 불편했던 것이 사실이다. 가끔 for루틴 안에 alert()을 넣고 돌리는 황당한 경험을 한두번씩 했을 것이다. 경험상, 디버깅시에 로그파일에 필요한 정보를 기록하게 되면 디버깅이 훨씬 쉬워진다. 여타 프로그래밍 언어들은 이러한 기능들을 지원하고 있다. 그 개념을 브라우저에서 실행되는 자바스크립를 위해 지원하는 것이 바로 console객체다. console객체는 IE8 이상 버전과 사파리, 크롬, 오페라같은 최신 ..

프로그래밍/스크립트 2014. 4. 24. 13:56

Javascript URL Base64 인코딩/디코딩

URL에서 한글을 쓸 때 문제가 생겨서 URL을 인코딩/디코딩을 이것저것 실험해 보다.. 한글에도 문제가 없는 것을 찾았습니다. 주소 : http://www.webtoolkit.info/javascript-base64.html 우선, 이 코드가 별 문제가 없이 되는것을 확인 했습니다. 간단하게 예제 프로그램을 만들어서 올립니다. Base64EncodeDecode.htm 아래에서 실행해서 테스트 해 보셔도 괜찮습니다. 문자입력 상자에 문자를 입력하면 각 해당 방법으로 인코딩/디코딩 한 문자열이 출력 됩니다. 그리고 인코딩이나 디코딩한 문자열을 문자입력 상자에 적용해 보고 싶으면 apply를 클릭해 주시면 됩니다. 문자입력 base64 encoded data (apply); base64 decode data..

프로그래밍/스크립트 2012. 3. 15. 13:56

HTML5 표준의 꽃 '웹소켓'…뭐길래?

브라우저가 차세대 웹표준 가운데 어느 것을 먼저 지원하느냐는 그 실용성과 중요도에 달렸다. 여러 개발사가 공통적으로 먼저 도입, 구현하려는 기능이나 기술은 그만큼 다른 표준보다 가치롭다는 뜻이다. HTML5 표준으로 등장한 웹애플리케이션(이하 '앱')용 통신기술 '웹소켓'이 주요 5대 브라우저에 모두 채택돼 실용화를 앞두면서 업계 주목을 받고 있다. 웹소켓은 브라우저와 서버가 양방향 통신을 할 수 있도록 지원하는 프로토콜이다. 이를 사용시 브라우저가 서버에 데이터를 요청하고 서버가 브라우저에 데이터를 보내기 위해 별다른 제약이 없다. 구글 크롬, 애플 사파리, 모질라 파이어폭스, 오페라소프트웨어 오페라, 마이크로소프트(MS) 인터넷 익스플로러(IE) 최신 버전이 이를 지원한다. ■'정적인 웹'은 옛말 웹..

프로그래밍/스크립트 2011. 10. 31. 10:12

티스토리툴바