Web – Live coding

하… 하다 보니 또 웹 개발을 하게 되었네요. 언제 쯤 시간에 쫓기지 않을 수 있을까.. 라고 생각했는데 사실 그건 제 하기 나름이더군요. 여튼 주로 emacs를 사용하는 것을 좋아하고, 이번에 또한 TextMate대신 emacs를 선택했습니다.

하다보니 브라우저가 재로딩 되지 않아 매번 F5를 누르다보니 스트레스가 받더라고요. 찾아보니 역시나 혹시나 레이나?

http://www.livejs.com/live.js

아주 간단하게 위 js파일을 include하는것만으로 auto reflash를 걸 수 있습니다.

사용법


Done.

AWS – 이미지 업로드하기 위한 플러그인 설치 및 기타 등등

너무 방대하다 보니 자료가 찾기 힘들더라.
그래서 이와 같이 정리를 한다.

AWS Toolkit for Eclipse
내가 설명한 내용은 간단하게 이클립스 플러그인 설치와 간단한 사용법에 대해서 서술한다.

이클립스가 설치되었다면 이제 플로그인을 설치해보자.
1. Help > Install New Software 선택
2. “Work with”필드에 http://aws.amazon.com/eclipse 입력
3. 조금 기다려보면 AWS Toolkit for Eclipse 항목들이 활성화 되는데 필요한 항목을 선택 후 Next 선택

이렇게 하면 플러그인에 대한 설치가 끝이 난다.

AWS 관련 자료 링크
http://www.slideshare.net/awskorea

Web – 사이트 아이콘 커스터마이징 – 튜토리얼 1

ref

명칭은 site icon, shortcut icon 또는 favicon이라고 불린다. 이는 웹사이트 또는 웹페이지에서 보여지는 작은 이미지를 말하는데, 탭 바에서 주로 확인할 수 있다.

이번 글에서는 Explorer 9에서 어떻게 최상의 아이콘을 표시할 수 있는 지에 대해서 알아본다.

Internet Explorer 9에서의 사이트 아이콘

일반적인 사이트 아이콘은 브라우저의 히스토리 주소창에서 또는 즐겨찾기 리스트에서 볼 수 있다. 각각의 사이트를 구분하기 위해서 사용된다.

.ICO파일은 다른 해상도의 이미지들을 가질 수 있으며, 초기 Internet Explorer에서는 16×16 또는 32×32 pixels 단위의 사이즈를 추천한다.

하지만 데스크톱 해상도의 변화에 따라 조금씩 커져가는 추세로 64×64 pixels 단위 또는 그보다 큰 단위를 사용하기도 한다.

아래는 Internet Explorer 9에서 사용되는 사이즈들이다.

  • Address Bar (16×16)
  • New Tab page (32×32)
  • Taskbar button (32×32)
  • Pinned site browser UI (24×24)

추가적으로 아래의 사이즈가 필요할 수 도 있다.

  • Jump List tasks (16×16)
  • Thumbnail Toolbar buttons (16×16)
  • Overlay icons (16×16)

Internet Explorer 9에서 최적의 아이콘을 제공하기 위해서는 아래와 같은 사이즈를 사용한다.

Recommended 16×16, 32×32, 48×48


Optimal 16×16, 24×24, 32×32, 64×64


사이트 아이콘 만들기

사이트 아이콘을 만들기 위한 가장 시운 방법으로 X-Icon Editor을 사용할 수 있다. X-Icon Editor는 무료로 제공하는 어플리케이션이며 HTML5 Canvas기반으로 작성되어 있다. 이 어플리케이션은 브라우저 내에서 고해상도의 아이콘 제작해준다.

어플리케이션을 통해 다 만들었다면 쉽게 다운로드가 가능하다.

만든 아이콘을 웹사이트에 추가하기 위해서는 link Element를 사용하며 아래와 같이 이용될 수 있다.

<link rel="shortcut icon" href="/favicon.ico" />

이 사이트 아이콘 파일은 웹사이트 디렉토리 어디에나 위치시킬 수 있다.

왜냐하면 사이트 아이콘은 Internet Explorere에서 사용되기 때문이다. 오직 .ICO 파일 포멧만 지원된다. 만약 개발중에 아이콘을 변경하게 되면 브라우저 캐스 또는 파일명을 재작성해야될지도 모른다.

