달력

4

« 2021/4 »

  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  

'Tip & Tips'에 해당되는 글 31

  1. 2009.09.07 PNG File 에 대한 간략 정리
  2. 2009.07.18 Twitter API 사용하기 (1)
  3. 2009.07.12 VirtualBox 3.0.2 Released (4)
  4. 2009.04.11 ExtJS의 그리드 기능 간단 분석
2009. 9. 7. 23:11

PNG File 에 대한 간략 정리 Tip & Tips2009. 9. 7. 23:11


최근에 아는 지인과 이야기 하다가, PNG 파일의 변환 이야기가 나왔다. 하고 있는 일이 있는데, 몇가지 풀리지 않는 이미징 프로세싱상의 문제점이었는데, 나의 호기심을 자극하였다.

내가 그동안 알고 있는 PNG파일에 대한 내용은
1. 라이센스가 없다.
2. R,G,B 와 알파 채널을 제공한다.
이것이 전부이다. 그래서, 쉽게 쓰고, 편하게 쓰자 였다.

요즘 왠만한 웹사이트와 개발되는 프로그램들은 PNG파일들을 대부분 기본으로 지원하고 있다. 이는 개발툴과 Application 기본적으로 지원하고 있다는 말이다.  iPhone에서도 기본 이미지는 png 파일을 이용해서 메뉴 아이콘을 구성하고 있다.

관련 자료들은 내가 잘 이용하는 위키디피아에서 찾아 보았다.
PNG파일데 대한 다음 링크를 브라우져에서 열어보면, 아래와 같은 목차가 나타난다.


세부 사항들은 위에서 각 링크를 찾아 보면 되고, 간략하게 PNG파일에 대해서 요약하면,
PNG 는 Potalble Network Graphics의 약자로, 무손실 데이터 압축을 사용하는 비트맵 이미지 포맷이다. PNG는 GIF 포맷을 개선하고, 대체하기 위해 만들어진 포맷으로 파일 포맷에 대한 라이센스를 필요로 하지 않는다. PNG는 palette기반의 24bit RGB color와 greyscale RGB 그리고 RGBA (알파체널을 포함한 RGB) 이미지들을 지원한다.
그리고, 이 파일 포맷은 인터넷상에서 전송을 위한 목적으로 설계되었기 때문에, 전문 적인 디자인을 위한 CMYK와 같은 color space는 제공하지 않고 있다.

마지막으로 PNG 파일은 "PNG" 또는 "png" 확장자로 사용되고, 인터넷에서 주로 사용하고 있는 Mine media type으로는 "image/png" 로 정의해서 사용한다.

PNG file의 헤더는 8 byte로 되어 있다. (필드의 세부 내용은 아래 참조)
Bytes Purpose
89 Has the high bit set to detect transmission systems that do not support 8 bit data and to reduce the chance that a text file is mistakenly interpreted as a PNG, or vice versa.
50 4E 47 In ASCII, the letters "PNG", allowing a person to identify the format easily if it is viewed in a text editor.
0D 0A A DOS style line ending (CRLF) to detect DOS-UNIX line ending conversion of the data.
1A A byte that stops display of the file under DOS when the command type has been used—the end-of-file character
0A A UNIX style line ending (LF) to detect UNIX-DOS line ending conversion.



PNG 파일을 사용하는 .Net Framework의 예제는 아래와 같다.
(물론 여러 툴에서 각각 UI 에서 지원하기 위한 클래스와 API가 있지만, 단지 내가 좋아하는 VB를 좋아하기 때문에 예제도 MSDN에서 찾아 보았다.)

다음 링크를 따라 가면, 2개의 예제가 있다.

사용하는 예제는 무척 간단한다. Encode 또는 Decode 클래스를 이용하면되는데, 기본적인 사용법을 알아두면, GIF 나 JPEG 의 Encode 또는 Decode 클래스를 쉽게 이용할 수 있다.

[PNG Image를  Decodeing 하는 예제]
' Open a Stream and decode a PNG image
Dim imageStreamSource As New FileStream("smiley.png", FileMode.Open, FileAccess.Read, FileShare.Read)
Dim decoder As New PngBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default)
Dim bitmapSource As BitmapSource = decoder.Frames(0)

