이클립스의 문제인지 톰캣의 문제인지는 모르겠지만 황당하게도 분명 전에는 잘 실행되던 웹프로젝트가 갑자기 class 파일을 찾을 수 없다며 오류를 뿜어내는 경우가 있습니다.

이런 때에는 오류에 찾을 수 없다고 나오는 class 파일이 들어있는 jar 파일들을 모두 삭제한 후 재 import 하면 해결될 수 있습니다.

또한 struts 태그를 갑자기 인식하지 못하는 경우가 발생하는 경우도 있는데 이때에는 taglib 지시자의 uri 속성에 설정한 "/struts-tags" 를 삭제하고 다시 적어준 후 재저장하면 해결될 수 있습니다.

정확히 어떤 이유로 이렇게 되는건지 알고 싶은데 인터넷으로 찾아봐도 정확하게 나와있는 곳이 없네요.. 
Posted by 플라스틱라디오

티스토리 기본 단축키  

티스토리에서는 편리하게 블로그의 메뉴로 이동할 수 있도록 단축키를 제공하고 있습니다. 티스토리의 기본 단축키는 다음과 같습니다.

A : 이전 페이지
S : 다음 페이지
J : 아래로 이동
K : 위로 이동 태터툴즈 단축키
Q : 관리자 모드
R : 리더
T : 리더 갱신
Z : 최근 엔트리
X : 최근 댓글
C : 최근 트랙백

 





티스토리 단축키 추가  

티스토리에서는 skin.html을 수정해 직접 단축키를 추가하는 것도 가능합니다. 글쓰기 단축키를 추가하는 경우 아래와 같은 코드를 skin.html의 <header>태그안에 넣어주면 됩니다. 
  
<script type="text/javascript"> 
	<!--
	var key = new Array();
	
	// 단축키 정의
	key['n'] = "/admin/entry/post";

	function getKey(keyStroke) {
		if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){
			isNetscape=(document.layers);
			eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
			which = String.fromCharCode(eventChooser).toLowerCase();
			for (var i in key)
			if (which == i) window.location = key[i];
		}
	}

	document.onkeypress = getKey;
	//--> 
</script>




출처 : 리치왕의 마리오네트 
Posted by 플라스틱라디오
TAG 단축키

js 파일 사용시 한글 깨짐 현상  

 html 문서 내에서 직접 자바스크립트 언어를 사용할 경우에는 문제가 없지만, 자바스크립트 언어를 js 파일로 생성한 후 html 문서에서 연결하여 사용하는 경우에는 js파일 내에서 사용된 한글이 깨져서 표시 될 수 있습니다.

아래의 코드를 보면 alert 메소드를 사용해 한글 경고 메세지를 띄우는 자바스크립트를 수행하는 jquery.test.js 파일을 html에서 연결해 사용하고 있는데, 이를 실행하면 한글이 깨지는 현상이 발생합니다.


html 파일
<script type="text/javascript" src="js/jquery.test.js"></script>

js 파일
alert("한글 깨짐 현상 테스트");





한글 깨짐 현상 해결  

이를 해결하는 방법은 간단합니다. 한글이 깨지는 js 파일을 에디터플러스 같은 편집툴로 열어 새로 저장하기를 누른 다음 Encoding을 Unicode로 설정한 후 다시 저장해 주면 됩니다. 

 


그러면 아래와 같이 깨졌던 한글이 정상적으로 출력 됩니다.

Posted by 플라스틱라디오
TAG jQeury
티스토리의 사이드바에 아래와 같은 RSS 구독 버튼을 다는 방법입니다. 이 버튼들은 티스토리에서 기본적으로 지원해 주는 것으로 원래는 사이드바의 기본 RSS 구독 버튼을 클릭시 이동하는 페이지에 달려있는 것인데, 이 버튼을 이용해 RSS 구독을 하려면 먼저 기본 RSS 구독 버튼 클릭해서 페이지을 해야하는 단계를 거쳐야 하기 때문에 다소 불편함이 있습니다.




 
 
