블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

동적 호스트도메인 사용하기 (apache2+tomcat6.0)

Integrator/U-LINUX / 2009. 12. 22. 13:38

멀티도메인(여기서는 호스트도메인)이 가능하게 아파치와 톰캣연동을 하려한다.
예를 들어 aaa.techbug.com 과 bbb.techbug.com 으로 들어와도 톰캣의 하나의 컨텍스트로 넘어오게 하기 위한 목적으로 서버 셋팅을 해야한다.

PHP라면 간단한 일이 되겠지만 톰캣과의 연동을 하려니 상당히 어려운 점이 많다.
팀원(병규야 수고했다..그리고 미안하다.. ^^) 을 시켜 셋팅한 것이지만.. 공유하려 한다.


설정
aaa.techbug.com   --->  http://로컬머신/techbug
bbb.techbug.com   --->  http://로컬머신/techbug


환경 
Ubuntu10 + Apache2 + Tomcat6.0

필요한 모듈 : 
mod_proxy, 
mod_proxy_balancer, 
mod_proxy_http
mod_proxy_html, mod_rewrite

모듈 설치 : 
apt-get install libapache2-mod-proxy-html libxml2

설치 모듈을 enable상태로 변경
/etc/apache2/mods-avaliable 에서 확인

a2enmod를 이용한 아파치모듈 활성화
a2enmod proxy, 
a2enmod proxy_html, 
a2enmod proxy_balancer, 
a2enmod rewite, 
a2enmod proxy_http

활성화 여부 확인 : /etc/apache2/mods/mods_enables





Apache2 환경설정

1.VirtualHost 등록
/etc/apache2/sites-enabled/000-default에서 VirtualHost를 등록한다

2. 아파치 재시작 : 
/etc/init.d/apache2 restart


3. 톰캣 시작(톰캣에 techbug이름으로 프로젝트가 배포되어 있다고 가정)
<VirtualHost *:80>
    ServerName techbug.com
    ServerAlias techbug.com   *.techbug.com
    proxyRequests Off
    proxyPreserveHost On
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>
    ProxyPass / http://localhost:8080/techbug/
    ProxyPassReverse / /http://localhost:8080/techbug/
</VirtualHost>

http://aaa.techbug.com 입력하고 제대로 나오는지 확인하다
ProxyPass 에 설정 한 대로 톰캣의 주소로 이동하게 되고 index.jsp 가 가장 먼저 읽어진다




Mod_Proxy 설정 정보

ProxyPass를 사용하여 특정 디렉토리를 톰캣에서 처리
ProxyPass /admin/http://localhost:8080/techbug
ProxyPass  /user/http://localhost:8080/techbug

ProxyPassMatch : ProxyPassMatch를 이용하여 특정 확장자를 가진 파일을 톰캣에서 처리
ProxyPassMatch   ^/.*\.(jsp|do|action)$ http://localhostL8080/


LocationMathch : LocationMathch를 사용하여 접근보안 문제 해결
<LocationMatch  “/WEB-INF”>
    deny all
</Location>


Tomcat : web.xml
톰캣에서는 별다른 설정은 하지 않고 데이타리소스만 정리하였다.
<GlobalNamingResources>
<Resource name="UserDatabase" auth="Container"
    type="org.apache.catalina.UserDatabase"
    description="User database that can be updated and saved"
    factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
    pathname="conf/tomcat-users.xml" />
<Resource name="jdbc/NEXFA_DS"
    auth="Container"
    type="javax.sql.DataSource"
    username="유저네임"
    password="패쓰워드"
    driverClassName="com.mysql.jdbc.Driver"
    url="jdbc:mysql://localhost:3306/techbugdb"/>
</GlobalNamingResources>



<Host name="localhost"  appBase="webapps"
    unpackWARs="true" autoDeploy="true"
    xmlValidation="false" xmlNamespaceAware="false">
    <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
    <Context path="" docBase="/usr/flowerteam/tomcat-6.0.20/webapps/NexfaWeb" debug="0" reloadable="true">
        <Resource name="jdbc/TECHBUG_DS" 
                auth="Container"
                type="javax.sql.DataSource"
                driverClassName="com.mysql.jdbc.Driver"
                username="유저네임"
                password="패스워드"
                url="jdbc:mysql://localhost:3306/techbugdb"/>
    </Context>
</Host>




www가 안붙은 URL을 자동으로 붙이기
techbug.com 이라는 도메인을 주소창에 입력하였을 때 자동으로 www.techbug.com 으로 접속 시키는 방법이다.
<VirtualHost *:80>
    ServerName techbug.com
    ServerAlias www.techbug.com
    DocumentRoot /home/techbug/public_html/
    ErrorLog logs/error_log
    CustomLog logs/sinvi-access_log combined env=!nosave