' Draw the Image
Dim myImage As New Image()
myImage.Source = bitmapSource
myImage.Stretch = Stretch.None
myImage.Margin = New Thickness(20)

[PNG Image를  Encodeing 하는 예제]
Dim width As Integer = 128
Dim height As Integer = 128
Dim stride As Integer = width
Dim pixels(height * stride) As Byte
' Define the image palette
Dim myPalette As BitmapPalette = BitmapPalettes.Halftone256
' Creates a new empty image with the pre-defined palette
Dim image As BitmapSource = System.Windows.Media.Imaging.BitmapSource.Create( _
width, height, 96, 96, PixelFormats.Indexed8, myPalette, pixels, stride)
Dim stream As New FileStream("new.png", FileMode.Create)
Dim encoder As New PngBitmapEncoder()
Dim myTextBlock As New TextBlock()
myTextBlock.Text = "Codec Author is: " + encoder.CodecInfo.Author.ToString()
encoder.Interlace = PngInterlaceOption.On
encoder.Frames.Add(BitmapFrame.Create(image))
encoder.Save(stream)


Posted by 행복상자

댓글을 달아 주세요

2009. 7. 18. 13:10

Twitter API 사용하기 Tip & Tips2009. 7. 18. 13:10

아래 글을 사실 몇 주전에 Twitter API를 분석하기 위해서, 정리하던 자료로 Google Docs로 만들었던 자료의 일부이다. 실제로는 Twitter API 를 이용하여 개발을 할때는 자기가 원하는 언어와 툴을 사용하여 개발을 할 수 있도록, 문서들을 제공하고 있지만 자신이 자신있는 개발언어와 코드를 보면 더 쉽게 이해할 수 있을 것이다. 

개인적으로는 google app engine에 올릴 작은 서비스를 만들기 위해서 Java 라이브러리를 찾았는데, 그때 정리했던 자료인데, 별로 도움이 안 될거 같아서 그냥 지울까하다가 Blog에 올린다.

[간략히 정리한 자료]
Twitter API는 두개의 파트로 구성되어 있다. 이는 역사적이 이유때문인데, 회사의 사명이 바뀌고 Rebranding되었기 때문이다.
    - REST API, Search API => 향후에도 분리된 형태로 남을 것이다.
 
The Twitter REST API:
    - 개발자들이 Twitter core data로 접근이 가능하다.
        . update timelines, status data and user infomation
The Search API:
    - 개발자들이 Twitter Search와 Trands data의 기능의 사용할 수 있도록 해준다.
 
Rate limiting
    - Twitter API는 clients가 주어진 사간에서 제한된 수의 Calls을 만들수 있도록 허락하고
    - 이러한 정책은 두종류의 API들을 통해서 다른 방법으로 적용된다.
 
REST API Rate Limiting
    - REST API 는 시간당 100개의 requests의 기본적인 제한을 가지고 있다.
    - account and IP-based rate limitig을 가지고 있고
    - HTTP Post 를 이용하여 Twitter에게 데이터를 전송하는 경운는 제약이 없다. 
        . statuses/update 와 같을 경우에....
 
Twitter Access in Java
    - Java library
    - 모든 library를 설치해서 사용하기 보다는, 인터넷에 올라온 분석글들의 도움을 받아보니, 이중에서 Twitter4J 가 괜찮은 것 같다.

나중에 실제로 Twitter4J를 사용해보았는데 사용법이 어렵지 않아, Twitter를 사용해 본 경험이 있는 개발자라면, 쉽게 사용할 수 있다. 
사실, Twitter에서 제공하는 인터페이스를 랩핑한 코드들이기 때문에, 쉬워 보일지도 모른다.

테스트를 하면서, 갑자기 동작이 안하는 경우가 발생하는데, 이경우 API를 너무 많이 호출했는지를 먼저 의심해 보아야 한다. Twitter는 Open Platform이기는 하지만, 동일 IP주소를 사용하는 PC와 Device에 제약사항이 있는데, 시간당 100회와 하루 24시간동안 1000회를 이용 가능하도록 되어 있다. 