사이드바에 HTML 배너 출력 모듈 추가  

사이드바에 RSS 구독 버튼을 추가 하려면 먼저는 사이드바에서 HTML 모듈을 사용가능하도록 플러그인 설정을 해주어야 합니다. 

방법은 간단합니다. 일단 티스토리 관리자 페이지로 이동합니다. 그 다음 왼쪽의 메뉴들 중 '플러그인 설정' 메뉴로 들어가서 '관리 및 통계 - 배너 출력'을 체크해 줍니다. 그러면 사이드바에 HTML 배너 출력 모듈을 추가하는 것이 가능해 집니다. 





HTML 배너 출력 모듈에 RSS 버튼 설정  

이제 사이드바에 HTML 배너 출력 모듈을 추가한 후 원하는 위치로 이동 시킨 후에 편집 버튼을 눌러 RSS 구독 버튼을 추가하는 코드를 넣어줍니다. 각 RSS 구독 버튼에 대한 코드는 아래와 같습니다. 



다음 블로그
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href,'daumrssregister','width=540 , height=306, status=no, toolbar=no, menubar=no, location=no, resizable=yes');return false;" href="http://blog.daum.net/_blog/rss/ManagerChannelInsertForm.do?channelUrl=http://블로그주소.tistory.com/rss&amp;channelCheck=true&amp;event=t">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=37 alt="Daum블로그로 구독" src="http://icon.daum-img.net/2008_guide/rss/rss_btn_blog.gif" width=112> </A>

한RSS
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://www.hanrss.com/add_sub.qst?url=http://블로그주소.tistory.com/rss">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=HanRSS src="http://icon.daum-img.net/2008_guide/rss/rss_btn01.gif" width=106> </A>

구글리더
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://fusion.google.com/add?feedurl=http://블로그주소.tistory.com/rss">
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=Google src="http://icon.daum-img.net/2008_guide/rss/rss_btn03.gif" width=106> </A>

XML
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" href="http://jmail.tistory.com/rss/xml" target=_blank>
<IMG style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=RSS src="http://icon.daum-img.net/2008_guide/rss/rss_btn04.gif" width=106> </A>

Bloglines
<A style="CURSOR: pointer! important; COLOR: rgb(86,137,66)! important; LINE-HEIGHT: 2em; TEXT-DECORATION: underline" onclick="window.open(this.href);return false;" href="http://www.bloglines.com/sub/http://블로그주소.tistory.com/rss">
<IMG style="CLEAR: none; BORDER-RIGHT: 0px; BORDER-TOP: 0px; FLOAT: none; BORDER-LEFT: 0px; LINE-HEIGHT: 2em; BORDER-BOTTOM: 0px; max-width: 100%" height=24 alt=Bloglines src="http://icon.daum-img.net/2008_guide/rss/rss_btn05.gif" width=106> </A>
 
이를 응용하면 다른 RSS 리더의 구독 버튼도 쉽게 추가할 수 있을 것 같습니다.


출처 : J편지 
Posted by 플라스틱라디오

모바일 네이티브 앱과 웹 앱  

모바일 기기(스마트폰 혹은 태블릿)에서 작동하는 앱의 종류는 크게 두가지로 나눌 수 있습니다. 모바일 기기의 내부에서 자체적으로 동작하는 네이티브 앱과 웹을 통해 동작하는 웹 앱입니다.
 
네이티브 앱이 성능면에서 웹 앱보다 뛰어나지만 모바일 OS마다 다른 언어를 이용해 프로그래밍 해야 한다는 단점이 있습니다. 이에 반해 웹 앱은 모든 모바일 OS에서 지원하는 HTML5, CSS, JavaScript로 개발하므로 어떠한 OS에서도 동작이 가능하다는 장점을 가집니다. 하지만 네이티브 앱보다 성능이 떨어지며 모바일 기기의 특정 하드웨어 기능들을 사용할 수 없다는 단점을 가집니다.