Web – EC2(Amazon) 설정(1)

EC2(Amazon) 설정(1)

회사 입사 한지 3개월이 지났다. 현재 서버, 클라이언트 모든 부분을 담당하고 있으며, EC2를 사용하면서 불편했던 점 또는 팁?을 공유하고자 한다.

  1. 항상 아마존 사이트에 접속하면“지역”을 항상 변경 해주어야 한다. 매번 들어갈 때마다 미국으로 설정되어 있다.
  2. 보안 강화를 위해 EC2 서비스는 따로 포트를 열어주어야 하는 탭이 존재한다. (Security Groups) 만약 기본 외에 다른 포트가 필요하다면 따로 추가하여 열어주어야 한다.
  3. Tomcat 사용 시 80포트가 안열린다?
    EC2(Amazon)에서 Tomcat 80포트가 안되는 이유… 정확한 이유는 모르겠으나 stackoverflow 사이트를 통해 나와 같은 증상을 가진 사람들을 볼 수 있었다. 어떤 이는 이를 해결하기 위해 Redhat 버전을 사용하라고 하였고, (나는 Ubuntu를 사용 중 이였다.)
    그 외 몇 사용자들은 “redirect”를 이용하여 우회하는 방법을 사용하였다.
    내가 적용한 방법은 아래와 같다.
    sudo /sbin/iptables -t nat -I PREROUTING -p tcp –dport 80 -j REDIRECT –to-port 8080

1023 이하 포트를 사용하기 위해서는 “/etc/defaults/tomcat7”파일에 포함된 “#authbind=no”의 값을 yes로 변경해주어야 한다. 이는 1023 이하의 포트를 바인딩 하기 위해 사용하며, 설정 파일 설명에 따르면 1023 이상 포트는 사용하지 않아도 된다.
또한 이는 IP4에만 해당된다. IP6는 사용해서는 안된다.

이상이다.

java – google app engine for xmpp

출처 : http://blog.softwaregeeks.org/archives/530
위 글이 원본이며, 본인 보기 좋게 바꾸었습니다. :)

XMPP

(eXtensible Messaging and Presence Protocol)
사용 사례
– Google Talk
– Facebook

XMPP 참고 자료

* XMPP 샘플

inbound service address
xmpp_message /_ah/xmpp/message/chat/
xmpp_presence /_ah/xmpp/presence/available/
/_ah/xmpp/presence/unavailable/
/_ah/xmpp/presence/probe/
xmpp_subscribe /_ah/xmpp/subscription/subscribe/
/_ah/xmpp/subscription/subscribed/
/_ah/xmpp/subscription/unsubscribe/
/_ah/xmpp/subscription/unsubscribed/

위 테이블은 /war/WEB-INF/web.xml에 들어갈 매핑 URL로 매핑이 되었을 때 해당 서블릿으로 요청을 하게 됩니다.

사용자 등록, 삭제 처리

/war/WEB-INF/web.xml 파일에 서블릿 추가.
[sourcecode language=”xml”]
<servlet>
<servlet-name>SubscriptionServlet</servlet-name>
<servlet-class>com.ezcocoa.xmpp.SubscriptionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SubscriptionServlet</servlet-name>
<url-pattern>/_ah/xmpp/subscription/subscribe/</url-pattern>
</servlet-mapping>
[/sourcecode]

SubscriptionServlet.java
[sourcecode language=”java”]
@SuppressWarnings("serial")
public class SubscriptionServlet extends HttpServlet {

XMPPService xmppService = XMPPServiceFactory.getXMPPService();

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
doPost(request,response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
Subscription subscription = xmppService.parseSubscription(request);
String from = subscription.getFromJid().getId();
String to = subscription.getToJid().getId();

System.out.println("From : " + from);
System.out.println("To : " + to);
}
}
[/sourcecode]

구글앱엔진에서 XMPP를 쉽게 처리 하기 위해 XMPPService라는 인터페이스를 제공하며, XMPPServiceFactory를 사용하여 실제 객체를 얻어 사용합니다.