이러한 제약 사항을 기억하고 있다면, 원하는 서비스 모듈을 만들어 사용하는데 큰 어려움과 부족(?)함이 없을 것이다.


Posted by 행복상자

댓글을 달아 주세요

  1. coach factory outlet 2013.04.23 03:38  댓글주소  수정/삭제  댓글쓰기

    건강은 제일의 재산이다.

2009. 7. 12. 08:06

VirtualBox 3.0.2 Released Tip & Tips/VirtualBox2009. 7. 12. 08:06

Sun에서 GPL 라이센스로 개발하고 공개하고 있는 이전에 소개한 이후로 계속 버전을 업그레이드 하고 있다.
내가 개발에 필요할 때가 아니면, 자세하게 변경 내용을 들여다 보지 않는터라 얼마나 변경되었는지 알지 못하고 있다가, 이번에 싸이트를 방문하고 나서야 벌써 3.0으로 업그레이드 되었음을 알게 되었다.

이에 대한 설치 방법은 이전에 써 놓았던 아래의 Blog를 참조하면 된다.


사실 VirualBox 2.2가 지난 4월에 나오고 얼마되지 않아 VirtualBox 3가 지난 6월 30일 나온 것은 굉장히 빨리 버전이 올라가는 있다는 것인데, 그리고 나서 7월 10일 경에 3.0.2로 업그레이드한 버전을 Release하였다는 것은 기능적으로 빠르게 추가되고 있다는 의미이기도 하지만, 내부적으로 Defact가 많다는 의미이기도 하다. 

이에 대한 기존 VirtualBox2와 3의 다른 점은 Changelog에서 확인할 수 있다.

아는 사람들은 알겠지만, 몇개월 전에 Sun과 Oracle의 기업 합병이야기가 있었고, 두 회사는 다른듯하지만 내부적으로는 서버에 관련 소프트웨어 기술들은 많은 부분 유사하고 중복되어 있다. 그 중 하나가 가상화 기술은데, 합병의 여파로 VirtualBox가 중단되지 않나하는 우려도 있었는데, 지속적으로 버전업하고 있는 것은 상당한 의미를 내표하고 있다.

VirtualBox 3는 현재 Windows, Linux 그리고 Macintoch 와 OpenSolaris에서 호스트로 도작할 수 있으며, 다음과 같은 guest OS들을 사용할 수 있다. (아래 표 참조)
현재 나와 있는 OS중에서 많이 사용되고 있는 것들은 거의 모두 사용이 가능하다. 


eam. (Page last updated 2009-06-12)