네이티브 앱웹 앱
장 점  구동속도가 빠름
 인터렉티브한 사용자 환경을 제공
 OS 및 기기별로 특정 어플의 개발이 가능
 네이티브 앱에 비해 개발 기간이 짧음
 웹개발 지식으로 개발이 가능
 업데이트 및 수정 변경이 용이
 어떤 OS라도 접근이 가능 
단 점  웹 앱에 비해 고비용, 개발기간이 길다
 웹 앱에 비해 업데이트 및 수정이 어려움
 OS에 따라 사용되는 프로그래밍 언어가 다름 
 인터넷을 통해 접속하므로 구동이 느림
 모바일 기기의 특정 기능 사용 못 함
 브라우저를 통한 2차 접근이라 접근성 낮음 
출처 :  밥사이다의 잡학발산




하이브리드 앱  

하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 합친 형태의 앱입니다. 즉, 앱의 내부는 HTML5, CSS, JavaScript 코드로 만들고 이를 각각의 모바일 OS에서 실행되도록 패키징하는 방식입니다. 단순히 말해 네이티브 앱으로 겉을 감싼 웹 앱이라 할 수 있겠습니다. 한마디로 네이티브 앱 처럼 돌아가는 웹 앱인 셈입니다.

하이브리드 앱은 기본적으로 웹을 통해 동작하지만 가속도 센서, 카메라, 진동 등의 모바일 기기의 네이티브 기능을 사용하는 것이 가능합니다. 또한 웹브라우저에서 URL을 입력하므로써 작동하는 웹 앱과는 달리 네이티브 앱처럼 앱을 동작할 수 있어 사용자는 마치 네이티브 앱을 사용하는 것과 같은 접근성을 가질 수 있습니다.

하이브리드 앱 개발에 사용되는 모바일웹 개발 프레임워크로는  Sencah Touch, jQTouch, jQuery Mobile 등이 있으며, 하이브리드 앱 개발 프레임워크로는 PhoneGap, Appspresso, Accelerator Titanium이 있습니다.

기존에 나와있는 대표적인 하이브리드 앱으로는 네이버앱, 다음앱, 멜론앱 등이 있습니다. 웹서비스들의 모바일 앱들은 대체적으로 하이브리드 앱 형태로 만드는 것 같네요. 하이브리드 앱이라는 것을 몰랐을때는 안드로이드 폰에서 이 앱들을 이용하면서 어떻게 UI를 구성했는지 궁금해했었는데 이제보니 안드로이드 코드로 작성된게 아니었었다는..^^;;

안드로이드 네이버 앱


안드로이드 멜론 앱




참고 : 밥사이다의 잡학발산

'모바일프로그래밍' 카테고리의 다른 글

하이브리드(Hybrid) 앱  (2) 2011.12.13
Posted by 플라스틱라디오
구루님 블로그에 올라와 있는 HTML5을 이용한 모바일 웹애플리케이션 만들기 강좌입니다. HTML5의 모바일 웹앱 관련 API에 대한 다루고 있네요. 읽어보니 HTML5가 모바일 앱을 구현하기 상당히 유리하다는 것을 알 수 있군요. 모바일 웹애플리케이션에 대해 관심이 많은데 강좌를 보니 대충 감이 잡히는 것 같습니다. 모바일 웹애플리케이션을 공부하는데 꽤 유용한 강좌인 것 같네요.^^

HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가
HTML5 API 강좌 #1 – Web Storage 와 Application Cache
HTML5 API 강좌 #2 – Web SQL Database 와 GeoLocation

'웹프로그래밍 > HTML5' 카테고리의 다른 글

구루님의 HTML5 on Mobile 강좌  (0) 2011.12.13
Posted by 플라스틱라디오
TAG HTML5
아래와 같은 소제목 배경을 생성해 주는 html 코드입니다.


소제목 배경  


