이전 글 CodeIgniter 라이브러리에 ZendAMF 추가하기를 마치셨다면 이번에는 Flex와 연동하는 것을 시작하겠습니다.
대부분은 글은 머드초보님의 글을 바탕으로 진행할 예정입니다.(출처: [Flex/PHP] Zend AMF를 이용한 PHP와 FLEX의 연동삽질후기)

①. 먼저 DB를 생성하고 데이터입력입니다

DROP TABLE IF EXISTS `sosi`.`sosi`; 
CREATE TABLE  `sosi`.`sosi` ( 
  `idx` int(10) unsigned NOT NULL AUTO_INCREMENT, 
  `sosiname` varchar(45) NOT NULL, 
  `height` int(10) unsigned NOT NULL, 
  `blood` varchar(45) NOT NULL, 
  PRIMARY KEY (`idx`) 
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8; 
 
INSERT INTO `sosi` (`idx`,`sosiname`,`height`,`blood`) VALUES  
 (1,'윤아',166,'B'), 
 (2,'수영',170,'O'), 
 (3,'효연',160,'AB'), 
 (4,'유리',167,'AB'), 
 (5,'태연',162,'O'), 
 (6,'제시카',163,'B'), 
 (7,'티파니',162,'O'), 
 (8,'써니',158,'B'), 
 (9,'서현',168,'A');

 

②. Flex Project 'ZendAmfTest'를 만듭니다. 머드초보님은 Application server type을 php으로 하셨는데 저는 서버가 외부에 있어서 None/Other로 하였습니다. 로컬이라면 php를 선택하신 다음에 아파치나 iis가 돌아가는 폴더를 지정하면 됩니다. 지정하게 되면 SWF가 서버로 바로 위치하게 되므로 테스트하기 편합니다.

③. 그런 다음 system>application>libraries에 sosimember.php라는 파일을 만듭니다. CI특성상 파일명은 소문자로 만드셔야합니다.


 

④. 다음은 DB에서 데이터를 가져오고 반환하는 모델을 만듭니다. system>application>models에 sosimodel.php를 생성하시고 아래 코드입력합니다.
load->library("SosiMember");
    	
        $query = $this->db->query('SELECT idx, sosiname, height, blood FROM sosi;');
        
        $ret = array();
        foreach ($query->result() as $row){        
            $tmp = new SosiMember(); 
            $tmp->idx = $row->idx; 
            $tmp->sosiname = $row->sosiname; 
            $tmp->height = $row->height; 
            $tmp->blood = $row->blood; 
            $ret[] = $tmp; 
        } 
        return $ret; 
    }
}  
?>

⑤. 다음은 controllers를 만듭니다. 여기에 ZendPHP가 들어갑니다. system>application>controllers에 remote.php를 생성하시고 아래 코드입력합니다.
load->model('SosiModel');    
    }
    
    public function index()
    {
        $this->load->library("Apps");
        $this->apps->load("Zend/Amf/Server");
        $server = new Zend_Amf_Server();
        $server->setClass("SosiModel"); 
		$server->setClassMap("SosiMember", "SosiMember"); 
		echo($server -> handle()); 
        
    }
}  
?>

⑥. 이제 Flex에게 PHP를 연결할 설정을 역할을 하는 service-config.xml을 만듭니다.
 
  
      
         
             
                    
              
             
                  
                    *  
                     
                
          
      
      
          
             
          
     

⑦. Flex파일 ZendAmfTest.mxmlf에 아래 코드를 입력합니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml
    layout="vertical"
    creationComplete="creationCompleteHandler()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   
   private function creationCompleteHandler():void
   {
    roSosi.getData();
   }
   
   private function faultHandler(event:FaultEvent):void
   {
    Alert.show(event.message.toString());
   }
   
   private function resultGetDataHandler(event:ResultEvent):void
   {
    dgSosi.dataProvider = event.result as Array;
   }
  ]]>
 </mx:Script>
 
 <mx:RemoteObject id="roSosi" fault="faultHandler(event)" destination="zend" source="SosiModel">
  <mx:method name="getData" result="resultGetDataHandler(event)" />
 </mx:RemoteObject>
 
 <mx:DataGrid id="dgSosi" width="100%" height="100%">
  <mx:columns>
   <mx:DataGridColumn headerText="아이디" dataField="idx"/>
   <mx:DataGridColumn headerText="소녀시대이름" dataField="sosiname"/>
   <mx:DataGridColumn headerText="신장" dataField="height" />
   <mx:DataGridColumn headerText="혈액형" dataField="blood" />
  </mx:columns>
 </mx:DataGrid>  
</mx:Application>

SyntaxHighlighter가 Flex를 지원하지 않네요ㅠ
만약 다른 서비스를 추가하게 된다면, <mx:RemoteObject>에서 endpoint를 다른 url로 잡아주면 됩니다.
<mx:RemoteObject id="roAnother" fault="faultHandler(event)"  
       
destination="zend" source="AnothorService"  
       
endpoint="http://localhost/ZendAmfTest-debug/another_amf.php">


그렇게 Flex를 컴파일 하게 되면 아래와 같이 출력됩니다.


이상입니다. 혹시 에러나 잘못된 점은 지적해주시기 바랍니다.

참고사이트:

http://corlan.org/2008/11/13/flex-and-php-remoting-with-zend-amf/ 
http://mudchobo.tomeii.com/tt/398

Posted by Finebe
,



AMF(Action Message Format
)이란?

-한마디로 말해서 서버와 SWF(플래시)의 통신이 AMF라고 불리는 Binary형식의 프로토콜을 사용하여 이루어지며 서버상에 있는 원격지 객체를 호출합니다.

-가장 작은 패킷 크기에 데이터 통신에 필요한 거의 모든 옵션을 넣을 수 있는 바이너리 메세징 프로토콜

-HTTP(80포트), HTTPS(443)를 통해 통신하기 때문에 방화벽을 무시할 수 있습니다.

-AMF는 플래시 플레이어가 인식 가능한 기본 메세징 포맷이므로 클라이언트에서 데이터 직렬화와 역직렬화가 자동으로 처리되며 속도도 빠릅니다.

-게이트웨이는 HTTP(80포트), HTTPS(443)를 통해 AMF패킷 송수신, AMF직렬화/역직렬화, 적절한 서비스에 요청위임 등을 수행할 수 있는 게이트웨이 라이브러리가 필요합니다. 이러한 게이트웨이 라이브러리 여러 종류 중에 우리는 여기서 ZendAMF라는 것을 사용할 것입니다.


AMF의 구조 :
 http://wiki.gnashdev.org/AMF


Actionscript & PHP Type Mapping

   

PHP to ActionScript mapping

  

PHP

ActionScript

null

null

boolean

boolean

string

string

DomDocument

xml

DateTime

date

float

number

integer

number

Associative Array w/ mix of keys

Object

Associative Array w/ Numeric index of keys

Array

object

object

RemoteClass Zend_Amf_Value_TypedObject

typed object

Zend_Amf_Value_ByteArray

flash.utils.ByteArray

Zend_Amf_Value_ArrayCollection

  

 

원본 위치 <http://framework.zend.com/wiki/display/ZFPROP/Zend_Amf+-+Wade+Arnold>


ZendAMF란?

-Remoting Gateway Library로써 Adobe가 공식지원하여 Zend 프레임워크에서 만들었습니다. AMF3 스펙를 사용하여 AMF0스펙를 사용한 AMFPHP보다 뛰어난 성능을 발휘합니다.    

----------------------------------------------------------------------------------------------------------------------

   