Guest OS Status Remarks
Windows family
Windows 7 RC Works, with Additions
Windows Vista Works, with Additions
Windows 2000 Works, with Additions
Windows XP Works, with Additions
Windows Server 2003 Work, with Additions
Windows NT Works, with Additions Some issues with old service packs. Recommended to install service pack 6a.
* Windows 98 Works, no Additions available
Linux family
Generally, all 2.4 and 2.6 kernels work; however, we recommend 2.6.13 or above for better performance. Kernels 2.6.18 to 2.6.18.2 contain a race condition (which was unfortunately backported to the Ubuntu 6.06 Server and 6.10 kernels) that can cause boot crashes in virtual machines.
Ubuntu 5.10/6.06 Desktop/7.04/7.10/8.04/8.10/9.04 Work, with Additions
Ubuntu 6.06 Server/6.10 Works partially, with Additions The Ubuntu 6.06 Server and 6.10 kernels suffer from the race condition mentioned above.
Debian 3.1/4.0/5.0 Work, with Additions
SUSE 9/10.0 Work, with Additions
openSUSE 10.2 Works partially, with Additions The openSUSE 10.2 kernel suffers from the race condition mentioned above.
openSUSE 10.3 Works, with Additions
openSUSE 11.0/11.1 Work, with Additions
Mandriva 2008 Works, with Additions Mandriva 2008 has the guest additions for VirtualBox 1.5 installed by default. These should be updated after installation.
Mandriva 2009.0/Mandriva 2009.1 Work, with Additions
Mandrake 10.1 Works, with Additions
*Mandrake 9.2 Works, without Additions
Fedora Core 1/4/5/6 Work, with Additions
Fedora 7, 8, 9, 10, 11 Work, with Additions
Red Hat Enterprise Linux 3, 4 and 5 Work, with Additions
* Red Hat Linux 9 Works, with Additions
* Red Hat Linux 7 Works, without Additions
* Linspire 4.5 Works, with Additions
* Slackware 10.1 Works, with Additions
* Conectiva 10 Works, with Additions
* Xandros 3 Works, no Additions available
Xandros 4 Works, with Additions
ArchLinux Works, with Additions Installation has to be booted with the ide-legacy option.
Solaris
Solaris 10 5.08 and later Works, Guest Additions available No shared folder support yet.
OpenSolaris 2008.05 and later Works, Guest Additions available No shared folder support yet.
Unices
FreeBSD Works partially FreeBSD 6.2 is known to cause problems.
* PC-BSD 1.3 Doesn't work
OpenBSD Works, no Additions available
Others
DOS Works, no Additions available Only limited testing as part of system installation processes has been performed.
OS/2 Works, with Additions Requires VT-x hardware virtualization support. Only MCP2 is reported to work reliably so far.
QNX Neutrino 6.32 Doesn't work
* Novell Netware 6.5 Doesn't work
* BeOS 5 Doesn't work
Syllable Works, no Additions available
* Visopsys Doesn't work
ReactOS Works, no Additions available
* SkyOS Works, no Additions available




Posted by 행복상자

댓글을 달아 주세요

  1. 김석영 2009.08.04 09:00 신고  댓글주소  수정/삭제  댓글쓰기

    다른건 테스트 안해바고 Solaris 10 은 설치해서 연습용으로 쓰는되 VMWare 만큼 좋던되요..

  2. 행복상자 2009.08.18 04:48 신고  댓글주소  수정/삭제  댓글쓰기

    회사에서 테스트를 위해서 최근에 Windows 7 RTM 을 설치해서 사용해 보았는데, 생각보다 괜찮더군요. Vista에 비해서 Core 가 많이 가벼워 진 탓인지, XP에서 Virtual Box 설치하고 실행해 보았는데, 쓸만해요.

  3. 야매코더 2009.09.08 12:26  댓글주소  수정/삭제  댓글쓰기

    무료치고는 너무 좋습니다. 아쉬운점은 MacOS가 설치안되는거 같아요..그거 빼곤 괜찮습니다.

    • 행복상자 2009.09.13 05:32 신고  댓글주소  수정/삭제

      네 맞습니다. 저도 새로 버전업 될때마다, 가장 먼저 찾아 보는 항목입니다. 아마도 언젠가는 될거라 생각하고 기대(?)하고 있습니다.

2009. 4. 11. 08:53

ExtJS의 그리드 기능 간단 분석 Tip & Tips/JavaScript2009. 4. 11. 08:53

최근에 프로젝트에 ExtJS를 비록하여 몇가지 JavaScript 프레임워크를 검토한 적이 있다.
내부적으로 ExtJS를 사용하고 있지만, 결코 주변의 다른 프로젝트를 진행하고 있는 사람들에게는 적극적으로 권하지 않는다. 왜냐하면, 한국은 HTML, CCS 그리고 JavaScript를 웹 프로그램의 한 부분으로 생각하지 않고 있을 뿐더러, 그렇다고 디자이너의 역할 중의 하나라고도 생각하지 않는다. 그렇게 때문에 HTML, CSS 그리고 JavaScript의 전문가를 찾아 보기가 쉽지 않다.

ExtJS를 권하지 않는 이유는 처음 이를 사용할 때는 Windows에서나 제공할 수 있었던 많은 기능들이 컴포넌트화 되어 있어서, 사용하기 편할거라는 생각을 하는데, 이를 응용한 새로운 컴포넌트를 만들거나 제대로 기능을 사용하려면, 약 2달정도의 학습시간이 필요하기 때문이다. 개발 초기에 이를 감안한다면, 사용하는 것은 별 문제 없지만, 기존의 HTML과 CSS만을 이용할 때보다는 전체 개발시간이 늘어날 거라고 반드시 예상하고 개발 플랜을 잡아야 할 것이다.