<table style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=2 width="99%" bgColor=#ffffff>
  <tbody>
  <tr>
    <td style="BORDER-RIGHT: #1e78d2 1px solid; BORDER-TOP: #1e78d2 1px solid; BORDER-LEFT: #1e78d2 1px solid; BORDER-BOTTOM: #1e78d2 1px solid" width=273 bgColor=#1e78d2>
      <span style="FONT-SIZE: 10pt; COLOR: #ffffff; FONT-FAMILY: Gulim">
        <strong>제목을 입력하는 곳</strong>
      </span>
    </td>
    <td style="BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-BOTTOM: #1e78d2 1px solid">
      &nbsp;
    </td>
  </tr>
  </tbody>
</table>
Posted by 플라스틱라디오
SyntaxHighlighter  

SyntaxHighlighter는 티스토리에서 프로그래밍 코드를 사용할 경우 보기 좋기 변환해 주는 플러그인 입니다. 현재(2011/12/12일 기준) 3.0.83 버전까지 릴리즈 되어있으면 다운로드는 아래의 링크에서 받으실 수 있습니다.

SyntaxHighlighter 다운로드 페이지 가기

 



SyntaxHighligter 티스토리에 설치  
 
다운 받은 SyntaxHighliter를 티스토리에 적용시키는 것은 간단합니다. 먼저 다운받은 압축 파일을 해제 한 후 script, style 폴더에 있는 파일들만 티스토어의 HTML/CSS 편집의 파일업로드 메뉴에서 업로드 시킵니다. 그 다음 skin.html의 head 태그 안에 아래의 코드를 추가 합니다.
<!-- SyntaxHighlighter Start -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script> 
<link type="text/css" rel="stylesheet" href="./images/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/> 
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>
<!-- SyntaxHighlighter End -->


그리고 크롬 브라우저 사용자를 위해 css 편집창에 아래의 코드를 추가 합니다.
div .syntaxhighlighter { 
	overflow-y: hidden!important; overflow-x: auto!important; 
}





티스토리에서 SyntaxHighlighter 사용  

글 작성시 코드 하이라이트를 적용하려면 글쓰기시 창의 상단 우측에 있는 html에 체크를 한 후 아래와 같이 pre 태그를 사용하여 코드 하이라이트 적용시킬 부분을 설정합니다.

<pre class="brush:코드이름">여기에 코드 작성</pre>


코드 이름에 코드 하이라이트를 적용하기 원하는 코드의 종류를 써 주면 됩니다. brush에 사용가능한 코드이름은 아래와 표와 같습니다. (brush 명을 사용하려면 필요 js 파일이 반드시 설치되어 있어야 합니다.)

분류사용가능 brush명 
필요 파일
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js
테이블 출처 : 이런저런이야기


그 다음 html의 체크를 다시 해제한 후 위지웍 글쓰기 창에서 원하는 코드를 넣어주면 됩니다.



추가적으로 특정 줄에 하이라이트를 주고 싶다면 아래와 같이 pre 태그의 class 속성에 highlight 항목을 설정해 주면 됩니다.

    
   
       코드 들어가는 부분
    