</VirtualHost>
이라는 가상 호스트 구문이 있을것이다. www 를 자동으로 붙이는 방법은 간단하다.위의 구문아래에 똑같은 구문을 복사하여 붙여 넣는다.

<VirtualHost *:80>
    ServerName techbug.com
    ServerAlias www.techbug.com
    DocumentRoot /home/techbug/public_html/
    ErrorLog logs/error_log
    CustomLog logs/sinvi-access_log combined env=!nosave
</VirtualHost>

<VirtualHost *:80>
    ServerName techbug.com
    ServerAlias www.techbug.com
    DocumentRoot /home/techbug/public_html/
    ErrorLog logs/error_log
    CustomLog logs/sinvi-access_log combined env=!nosave
</VirtualHost>

와 같이 될것이다. 이상태에서 아래와 같이 몇가지만 바꿔준다.


<VirtualHost *:80>
    ServerName techbug.com
    #ServerAlias www.techbug.com  <=== 주석처리
    RedirectMatch /(.*)$ http://www.techbug.com/$1 <==== 삽입
    DocumentRoot /home/techbug/public_html/
    ErrorLog logs/error_log
    CustomLog logs/sinvi-access_log combined env=!nosave
</VirtualHost>

<VirtualHost *:80>
    ServerName www.techbug.com <=== www 사이트 명시
    #ServerAlias www.techbug.com <=== 주석처리
    DocumentRoot /home/techbug/public_html/
    ErrorLog logs/error_log
    CustomLog logs/sinvi-access_log combined env=!nosave
</VirtualHost>

설명을 하자면 같은 페이지를 보여주되 접속 도메인은 개별화 시킨 것이다. 다시 말해, techbug.com을 주소창에 입력하게 되면, 우선은 윗쪽 가상호스트 설정에 의해 접속하게 되고, RedirectMatch /(.*)$ http://www.techbug.com/$1 행에 의해 다시 두번째 가상호스트 설정인 www.techbug.com 으로 접속하게 되는것이다.

마지막의 $1의 역할은 techbug.com/xxxxx/xxxx/xxxx...등의 x로 표시된 모든 문자를 $1로 치환하여 www를 붙인 www.techbug.com 도메인 뒤에 다시 반환해주는 역할을 한다.
즉, techbug.com 도메인의 메인 페이지 뿐만 아니라, 하위의 모든 페이지에 www가 붙게 되는것이다




참고 :




저작자표시 비영리 변경금지

'Integrator > U-LINUX' 카테고리의 다른 글

Character Set과 Encoding 이해하기  (0) 2009.03.31
Apache expires 설정으로 브라우저 캐시  (0) 2009.01.29
리눅스용 소프트웨어  (0) 2008.03.29
우분투에서 하드드라이브 추가하기  (2) 2008.03.04
우분투 IP변경하기  (0) 2008.03.04
Post by 넥스트리소프트 데꾸벅(techbug)
, |

CSS Hack in IE8

Publisher/CSS / 2009. 4. 27. 11:20


유입경로를 분석하다가 IE8용 CSS Hack을 찾는 분들이 많아 정리합니다.
지난 포스트(CSS Hack을 정리)에 이어 Full-Browsing을 위해서 아래와 같이 몇가지만 알면 CSS-Hack에 대한 모든것을 아실수 있을 겁니다. 

/***** 선택자 Hacks ******/
/* IE 6 및 하위버전 */
* html #uno  { color: red }
 
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
 
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
 
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
 
/***** 어튜리브트 Hacks ******/
 
/* ie6 및 하위버전 */
#once { _color:blue }
 
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
 

예제파일 :
full_browsing_css_hack.zip


참조 : Paul Irish's Blog

모든 IE에 똑같이 적용할때 추천하는 방법으로는 body에 클래스 선택자를 이용해서 다음과 같이 작성할수 있다.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->

다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요 

div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }

 

dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.

IE8 표준모드 Only:
.test { color /*\**/: blue\9 }

IE8을 포함한 IE버전
.test { color: blue\9 }








 

저작자표시 비영리 동일조건

'Publisher > CSS' 카테고리의 다른 글

화면전체 배경이미지인 웹사이트 만들기  (0) 2009.11.04
CSS로 Table 디자인 하기  (15) 2009.04.28
safari 및 google Chrome에서의 Fieldset CSS버그  (2) 2008.09.08
PNG(setPNG)를 이용시 이미지 토글 이벤트 먹는 경우  (2) 2008.08.13
CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기  (0) 2008.08.02
Post by 넥스트리소프트 데꾸벅(techbug)
, |

