블로그 이미지

카테고리

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

최근에 달린 댓글


멀티도메인(여기서는 호스트도메인)이 가능하게 아파치와 톰캣연동을 하려한다.
예를 들어 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가 붙게 되는것이다




참고 :




Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2011.01.06 14:41 mybrainz  댓글주소  수정/삭제  댓글쓰기

    정리된 좋은 내용 잘 봤습니다.

    내용이 너무 좋아서 그러는데 스크랩을 해 가도 좋을지요.. ^___^

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 */
 


참조 : 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 }








 

Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.01.04 15:09 신고 파이델  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다^^

  2. 2010.01.09 21:31 신고 츠이사키  댓글주소  수정/삭제  댓글쓰기

    좋은정보 정말 감사합니다..
    IE7 이하까지는 알았지만, IE8을 몰라서(우습게도 IE8에서만 문제가 발생하더군요..) 고민했었습니다..
    혹시나해서 찾아봤더니 다행이 IE8용 핵도 있네요.

  3. 2010.05.27 16:00 모카  댓글주소  수정/삭제  댓글쓰기

    ie8만 적용되는걸 찾다가 보게 되어 적용해봤는데요. 왜 전 ie7도 같이 적용되는 걸까요????
    다른분들은 정말 ie8만 적용되시나요???

  4. 2010.06.01 11:05 모카  댓글주소  수정/삭제  댓글쓰기

    제 브라우저가 ie8이긴하나 ie테스터로 ie6, 7, 8을 .test { color /*\**/:blue\9;} 의 스타일을 테스트한 결과 6을 제외한 7,8에서 글씨가 파란색으로 나왔습니다. 제가 적용을 잘못한건지, 아니면 테스터와 실제 ie7이 다른건가요?

  5. 2010.08.03 15:10 사막여우  댓글주소  수정/삭제  댓글쓰기

    \ 와 \이 다른건가요? 역슬레시를 특수문자로 쓰는건가요? 아님 \를 그냥 써도 되는건가요?

  6. 2012.02.28 14:38 데미나인  댓글주소  수정/삭제  댓글쓰기

    이런.. ㅜㅜ color /*\**/: blue\9 이거 ie9에서도 적용되는군요.. ㅜ


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' 카테고리의 다른 글

GET Method 길이 제한 (최대 URL 길이 )  (3) 2008.11.20
데꾸벅체 다운로드  (0) 2008.07.09
MS office2007 Excel 파일 각각 따로 열기  (8) 2008.06.27
윈도우 서비스 등록하기  (1) 2008.02.21
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2008.11.29 02:02 꼼즈  댓글주소  수정/삭제  댓글쓰기

    당췌 이넘의 티스토리는 어케 쓰는건지...
    잘사냐?

  2. 2013.06.14 10:04 신고 집시F  댓글주소  수정/삭제  댓글쓰기

    HTTP 표준에는 없지만, 실제로 웹서버를 구현하는데는 제한이 있어야 합니다. (서버 성능과 보안과도 연관있지요.) 실제로 다수의 웹서버들이 기본 크기로 4K ~ 8K 사이로 제한을 두고 있습니다.
    http://stackoverflow.com/questions/686217/maximum-on-http-header-values

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 Structure0020.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);





Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2011.03.22 14:41 extjs 질문자  댓글주소  수정/삭제  댓글쓰기

    포스팅 하신 글 잘 보고 있습니다. 질문이 있는데 혹시 보시게 되면 답변 부탁드려도 될까요?ㅠ
    tree 메뉴를 만들고 west.js 파일로 만들었고요 이 메뉴를 클릭했을 때 center region이 있는 layout.js에 변화(html 링크와 같은)를 주려 합니다. 이렇게 파일이 나뉘어 있어도 상호작용이 가능한가요?

    • 2011.03.23 17:43 신고 데꾸벅  댓글주소  수정/삭제

      넵.. 가능합니다. load 메쏘드가 있습니다. load메쏘드와 update메쏘드를 적절히 이용하시면 될것 같습니다.

    • 2011.03.24 07:43 extjs 질문자  댓글주소  수정/삭제

      데꾸벅님 정말 감사합니다 포럼에 글을 올려도 영어가 엉망이라 그런지 답글이 잘 안달리더라고요;
      앞으로도 올려주신 글 보고 많이 배워가겠습니다

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 시작하기  (8) 2008.02.17
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2008.03.05 12:03 박승현  댓글주소  수정/삭제  댓글쓰기

    잘보고 갑니다. ^^
    덕분에 문제 몇개가 풀렸어요 ^^;;

  2. 2008.05.23 10:00 해린Love  댓글주소  수정/삭제  댓글쓰기

    이 글의 대부분이 유용한 내용이었습니다. 감사합니다. ^^

  3. 2009.04.01 16:59 김제준  댓글주소  수정/삭제  댓글쓰기

    이번 여름엔 extJs 공부 해야겠군요.ㅋ
    리아의 세계는 오묘 합니다. ㅎ

  4. 2009.07.29 12:08 페달  댓글주소  수정/삭제  댓글쓰기

    하핫 감사히 잘 보겠습니다.

  5. 2010.04.06 23:00 꼼즈  댓글주소  수정/삭제  댓글쓰기

    음.. 느즈막히 피곤한데 다 읽었음... (토닥토닥..)