이렇게 해서 하나의 서블릿이 완성되었고, 테스트를 하기 위해 자체 웹서버를 동작시켜 생성된 URL로 접속하시면 테스트가 가능합니다.
[code]
http://localhost:8888/_ah/admin/xmpp
[/code]

[PHP] redirection page

1. using meta tag
[sourcecode langauge=”PHP”]
<? echo "<meta http-equiv=’refresh’ content=’0; url=http://address’>";
?>
[/sourcecode]

2. using javascript langauge.
[sourcecode langauge=”PHP”]
<?
echo "<script> document.location.href=’address’; </script>";
?>
// or
<?
echo "<script> window.location.replace(‘address’); </script>";
?>
[/sourcecode]

3. using header
[sourcecode langauge=”php”]
<? header("Location: address"); ?>
[/sourcecode]

[Web] OmniFocus syncing with WebDAV

OmniFocus App 데이터 싱크 방법 중 하나 인 WebDAV 이용 방법을 소개합니다.
두 가지 사이트를 참조 할 수 있다.

1. link : English http://www.wrighters.net/blog/articles/2009/04/28/omnifocus-syncing-with-apache-22-webdav/
2. link : Korean http://spix.wordpress.com/2010/03/10/webdav-%EC%84%9C%EB%B2%84-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0/

OS : Ubuntu Linux 10.4
Require : Apache2, WebDEV Module

1. Apache 웹 서버 설치
[code] # sudo apt-get install apache2
[/code]

2. WebDEV 모듈 활성화
[code] # sudo a2enmod dav_fs
# sudo a2enmod dav
# sudo a2enmod dav_lock
[/code]

3. 디렉토리 생성, 소유권 부여
[code]# mkdir /var/www/webdav/data
# chown www-data /var/www/webdav/data
[/code]

4. Virtual Host 생성
[code] # sudo vi /etc/apache2/sites-available/default
[/code]
아래와 같이 수정
[code] NameVirtualHost *
<VirtualHost *>
ServerAdmin ezcocoa@localhost
DocumentRoot /var/www/web1/roll/
Alias /webdav "/var/www/web1/roll/"
<Directory /var/www/web1/roll/>
Options Indexes MultiViews
AllowOverride None
Order allow,deny
allow from all
DAV On
Allow from all
AuthType Basic
AuthName "Webdav"
AuthUserFile /var/www/web1/passwd.dav
Require valid-user
</Directory>
</VirtualHost>
[/code]

5. Virtual Host를 WebDAV용으로 지정하기 위해 WebDAV용 패스워드 파일 및 사용자(ezcocoa) 생성
[code]# htpasswd -c /var/www/webdav/passwd.dav ezcocoa
[/code]

6. 시스템이 참조 가능하도록 권한 부여
[code]# chown root:www-data /var/www.webdav/passwd.dav
# chmod 640 /var/www/webdav/passwd.dav
# chmod -R 777 /var/www/webdav/data
# chown www-data:www-data /var/www/webdav/data
[/code]

7. 아파치 재기동 및 점검
[code]# sudo /etc/init.d/apache2 restart
# cadaver http://<address>/webdav
[/code]
사용자 아이디 및 비밀번호 입력

5. 변경 사항 반영하기.
[code]# sudo /etc/init.d/apache2 reload
[/code]
* 오류 발생 apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.0.1 for ServerName – /etc/apache2/apache2.conf 파일에 ServerName localhost 추가로 해결
* 오류 발생 NameVirtualHost *:80 has no VirtualHosts – /etc/apache2/ports.conf 파일에서 NameVirtualHost *80 항목을 코멘트처리하여 해결

[HTML5] 어떻게 공부하나요?

출처 : guruguru
– HTML 스펙 너무 어려워요! 게다가 영어!
> 한글 HTML5 스펙 http://j.mp/html5ko

– 그래도 내용이 너무 많은 데요?
> 웹 개발자를 위한 최소스펙 http://j.mp/html5devel

– 튜토리얼 & 프리젠테이션은 없나요?
> Google의 선물 html://www.html5rocks.com/

– 그 외에 꼭 추천해주실 사이트는?
> 실전 HTML5 가이드 (한글 PDF) http://j.mp/html5guide_ko
> Dive Into HTML5 http://diveintohtml5.org