<div class="title">
    <div class="wrapper">
        <h1>
            <a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a>
            <span class="blogCover">[##_desc_##]</span>
        </h1>
    </div>
</div>


또한 SyntaxHighlighter의 스타일을 변경하는 경우에는 skin.html에서 css를 바꿔주면 됩니다. SyntaxHighlighter의 스타일에는 shCore.css, shCoreFadeToGrey.css, shCoreEclipse.css, shCoreEmacs.css 등이 있습니다.


참고 : TistorySkin






SyntaxHighlighter Code Converter  

티스토리에 SyntaxHighlighter를 이용해 코드를 올릴 시 원하는 대로 표시가 되지 않는 경우가 많은데 이러한 문제를 해결해주는 프로그램 입니다. 견족자K 님 께서 만드신 프리웨어로 코드 수정하지만 않는다면 자유롭게로 사용이 가능하다네요.




사용법은 아래의 출처의 링크를 참고하시면 됩니다.


출처 : '자유로운 그날을 위해' 블로그


Posted by 플라스틱라디오

반디앤루니스 책소개 페이지로 이동 

  본 포스팅의 내용은 실전 jQuery 쿡북(v1.4.x 증보판)에서 발췌하여 편집한 것임을 미리 밝힙니다. 




jQuery란?  

jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다. jQuery는 HTML 문서를 간단히 탐색하고 조작하며, 브라우저 이벤트 처리, DOM 애니메이션, Ajax 상호작용 및 자바스크립트 크로스 브라우저 개발을 쉽게 해준다.


jQuery의 장점은 오픈소스라서 무료로 이용이 가능하고, 용량이 작으며, 웹표준을 직접 처리할 필요가 없고, 플러그인 자료들이 풍부하다는 것이다. 




jQuery의 특징  
 
jQuery의 특징은 크게 세 가지 개념으로 나누어 질 수 있다.
  • CSS 셀렉터를 통해 몇몇 요소를 찾아서 그들로 jQuery 메서드를 사용하여 어떤 작업을 수행
  • 요소의 집합에 대해 여러 jQuery 메서드를 체인으로 연결 
  • jQuery 래퍼와 암시적인 반복을 사용


첫번째 개념은 몇몇 요소(태그)를 찾아서 그들로 어떤 작업을 수행하게 하는 것인데 이는 좀 더 구체적으로 말해 DOM 안에 있는 요소 집합을 찾은 다음 그 요소 집합을 가지고 어떠한 작업을 수행하는 것을 말한다.
 
아래의 코드는 페이지의 <div> 요소를 찾아 숨기거나 텍스트를 나타내는 등의 작업을 수행하는 jQuery 코드이다.

// 페이지의 모든 div를 숨긴다.
jQuery('div').hide();

// 모든 div의 내부 텍스트를 변경한다.
jQuery('div').text('new content');

// div에 updatedContent 클래스를 추가한다.
jQuery('div').addClass("updatedContent");

// 페이지에 모든 div를 나타낸다.
jQuery('div').show();




두번째 개념은 일단 요소를 찾고 나면 그 요소에 대해 체인으로 연결 할 수 있다는 것이다. 명확하게 말해, 체인은 jQuery 함수를 사용하여 현재 선택된 요소에 jQuery 메소드를 끝없이 연결하여 적용할 수 있게 하는 기법이다. 내부적으로 각 메소드들은 항상 jQuery 메소드가 적용되기 전에 선택된 요소를 반환하는데, 그렇기에 체인을 계속 이어갈 수 있는 것이다.

아래의 코드는 첫번째 개념을 설명하는데 쓰였던 코드를 체인을 사용해 단일 코드로 변경한 것이다. 

jQuery('div')
	.hide()
	.text('new content');
	.addClass("updatedContent");
	.show();




세번째 개념은 jQuery에서는 요소들의 래퍼 집합을 선택하여 다루게 된다는 것이다. 다시 말해 jQuery 기능으로 둘러싸인 DOM 요소를 HTML 페이지에서 선택하게 될 것이라는 의미이다. 이러한 래퍼 집합은 하나의 DOM 요소를 포함하기도 하고, 때로는 여러 개를 포함하기도 하며, 심지어 아무런 요소를 포함하지 않는 경우도 있다. 이러한 경우 비어있는 래퍼 집합에 대해 jQuery 메소드를 호출한다면 (에러를 포함한) 어떠한 반응도 하지 않는다. (따라서 null 값을 체크하는 if문을 사용할 필요가 없다.)

아래의 코드의 경우 jQuery는 페이지의 모든 <div> 요소를 찾아내어 래퍼 집합으로 바꾼 후 각각의 DOM 요소들에 대해 연결된 jQuery 메서드를 실행한다. 즉, hide() 메소드가 집합 안에 있는 각각의 <div> 요소에 모두 적용되는 것이다. 곧, 명시적으로 루프를 수행하지 않아도 내부적으로 간결한 루프가 실행되는 것이다.

<body>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>

	<script>
		// 페이지의 모든 div를 숨김
		jQuery('div').hide();
	</script>
</body>
Posted by 플라스틱라디오
TAG jQuery


맨 위로