AMF3 스펙 기반으로 만들어진 ZendAMF 라이브러리를 가볍고 막강한 성능을 자랑하는 CI에 추가해보도록 하겠습니다.

   

  1. 준비물:
    1. CodeIgniter (http://codeigniter.com)
    2. ZendAMF (http://framework.zend.com/download/amf)
       
  2. CodeIgniter를 서버에 설치한 후 ZendAMF를 압축해제합니다. 그러면

    이 생성됩니다. 여기서 사용할 것은 library폴더에 들어있는 Zend라는 넘만 쓸 것입니다. Zend폴더를 복사하여
    system>application>libraries>Zend폴더에 넣습니다.

  3. CI의 config파일의 내용변경

    $config['enable_hooks'] = FALSE; --> $config['enable_hooks'] = TRUE;로 변경합니다.

  4. 후킹을 통한 프레임워크 코어확장
    코어파일을 해킹하지 않고도 내부작동방식을 변경하게 하는 기능인 후킹(설명)을 이용하여 컨트롤러가 호출되기 직전(pre-controller)에 실행하게 되게 추가합니다.

    위 hooks.php 파일에 아래 코드를 추가하시면 됩니다.

$hook['pre_controller'][] = array(

  'class' => 'App_hook',

  'function' => 'index',

  'filename' => 'app_hook.php',

  'filepath' => 'hooks'

);


5.    app_hook파일을 hooks폴더에 추가합니다.
 
app_hook.php 파일 안의 코드는

<?php 

if(!defined('BASEPATH')) exit('No direct script access allowed');

   

class App_hook

{

    function index()

    {

        ini_set('include_path',ini_get('include_path').PATH_SEPARATOR.BASEPATH.'application/libraries/');

    }

}

?>

이는 기존의 include_path의 값에 appliaction/libraries/를 추가한 것입니다.

6.    Zend 클래스와 다른 프레임워크 클래스를 이용하기 위해 하나의 사용자 라이브러리 파일을 만듭니다.

 

     그 파일 안의 코드는 다음과 같습니다.

<?php if (!defined('BASEPATH')) {exit('No direct script access allowed');}

   

class Apps

{

    function __construct($class NULL)

    {

        if(!empty($class) && is_array($class))

        {

            foreach($class as $item)

            {

                $this->load($item);

            }

        }

    }

      

    function load($class)

    {

        require_once (string) $class EXT;

    }

?>


7.    이제 ZendAMF 라이브러리를 사용할 준비는 끝났습니다. 테스트로 ZendAMF를 로드하는 Remoting Class를 만들어보겠습니다. 여기서 주의하실 점은 폴더명의 대소문자입니다. 이 글의 참고사이트에는 대문자로 되어있어서 그대로 하시면 오류가 생기십니다.
 
        파일을 만드신 후에 안에 코드는 아래와 같습니다.

<?php

class Remote extends Controller 

{

    function Remote()

    {

        parent::Controller();    

    }

      

    function index()

    {

        $this->load->library("Apps");

        $this->apps->load("Zend/Amf/Server"); //여기서 AMF가 아니라 Amf입니다. 각자 다를 수 있으니 확인하세요

          

        $server = new Zend_Amf_Server();

        $server->setClass($this);

        echo $server->handle();

    }

      

    function getData()

    {

        return array(1,2,3,4,5);

    }

?>


8.     Remote클래스를 호출합니다.
 
이라고 뜬다면 성공입니다. 그 외에 폴더명이 잘못되서 에러가 발생할 수 있습니다. 다시 한번 대소문자를 꼭 확인!! 

   

  
 
참고사이트

http://codeigniter.com/wiki/AMF_Flash_Remoting_with_Zend_and_CI/
http://www.cyworld.com/duck_info/3856801
http://framework.zend.com/wiki/display/ZFPROP/Zend_Amf+-+Wade+Arnold

Posted by Finebe
,




위 그림은 왼쪽부터 IE, 파이어폭스, 크롬, 오페라, 사파리를 재미있게 표현한 그림입니다. 서로 사이 좋게 손을 잡고 있는데요. 그럴일은 없겠지만 5개의 브라우저 제작업체들이 힘을 모아서 완벽한 표준을 만들고 지킨다면 웹프로그래머들이 고생하는 일은 많이 줄어들텐데 말이죠. 그런 의미에서 이러한 재미있는 그림으로 표현한거 같습니다.



트라이던트(Trident)
 트라이던트(MS HTML이라고도 합니다)는 마이크로소프트 윈도우즈에 탑재되는 브라우저인 인터넷 익스플로러의 코어(속칭 IE 코어)입니다. 이 엔진은 1997년에 인터넷 익스플로러 4부터 처음으로 사용되었으며, 이후에 지속적으로 신기술이 추가된어 인터넷 익스플로러와 같이 업데이트됐습니다. 트라이던트는 실제로는 오픈 소스 코어이며, 트라이던트 엔진은 모듈 방식의 소프트웨어이기 때문에 다른 소프트웨어 개발자들이 쉽게 웹 브라우저 기능을 자신이 만든 어플리케이션이 추가할 수 있습니다. 그 포트 코어 설계가 매우 안정적이라서 IE 코어를 사용하지만 인터넷 익스플로러는 아닌 브라우저(예를 들면 Maxthon, GreenBrowesr, 중국의 메신저 번들 브라우저 등)가 많지만, 트라이던트는 윈도우즈 플랫홈만 지원합니다.
 인터넷 익스플로러의 시장 독점은 트라이던트 코어가 오랜 시간동안 독점적인 위치를 차지할 수 있게 해주었습니다. 이것 때문에 마이크로소프트는 상당히 긴 시간 동안 트라이던트 코어의 업데이트를 하지 않았고, 그 결과 트라이던트 코어는 W3C 표준과 거의 맞지 않게 되었을 뿐만 아니라, 트라이던트 코어 내부의 대량의 버그와 보안 문제가 해결되지 않고 누적되게 되었습니다. 현재 마이크로소프트는 트라이던트의 배포 엔진에큰 변화를 주어, 새로운 기술 외에도 웹 페이지 표준의 지원을 추가하기 시작했습니다. (그래서 인터넷 익스플로러 6이 오랜 시간 사용되었던 것에 비해, 7, 8, 9로 이어지는 변화 속도는 매우 빠르지요). 하지만 이런 변화는 다른 엔진-게코, 웹코어, KHTML, 프레스토 등에 비해 많이 떨어진 편입니다.

게코(Gecko)
게코는 오픈 소스 코드이며, C++로 짜여진 웹 페이지 렌더링 엔진입니다. 현재 모질라에서 제작하는 웹 브라우저(파이어폭스)와, 넷스케이프 6 이후 버전에서 사용하고 있습니다. 이 소프트웨어의 원 코드는 넷스케이프에서 개발하였으며, 지금은 모질라 기금이 유지-보수를 담당하고 있습니다. 게코의 특징은 코드가 완전히 공개되어 있다는 것인데, 따라서 개발 수준이 매우 높고 전 세계의 프로그래머들이 이 코드를 사용하여 기능을 추가할 수 있습니다. 오픈 소스이기 때문에 게코 엔진을 사용하는 브라우저도 매우 많습니다. 이것은 게코 코어가 수년 동안 시장 점유율을 유지해 왔던 원인이기도 합니다.
 게코 엔진은 풍부한 어플리케이션 인터페이스와 커뮤니케이션 어플리케이션을 제공하고 있습니다. 이를 사용하여 인터넷 브라우저, HTML 에디터, 클라이언트/호스트 등을 만들 수 있습니다. 비록 처음에는 넷스케이프 네비게이터와 모질라 파이어폭스 정도였지만, 현재에는 많은 프로그램들이 이 엔진을 사용하고 있습니다. 그 밖에 게코는 확장성을 지닌 코어로서 윈도우즈, BSD, 리눅스, 맥 OS X에서 사용할 수 있습니다.게코는 트라이던트 다음으로 많이 사용되는 엔진입니다. 게코 엔진을 사용한 브라우저는 파이어폭스, 넷스케이프 네비게이터 6~9, SeaMonkey, Camino, Mozilla, Flock, Galeon, K-Meleon, Minimo, Sleipni, Songbird, XeroBank가 있습니다. 구글 가젯 엔진도 게코 엔진을 사용한 것입니다.
 

프레스토(Presto)
프레스토는 오페라 소프트웨어가 개발한 랜더링 엔진으로, 현재 오페라 7~10 버전이 이 엔진을 사용하고 있습니다. 프레스토의 특징은 렌더링 속도의 최적화입니다. 프레스토는 지금 공개된 브라우저 중에서 제일 빠른 속도를 자랑하지만, 그 댓가로 호환성을 일부 희생했습니다.
 프레스토는 하나의 동적인 코어입니다. 트라이던트나 게코와 제일 큰 차이는 스크립트의 처리에 있습니다. 페레스토는 선천적인 장저으로 웹페이지의 전부 혹은 일부에서 스크립트를 만나면 이에 알맞는 상황에 따라 새로 해석을 합니다. 그 밖에도 이 코어는 자바스크립트를 실행할때 속도가 아주 빠릅니다. 동일한 조건에서 테스트를 할 경우, 프레스토는 자바스크립트를 실행하는데 걸리는 시간이 트라이던트와 게코 엔진의 1/3밖에 되지 않습니다. 하지만 프레스토는 상업용 엔진이라서 프레스토를 사용하는 제품이 오페라 외에 NDS 브라우저, 노키아 770 정도밖에 없어, 프레스토의 발전을 크게 가로막고 있습니다. 오페라 위젯 엔진 역시 프레스토 엔진입니다.

 

 웹킷(WebKit)
웹킷은 오픈 소스 웹 브라우저 엔진이며, 웹킷의 시조는 KDE의 KHTML과 KJS입니다(이들은 모두 오픈 소스 코드로서 GPL 라이센스를 사용합니다). 따라서 웹킷 역시 오픈 소스입니다.
사파리 브라우저 외에도 맥의 옴니웹(OmniWeb), Shiira 등의 브라우저들이 웹페이지를 사용하고 있으며, 구글의 크롬 역시 웹킷입니다. 웹킷은 핸드폰에서 비교적 널리 사용하고 있는데, 구글 안드로이드, 애플 아이폰, 노키나 S60의 브라우저들이 전부 웹킷 엔진입니다. 또한 위젯 엔진에서도 그 사용율이 높아, 차이나 텔레콤의 BAE, 애플의 대쉬보드, 노키아 WRT가 전부 웹킷 엔진입니다.

Posted by Finebe
,


1. SVN이란?
   -자유 소프트웨어 버전 관리 시스템입니다. 명령행 인터페이스에서 사용하는 명령어를 따서 “SVN”이라고 줄여서 부르기도 합니다. 제한이 있던 CVS를 대체하기 위해 2000년부터 콜랩넷에서 개발되었습니다.


2. 사용 후기
  -사용한지는 1년여정도 되었습니다. 1년여동안은 외부서버에 SVN서버를 설치하여 사용하였지만 요번에 제 개인컴퓨터에 SVN을 적용했습니다.

3. 용어설명
  • Repository(저장소)란?
    Subversion이 version control 관련 data를 저장하는 곳입다. 구성하는 방법은 다양하다: 한 repository에 여러 project를 담을 수도 있고, 한 repository에 한 project만 담는 경우도 있다. 두 방법 모두 장단점이 있다. 한 project당 하나씩의 repository를 사용하는 것이 일반적으로 더 바람직하다.
  • Check out이란?
    저장소에서 project를 작업공간에 인출하는 것. Download와 유사하다.
  • Commit이란?
    작업공간에서 수정된 project를 저장소에 반영하는 것. Upload와 유사하다. Commit하기 전에 작업 공간의 file을 충분히 시험하여야 한다.
  • Commit message란?
    Commit 할 때 수정된 내용의 의미를 적어둔다.
  • Update란?
    공동으로 작업할 때 다른 사람들이 수정하여 commit한 모든 최신 version을 일괄적으로 받아오는 것. 역시 download와 유사하다.
  • Diff란?
    수정된 file의 내용 또는 저장소에 저장된 두 revision 사이의 차이를 비교해 준다.
  • Conflict란?
    개발자 Joe 와 Sue 가 같은 file의 같은 version을 수정중이었다. Joe가 자신이 수정한 file을 먼저 commit 하였다. Sue가 그 사실을 알지 못하고 수정한 file 부분이 Joe가 수정한 부분과 달랐다. 위 그림의 경우, 둘째줄이 Cheese가 되어야 하는지 Hot Dog이 되어야 하는지 혼란이 일어난 것이다. 이런 상태를 방지하기 위해 lock을 사용할 수 있다.
  • Conflict는 어떻게 해결하는 것인지?
    Sue가 r4를 우선 update 받아서 수정 (Hot Dog을 추가 또는 file 전체 덮어쓰기)한 다음 commit할 수 있다.
  • 여러사람이 동시에 작업한 결과를 안전하게 합치는 법?
    • 모든 경우에 다 가능한 것은 아니다.
    • 잘만 되면 생산성을 n배 늘릴 수도 있다.
    • CVS나 Subversion인 경우에는 가능하지만, 다른 version control system에서는 불가능할 수도 있다.
    • 주의: Commit에 성공과 compile에 성공은 별개의 문제이다. Conflict 없이 여러 commit에 error 없이 성공하더라도 build 과정에서 error가 발생할 수 있다. Compile에 성공과 bug 없는 SW도 별개의 문제이다.
    1. 먼저, 어느 version을 기반으로 작업할 것인지 결정한다.
    2. 누가 어느 부분을 개정할 것인지 겹치지 않게 분명하게 결정한다. (누가 먼저 commit하더라도 상관 없도록 한다.)
    3. 각자 개정 후 commit 한다.
  • 어떤 project가 lock 되었을 때의 효과는?
    Subversion은 기본적으로 locking을 별로 선호하지 않는 system이다. 충돌이 일어날 수 있는 상황인 두 사람이 같은 file 같은 version의 같은 부분을 수정할 확률이 높지 않다고 보는 것이다. 그러나 file의 크기가 크지 않은 경우에는 누가 수정을 하더라도 비슷한 위치에서 수정이 일어나기 때문에 충돌이 일어날 가능성이 더 높을 것이다. 또한, 그림 file 등과 같이 merge가 곤란한 file의 경우, lock을 하는 편이 훨씬 안전하다.
    Harry가 어떤 file을 lock하면, Sally는 file을 check-out하거나 update 받을 수는 있지만 commit하지는 못한다. 이후 Harry가 lock을 풀면 Sally가 다시 commit할 수 있다.
  • Keyword란?
    Subversion 안에 보관중인 file 자체에 file의 이름, 저자, 개정 번호 등의 정보를 자동적으로 기록, 갱신하기 위하여 keyword를 사용할 수 있다. Subversion에서 사용할 수 있는 keyword들 가운데는 다음과 같은 것들이 있다. (대소문자 구별)
    1. $Date$ 마지막으로 commit된 날짜
    2. $Revision$ 마지막으로 commit된 개정판
    3. $Author$ 마지막으로 commit한 개발자
  • Branch란?
    Project의 진행에 영향을 주지 않으면서 새로운 기능, 기술 등을 시험해 보고 싶을 때가 있다. 그럴 때 branch를 만들어서 프로젝트의 본류와 병행으로 개발할 수 있다. 개발이 성공적이라면 추후에 본류에 합류시킬 수 있다. 그렇지 못하다면 합류시키지 않으면 된다.
  • Branch 또는 Tag 만드는 법?
    1. TortoiseSVN → Branch/tag
    2. Copy (Branch / Tag) dialog box의 To URL 항목 에서 [...] button 선택, Repo Browser를 연다.
    3. branch 또는 tag를 저장할 folder를 새로 만듦. 예를 들어 원류가
    4. Copy (Branch / Tag) dialog box로 돌아온다
    5. file:///C:/svn_repository/Test/branch/[file이름]
    6. Branch를 만들 revision을 선택
    7. Log message 기록
    8. Switch working copy to new branch/tag 선택
    9. [OK] click
    10. Branch가 정상적으로 이루어졌는지 보려면 해당 file을 우 click하고 Revision graph 선택.
  • Tag란?
    따로 뽑아둔 중요한 개정판. 상업 배포판 (예 Windows 3.0, 3.1, 95, 97, ...) 또는 중요한 성공을 이룩한 개정판은 tag를 따로 붙여준다.
  • Branch를 trunk에 합치는 법(Merge)?
    1. Branch를 commit해둔다.
    2. TortoiseSVN → Switch... 선택, Switch To Branch / Tag 대화상자를 연다.
    3. To URL 난에서 trunk의 URL을 선택한다.
    4. Revision은 보통 HEAD revision을 선택한다.
    5. Click [OK] 하면 Working copy가 본류의 최신판으로 돌아간다.
    6. TortoiseSVN → Merge... 선택 Merge 대화상자를 연다.
    7. Merge a range of revisions를 선택한 다음 [Next]
    8. URL to merge from에서 아까 작업하던 branch를 선택한다. 잘 기억 나지 않으면 [...]을 눌러서 repo-browser로 확인한다.
    9. Revision to merge에는 보통 HEAD라고 입력한다음 [Next]
    10. [Test merge]를 눌러 본다. Conflict가 나타나면 실제로 Merge할 때도 conflict가 발생할 것이다. 이는 수동으로 해소 (resolve) 해 주는 것이 바람직하다.
    11. Resolve Conflict 대화상자가 나타나면 [Edit conflict]를 누른다.
    12. Merge 화면이 나타날 것이다. 창틀(pane)이 두개면 오른쪽이 최종 결과이고, 셋이면 Merged가 최종이다. 셋인 경우를 기준으로 설명하면 위 두 창틀에서 어느쪽을 사용할 것인지 정해서 우click, Use this text block을 선택해 준다.
    13. Save 하고 Merge 화면을 닫는다.
    14. Resolve Conflict 대화상자에서 [Resolved]를 click한다. Merge 된 file이 working copy에 반영된다.
    15. TortoiseSVN → Diff 선택하여 변경 내용이 바르게 반영되었는지 확인한다.
    16. Commit 한다.
3. 적용방법

  1. TortoiseSVN 설치
    1. TortoiseSVN Download
    2. 설치한다. (msi파일을 실행한 후 특이한 사항없으면 다음을 눌러 설치완료)
    3. 저장소로 쓰일 폴더를 생성한다. (예: d:\TortoiseSVN_repository)
  2. Eclipse Subversion 적용
    1. Subversion install


      Software Updates를 클릭한후 Find and Install를 클릭!!
      2번째를 클릭한 후 Next!!

      Name: subclipse 1.6.x
      URL: http://subclipse.tigris.org/update_1.6.x 를 입력한다

      제 화면에는 안나오는데(이미 설치되어서) 원래는 여러가지가 나옵니다. 필요에 따라 설치하세요~!
  3. Eclipse프로젝트에 적용하기




            여기서 로컬컴퓨터 사용할려면 위처럼 하면 되고 사용할려면 URL부분을 해당 서버 주소로 입력하시면 된다.

          이상 적용완료!!!!
Posted by Finebe
,



질문1) 위에처럼 html 을 구성할 경우 li 에 있는 이미지와 하단 선사이에(ul에 지정) 약 4px 정도 공백이 생깁니다.

li 에 직접 height 를 주면 해결되긴 한데 height 를 주지 않고 border-bottom 이 딱 붙게 할 수 있는 방법이 있을까요?

 

답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)

이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는

<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.

 

질문2) 위의 li 태그에서 style 을 삭제하고 스타일에 img {vertical-align: middle;}

을 추가하면 li에 들어있는 이미지가 border-bottom위로 1px 내려 옵니다.

ul에 height 를 지정하면 정상적으로 보이나 파폭에서 1px 띄어져서 보이네요.

어떤 방법으로 해결할 수 있을까요?

 

답변2) 질문 2번 문제는 vertical-align 문제가 아닌거 같습니다.