GET Method 길이 제한 (최대 URL 길이 )

Integrator/Windows / 2008. 11. 20. 12:26

Maximum URL length

GET방식의 길이제한에 대한 의견이 분분하다. FORM submission에 대한 데이타를 찾아 보다 유용한 정보가 있어 포스팅한다.

GET방식의 길이제한에 대해 서로 틀린 이유는  HTTP프로토콜의 역사(historical)에서 비롯된다.
기존 GET방식은 1024Character였던것들이 브라우저 업데이트및 HTTP 프로토콜의 업데이트에 의해 서로 틀려졌기 때문이다.
그러나 지금 현재 여타 다른 브라우저의 경우에는 GET방식의 URL 길이 제한이 없다. 그러나 IE의 경우에만 예외로 GET방식의 길이 제한이 있다.  그 이유는 MS에서 Internet Explorer의 주소창에 들어가 문자수가 정해져 있기 때문이다.

참조 : http://support.microsoft.com/default.aspx?scid=kb;EN-US;q208427

MS IE의 경우 maximum URL은 POST(주소줄에 표시되는 action URL)이든 GET이든 2,083 character를 가질수 있다. 만일 GET방식을 사용한다면 실제 action주소를 뺀 2,048 character만 적용된다. 그러나 POST방식을 경우 action주소를 제외한 name/value 쌍으로 이루어진 데이타는 길이나 용량제한이 없다.

RFC2616 (Hypertext Transfer Protocaol -- HTTP/1.1 표준스펙)에는 URL길이에 대해서 아무런 명세도 표기되어 있지 않다. 더이상 길이가지고 싸우지 않기를.. ㅡ.,ㅡ;

자세한 정보는 RFC616 의 섹션 3.2.1의 General Syntax를 참조하기 바란다.
ftp://ftp.isi.edu/in-notes/rfc2616.txt

적용브라우저 : IE7, 6, 5.5,  5.01, 4.01 sp2, 4.0 128bit edition 

 
HTML Forms에서 GET, POST method의 다른점도 한번 읽어보시길....


저작자표시

'Integrator > Windows' 카테고리의 다른 글

데꾸벅체 다운로드  (0) 2008.07.09
MS office2007 Excel 파일 각각 따로 열기  (8) 2008.06.27
윈도우 서비스 등록하기  (1) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)
, |

Extjs Sample :: Viewport를 이용한 기본레이아웃잡기

Scripter/EXTJS / 2008. 2. 18. 19:57

Basic Concept

BCF 에서는 Ext.Viewport를 이용하여 Layout을 잡는것을 기본으로 한다. Ext.Viewport는 브라우저의 Viewport(<body></body>)영역에 자동으로 document Body에 렌더링하는 유틸리티 컨테이너 클래스이다. 브라우저의 크기가 변경되었을때 자동으로 레이아웃을 재계산하여 full-screen으로 렌더링한다.
주의 :  Viewport는 document.body에 다른 어떤 container와 같이 렌더링 할수 없다.  페이지당 단 한개의 Viewport만 사용된다.

 

Region Concept














north
   west          east
   center  
     
     south






브 라우저에서 위와 같이 그리드를 갖추고 있다고 하면 Viewport에서는 north, west,east,south,center 라는 영역(Region)을 갖는 5개의 Panel이 자동으로 생성된다. 위의 영역중 Center를 제외하고는 모두 Collapse/Expand 및 Hide/show 가 가능하다. 레이아웃을 생성할때에는 반드시 Center Region이 하나 이상(Center Region이 TabPanel 일 경우 여러개 존재) 존재하여야 한다.

기본적으로 아래 소스에서 사용되어질 레이아웃 종류는 BorderLayout이다. 이전 장을 반드시 숙지할것

최종 소스 :  다운로드

 

 

Step 1 : 기본 틀 잡기

 각 소스는 이미 설명했던 0010. Basic Structure와 0020.Basic Format을 이용하여 재사용성을 고려하여 만든다.

basicLayout.html

<html>
<head>
<title>Basic Layout</title>
<link rel="stylesheet" type="text/css" href="http://techbug.tistory.com/resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="basicLayout.js"></script>
</head>
<body id="basicLayoutBody"></body>
</html>

basicLayout.js