넥스트리 포스팅했던글을 다시 정리하여 올리다.
사내 제품개발시 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
ExtJS 개발하기 위해 선행되는 지식들  (7) 2008.02.15
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.04.06 22:46 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아나~ 뭐 이리 볼게 많아.. 짜잉나게.. ㅠ.ㅠ
    하튼 거맙다.. 떵~ 니 게시물 다 읽어줌마~~~~~ 냐하핫~~!

  2. 2010.04.06 22:47 꼼즈  댓글주소  수정/삭제  댓글쓰기

    아... 여기도 오오구나... ㅠ.ㅠ
    오오~~~ 마이 갓~! (지굽다.... 이 생활이...)

  3. 2010.04.06 22:50 꼼즈  댓글주소  수정/삭제  댓글쓰기

    모든 링크를.. 새창으로 바꿔놓으면.. 사용자들이 편리하지 않을까효??? ㅡㅡ+

  4. 2011.07.20 09:09 Alex  댓글주소  수정/삭제  댓글쓰기

    저는 현재 미국에 인턴쉽을 와있는 학생입니다. 이번에 회사와 면접을 봤는데 EXT JS와 PHP를 이용해서 SCHEDULER를 만들어 오

    랍니다. ( 저는 참고로 로우 레벨 랭귀지 밖에 다루지 못합니다. HTML 자바 스크립트 PHP에 관한 아주 약간의 지식 밖에 없습니다.)

    EXT JS라는 프레임워크를 처음 들어봤는데 (사실 프레임워크가 무엇인지도 어제 알았습니다.) 이제 대강 VIEW 쪽은 JAVA SCRIPT와

    EXT를 이용해서 만들고 서버사이드는 PHP를 이용하고 my sql 을 연결하면 되겠는데, 이제 시작을 하고자 SCHEDONA 홈페이지에서 튜토리얼을 따라 가려고 하였습니다. 그런데 FEDORA10 에서 해야 튜토리얼에 써있더라고요 ㅠㅠ 제가 리눅스 지식이 거의 없습니다. 제가 스케쥴러를 EXT JS를이용해서 만들려면 무엇 부터 공부해야 할까요? 일단 컴퓨터 운영체제를 리눅스로 바꿔야 하나요 될수 있으면 windows에서 하고 싶습니다 현재 시간이 별로 없습니다.. 일단 개발 환경 구축하는것만이라고 가르쳐주시면 감사하겠습니다.(현재 이클립스는 설치했고 aptana flug in도 설치 한것같습니다.. 혹시 tomcat을 이용할수 있나요?) 책도 없고 미국 땅에 미치겠습니다. 다 가르쳐 달라고 하는것이 아니라 어떻게 공부해야 되는지만좀 알고싶습니다. 혹시 AJAX부터 선행학습 해야하나요? 길잃은 불쌍한 어린양에게 한마디 조언이라도 부탁드립니다. 감사합니다.

    • 2011.07.20 14:48 신고 데꾸벅  댓글주소  수정/삭제

      반갑습니다.

      미국 인턴쉽이라 영어는 기본이시겠군요.. 부럽습니다. ^^

      ㅎㅎ extjs 를 하시려면 당연히 자바스크립트를 아셔야 겠죠.
      일단은 간단한 자바스크립트 공부를 시작하시기를 권해드립니다.

      1. 웹페이지에 대한 이해
      HTML과 CSS는 기본입니다. HTML과 CSS는 실습위주로 되어 있는 얇은 책을 선택해서 기본지식만 가지고 계시면 될것 같네요.
      HTML은 태그사용법만 아시면 될듯 하고 CSS는 selector 부분이 있는데 이 부분을 이해하시는게 중요합니다.
      Javascript로 CSS를 핸들링하여 HTML (DOM) 을 바꾸는 것이 extjs라는 자바스크립트 UI 프레임웍입니다.

      2. extjs 프레임웍 익히기
      extjs는 시중에 나온 자바스크립트 프레임웍중에 Learning curve가 굉장히 가파릅니다(steep). 배우는데 시간이 많이 걸린다는 얘기죠..
      그래서 빨리 적용하기 위해서는 extjs 웹사이트(www.sencha.com)의 예제사이트를 방문해서 구현하고자하는 스케줄러와 유사한 기능의 예제를 붙여서 전체적인 레이아웃과 컴포넌트들과의 상호작용을 먼저 보시길 권해드립니다.

      3. 서버 환경셋팅
      SCHEDONA가 뭣하는 사이트인지 몰라서.. 긁적!! ^^
      거기 튜토리얼에 Fedora에서 작업하라고 한것은 PHP와 apache 셋팅을 위한것 같은데.. 굿이 리눅스에서 하지 않으셔도 됩니다.

      윈도우 환경에서 APM(apache + php + mysql)을 셋팅하실수 있습니다. extjs 환경설정을 굳이 리눅스배워가며 하실 필요는 없다는 얘기죠... 대한민국의 유명한 apm툴인 APMSETUP(www.apmsetup.com) 을 설치하시기만 하면 끝입니다.
      말씀하신 톰캣은 Java언어를 위한 웹서버(?)이므로 PHP를 이용한다면 필요가 없습니다.

      4. extjs 개발하기
      본 포스트 글에서 언급한 aptana나 spket과 같은 툴을 사용하시는것도 좋지만 잘 셋팅이 안되면 디버깅하기 힘들다는 단점은 있지만 그냥 일반적인 메모장과 같은 에디터를 사용하시는것도 좋습니다. (하드코딩의 묘미도 있으니까요.. ^^ )

      어떤 스케줄러를 만드시려는지 모르겠지만 extjs 예제사이트(http://www.sencha.com/products/extjs/examples/) 에 보면 feed viewer 예제나 simple task(http://www.sencha.com/blog/tasks2)예제를 한번 맘잡고 뜯어 보시는게 빨리 이해하시기 쉬울겁니다.


      5.마치며.
      extjs로 만든 스케줄러는 이미 만들어 진것이 있긴 한데.. ㅎㅎ
      답을 드리면 그런가요?
      http://www.bryntum.com/
      http://www.bryntum.com/examples/

      참조하시는것도.. ㅎㅎ
      연락처가 없어서 보시려나? 후훗!

  5. 2011.08.03 02:53 Alex  댓글주소  수정/삭제  댓글쓰기

    답변 감사 드립니다. 현재 스케쥴러 하나를 뜯어서 보고있습니다. 그런데 문제가 있습니다. ㅠㅠ

    간단히 질문은 php로 서버사이드를 개발하고 extjs로 웹 표현과 처리부를 구현하려고합니다. ( 하고 있습니다. ) 그런데 이제 개발을

    본격적으로 하려면 Eclipse면 Eclipse 한 개발 툴에서 컴파일이 되고 서로 데이터를 주고 받아야 하는데,, 이 환경을 구성을 3일째

    삽질 하고 있습니다. 처음에는 기존에 eclipse3.4 버전에 PDT(PhpDevelopmentToolkit)를 추가 하고 Apache 톰캣 mysql을 연동해

    서 개발하려고 하였으나 (수많은 방법을 시도해봄 ㅜㅜ기억도 안날정도로)실패 하였습니다. 그래서 현재는 Eclipse3.4 버전에서는 Extjs를 이용한 웹 표현과 처리부 일부(web page)만 돌려보고있습니다.

    그러나 web application 을 완성 하려면 php를 이용해서 DB연동도 해야합니다. ...

    그리고 현재는 PHPeclipse (eclipse + PDT) 를 이용한 버전 (3.6)에다가 xampp를 설치 해서 php파일을 컴파일 하는데는 성공했습

    니다. 그러나 여기서는 EXTjs 프로젝트가 컴파일이 되지 않습니다. Xampp 내부에 있는 Tomcat에 연동해서 실행했지만 찾을수 없다

    고합니다. 어떻게 이문제를 해결해야할까요 ㅠㅠ 3일동안 수많은 방법을 시도해봤습니다. 금요일이 마감기한입니다..

    분명 Xampp가 mysql php tomcat apache가 연동 되어 있는 거라고 알고 있는데요 어떻게 eclipse에서 이것들을 이용하는지 모르겠

    습니다. 개발 환경을 만들어야 프로그램을 짜는데 지금은 그냥 눈으로 코드만 �f어 보고 있습니다. 도움을 구합니다. 감사합니다. extjs와 php 를 함께 실행할수 있는 환경을 가르쳐 주세요 ㅠㅠ 부탁입니다.

    개발환경 windows XP
    Java SDK jdk1.6.0_26
    apache-tomcat-5.5.15 그리고 7(xampp 내부에) 총두개가 설치되어있습니다.
    apache server
    mysql
    eclipse helios 3.6 (php 버전)
    eclipse ganymede 3.4 (순정)

    • 2011.08.03 17:30 신고 데꾸벅  댓글주소  수정/삭제

      안녕하세요?
      PHP로 개발하는데 tomcat은 필요없습니다. 그리고 굳이 XAMPP를 쓰실 이유도 없지요. xampp 는 단순히 apache + mysql + php +perl 을 이용한 크로스(x) 플랫폼일 뿐입니다. 서버환경은 단순히 (APM: apache + php + mysql) 만 설치하시면 됩니다.
      PHP는 컴파일러가 있긴합니다만 (엄밀히 말하면 인코더) 자바나 C언어처럼 컴파일과정이 필요없는 Interpreter언어입니다.

      PDT 를 사용하시려면 아래 URL을 참조하세요.
      http://www.ibm.com/developerworks/kr/library/tutorial/os-eclipse-europa2/section4.html


      굳이 eclipse PDT를 사용하지 않고도 개발하실 수 있습니다.
      괜히 환경셋팅만하다가 시간 다 보내실듯 하네요..
      extjs는 javascript library로 html과 같이 서버사이드언어가 아니라 클라이언트 언어라고 보시면 됩니다.
      그냥 메모장만을 이용해서도 쉽게 작업하실 수 있습니다.


      쉽게 생각하세요.
      서버쪽은 APM 환경으로 구성해서 PHP로 스케줄러의 데이터만 가져오고
      클라이언트쪽은 extjs 로 구성해서 extjs에서 서버쪽의 데이타를 불러오는식 (httpProxy, store)으로 처리하기만 하면 됩니다.