일단 li 태그에 float: left;가 됨으로써 ul의 높이값이 사라지기 때문에 검은색 선이 위로 올라가게 됩니다.

하지만 IE에서는 정상으로 나오죠. IE 버그입니다.

 

그럼 해결 방안을 드리자면

아래와 같은 소스가 될듯 싶네요.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title> new document </title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul, li, dl, dt, dd {list-style: none;}
ul {width: 500px; border-bottom: 2px #000000 solid; overflow: auto; height: 100%;}
ul li { float: left;border: 1px solid #f18;}
ul li img {vertical-align: top;border: 0;}
</style>
<body>
<ul>
 <li><img src="test.gif"  /></li>
 <li><img src="test.gif" /></li>
</ul>
</body>
</html>

 

 

질문 1은 영문의 아래첨자의 의한 문제이고

질문 2번은 CSS의 float 속성의 의한 것입니다.

자세한 설명을 하자면 단순히 이 소스를 가지고 이해 시켜드리기가 어렵네요.

답변 주시면 자세한 설명 해 드리겠습니다.

HTML 및 CSS속성은 http://trio.co.kr/ 찾아보심 될듯 싶습니다

Posted by Finebe
,


여러개의 이미지 업로드할 수 있는 소스입니다.
참고사이트는
http://codeigniter.com/forums/viewthread/80610/
http://codeigniter.com/forums/viewthread/129011/

Controller

 
class Upload extends Controller {

    function Upload()
    {
        parent::Controller();
        $this->load->helper(array('form','url','file'));
        
    
    }
    
    function index()
    {
        
        $this->load->view('upload/upload_index'); //Upload Form
        
    }

    function picupload()
    {
        //Load Model
        $this->load->model('Process_image');

        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']    = '2048'; //2 meg


        $this->load->library('upload');

        foreach($_FILES as $key => $value)
        {
            if( ! empty($key['name']))
            {
                $this->upload->initialize($config);
        
                if ( ! $this->upload->do_upload($key))
                {
                    $errors[] = $this->upload->display_errors();
                    
                }    
                else
                {

                    $this->Process_image->process_pic();

                }
             }
        
        }
        
        
        $data['success'] = 'Thank You, Files Upladed!';

        $this->load->view('upload/upload_pictures', $data); //Picture Upload View

        
        
        
    } 


Model
class Process_image extends Model {
    
    function Process_image()
    {
        parent::Model();
        
        $this->load->library('image_lib');
        //Generate random Activation code
        
        function generate_code($length = 10){
    
                if ($length <= 0)
                {
                    return false;
                }
            
                $code = "";
                $chars = "abcdefghijklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ123456789";
                srand((double)microtime() * 1000000);
                for ($i = 0; $i < $length; $i++)
                {
                    $code = $code . substr($chars, rand() % strlen($chars), 1);
                }
                return $code;
            
                }

    }

function process_pic()
    {   
        //Connect to database
        $this->load->database();
        
        //Get File Data Info
        $uploads = array($this->upload->data());
        
        $this->load->library('image_lib');

        //Move Files To User Folder
        foreach($uploads as $key[] => $value)
        {
            
                        //Gen Random code for new file name
            $randomcode = generate_code(12);
            
            $newimagename = $randomcode.$value['file_ext'];
            
            //Creat Thumbnail
            $config['image_library'] = 'GD2';
            $config['source_image'] = $value['full_path'];
            $config['create_thumb'] = TRUE;
            $config['thumb_marker'] = '_tn';
            $config['master_dim'] = 'width';
            $config['quality'] = 75;
            $config['maintain_ratio'] = TRUE;
            $config['width'] = 175;
            $config['height'] = 175;
            $config['new_image'] = '/pictures/'.$newimagename;

            //$this->image_lib->clear();
            $this->image_lib->initialize($config);
            //$this->load->library('image_lib', $config);
            $this->image_lib->resize();
            
            //Move Uploaded Files with NEW Random name
            rename($value['full_path'],'/pictures/'.$newimagename);
            
            //Make Some Variables for Database
            $imagename = $newimagename;
            $thumbnail = $randomcode.'_tn'.$value['file_ext'];
            $filesize = $value['file_size'];
            $width = $value['image_width'];
            $height = $value['image_height'];
            $timestamp = time();
            
            //Add Pic Info To Database
            $this->db->set('imagename', $imagename);
            $this->db->set('thumbnail', $thumbnail);
            $this->db->set('filesize', $filesize);
            $this->db->set('width', $width);
            $this->db->set('height', $height);
            $this->db->set('timestamp', $timestamp);
            
            //Insert Info Into Database
            $this->db->insert('pictures');

        }
        
        
        
    }


View


Table
CREATE TABLE IF NOT EXISTS `img_pictures` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `imagename` varchar(100) NOT NULL,
  `thumbnail` varchar(100) DEFAULT NULL,
  `folder` varchar(255) DEFAULT NULL,
  `filesize` int(11) NOT NULL,
  `width` int(11) NOT NULL,
  `height` int(11) NOT NULL,
  `thumb_width` int(11) DEFAULT NULL,
  `thumb_height` int(11) DEFAULT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 
Posted by Finebe
,


Posted by Finebe
,



CentOS 5.2 APM 구축 매뉴얼

 

 

1. APM설치 전 확인사항

APM을 설치 하기 위해서는 gcc와 gcc-c++ 컴파일러가 설치되어 있어야 한다. 추가적으로 설치해도 상관없지만
리눅스를 설치할때 추가적으로 이 라이브러리들을 선택하여 설치하면 수월하게 설치할 수 있다.

 

또한 phpmyadmin을 사용하기 위해서는 libmcrypt가 필요하며 yum으로 설치를 해봤으니 정상적으로 작동을 하지 않는것

같다. libmcrypt를 tar.gz파일을 다운받아 ./configure && make && make install 을 이용하여 설치하자

 

1.1 APM이 설치 되어 있는 확인

[root@kimsr /]# rpm -qa httpd php mysql
- 아무것도 출력되지 않을 경우 설치되지 않은것이며 패키지가 출력될 경우 아래 명령어로 제거하도록 합니다.


1.2 기존에 설치 되어 있는 Apache(httpd), php, mysql를 제거

[root@kimsr /]# yum remove -y httpd php mysql


1.3 라이브러리 및 컴파일 확인

[root@kimsr amp]# rpm -qa gcc* cpp* compat-gcc* flex*
[root@kimsr amp]# rpm -qa libjpeg* libpng* freetype* gd-*


1.4 라이브러리 및 컴파일 설치

[root@kimsr amp]# yum -y install gcc cpp gcc-c++ compat-gcc32-g77 flex
[root@kimsr amp]# yum -y install libjpeg-devel libpng-devel freetype-devel gd-devel


1.5 APM설치 파일 다운 로드

[root@kimsr /]# mkdir /amp
[root@kimsr /]# cd /amp
[root@kimsr amp]# wget http://apache.mirror.cdnetworks.com/httpd/httpd-2.2.10.tar.gz
[root@kimsr amp]# wget http://kr2.php.net/get/php-5.2.8.tar.gz/from/this/mirror
[root@kimsr amp]# wget http://dev.mysql.com/get/Downloads/MySQL-5.1/mysql-5.1.30.tar.gz/from/http://mysql.holywar.net/

 

2. MySQL 설치

[root@kimsr amp]# tar -zxvf mysql-5.1.30.tar.gz
[root@kimsr amp]# useradd -M -s /bin/false mysql
[root@kimsr mysql-5.1.30]# ./configure --prefix=/usr/local/server/mysql --with-charset=utf8 --with-extra-charsets=all
[root@kimsr mysql-5.1.30]# make && install

 

* configure시 아래와 같이 오류가 발생될 경우
checking for termcap functions library... configure: error: No curses/termcap library found

[root@kimsr apm]# yum -y install ncurses-devel


3. Apache 설치
[root@kimsr apm]# tar -zxf httpd-2.2.10.tar.gz
[root@kimsr httpd-2.2.10]# ./configure --prefix=/usr/local/server/apache --enable-mods-shared=alkl --enable-so --enable-rewrite
[root@kimsr httpd-2.2.10]# make && make install


4. PHP 설치
[root@kimsr apm]# tar -zxf php-5.2.7.tar.gz
[root@kimsr apm]# cd php-5.2.7
[root@kimsr php-5.2.7]# ./configure \
--prefix=/usr/local/server/php --with-apxs2=/usr/local/server/apache/bin/apxs \
--with-mysql=/usr/local/server/mysql --with-config-file-path=/usr/local/server/apache/conf \
--disable-debug --enable-safe-mode --enable-track-vars --enable-sockets \
--with-mod_charset --with-charset=utf8 --with-xml --with-language=korean \
--enable-mailparse --enable-calender --enable-sysvsem=yes --enable-sysvshm=yes \
--enable-ftp --enable-magic-quotes --enable-gd-native-ttf --enable-url-includes \
--enable-trans-id --enable-inline-optimization --enable-bcmath \
--with-jpeg --with-png --with-zlib --with-jpeg-dir=/usr --with-png-dir=/usr/lib \

--with-freetype-dir=/usr --with-libxml-dir=/usr --enable-exif --with-gd --with-ttf \

--with-gettext --enable-sigchild --enable-mbstring --with-mcrypt

컴파일 시 error: mcrypt.h not found 오류가 나면

libmcrypt가 정상적으로 설치되지 않은 것이다. libmcrypt.tar.gz 파일을 다운 받아 ./configure && make && make install로 설치

 

컴파일 시 configure: error: xml2-config not found. Please check your libxml2 installation. 오류가 나오면

yum install *-devel 이것도 안되면 아래와 같이 수행

 

libxml2 설치 - XML C 파서(Parser)
다운로드 :
ftp://xmlsoft.org/libxml2/
[root@localhost apm]# tar xvfz libxml2-2.6.16.tar.gz
[root@localhost apm]# cd libxml2-2.6.16
[root@localhost libxml2-2.6.16]# ./configure && make && make install
[root@localhost libxml2-2.6.16]# cd ..

[root@kimsr php-5.2.7]# make && make install


4.1 PHP 환경설정 파일 복사
[root@kimsr php-5.2.7]# cp php.ini-dist /usr/local/server/apache/conf/php.ini


본인도 APM을 설치하기위해 무단한 노력을 한거 같다. 몇번의 실패와 역경을 딛고 설치에 성고하였다.
모두 오류없이 설치할 수 있기를 기원하며 설치방법을 만들어 보았다.

 

이 내용은 어디까지나 설치까지만의 내용을 정리한 것이면 설치 완료 후 세팅해야 하는 사항들이 있다

mysql 기본 DB을 설정하거나 Apache httpd.conf 파일등을 수정해야 한다. 이 부분에 대해서는 추후에 올리는 내용에서

설명하도록 하겠다.

Posted by Finebe
,



안녕하세요. Microsoft REMIX09 행사 사이트가 오픈되었습니다.
 
URL: http://www.visitmix.co.kr/remix09/default.asp
 
저는 리믹스를 한번 간적이 있는데 REMIX07을 갔습니다. 그 땐 Silverlight 오픈전이라 Silverlight에 대한 설명을 쭈욱 해줬습니다.
 
마소사람들이 자주(?) 볼 수 있는 "개발자와 디자이너들과의 갈등"을  콩트로 표현하는 등 재미요소들도 있었습니다.
 
이번 행사에는 마이크로소프트의 글로벌한 대규모 투자프로그램인 WebsiteSpark의 발표와
 
획기적인 사용자 경험을 제공하는 차세대 웹 플랫폼 Silverlight 3, 효율적인 디자인과 개발을 가능하게 하는 Expression3가
 
발표된다고 합니다. 또한 저희가 사용가능한 Windows Server 2008 R2의 새로운 기능소개도 한다고 하니
 
관심있으신 분들은 참가해 보셔도 좋을 듯 합니다.
 
아참 행사에 참가하실 분은 사람들이 무척이나 많이 모이니 신종플루를 조심하시기 바랍니다.

전 08년도 리믹스: http://www.visitmix.co.kr/remix08.html
Posted by Finebe
,


좌표구하는 서비스가 없어서 검색한 결과 한 사이트를 발견했습니다.

http://www.sumabout.com/address/

간단한 텍스트로만으로 해결가능합니다.
Posted by Finebe
,



Unicode provides a unique number for every character,
no matter what the platform,
no matter what the program,
no matter what the language.

http://www.unicode.org/standard/WhatIsUnicode.html 


위에 설명되어 있는대로다.




유니코드란?

unicode는 모든 문자에 index를 줘 놓은 것이다. 더 이상도 아니고, 더 이하도 아니다.
이 index를 code point라고 부르는데, 그냥 index라고 칭하도록 하자.

'A'라는 글자는 0x0041 이라는 index를 가진다.
'a'라는 글자는 0x0061 이라는 index를 가진다.
'가'라는 글자는 0xac00 이라는 index를 가진다.
( 더 많은 글자와 index를 보려면 http://www.unicode.org/charts/  를 참고하자 )




표현방법

저렇게 정해져 있는 index를 표시하는 방법에는 UTF와 UCS두가지 종류가 있다.
( UTF - Unicode Transformation Format ,    UCS - Universal Character Set )

UCS
UCS는 몇바이트로 index를 표현할 수 있느냐를 나타낸다.
즉 UCS-2는 2byte로 index를 나타낼꺼고 UCS-4는 4byte를 이용해서 index를 나타낼거라는거다.

UTF
UTF는 몇 비트단위로사용해서 index를 나타낼것인가를 말한다.
UTF-8은 8bit씩 늘려가며 index를 나타낼꺼라는거고,
UTF-16은 16bit씩 index를 나타낼꺼고, UTF-32는 32bit씩 index를 나타낼꺼라는거다.
( 실상 UTF-16과 UCS-2는 같다고 볼 수 있다. 마찬가지로 UTF-32와 UCS-4도 마찬가지다. )





UTF-16

원래 처음에 unicode의 index는 2byte로 나타낼 수 있었다.
그랬는데, unicode 가 버젼업되어 4.0이 나왔을때에는 0x10FFFF 까지의 index가 생겼다.

처음에는 UTF-16으로 모든 문자를 나타낼 수 있었으나,
( 2byte로 표현할 수 있는 index를 가진 문자 목록을 BMP Basic Multilingual Plane 라고 부른다. )
유니코드 4.0이 나오면서, 2byte로는 0x10FFFF 같은 값을 가리킬 수 없게 되었다.

그래서 UTF-16으로는 BMP에 있는 문자들은 2byte로 처리하고, 
BMP보다 더 높은 index를 가지는 놈들은 4byte로 처리 한다.
문자 index 0x0000 부터 0xFFFF 까지는 2byte로 처리 하고
문자 index 0x10000 부터 0x1FFFF 까지는 4byte로 처리 된다.





UTF-32

UTF-32는 기본적으로 4byte를 사용하기 때문에, 위와 같은 짓을 하지 않아도 된다.





UTF-8

영어권에 있는 사람들은 UTF-16을 쓰면 손해다.
모든 영어는 1byte만 있으면 256개를 표현할 수 있으므로, 모든 문자를 넣을 수 있기 때문이다.

그래서 나온게 UTF-8이다.
영어권은 1byte로 표현하고, 그것보다 높은 index를 가지는것은 2byte 혹은 3byte 혹은 4byte ..
요렇게 늘려 가면서 쓰도록 되어 있다.

UTF-8은 8비트를 사용하여 매직 U+ 넘버를 기억공간에 저장함으로서 영어권의 수많은 0으로 사용되는 저장공간의 낭비를 막는 방법입니다. 일반적인 영어텍스트(예, a-z, A-Z, digits 0-9, etc.) 는 1바이트로 인코딩됩니다. 바꾸어 말하면 7-bits ASCII는 UTF-8의 서브셋으로 취급될 수 있습니다.

 

16진최소  16진최대  이진수표현(UTF-8)

00000000   0000007F  0vvvvvvv

00000080   000007FF  110vvvvv 10vvvvvv

00000800   0000FFFF  1110vvvv 10vvvvvv 10vvvvvv

00010000   001FFFFF  11110vvv 10vvvvvv 10vvvvvv 10vvvvvv

00200000   03FFFFFF  111110vv 10vvvvvv 10vvvvvv 10vvvvvv  10vvvvvv

 

UTF8은 현재 다양한 플랫폼(Windows, Linux, Unix, Mac OS)이 접속하는 인터넷환경에서 de facto standard(사실상의 표준)으로 자리 잡았습니다. 이는 UTF-16, 32와 비교해서 자원의 낭비를 줄여서 효율적이기 때문만은 아닙니다. UTF-8에는 큰 장점이 있는데, endianness 인코딩으로 little endian, big endian의 구분이 없습니다. 그래서 이 기종간의 데이터 교환을 위해 현재 가장 선호되는 인코딩입니다.

 







서로간의 변환

UTF-8, UTF-16, UTF-32, UCS-2, UCS-4 는
모두 unicode의 문자 index를 나타내기 위한 방법이기 때문에,
서로간의 변환은 당연히 잘 된다.




글자처리

우리가 글자 "가"를 쓴다고 해 보자.  글자 "가"는 1글자이다.
그러므로 "가"를 나타내는 index가 있다. 물론 "나"를 나타내는 index도 있다.

한글로 표현할 수 있는 글자는 매우 많다.
그 많은 글자 모두에게 index를 줄 수가 없다.

현재 사용하고 있는 모든 글자에 index를 준다고 해도,
시간이 지나서 새로운 글자가 추가 되어 index가 모자르게 된다면 어떻게 할것인가?

그래서 유니코드는 완전한 글자를 제공해 주기도 하지만,
글자를 조립할 수 있도록 조립가능한 글자를 제공해 준다.

다시 "가"를 쓴다고 해 보다.
"가"라는 글자는 1개이지만, 실제로는 초성 "ㄱ"과 중성"ㅏ" 가 합쳐져서 만들어진 글자이다.

그러므로 "가"를 표현하는 방법은 완성된 글자 "가"0xAC00가 될 수도 있고,
초성"ㄱ"과 중성"ㅏ"를 조립한 "가"0x1100,0x1161 로 나타낼 수도 있다.
( 초성 "ㄱ"은 0x1100 - HANGUL CHOSEONG KIYEOK )
( 중성 "ㅏ"는 0x1161 - HANGUL JUNGSEON A )

이를 조합할 수 있게 해 주는 index는 1100 부터 있다.
( Hangul Jamo - Korean combining alphabet - http://www.unicode.org/charts/PDF/U1100.pdf  )


이는 비단 한글뿐만 아니라,
일본어 역시 완성된 글자가 있기도 하고, 조합할 수 있게도 되어 있다.

영어 역시 그렇다. 영어에서 무슨 글자를 조합하냐 라고 말하겠지만, 
이력서를 나타내는 Résumé 의 경우에는 e 와 ' 의 조합으로 이루어 질 수도 있다.

출처: http://ggaman.com/tt/896


유니코드 용어의 이해

유니코드 관련 문서를 읽다보면 가장 많이 마주치는 용어들이
UCS2, UCS4, UTF8, UTF16, UTF32 등과 같은 단어들입니다.

기본언어판, BMP (Basic Mulitilingual Plane)
유니코드의 첫 65,536개의 코드를 의미합니다.

언어판, Plane (256x256 즉 65,536 개씩의 코드 묶음)
유니코드에서는 현재 17개의 언어판을 사용할 수 있습니다.
모두 그룹 00에 포함됩니다.

언어판 그룹, Group (256개씩의 언어판을 묶어 하나의 그룹)
유니코드의 17개 언어판은 모두 Group 00에 있습니다.
유니코드는 17개의 언어판에 한정되어 정의됩니다.
반면 ISO 표준(UCS-4)에서는 모두 128개의 언어판 그룹이 정의될 수 있습니다.
1 Plane = 65,536 code points
1 Group = 256 planes = 256x65,536 = 16,777,216 code points
UCS-4 = 128 groups = 128x16,777,216 = 2,147,483,648 code points

인코딩, Encoding (문자집합을 표현하는 방식)
유니코드는 코드체계 또는 문자집합을 명명하는 것이며 이를 표현하기 위해서는
UTF-8, UTF-16, UTF-32 등과 같은 인코딩이 필요합니다.

UCS-2: Universal Character Set 2(octets)
좀더 정확하게는 Universal Multipe-Octet Coded Character Set 2입니다.
ISO/IEC 10646의 용어로 BMP의 65,536 코드를 정의하며, 2바이트로 표현됩니다.
1개의 언어판, 즉 BMP만이 이에 해당합니다.
UCS-2는 인코딩 방법이 아니며 문자코드 자체입니다.
인코딩으로 봐도 무방하겠군요. 여기서 octet이라는 용어를 사용했는데 이 용어는
ISO쪽에서 사용하는 용어로, 유니코드 진영에서 사용하는 바이트와 같은 뜻입니다

UCS-4: Universal Character Set 4(octets)
ISO/IEC 10646의 용어로 4바이트로 표현됩니다.
모두 128개의 언어판 그룹, 즉 128*256 언어판 = 32,768 언어판을 정의합니다.
이는 대략 231 = 2,147,483,648개의 코드에 해당합니다.
UCS-4는 인코딩 방법이 아니며 문자코드 자체입니다.

UTF-8: UCS Transformation Format, 8-bit form
Unicode 표준의 인코딩 방식중의 하나입니다.
표준에서는 17개 언어판의 문자만을 표현할 수 있으나 기술적으로는
UCS-4 전영역의 문자를 표현할 수 있습니다.
문자에 따라 1 ~ 4(또는 6) 바이트로 표현됩니다.

UTF-16: UCS Transformation Format, 16-bit form
유니코드 3.0에서는 16을 16비트로 해석한 것이 아니라,
그룹 00의 16개 언어판이라고 써 놓았군요.
UTF-32의 32가 32비트를 지칭하므로 통일성을 위해 16비트로 이해하시는 게 좋습니다.
16비트로 표현한다는 점에서는 UCS-2와 흡사하지만 대행문자영역(Surrogates)을
이용하여 16개의 보충 언어판 코드를 표현할 수 있는 인코딩입니다.
대행문자영역 2개로 16개의 보충 언어판을 표현할 수 있습니다.
UCS-2에서는 65536개의 코드만을 정의할 수 있으나 UTF-16에서는
1백만여자를 더 표현할 수 있습니다.

UTF-32: UCS Transformation Format, 32-bit form
32비트 즉 4바이트로 각 문자를 표현합니다.
이점에서 UCS-4와 동일하지만 17개의 언어판만을 정의한다는 점에서는
UCS-4의 부분집합으로 간주하면 됩니다. UCS-4와 동일하나
0x00000000 ~ 0x0010FFFF 범위만을 문자코드로 간주한다고 이해하시면 됩니다.

Posted by Finebe
,


웹브라우저는 사용자IP를 웹서버에 전달하면서 상호간 통신(TCP 세션 연결)은 시작된다.

일단 세션이 연결되면 HTTP Request Header와 Body에 주소와 요청 데이터를 포함하여 웹서버에 전달한다.

이때 웹서버는 사용자 요청의 유효성을 검증한 후 이상이 없다면 HTTP Response Header 및 Response Body에 문서를 만들어 사용자에게 전달하게 된다.

 

세션연결 및 데이터 전송과정

  1. Listen: 웹서버가 포트를 열어놓고 사용자 요청을 대기중인 상태이다.
  2. SYN-Sent: 사용자가 웹서버에 접속요청을 시도하는 단계
  3. SYN-Received: 사용자 요청에 대한 응답으로 ACK와 SYN을 전송한다.
  4. ACK: 사용자는 다시한번 웹 서버의 응답(SYN,ACK)에 확인 메시지인 ACK를 전송한다.

여기부터는 데이터 송수신

  1. Get Document-PUSH: TCP 스택에서는 PUSH 옵션을 통해 빠른 처리를 요구할수 있으며 상위 프로토콜인 HTTP에서는 GET메소드를 이용하여 기본 페이지(index.html등)을 요청하게 된다.
  2. TCP Checksum, ACK: 웹서버는 사용자 요청 데이터에 대한 손실 및 훼손을 점검하고 이상없다는 ACK 메시지를 전송한다.
  3. 요청문서 제공-PUSH: 웹서버는 요청 문서를 사용자에게 전송한다.
  4. TCP Checksum, ACK: 마찬가지로 사용자측에도 웹서버 전송 데이터에 대한 손실 및 훼손을 점검하고 이상 없다는 ASK메시지를 전송한다.

 

비트명

설명

URG

다른 패킷에 비해 가장 먼저 긴급하게 처리를 요청하기 위한 BIT

ACK

잘 받았다는 메시지 처리를 위한 BIT

PSH

빠른 처리 요구를 위한 BIT

(일반적으로 모든 TCP메시지를 주고받을 때 기본 값으로 들어감)

RTS

강제로 세션을 끊기 위한 BIT

SYN

TCP 세션을 시작하기 위한 BIT

FIN

정상적인 절차로 끊기 위한 BIT

 

HTTP 회선 종결과정

 

필요한 데이터 주고받기를 완료하면 HTTP는 즉시 연결 해제 작업을 수행한다.

  1. FIN-WAIT 1: 사용자는 세션종결 요청을 위해 FIN과 ACK를 전송한다(연결을 시도한자가 먼저 세션종결 요청을 하게 된다)
  2. CLOSE-WAIT 2: 세션 종결 요청을 웹 애플리케이션에 전달한다.
  3. FIN-WAIT 2: 웹서버의 대답을 기다리는 중이다.
  4. LAST ACK: 웹서버는 종결 합의의 의미로 FIN과 ACK를 전송한다.
  5. TIME-WAIT: 합의데이터(FIN, ACK)를 잘 받았다는 의미로 ACK로 웹서버를 전송하게 된다. 그러나 회선 연결이 완전히 끊어진 상태가 아니며, 혹시 늦게 도착할 수 있는 데이터를 위해 일정 시간을 잠시 기다리는 시간이다.
  6. CLOSE: 회선이 완전히 끊어지게 된다.

'Web Programming' 카테고리의 다른 글

4개 브라우저의 랜더링엔진 설명  (3) 2010.07.08
로컬에 적용된 SVN를 Eclipse에서 활용하기  (6) 2010.01.14
Microsoft REMIX09 Open  (0) 2009.09.15
유니코드란..  (2) 2009.05.04
Posted by Finebe
,



처음 시도 php 함수 mb_detect_encoding으로 검사

파라미터에 대해서 인코딩방식이 어떤 것인지 판별하여 Return해준다.

string mb_detect_encoding ( string $str [, mixed $encoding_list= mb_detect_order() [, bool $strict= false ]] )

예제


사용은 대충 이런식으로 하게 된다.

/* Detect character encoding with current detect_order */
echo mb_detect_encoding($str);

/* "auto" is expanded to "ASCII,JIS,UTF-8,EUC-JP,SJIS" */
echo mb_detect_encoding($str, "auto");

/* Specify encoding_list character encoding by comma separated list */
echo mb_detect_encoding($str, "JIS, eucjp-win, sjis-win");

/* Use array to specify encoding_list  */
$ary[] = "ASCII";
$ary[] = "JIS";
$ary[] = "EUC-JP";
echo mb_detect_encoding($str, $ary);

하지만 한글에 대해선 완벽하게 지원해주지 않는 걸 확인했다. URL의 파라미터에 직접 한글을 입력하여 한 결과 처음 자음이 ㅈ~ㅎ으로 시작하면 UTF-8로 인식한다.

따라 함수를 따로 만들거나 해야 함.



1. detect_encoding함수
Another light way to detect character encoding:

function detect_encoding($string) {  
  static $list = array('utf-8', 'windows-1251');
  
  foreach ($list as $item) {
    $sample = iconv($item, $item, $string);
    if (md5($sample) == md5($string))
      return $item;
  }
  return null;
}

2. Function to detect UTF-8, when mb_detect_encoding is not available it may be useful.
Function to detect UTF-8, when mb_detect_encoding is not available it may be useful.

function is_utf8($str) {
    $c=0; $b=0;
    $bits=0;
    $len=strlen($str);
    for($i=0; $i<$len; $i++){
        $c=ord($str[$i]);
        if($c > 128){
            if(($c >= 254)) return false;
            elseif($c >= 252) $bits=6;
            elseif($c >= 248) $bits=5;
            elseif($c >= 240) $bits=4;
            elseif($c >= 224) $bits=3;
            elseif($c >= 192) $bits=2;
            else return false;
            if(($i+$bits) > $len) return false;
            while($bits > 1){
                $i++;
                $b=ord($str[$i]);
                if($b < 128 || $b > 191) return false;
                $bits--;
            }
        }
    }
    return true;
}

3. conver to Utf8 if $str is not equals to 'UTF-8'

/* 
*QQ: 290359552 
* conver to Utf8 if $str is not equals to 'UTF-8' 
*/ 
function convToUtf8($str){ 
     if( mb_detect_encoding($str,"UTF-8, ISO-8859-1, GBK")!="UTF-8" ){ 
         return  iconv("gbk","utf-8",$str); 

     }else{ 
         return $str; 
     }
} 

4. from PHPDIG

function isUTF8($str) {
        if ($str === mb_convert_encoding(mb_convert_encoding($str, "UTF-32", "UTF-8"), "UTF-8", "UTF-32")) {
            return true;
        } else {
            return false;
        }
    } 

5. Much simpler UTF-8-ness checker using a regular expression created by the W3C:

// Returns true if $string is valid UTF-8 and false otherwise.
function is_utf8($string) {
    
    // From http://w3.org/International/questions/qa-forms-utf-8.html
    return preg_match('%^(?:
          [\x09\x0A\x0D\x20-\x7E]            # ASCII
        | [\xC2-\xDF][\x80-\xBF]             # non-overlong 2-byte
        |  \xE0[\xA0-\xBF][\x80-\xBF]        # excluding overlongs
        | [\xE1-\xEC\xEE\xEF][\x80-\xBF]{2}  # straight 3-byte
        |  \xED[\x80-\x9F][\x80-\xBF]        # excluding surrogates
        |  \xF0[\x90-\xBF][\x80-\xBF]{2}     # planes 1-3
        | [\xF1-\xF3][\x80-\xBF]{3}          # planes 4-15
        |  \xF4[\x80-\x8F][\x80-\xBF]{2}     # plane 16
    )*$%xs', $string);
    
} // function is_utf8



6. Sometimes mb_detect_string is not what you need. When using pdflib for example you want to VERIFY the correctness of utf-8. mb_detect_encoding reports some iso-8859-1 encoded text as utf-8. To verify utf 8 use the following:

//
//    utf8 encoding validation developed based on Wikipedia entry at:
//    http://en.wikipedia.org/wiki/UTF-8
//
//    Implemented as a recursive descent parser based on a simple state machine
//    copyright 2005 Maarten Meijer
//
//    This cries out for a C-implementation to be included in PHP core
//
    function valid_1byte($char) {
        if(!is_int($char)) return false;
        return ($char & 0x80) == 0x00;
    }
    
    function valid_2byte($char) {
        if(!is_int($char)) return false;
        return ($char & 0xE0) == 0xC0;
    }

    function valid_3byte($char) {
        if(!is_int($char)) return false;
        return ($char & 0xF0) == 0xE0;
    }

    function valid_4byte($char) {
        if(!is_int($char)) return false;
        return ($char & 0xF8) == 0xF0;
    }
    
    function valid_nextbyte($char) {
        if(!is_int($char)) return false;
        return ($char & 0xC0) == 0x80;
    }
    
    function valid_utf8($string) {
        $len = strlen($string);
        $i = 0;    
        while( $i < $len ) {
            $char = ord(substr($string, $i++, 1));
            if(valid_1byte($char)) {    // continue
                continue;
            } else if(valid_2byte($char)) { // check 1 byte
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
            } else if(valid_3byte($char)) { // check 2 bytes
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
            } else if(valid_4byte($char)) { // check 3 bytes
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
                if(!valid_nextbyte(ord(substr($string, $i++, 1))))
                    return false;
            } // goto next char
        }
        return true; // done
    }

for a drawing of the statemachine see: http://www.xs4all.nl/~mjmeijer/unicode.png and http://www.xs4all.nl/~mjmeijer/unicode2.png 


Posted by Finebe
,



escape() / encodeURI() / encodeURIComponent()

이 모든 함수는 자바스크립트에서 인코딩을 담당하는 함수이다.

여기서 말하는 인코딩이란, 네트워크를 통해서 정보를 공유할 때 어떤 시스템에서나 읽을 수 있는 ASCII 문자로 바꿔주는 것을 말한다. 모든 네트워크를 통한 전송에는 ASCII 문자가 기반이 된다. 특히 한글이나 특수문자의 경우 이를 2진수 바이트코드로 변환해서 전송하면 받는 상대편의 시스템에 따라 잘못 해석되거나, 해석이 불가능할 수 있기 때문이다.

이를 해결하기 위해 모든 시스템에서 공통으로 읽을 수 있는 ASCII 문자로 바꿔서 데이터를 전송할 필요가 있다.



1. escape()

아래 열거된 아스키문자가 아니라면 모두 유니코드 형식으로 변환한다.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
@*-_+./

그 변환된 형식은 16진수 형식으로 표시되며 1바이트 문자%XX 형태로, 2바이트 문자%uXXXX 형태로 변환된다.
1바이트 문자는 빈칸(%20)을 들 수 있고, 2바이트 문자는 한글(%uD55C%uAE00)이 있을 수 있다.

가끔 인터넷검색을 하면 주소창에 %XX형식의 문자들이 들어있는 것을 볼 수 있는데, 이는 인코딩 된 것의 한 종류라고 볼 수 있다.

가끔은 홈페이지의 자바스크립트나 HTML 소스, 음원URL을 보기 힘들게 하기 위해 사용하기도 하지만,
이는 자바스크립트의 인코딩을 아는 자라면 어렵지 않게 풀어 사용할 수 있다.


2. encodeURI()

기본적으로는 escape()와비슷한 동작을 하지만 인터넷 주소표시에 쓰이는 특수문자들을 인코딩하지 않는다.
즉,  : ; / = ? &  등의 특수문자는 인코딩이 되지 않는다.
그래서 보통은 파라미터를 전달하는 인터넷주소(URL) 전체를 인코딩할 때 사용한다.



3. encodeURIComponent()

기본적인 동작은 역시 escape()와 비슷하지만 인터넷 주소표시에 쓰이는 모든 문자를 추가로 인코딩한다.
즉,  : ; / = ? &  등의 특수문자가 추가로 인코딩 되는 것이다.

그래서 인터넷주소(URL) 전체를 인코딩할 때는 사용할 수 없고, 넘기는 필드 하나하나를 따로 인코딩할 때 사용한다.
그 이유는 넘어가는 값이 text="test=&테스트" 이와 같이 text라는 필드 값이 test=&테스트인 경우 그냥 encodeURI()로 인코딩 하면, '=' 나 '&'는 인코딩되지 않아서 필드값을 처리할 때 데이터값이 아닌 여러개의 필드를 넘기는 명령어로 인식할 수 있기 때문이다.

하지만, "http://test.com/test.php?text=테스트" 와 같은 URL 전체를 encodeURIComponent()로 인코딩하게 되면 : / ? 를 모두 인코딩하여 주소를 인식할 수 없게 된다.



4. 실제 인코딩의 차이를 보여주는 Javascript 소스

  • var chr = 'http://test.com/folder1/folder2/default.html?mode=write&value=&*테스트';  
  •   
  • document.writeln("original = " + chr + '<br />');  
  • document.writeln("escape() = <font color='red'>" + escape(chr) + "</font><br />");  
  • document.writeln("encodeURI() = <font color='blue'>" + encodeURI(chr) + "</font><br />");  
  • document.writeln("encodeURIComponent() = <font color='orange'>" + encodeURIComponent(chr) + "</font><br />");  


  • 위의 소스를 <script></script> 안에 넣고 실행하면 인코딩의 차이를 직접 확인 할 수 있으며,
    직접 인코딩과 디코딩 결과를 확인 하고 싶은 경우 "Javascript String Encoder"를 참고하시기 바랍니다.
    Posted by Finebe
    ,



    -Jquery 플러그인 모음 이거한방이면 끝..!! : http://www.seek-blog.com/41065/14090/240-plugins-jquery.html

     -light box(이미지 미리보기,pre,next) : http://leandrovieira.com/projects/jquery/lightbox/

     -이미지 스크롤 : http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/

     -이미지 싸이클 : http://www.malsup.com/jquery/cycle/

     -BlockUI Plugin(processing,처리중 등등,confirm) :  http://www.malsup.com/jquery/block/#element

     -UI Modal : http://jquery.com/demo/thickbox/

     -플래쉬 플러그인 삽입 : http://jquery.lukelutman.com/plugins/flash/#examples

     -Photo Slider Tutorial : http://opiefoto.com/articles/photoslider#example

     -jScrollPane : http://kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

     -Accessible News Slider  : http://www.reindel.com/accessible_news_slider/#examples

     - unobtrusive tabs(탭메뉴) : http://stilbuero.de/jquery/tabs/#fragment-29
          http://www.sunsean.com/idTabs/#t3

     -jQuery Ajax Link Checker : http://troy.dyle.net/linkchecker/

     -jQuery Form Plugin  : http://malsup.com/jquery/form/#code-samples

     -jquery.suggest, an alternative jQuery based autocomplete library(자동완성)
      http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
      http://nodstrum.com/2007/09/19/autocompleter/

     -jlook(폼객체 리뉴얼)  : 

      http://envero.org/jlook/

     -jQuery - LinkedSelect(멀티 select) :

      http://www.msxhost.com/jquery/linked-selects/json/

     -Masked Input Plugin    : (입력포맷 확인)
      http://digitalbush.com/projects/masked-input-plugin
      http://www.appelsiini.net/projects/jeditable/default.html

     -Overlabel with JQuery(박스안에 워터마킹처리)  : http://scott.sauyet.com/Javascript/Demo/Overlabel/

     -Styling an input type="file"(파일찾기 이미지 처리)
       http://www.quirksmode.org/dom/inputfile.html

     -jQuery UI Datepicker v3.0 Examples(달력)
      http://marcgrabanski.com/code/ui-datepicker/

     -jQuery Validation Plugin(폼체크,포커싱)
      http://jquery.bassistance.de/validate/demo-test/ 
      http://www.texotela.co.uk/code/jquery/focusfields/
     
     -jQuery columnHover plugin(컬럼 하이라이트/컬럼 컨트롤)
      http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html
      http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

     -tablesorterDocumentation(테이블 순서)
      http://tablesorter.com/docs/index.html 

     -jQuery Accordion Demo(컨테이너 예제)
      http://jquery.bassistance.de/accordion/?p=1.1.1

     -jQPanView based in jQuery 1.1(이미지 확대보기)
      http://projects.sevir.org/storage/jpanview/index.html

     -jQuery Impromptu(confirm,alert 등등)
      http://trentrichardson.com/Impromptu/

     -jqGrid Examples(그리드)
      http://trirand.com/jqgrid/jqgrid.html#

     -Toggle HTML-Elements with jQuery
      http://jquery.andreaseberhard.de/toggleElements/

     -UI/Sortables(테이블 위치변경 ^^)
      http://docs.jquery.com/UI/Sortables

     -뉴스 슬라이더(부분보기,전체보기)
      http://www.reindel.com/accessible_news_slider/

     -로컬 스크롤러
      http://www.freewebs.com/flesler/jQuery.LocalScroll/

     -핫키 테스트
      http://jshotkeys.googlepages.com/test-static.html

     -슬라이더
      http://docs.jquery.com/UI/Slider/slider

     -쇼핑카트
      http://www.mimul.com/pebble/default/2007/10/30/1193753340000.html

     -테이블 소트
      http://www.mimul.com/pebble/default/2007/11/06/1194348600000.html

     -이미지 나중에 로딩시키기
      http://www.mimul.com/pebble/default/2007/11/10/1194695220000.html

     -오토탭(입력시 폼객체 자동넘김)
      http://dev.lousyllama.com/autotab/

     -실시간 폼객체 수정
      http://www.appelsiini.net/projects/jeditable/custom.html

     -프린트
      http://www.designerkamal.com/jPrintArea/#
     -차트
      http://www.reach1to1.com/sandbox/jquery/jqchart/

     -CSS Dock Menu (Jquery + CSS)
      후니넷에서 보삼
     -툴팁
      http://www.codylindley.com/blogstuff/js/jtip/

     -XML데이터 뿌리기
      http://blog.reindel.com/src/jquery_browse/
      http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
      http://www.mimul.com/pebble/default/2006/11/05/1162710000000.html

     -Clearing Form

      http://www.learningjquery.com/2007/08/clearing-form-data

     --암호 복잡성 체크

      http://phiras.googlepages.com/PasswordStrengthMeter.html

     --Form Serialize

      http://dev.jquery.com/wiki/Plugins/FastSerialize

     --GetString 퍼라미터 가져오기
      http://www.mathias-bank.de/2006/10/28/jquery-plugin-geturlparam/

     --검색 후 콤보생성(ajax with combo) 아주 유용함
      http://extjs.com/deploy/ext/examples/form/forum-search.html
      http://extjs.com/deploy/ext/examples/grid/edit-grid.html-->그리드

     --파일 업로드(input=file) 리폼
      http://www.appelsiini.net/projects/filestyle/demo.html

    Jquery Best
     http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/

    웹디자인 템플릿트(2.0)
     -http://www.templateworld.com/free_templates.html

    ----------------------------------------
    Jquery tag cloud
    http://www.ajaxrain.com/tagcloud.php
    Jquery 기본설명
    http://www.zzbb.kr/34
    ----------------------------------------

    ^^Star Rater(순위) --활용가능성 높음
    http://www.m3nt0r.de/devel/raterDemo/

    ^^ AJAX CALLING --활용가능성 높음
    http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/

    --AJAX 아이디 중복체크 - 활용가능성 아주높음
    http://www.shawngo.com/gafyd/index.html

    ^^ jQuery framework plugins which provide a way to sort and nest elements in web applications, using drag-and-drop(테이블드래그앤드랍) --활용가능성 중간
    http://code.google.com/p/nestedsortables/

    ^^Simple tableSorter(리스트 정렬) 활용가능성 중간
    http://motherrussia.polyester.se/docs/tablesorter/

    ^^Cookie 활용가능성 높음
    http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

    ^^태깅 --그냥한번보자..ㅎ
    http://www.alcoholwang.cn/jquery/jTaggingDemo.htm

    ^^죽이는 어코디언 메뉴
    http://dev.portalzine.de/index?/Horizontal_Accordion--print

    ^^ AJAX Indicator 이미지
    http://qureyoon.blogspot.com/2006/11/make-your-own-loading-gif.html

    ----------------------------------------
    2007.12.28 찾은것
    ----------------------------------------
    http://rikrikrik.com/jquery/quicksearch/#usage
    http://nadiaspot.com/jquery/confirm/#examples
    http://host.sonspring.com/portlets/
    http://jquery.andreaseberhard.de/toggleElements/
    http://www.getintothis.com/pub/projects/rb_menu/
    http://icon.cat/software/iconDock/0.8b/dock.html
    http://www.nuernberg.de/internet/portal/index.html
    http://rikrikrik.com/jquery/shortkeys/#examples
    http://rikrikrik.com/jquery/pager/#examples
    http://famspam.com/facebox/ --라이트박스같은것
    http://www.andreacfm.com/
    http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/ --autocomplete
    http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html - 뉴스 스크롤
    http://d-scribe.de/webtools/jquery-pagination/demo.htm# --페이징
    http://tinymce.moxiecode.com/example_full.php?example=true --Open Source WYSWYG 웹 에디터
    http://www.laptoptips.ca/projects/tinymce-advanced/ --Open Source WYSWYG 웹 에디터 advanced
    http://extjs.com/ -또다른 RIA JAVASCRIPT 프레임워크
    http://www.digital-web.com/extras/jquery_crash_course/ -jquery로 만든 비행 예약 시스템 데모(Passenger Management )
    http://markc.renta.net/jquery/ --jquery 간단예제
    http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html?page=2 -jquery와 XML
    http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/  -쿠키 플러그인
    http://jquery.com/files/demo/dl-done.html --간단한 어코디언 메뉴
    http://mjslib.org/doc/legacy/fieldgroup.html --폼필드 컨트롤
    http://extjs.com/deploy/dev/examples/tree/two-trees.html --트리
    http://www.amcharts.com/column/ - 차트(바로 사용^^)
    http://particletree.com/features/rediscovering-the-button-element/ - 버튼 스타일링
    http://www.i-marco.nl/weblog/jquery-accordion-menu/ - 실용성 높은 어코디언 메뉴


    http://www.sastgroup.com/jquery/240-plugins-jquery
    http://jquery.bassistance.de/jquery-getting-started.html


    출처: http://durimi.co.kr/

    Posted by Finebe
    ,


    Posted by Finebe
    ,