//BasicLayout 기본 클래스를 정의한다.
BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',               //기본적으로 모든 viewport는 borderLayout으로 시작한다.
items : [
{
    region : 'north',    //상단 영역
    title : 'NORTH',    //상단 타이틀
    collapsible : true,    //상단 영역을 감추기 버튼 나타나기
    height : 200,        //상단 영역의 높이  (상/하단은 높이, 좌/우측은 너비)
    split : true,        //아래 영역과 splitting한다. (5px정도 차이를 둔다.)
    layout : 'fit',        //레이아웃 매니저는 fitLayout
    html : '상단'          //패널의 body HTML을 정의한다.
},
{
    region : 'south',
    title : 'SOUTH',
    collapsible : true,
    height : 200,
    split : true,
    layout : 'fit',
    html : '하단'
},
{
    region : 'east',
    title : 'EAST',
    collapsible : true,
    width : 250,
    split : true,
    layout : 'fit',
    html : '우측'

},
{
    region : 'west',
    title : 'WEST',
    collapsible : true,
    width : 250,
    split : true,
    layout : 'fit',
    html : '좌측'
},
{
    region : 'center',    //Center Region의 경우 Width,Height를 표시하지 않는다. (상/하, 좌/우 패널에서 모두 정의된 높이/너비)
    title : 'CENTER',
    layout : 'fit',
    html : '중간'
}
]
});
this.viewport.doLayout();    //viewport의 레이아웃을 그린다. (생략가능 : 되도록 작성 )
this.viewport.syncSize();    //viewport의 사이즈를 sync한다. (생략가능 : 되도록 작성 )

}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);   

 

 

 

Step 2 : 상/하단 및 우측 판넬 없애기

basicLayout.js

BasicLayoutClass = function() {
return {
init : function() {

this.viewport = new Ext.Viewport( {
layout : 'border',
items : [ 
// Step 1에서 정의된 좌측 패널 : 
//Step1에서는 Default 값인 new Ext.Panel() 이 생략됨 
this.WestPanel = new Ext.Panel({
region : 'west',
title : 'WEST',
collapsible : true,
//초기 로딩시 collapse된 상태에서 보여진다.
collapsed : true,		
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측'
}),
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '중간'
})
]
});

this.viewport.doLayout();
this.viewport.syncSize();

}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);



Step3 : 좌측 패널을 별도의 Class로 분리하여 빼내기

basicLayout.js

LeftArea = function(){
//기존 좌측 판넬의 config option을 그래도 호출하여 사용 
LeftArea.superclass.constructor.call(this,{	
region : 'west',
title : 'WEST',
collapsible : true,
collapsed:false,
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측'
});
};

Ext.extend(LeftArea, Ext.Panel,{	
//Ext.Panel을 상속받아 사용하였다, GridPanel일 경우는 
//Ext.grid.GridPane을 사용하듯이 여러 Panel정의하여 사용가능
//Left Area의 Public,Private,Privileged 메쏘드를 정의한다.
});



BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [ 
// LeftArea Class로 별도로 선언
this.WestPanel= new LeftArea(),				
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '<div id="_CONTENTS_AREA_">컨텐츠 영역입니다.</div>'
})
]
});

this.viewport.doLayout();
this.viewport.syncSize();

}
}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);


 

Step 4 : 좌측 패널에 ToolBar 붙여 오른쪽 패널의 Body를 Update하기

basicLayout.js

// 메인 클래스인 BasicLayoutClass를 인자로 넘겨받음 this.WestPanel = new LeftArea(this)
LeftArea = function(viewport){       

// 인자로 받은 private변수를 public 변수로 변환
this.viewport = viewport;   
 // LeftArea에서만 사용가능한 private 변수
var privateNum = 0;       

LeftArea.superclass.constructor.call(this,{
region : 'west',
title : 'WEST',
collapsible : true,
collapsed:false,
width : 250,
split : true,
layout : 'fit',
margins:'5 0 5 5',
cmargins : '5 5 5 5',
html : '좌측',
// 툴바 붙이기 TopToolbar의 경우 tbar, BottomToolbar의 경우 bbar로 표시
tbar : [           
// 툴바 안의 액션버튼 붙이기 new Ext.Action({})으로 표기가 생략
{                 
text:'클릭하세요',
scope:this,    //scope는 handler에서 사용할 이벤트영역 : this는 LeftArea 클래스를 가르킴               
handler:function(){
privateNum++;// LeftArea 클래스의 private변수
this.viewport.updateBody(privateNum);// this.viewport로 BasicLayoutClass.viewport로도 가능
}
}
]
})
};

Ext.extend(LeftArea, Ext.Panel,{
//Left Area의 Public,Private,Privileged 메쏘드를 정의한다.
});