최근에 기존에 개발되어 있던 기능을 살펴볼 일이 있었다.
개발자가 ExtJS의 코드를 그대로 가져다 써서 인지 사소한 버그가 있었다. ExtJS의 버그나 잘못은 아니라고 생각한다. Ajax와 ExtJS의 그리드 컴포넌트를 이용하였는데, 마지막 페이지에 있던 Rows를 모두 삭제하면 이전 페이지로 이동해야 하는데, 마지막 페이지 그대로를 표시하는 것이었다.

그래서, 몇가지 자료를 찾아보았더니, 관련된 예제는 아래와 같은 Link에 있었다.
그리드에 데이터 목록을 가져오고, 목록에 추가/수정/삭제에 대한 예제가 있다.

예제: Tutorial:Using Ext grid form dialog to achieve paging list, create, edit, delete function 

이중에서 delete에 대한 예제는 아래와 같았다. (아래 Delete Function 예제 참조)

 Delete function

Delete function will get the selected id(s) and create JSON data and send JSON data to Java server-side for handle.

/************************************************************
    * Action - delete
    *   start to handle delete function
    *   need confirm to delete
    ************************************************************/	
    function doDel(){
        var m = grid.getSelections();
        if(m.length > 0)
        {
        	Ext.MessageBox.confirm('Message', 'Do you really want to delete it?' , doDel2);	
        }
        else
        {
        	Ext.MessageBox.alert('Message', 'Please select at least one item to delete');
        }
    }     
 
    function doDel2(btn)
	{
       if(btn == 'yes')
       {	
			var m = grid.getSelections();
			var jsonData = "[";
	        for(var i = 0, len = m.length; i < len; i++){        		
				var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
				//alert(ss);
				if(i==0)
	           		jsonData = jsonData + ss ;
			   	else
					jsonData = jsonData + "," + ss;	
				ds.remove(m[i]);								
	        }	
			jsonData = jsonData + "]";
			ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});		
		}
	}

And delete parameter to server side with JSON data like this: delData=[{"id":"5"},{"id":"6"}]


위 예제를 보면, 서버로 데이터를 요청할 때, 파라메터로 start 값과 limit값을 보내줌을 알수 있다.
상기 예제 소수의 하단을 보면,    ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
라는 코드가 눈에 들어올 것이다. 이를 이용하여, 서버에서 DB에 쿼리를 수행해서 현재 페이지에서 필요로 하는 첫 번째 인텐스 값과 현재 페이지에서 표시할 수 있는 데이터의 갯수를 가져오는 것인데, 위 예제는 기본적으로 "0"번 인덱스를 서버로 보내서 매번 1페이지만 가져오는 것이다.

만약 이를 해결하려면, 두가지 방법이 있는데

첫번째는 위에서 사용했던 함수 ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
의 start 파라메터에 이전 페이지의 첫번째 인덱스를 넣어주는 것이다. 이를 위해서는 전체 Total Counter를 이용하여 총 페이지 수와 인덱스를 찾는 로직이 필요한데, 이미 많이 사용되는 코드라 쉽게 찾고, 만들수 있을 거라 생각된다.

두번째는 페이지 네이션을 모두 서버에서 담당하는 것이다. 이 경우는 동시에 사용자들이 수정 추가 삭제에 대해 부분도 충분히 고려되어 질 수 있다. 이에 필요한 계산 로직은 위의 첫번째 방법과 별로 다르지는 않고 단지 책임에 대한 부분만 책임을 지면된다. 이때는 서버에 현재 페이지의 첫번째 인덱스 번호를 서버로 보내주는 것이 바람직하다.
이를 이용하여 서버에서는 전제 개수와 페이지를 계산하고 마지막 페이지가 존재하지 않는 경우 이전 페이지의 목록을 보내주면 되기 때문이다.
 

Posted by 행복상자

댓글을 달아 주세요