I.K.Picture & IT Info.

간혹 간단한 기능을 가진 웹 어플리케이션이라도 만들어서 공유를 해보고 싶은 마음이 생겨서 만들어봤어요~ 앞으로 시간이 날 때마다 해볼 예정이구요 첫번째로 웹 페이지 상에서 현재 시간을 실시간으로 나타내고 타이머 기능을 할 수 있는 웹 어플리케이션을 만들어보았어요~ 소스코드는 Github에 공유되어있습니다(https://github.com/engintruder/Timer) 타이머 실행 방법 또한 키보드로 가능합니다. S : 타이머 시작P : 일시정지R : 시간 초기화 물론 현재는 30초로 고정되어있지만, 조금만 수정하면 얼마든지 초를 원하는데로 변경 가능하겠죠 ^^? 아래 사진이 실행한 스크린 샷을 찍은 거예요~

일단 JSLint 에 대해서 간단히 설명하자면 ... 자바스크립트 소스코드 검증기라고 볼 수 있습니다~ 소스코드 검증을 하기 위해서는 직접 사이트 (http://www.jslint.com/)에서 소스 코드를 입력하여 검증할 수도 있으며, 그 외 각 종 개발 툴에서도 플러그인으로 제공을 해주고 있어요. 대략 이런 소스코드 검증기를 쓰지 않았다가 확인을 할 경우 많이 생겨나는 오류에는 크게 2가지가 있습니다. 1. Unexpected '(space)'; 2. Missing 'use strict' statement 요 두개!! 뭐 별 큰 문제는 아니구요 그냥 정말 단순한 Warning 입니다. (그래서 사실상 나타나지 않는 경우도 많아요) 제가 사용하는 웹 개발 툴인 Brackects 에서 별도의 JSLint..

Web 개발 툴은 그리 많지가 않습니다. 그런데 몇 달전... Brackets 이라는 오픈소스 웹 개발 툴을 알게되었고.. 계속 써본 결과... 괜찮은 툴이라는 걸 알게되서 이렇게 포스팅 남겨요 ^^ 일단 Brackets 홈페이지에서 쉽게 설치할 수 있습니다. http://brackets.io/ Windows, Linux, Mac 모두를 지원하구요 그 외 Server로도 설치 가능합니다 ^^ (이부분은 나중에 포스팅 하도록 하겠습니다) 기본으로 설치만 하면 아래와 같이 나오게 됩니다~ 이렇게만 사용하는데도 문제가 없지만.. 조금 더 편리하게 사용하기 위해 다양한 플러그인 또는 테마를 설치할 수 있습니다. 그럼 제가 생각하는 필요 플러그인을 한번 ... 소개시켜드릴께요 ^^ 일단 첫번째!! 여러 테마 적용..

몇일 전 Tomcat에서 Cross-orgin의 문제를 해결하기 위해 JSONP 방식으로 통신 하는 방법을 포스팅 한 적 있습니다. JSONP 설정 포스팅 바로가기 그런데 JSONP로 모든걸 해결할 수 있지는 않아요 ㅠㅠ 그래서 이번엔 Cross-orgin 자체 허용하는 방법에 대해서 포스팅 하려고 합니다. 마찬가지로 web.xml 상에 보면 약 410줄에 cross-orgin 보안부분 내용을 추가를 하면 됩니다 ^^ (솔직히 어디에든지 추가해도 상관없지만... 이부분이 보안정책 관련된 부분 같더라구요) 추가해야될 내용은 아래와 같습니다.CorsFilterorg.apache.catalina.filters.CorsFiltercors.allowed.origins*cors.allowed.methodsGET,P..

한달 전 쯤 Same-origin policy 정책에 의해서 JSON 호출이 제한이 된다고 했고.. 이를 해결하는 방법 중 하나가 JSONP를 이용한 도메인간 통신이라고 했는데요 이전 포스팅(Same-origin policy 정책 JSONP 사용방법) 바로가기 서버(Tomcat)와 클라이언트를 별도 서버를 통해 구축 상태이면 JSON 방식으로 불러올 수가 없습니다. 이를 해결하기 위해서 톰켓에서 JSONP 방식으로 불러올 수 있도록 설정해줘야되는데요 설정 하는 방법은 엄청 간단해요 ^^ 톰켓 설정 파일증 web.xml 파일을 엽니다. 이 파일 중에는 아래 처럼 주석 처리 되어 있는 부분이 있습니다. 이부분 주석을 해제하고 톰켓을 다시 재시작 해주면 되요 ^^

웹 상에서 동일한 도메인상의 요청만 가능하도록 제한을 둔 정책으로 "Same origin policy" 가 있다고합니다. 자세한 부분은 확실히 정리가 되는데로 포스팅을 추가하도록 하겠습니다. 이러한 제한을 해결하기 위해서는 JSONP를 이용해 도메인간 통신이 가능한데요. jQuery에서는 1.2버전부터 JSONP 호출이 제공이 되고 있다고합니다 일반적으로 jQuery에서는 JSONP를 이용하려면 다음과 같이 코드를 작성하면 됩니다 $.ajax({ url: "가지고올 URL", jsonp: "callback", dataType: "jsonp", data: { //데이터가 있다면 다음과 같이 작성 (변수:"데이터") data1 : "data1", data2 : "data2" }, success: functi..

HTML 개발을 하기 위해서는 편리하게 사용 할 수 있는 개발 툴이 필요하죠.. 물론.. HTML을 진짜 편리하게 사용 할 수 있는 그런 개발 툴이 무료로 존재한다면.. 얼마나 좋겠습니까 ㅠㅠ 하지만 ... 그렇지 않기 때문에 주로 Java 개발때 많이 사용되는 이클립스(http://eclipse.org) 를 이용한 HTML 개발환경 꾸리기에 들어가보겠습니다!! (간혹... 이클립스를 다운받아서 사용하는데 이 작업을 하지 않고도 Web 환경을 사용 할 수 있는 경우가 있습니다...) 하는 방법은 무지하게 간단합니다 ^^ 일단 1. 이클립스를 실행시키고.. 2. Help -> Install New Softare 클릭!! 그러면 아래와 같이 창이 뜨게 될껍니다! 여기에서 3. Work with 부분에 htt..

어느 분야에서든지 간에 데이터가 복잡해 지면서 시각화에 대한 단어도 정말 중요해지고 있습니다. :) 그 중에 제가 관심 있는게 D3.js 인데요 ~ 앞으로 간혹 D3.js 에 대한 Tip 이나 강좌 같은걸 올려볼 생각입니다. 그러기 위해선 일단 D3.js가 무엇인지 부터 알아야겠죠~!? 일단 소개는 http://d3js.org/ 에 자세히 되어 있습니다 ^^ 하지만 영어라서 쫌 그렇다구요 ㅠ? 뭐 위의 사이트를 간단하게 정리 하자면 다음과 같죠.. (물론 제 영어실력도 그닥 좋지 않지만 ㅠㅠ...) "D3.js는 데이터를 기반으로 문서를 조작하기 위한 JavaScript 라이브러리이며, HTML, SVG, CSS를 사용한다." 간단한 내용을 보게 되면 ... "기본적으로 Selectors를 사용하여 기존..

자... 이번에도 간단한 JavaScript 함수에 대해서... 포스팅을 하려고 합니다. 뭐 잘 사용하진 않겠지만 말이죠....?? 일정시간마다 페이지를 자동으로 새로고침 하는 방법입니다. 웹 페이지 부분에 다음과 같이 추가를 하면되네요 ^^ setTimeout("history.go(0", 갱신시간); 참고로 갱신시간은... 1초 = 10002초 = 2000 이런 방식입니다!!

자바스크립트는 일정한 패턴을 가진 문자열을 간단하게 자르는 함수를 기본적으로 가지고 있습니다 ^^ 무엇이냐~! split('자를문자') 인데요 "," 로 되어있는 문자열을 자르기 위해선 아래와 같이 하시면 됩니다 ^^ var str = "abc,def,gh"; var split_obj = str.split(','); 이렇게 자르면 행렬에 자동으로 들어가게 됩니다 ^^

워드프레스(Wordpress)... 제로보드(ZeroBorad XE).. 등.. 간단하게 자신의 블로그 및 기업 홈페이지를 만들 수 있도록 제공 해주는 것들이 대부분 PHP를 이용하고 있습니다. 게시판이나 블로그에 파일을 올리기 위해서도 PHP를 사용 하는데요.. 사용하다보면 문제가 생깁니다. 무슨 문제이냐!!? 기본적으로 업로드 할 수 있는 파일 크기가 제한 되어 있다는겁니다... 그것도 대략 한 8M 정도로요.. 요샌 파일 크기가 큰 것들일 많기 때문에 8M로는 터무니 없이 부족하죠 ㅠㅠ 이러한 문제는 바로 PHP 설정을 바꾸는 방법인데요 리눅스든 윈도우든 직접 서버를 운영 하시는 분들 같은 경우 php 설치 폴더 어딘가에.. php.ini 이라는 php 설정 파일이 있습니다. (확인은 해보지 않아서..

HTML5가 아직 표준이 진행 중이지만.. 2014년 02월 26일 기준 Editor's Draft... (W3C, HTML5 Reference, http://dev.w3.org/html5/html-author/) 워낙 좋은 기능들이 많아서.. 많이 사용되고 있죠 ~!? 기능 하나하나를 한꺼번에 다루기 힘드니.. 제가 자주 쓰는 내용 하나하나씩.. 포스팅을 해볼까 합니다. 그 중 첫번째로 할 내용은 바로~! HTML5를 사용해 클라이언트에 데이터를 저장하는 방식인 로컬 스토리지!(Local Storage)와 세션 스토리지!(Session Storage) 입니다. 저장 방식은 두개 모두 Key / Value 방식으로 저장하는 것으로 동일합니다. 가장 큰 차이점으로는 로컬 스토리지는 웹 브라우저가 종료되도 ..