BasicLayoutClass = function() {
return {
init : function() {
this.viewport = new Ext.Viewport( {
layout : 'border',
items : [
this.WestPanel= new LeftArea(this),    // 클래스 호출시 BasicLayoutClass를 인자로 넘겨줌
this.CenterPanel = new Ext.Panel({
region : 'center',
title : 'CENTER',
layout : 'fit',
margins:'5 5 5 0',
html : '<div id="_CONTENTS_AREA_">컨텐츠 영역입니다.</div>',
tbar : [
this.firstMenu = new Ext.Action({    // 좌측 판넬에서 정의했던 툴바를 선언하는 다른 방식
text:'좌측패널 보였다/안보였다',
scope:this,
handler:function(){
if(this.WestPanel.isVisible()){        // 좌측패널의 보였다/안보였다
this.WestPanel.collapse(true);    // this.WestPanel로 좌측패널을 컨트롤
}else {
this.WestPanel.expand(true);
}
}
})
]
})
]
});

this.viewport.doLayout();
this.viewport.syncSize();
},

// 좌측 패널클래스 new LeftArea에서 직접 호출하는 Public Method
updateBody : function(privateNum){
Ext.get('_CONTENTS_AREA_').update('좌측판넬 클릭시 '+privateNum+'번 변했네요!');
}

}
}();
Ext.EventManager.onDocumentReady(BasicLayoutClass.init, BasicLayoutClass, true);





'Scripter > EXTJS' 카테고리의 다른 글

Extjs를 이용한 에러핸들링  (2) 2008.02.18
Extjs 서로 다른 도메인일 경우 ScriptTagProxy를 이용한 Ajax통신  (5) 2008.02.18
Extjs Sample :: 기본문서구조만들기  (0) 2008.02.18
Extjs Sample :: 기본문서구조  (0) 2008.02.18
Extjs Qtips 사용하기  (0) 2008.02.18
Post by 넥스트리소프트 데꾸벅(techbug)
, |

ExtJS 시작하기

Scripter/EXTJS / 2008. 2. 17. 14:49

ExtJs란

ExtJs는 웹애플리케이션을 만들기위한 client-side-JavaScript framework이다. JackSolocum이  Yahoo! User Interface (YUI) library의 확장으로 만들기 시작했으며 Yui-ext란 Project명으로 빠르게 성장했다.


라이센스

ExtJS는 개발목적의 오픈소스로 제공되는 LGPL 라이센스와  로얄티프리 커머셜 라이센스로 구분된다.( licensing page )
상업용 라이센스는 SVN 접속이 허락되며 전화/팩스 및 이메일로 지원을 받을수 있는것이 고작(?)이다.


호환되는 서버 플랫폼

 PHP,Ruby on Rails (Embeded로 지원), .NET, Java 등 여러가지 서버 플랫폼을 지원한다. 사이트( server-side frameworks ) 를 참조하기 바란다.


ExtJS를 사용하기 위해 요구되는 라이브러리

1.0.1a 버전에서는  YUI, jQuery or Prototype/Script.aculo.us. 가 반드시 필요했으나 1.1에서는 Ext adapter를 채택하여 더이상 다른 외부 라이브러리 없이 구동할수 있다. 또한 외부 라이브러리를 사용하고 싶다면 해당 라이브러리 어답터가 별도로 구비되어 있으며 Extension Mode로 제공되는 기타 다른 라이브러리를 참조할수가 있다.

Base Library Include Order Get Library
Ext Standalone ext-base.js
ext-all.js (or your choice of files) 		http://www.extjs.com/download
Yahoo! UI (.12+) yui-utilities.js (or your choice of YUI base files)
ext-yui-adapter.js
ext-all.js (or your choice of files) 		http://developer.yahoo.com/yui/
jQuery (1.1+) jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files) 		http://jquery.com/
http://docs.jquery.com/Plugins
Prototype (1.5+) /
Scriptaculous (1.7+) 		prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files) 		http://www.prototypejs.org/
http://script.aculo.us/


3-party adapters와의 호환시 이슈사항

  • jQuery에서의 애니메이션기능(하이라이팅기능과 같은) 은 다음 사이트를 참조하라. References: 1, 2
  • DatePicker와 같은 jQuery버그를 해결하는 방안 References: 1, 2


에러상황에 따른 대처

  • 최대한 사용하는 버전의   API documentation. 를 이용한다.
  • 최신의 버전으로 유지하고 해당 사이트를 항상 방문해서 release나 bugpatch상황을 주시한다.
  • 브레이스 ( { )나 null을 리턴하는 경우 캐리지 리턴값을 주의한다.  아래와 같이 return 뒤에 한줄을 띈 ( { )는 에러를 발생시킨다. (헉~ 자바스크립트 포매터가 위험하겠군...) 
var myExample = function()

    {

      return

      {

        foo: 'bar',

        boo: 'far'

      }

    };

위의 코드는 아래와 같이 작성해야 한다. 

var myExample = function()

    {

      return {

        foo: 'bar',

        boo: 'far'

      }

    };

만일 여의치 않다면 다음과 같이 대처한다.

  • 개발시에는 ext-all-debug.js 를 사용하여 해당 소스 추적이 쉽게 한다. 단 운영시에는 ext-all.js로 obfuscated된 버전으로 사용한다.
  • 되도록이면 스크립트 디버거를 사용하도록 한다.
    Firefox Firebug : 사용법(      How-to: using Firebug to debug your script  )
    IE Companion JS
  • http://blog.naver.com/techbug 사이트에서 확인가능 ^^;


다른 URL혹은 domain이 틀린 사이트에서 데이타를 가지고 오고 싶을때

아래와 같이 HttpProxy보다는 ScriptTagProxy를 사용한다. 

var proxy = new Ext.data.HttpProxy({

        url: '/DoSearch.php'

    });

 

//  Add the HTTP parameter searchTerm to the request

    proxy.on('beforeload', function(p, params) {

        params.searchTerm = searchValue;

    });

Hidden Field 표시하는법

See http://extjs.com/forum/showthread.php?t=11698#2 or http://extjs.com/forum/showthread.php?t=6710#2


그리드의 셀에 클릭이벤트 핸들러 사용하는법(가장 많이 헷갈리고 많이 사용하는 것)

function(grid, rowIndex, columnIndex, e) {

        var record = grid.getStore().getAt(rowIndex);  // 레코드의 Row를 가져온다.

        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // 컬럼의 필드명을 가져온다.

        var data = record.get(fieldName);

    }

Ajax로 불러온 마크업중의 스크립트가 실행되지 않을때

Ext.Updater.defaults.loadScripts나  Updater.update 메쏘드나 Element.update 메쏘드 사용


그리드의 Row를 각각 틀리게 표현하고 싶을때 (getRowClass를 사용한 expander사용)

http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass

load()로 빈 데이타스토어(getCount()==0)를 불러올때

HttpProxy나 ScriptTagProxy와 같이 remote data 를 사용할때  Store.load() 는 비동기로 호출되며 서버블로킹없이 즉시 요청한다. "load" 와 "loadexception"이벤트로 쉽게 작업을 할수 있다. 이후 Grid Data Load에서 설명 ^^


Ext.get으로 컴포넌트 불러올때

Ext.get 는 단지 HTML Element의 객체를 가져온다. 즉, document.getElementById와 같다.
판넬이나 폼판넬등 컴포넌트를 불러올때는 Ext.getCmp를 사용해야 한다.


tree Node에서 아이콘 표시하는법

myNode.appendChild(new AsyncTreeNode({

        text: "A folder",

        iconCls: "folder"

    });

CSS의 class seletor를 이용한다. (CSS 표준을 항상 염두해 둘것....) 

.x-tree-node img.folder, .x-tree-node-collapsed img.folder{

    background: url("../images/default/tree/folder.gif");

}

 

.x-tree-node-expanded img.folder {

    background: url("../images/default/tree/folder-open.gif");

}

"Ext is undefined"라고 에러 메세지 뜨면

당근 ext-all.js 파일의 패쓰가 잘못됐으니 확인해야지....쩝..이런것도 적어야 하나.. 

<script type="text/javasscript" src="/somepath.js"></script>
<script type="text/javascript" src="/somepath.js"></script>

"XX has no properties"라는 에러가 떨어질때

해당 엘리먼트 id값을 찾을수 없다는 얘기다. 아래에서는 id='save-button'를 가진 객체를 찾을수 없다는 얘기다. 

// constructors:

var tb = new Ext.Toolbar('toolbar');

 

// creating Element references:

var saveBtn = Ext.get('save-button');
<div id="toolbar"></div>

<input id="save-button" type="button" value="Save" />

extjs.com/s.gif를 계속 찾고 있다면 아래와 같이 한다.

1x1pixel짜리 투명이미지를 절케 표시하고 있다. 잘 해두도록... 

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/aero/s.gif';  // 1.1

Ext.BLANK_IMAGE_URL = '/images/ext/resources/images/default/s.gif';  // 2.0

설명서를 잘 읽어보도록...반드시....


익칠이(IE)에서는 안돌아가는데 불여우(FF)에서 잘 돌아갈때

쉼표를 잘 찾아보도록.... 

testFunc = function() {

    return {

        titlebar: true,                            

        collapsible: true,  // <--- BOOM goes the comma! :D

    }

}

JSLint를 이용하면 쉽게 찾을수 있다.



가끔씩 깨진 화면들이 나올때

이런경우 난감한...문제가 발생할수도 있는데 나의 경우는 전체 화면을 다시 그린적도 있다.. ㅠ.,ㅠ;

반드시 해당 컴포넌트(판넬,폼판넬, 콤보박스, 그리드 판넬)의 ID값을 반드시 입력해 준다. 또한 같은화면에 같은 ID값을 가진 객체가 있는지 반드시 확인한다.



다른 도움을 받고 싶을을 정도로 울고 싶을때

- ExtJS Forum에 들어가 도움을 청해본다. 그리고 Google 신에게 물어본다.  답이 다 있다. 다만 시간이 걸릴뿐이다.

영어 해석은 기본, 중국어은 옵션.. ^^;  

위의 내용만 알면 어느정도 ExtJS를 사용하면서 겪을 문제를 반정도는 해결할수 있다... 나의 경우 그랬으니깐... ㅡ.,ㅡ;


끝.


'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)
, |

ExtJS 개발하기 위해 선행되는 지식들

Scripter/EXTJS / 2008. 2. 15. 10:27
넥스트리 포스팅했던글을 다시 정리하여 올리다.
사내 제품개발시 ExtJS를 사용할 일이 있어 내용을 보다가 해당사이트(www.extjs.com)을 번역하기로 맘먹었다.



매뉴얼번역: http://extjs.com/learn/Manual:Resources

ExtJS로 개발하기 위해서는 다음과 같은 것들이 필요하다. 반드시 읽어 볼것... 이미 앞의 EXTJS 시작하기 에서  맛뵈기(?)로 보았으니 이를 개발하기 위한 준비물들이 필요하겠다.


일반적인 JavaScript Learning Guide
Edit section

참고사이트
Edit section

  1. Mozilla Developer Center: Core JavaScript 1.5 Reference Manual
  2. Yahoo UI개발자인 Douglas Crockford's JavaScript
  3. Yahoo Developer Network : YUI Theater  ( 더글라스 크록포드의 동영상 강의 수록)
  4. Peter-Paul Koch의 QuirksMode
  5. http://home.cogeco.ca/~ve3ll/jstutor0.htm

그외 볼만한 사이트(Dead Trees)
Edit section

  1. JavaScript: The Definitive Guide by David Flanagan
  2. Pro JavaScript Techniques by John Resig
  3. Ajax and REST Recipes by Christian Gross
  4. ppk on JavaScript by Peter-Paul Koch
  5. Professional JavaScript for Web Developers by Nicholas C. Zakas
  6. Ajax Patterns and Best Practices by Christian Gross
  7. Dynamic HTML by Danny Goodman
  8. Head First Design Patterns by Freeman & Freeman

 

OO JavaScript 참조사이트

  1. How to achieve private, public, and privileged members in JavaScript, by Dustin Diaz.
    : Method scoping에 대한 좋은 설명
  2. OOP in JS, Part 1 : Public/Private Variables and Methods, by Gavin Kistner.
    : Scoping 및 prototyping에 대한 샘플
  3. A JavaScript Module Pattern, by Eric Miraglia in YUI Blog.
    : 더글라스 크록포드가 얘기한 module pattern에 대한 설명
  4. Again with the Module Pattern - reveal something to the world, by Christian Heilmann.
    : 모듈패턴
  5. JavaScript for Object-Oriented Programmers (Appendix B of the book AJAX in Action).

DOM

 

 

그외 기술

Yahoo! User Interface Library (YUI)

Ext JS 은 yui-ext에서 부터 시작되었다. 아래 사이트에서 YUI에 대해서 좀 봐두는것도 좋을지도..

  1. YUI Library
  2. ydn-javascript: Yahoo! User Interface Library Group
  3. YUI Blog

JSON 관련

 

 

Platform-Specific Resources

ExtJS를 서버사이드 프레임웍으로 사용한 녀석들.....

PHP
Edit section

대표적인 샘플코드는 모두 PHP코드로 되어 있는 걸 보면  PHP에서 개발하기 가장 쉬운것 같음.
ExtJS 내장 PHP프레임웍 :  Qcodo Development Framework

Java

Direct Web Remoting (DWR) : http://getahead.org/dwr

.NET

  • AjaxPro 는 .Net 을 이용한 서버사이드 Ajax
  • Jayrock  :  .Net에 JSON / JSON-RPC 를 이용 
  • Json.NET  : .Net에서 JSON을 쓰게 만들어주는 라이브러리 (PHP의 toJSON()이나, Struts의 JSON과 같은건가 보다... ㅡ.,ㅡ; ) 

Ruby on Rails

Ext plugin - ROR는 내장 플러그인으로 작동하므로 gem을 이용해 받으면 되겠다...  (찾기가 더 힘드네.. ㅡ.,ㅡ;)

IBM Lotus Notes/Domino

IBM's Lotus Notes/Domino : IBM 머찌다라는 말만..

 

 

통합개발툴(IDE)
Edit section

Eclipse Based IDEs

Eclipse 은 오픈소스 통합개발툴 (among other things!)이다. ExtJS개발을 위해 이클립스를 사용하기 위해서는 먼저 자바스크립트 사용할수 있는 플러그인을 설치해야 한다.
아래의 플러그인을 추천한다.

  • Aptana - JavaScript, HTML, CSS, PHP languages, FTP/SFTP 지원, RIA/Web2.0등 Ajax 관련 프로젝트에 적합 (느리다는 단점이 있음.. ㅠ.,ㅠ)
  • Spket - JavaScript, XUL, SVG, Laszlo, Silverlight,등 각 모듈 라이브러리 지원(http://blog.naver.com/techbug/150024518549 )
  • JSEclipse - JavaScript

위에 열거된 플러그 인들은 각자 자바스크립트 에디터를 포함하고 있다.  자바스크립트를 열때 "Open with"로 열어서 사용하도록...플러그인을 선택할때는 코드 assist를 지원하는지 확인해 봐야 할듯

 

Aptana + Spket + ExtJS(강추..)
  • Aptana다운로드 http://www.aptana.com/download_all.php
  • Aptana > Help > Software Updates > Find and Install > Search for new features to install > New remote site.. > "http://www.spket.com/update/"
  • Spket설치 ( Spket IDE Tutorial )
    1. Window > Preferences > Spket > JavaScript Profiles > New > "ExtJS"
    2. "ExtJS" 선택하고  "Add Library"에서 "ExtJS"선택
    3.  "ExtJS" 선택하고 "Add File", 에서 "./ext-2.0/source" 디렉토리에서 "ext.jsb"를 선택
    4. ExtJS profile을 디폴트로 선택 
    5. Aptana 플러그인을 새 시작
    6. 새로운 JS파일을 만들면 ExtJS의 Code completion options를 볼수 있다.

AptanaIDE

  • Aptana는 상당히 매력적인 플러그인다. 대부분의 Ajax Library를 제공한다.

 

 


 

다양한 디버깅툴

Firebug (FF에서 강추)

Firebug는 Firefox에 애드온되어 작용하는데 웹페이지의 내용(CSS,HTML,Javscript등)을 실시간으로 볼수있는 상당히 매력적인 도구이다.


Screencasts


Tutorials


다른 브라우저에서 Firebug console을 이용하기

HTTP Trafic Viewer

피들러는 서버와 PC사이의 HTTP 트래픽 로그를 볼수 있는 디버깅 프록시이다. IE전용이나 Firefox의 proxy고급옵션에서 사용할수 있으며 자신이 원하는대로 필터링 하여 사용할수 있다.

MS Script Editor

IE Web Developper

IE WebDeveloper는 인터넷 익스플로러 애드온 프로그램이다. 

Testing Data Generator

SQL,CSV,xml, excel등 테스트 데이타를 생성해준다.

http://www.benjaminkeen.com/software/data_generator/

YSlow

YSlow는  rules for high performance web sites를 기반으로 현재 페이지의 속도를 분석해준다. YSlow 는 Firefox 애드온 프로그램으로 인기가 있다.Firebug web development tool.

  • Performance report card
  • HTTP/HTML summary
  • List of components in the page
  • Tools including JSLint

http://developer.yahoo.com/yslow/

DebugBar - IE 플러그인 (강추)

  • DOM Inspector,
  • HTTP Inspector
  • Javascript Inspector and Javascript Console
  • HTML Validator
  • And many more features

http://www.debugbar.com/?langage=en


'Scripter > EXTJS' 카테고리의 다른 글

Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
ExtJS 시작하기  (8) 2008.02.17
Post by 넥스트리소프트 데꾸벅(techbug)
, |

티스토리툴바