언플러그드 개발노트

[JAVA] 정규표현식으로 HTML태그 제거하기

☞호야☜ — Fri, 10 Feb 2012 16:24:50 +0900

프로그래밍 작업을 하다보면 화면에 출력해야할 텍스트에 HTML태그가 포함되어 있는 경우가 종종 있습니다.
브라우저를 사용한다면 해당 태그까지 처리가 가능하겠지만 일반 텍스트 출력시에는 태그의 소스가 함께 출력되어서 미관상 좋지 않기 때문에 필요한 출력값만을 얻기 위해서 HTML 태그를 제거하고 순수 값만을 추출해야 하는 경우가 있습니다.

이번에는 자바의 정규표현식을 사용하여 HTML 태그를 삭제하는 함수를 소개하겠습니다.

우선 다음의 패키지를 import 합니다.

import java.util.regex.Matcher;
import java.util.regex.Pattern;

그런 다음 다음의 메소드를 구현합니다. 정규표현식을 사용하는 코드 입니다.

private String getText(String content) {
	Pattern SCRIPTS = Pattern.compile("<(no)?script[^>]*>.*?</(no)?script>",Pattern.DOTALL);
	Pattern STYLE = Pattern.compile("<style[^>]*>.*</style>",Pattern.DOTALL);
	Pattern TAGS = Pattern.compile("<(\"[^\"]*\"|\'[^\']*\'|[^\'\">])*>");
	Pattern nTAGS = Pattern.compile("<\\w+\\s+[^<]*\\s*>");
	Pattern ENTITY_REFS = Pattern.compile("&[^;]+;");
	Pattern WHITESPACE = Pattern.compile("\\s\\s+");
		
	Matcher m;
		
	m = SCRIPTS.matcher(content);
	content = m.replaceAll("");
	m = STYLE.matcher(content);
	content = m.replaceAll("");
	m = TAGS.matcher(content);
	content = m.replaceAll("");
	m = ENTITY_REFS.matcher(content);
	content = m.replaceAll("");
	m = WHITESPACE.matcher(content);
	content = m.replaceAll(" "); 		

	return content;
}

사용예시는 다음과 같습니다.

String no_tag = getText("<font color='red'>HTML</font>");

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android TIP] 레이아웃 XML파일이 레이아웃 디자인 화면으로 열리지 않는 경우 해결 방법

☞호야☜ — Fri, 27 Jan 2012 23:09:44 +0900

안드로이드 작업을 하다보면 레이아웃 XML파일이 아래 화면과 같이 design탭과 소스탭으로 표시되면서 레이아웃 작성화면이 보이지 않는 경우가 있습니다.

이클립스에는 원래 XML편집기가 여러개가 있는데, 간혹다가 이클립스가 Android Layout XML Editor로 열어야할 파일을 이클립스의 기본 XML 편집기로 열게 되는 경우입니다.

이 문제를 해결하려면 편집을 원하는 XML파일을 마우스 우클릭하여 Open With > Android Layout Editor를 선택하시면 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android TIP] 작업중인 프로젝트를 내 핸드폰에서 테스트하기

☞호야☜ — Thu, 26 Jan 2012 20:15:11 +0900

안드로이드 에뮬레이터는 정말이지 사람 속터지게 느립니다. 한번 실행버튼을 누르면 완전히 에뮬레이터가 부팅될 때 까지 3~5분 정도는 걸리는 듯 합니다.

그렇기 때문에 강의를 진행하면서도 안드로이드 핸드폰이 있는 분들은 가급적 핸드폰을 통해서 테스트를 하시도록 권해 드리고 있습니다.

이번에는 이클립스를 통한 실행을 에뮬레이터가 아닌 실제 단말기를 통해서 진행하는 과정에 대해서 소개해 보겠습니다.

안드로이드 단말 USB드라이버 설치

우선은 (Windows 운영체제에 한해서) 각 제조사에서 배포하는 안드로이드 USB 드라이버를 설치해야 합니다. 제조사별 드라이버 파일의 다운로드는 각 제조사 사이트를 참조하시기 바랍니다.

안드로이드 단말의 환경설정

USB연결을 통한 단말 디버깅 기능을 사용하기 위해서는 핸드폰에서 몇가지 설정을 해 주어야 합니다.
우선 PC와의 USB연결을 제거합니다. 핸드폰에서 "환경설정" 메뉴로 들어갑니다. 환경설정 메뉴 하위의 "응용프로그램"메뉴를 선택합니다.

응용 프로그램 페이지에 들어가면 우선 "알 수 없는 소스"항목에 대해서 체크가 되어 있어야 합니다.
안드로이드 폰은 구글 마켓을 통해서 다운로드 받는 프로그램을 제외한 모든 프로그램들을 "알 수 없는 소스"라고 인식합니다. (T-Store나 alleh Store등 역시 알 수 없는 소스 입니다.)
이클립스를 통해서 실행하는 프로그램이 "알 수 없는 소스"인 것은 두말할 필요가 없겠지요.

그 다음 맨 아래 있는 "개발"항목을 선택합니다.

페이지가 이동되면 "개발"페이지에 있는 체크박스들을 모두 체크합니다.
제조사에 따라서 "USB연결시 단말 화면이 꺼지지 않음"이라는 세가지 항목이 나타나는 경우가 있습니다.
아래 보이는 화면인 삼성 갤럭시S2의 화면입니다.

설정이 완료되면 화면을 빠져 나온 후에 USB를 통해서 PC와 연결합니다.
PC와 연결시 주의하실 점은 핸드폰에서 "USB저장소로 사용"이 활성화 되어 있으면 안된다는 것입니다.

이클립스에서의 실행

핸드폰이 연결된 후에 이클립스에서 RUN버튼을 누르면 다음과 같은 화면이 나타납니다.
에뮬레이터만 생성되어 있을 경우에는 구동중인 에뮬레이터가 보였지만, 핸드폰이 연결되면 연결된 핸드폰의 Serical Number가 함께 표시됩니다. 저 항목을 선택하고 "OK"버튼을 누르면 안드로이드 단말을 통해서 결과를 확인할 수 있습니다.

앞에서 진행했던 Hello World 예제를 단말기에서 실행한 모습입니다.

단말에서 실행한 후에 프로그램 목록을 살펴보면 조금전에 테스트한 항목이 설치되어 있는 것을 확인할 수 있습니다.

Run버튼 클릭시 Device Chooser 화면이 나타나지 않는 경우

간혹가다가 (사실은 꽤 자주) Run버튼을 클릭하였더니 아래와 같은 화면이 나타나지 않고 (단말기가 연결되어 있음에도 불구하고) 즉시 에뮬레이터가 구동되는 경우가 있습니다.

이 경우에는 이클립스의 설정이 유실되어서 그렇습니다.
이클립스 상에서 "Run > Run Configurations"메뉴를 선택합니다.
좌측의 메뉴 트리에서 "Android > 프로젝트이름"항목을 선택한 후에 화면 중앙에서 "Target"탭으로 이동합니다.

Target탭으로 이동하면 라디오 버튼이 두개 보입니다.
"Manual"이라는 버튼과 "Automatic"이라는 버튼입니다.
Device Chooser 창이 나타나지 않는 경우는 이 두개의 라디오버튼이 "Manual"로 지정되지 않은 경우입니다.

"Manual"로 지정되면 매 실행시마다 어떤 장치(혹은 에뮬레이터)를 통해서 실행할 것인지를 물어보기 위해서 Device Chooser 화면이 나타납니다.

"Automatic"으로 지정되면 실행시마다 지정된 에뮬레이터로만 구동됩니다. (실제 단말은 Automatic)지정이 안됩니다. "Automatic"으로 지정된 후에는 그 하단에 있는 에뮬레이터 목록중에서 한가지를 지정해 주어야 합니다.

만약 "Automatic"으로 지정되고 실행할 에뮬레이터가 지정되지 않으면 이클립스에서 "Run"버튼을 눌렀을 때 아무런 응답이 없는 경우가 있으니 주의하시기 바랍니다.

반대로 이야기한다면 "Run"버튼을 눌렀을 때 이클립스가 아무런 응답이 없다면 이곳을 확인해 보면 된다는 이야기 입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android TIP] Hello World

☞호야☜ — Thu, 26 Jan 2012 19:12:11 +0900

이번 포스팅에서는 안드로이드 개발환경 셋팅 후에 첫번째 예제인 Hello World를 출력해 보는 과정에 대해서 소개해 보겠습니다. 이 포스팅의 목적은 안드로이드를 위한 새로운 프로젝트 생성 방법에 대한 이해에 있습니다.

선행 작업

우선 이 포스팅에서 소개되는 내용을 확인하시기 위해서는 안드로이드의 개발환경이 설정되어 있어야 합니다. 또한 소스를 빌드해서 결과를 확인하기 위한 에뮬레이터가 필요합니다.

안드로이드의 개발환경을 구축하는 방법에 대해서는 다음의 포스팅을 참조하시기 바랍니다.

[Android TIP] 안드로이드 개발환경 설치하기 (for Windows)
[Android TIP] 안드로이드 개발환경 설치하기 (for Mac OS)

작업 결과물을 확인하기 위해서 에뮬레이터를 설정하는 방법은 다음의 포스팅을 참조하시기 바랍니다.

[Android TIP] 에뮬레이터 생성하기

안드로이드 프로젝트의 생성

이클립스에서 가장 왼쪽에 있는 툴바 아이콘이 "New"아이콘 입니다. 이 아이콘을 클릭합니다.

"New"아이콘을 클릭하면 "New"대화상자가 나타납니다. 화면의 중앙부에 있는 선택항목 중에서 "Android > Android Project"항목을 선택하고 "Next"를 누릅니다.

새로운 안드로이드 프로젝트의 이름을 지정하는 화면이 나타납니다.
"Project Name"은 이클립스상에서 이 작업을 구분하기 위한 단위 이름을 입력하는 공간입니다. 여기서는 "HelloWorld"라고 입력하겠습니다. 프로젝트 이름이 지정되면 "Next"버튼을 누릅니다.

안드로이드 프로젝트를 진행할 대상 버전을 지정합니다. 최상위 버전인 "Android 4.0.3"항목을 체크합니다.
체크를 한 다음 "Next"버튼을 누릅니다.

프로젝트 이름을 지정하고 나면 프로젝트의 정보를 입력하는 단계로 넘어가게 됩니다.
각각의 항목에 적절한 값을 입력한 후에 "Finish"버튼을 누르면 됩니다.
각 항목에 입력하는 값의 의미는 다음과 같습니다.

Application Name : 이 프로그램의 이름을 지정합니다. 실제로 이 어플리케이션이 단말기에 설치되었을 경우에 단말기의 프로그램 목록에 표시되는 이름입니다. 한글로 지정해도 무관합니다.

Package Name : 자바 패키지 이름입니다. 안드로이드는 OS에서 하나의 어플리케이션을 인식하는 단위가 패키지 단위가 됩니다. 그렇기 때문에 동일 패키지 이름이 설치하려는 단말기에 이미 존재한다면 설치가 진행되지 않습니다. (심지어 구글 마켓에 어플을 올릴 경우에도 다른 어플과 패키지 이름이 중복되면 등록이 거부됩니다.) 그러므로 패키지 이름은 가급적 고유한 이름을 지정해야 합니다.
패키지 이름은 보유하고 있는 도메인의 역순.프로젝트이름(소문자)로 짓는것이 일반적입니다.

Create Activity : 프로그램의 시작점이 되는 Main Class의 생성여부에 대한 결정과 메인 클래스의 이름을 짓는 부분입니다. 이 항목을 체크하지 않고 지나갈 경우 다시 생성하기 위해서는 꽤 번거로운 작업들을 진행해야 하므로 반드시 프로젝트 생성시에 지정해 주셔야 합니다.

Minimun SDK : 이 프로그램을 구동할 수 있는 최소 안드로이드 버전값을 지정합니다. 아래 화면에서는 Android 2.1로 지정되어 있습니다. 이 의미는 이 어플이 (앞에서 지정한 대로) Android 4.0.3 버전을 대상으로 개발이 되지만 Android 2.1까지 지원하겠다라는 의미가 됩니다.

설정이 완료되면 "Finish"버튼을 눌러서 프로젝트 생성을 완료합니다.

프로젝트 설정이 완료되면 다음과 같이 이클립스상에 프로젝트가 생성됩니다.

이클립스에서 src > 패키지이름 > 메인클래스.java 파일을 열어보면 기본적으로 필요한 소스들이 작성이 되어 있는 것을 확인할 수 있습니다.

결과 확인

소스 수정 없이 바로 한번 실행해서 기본 모양을 확인해 보겠습니다.
안드로이드 에뮬레이터를 구동한 상태에서 이클립스에 있는 "Run"버튼을 누르면 프로그램이 에뮬레이터를 통해서 구동됩니다.

간혹가다가 에뮬레이터가 구동중인데도 새로 에뮬레이터가 뜨는 경우가 있습니다. 이럴 때는 그냥 그러려니 하면서 기존에 실행중이던 에뮬레이터를 종료하시면 됩니다.

"Android Device Chooser"라는 창이 나타나면서 구동중인 에뮬레이터의 목록이 나타납니다.
화면이 상하 두칸으로 나뉘어 있는데, 위쪽은 현재 구동중인 에뮬레이터의 목록이 나타납니다.
아래쪽은 구동되지 않고 있는 에뮬레이터가 타나납니다.
만약 현재 구동중인 에뮬레이터가 없다면 아래 화면에서 아래쪽 항목을 선택하고 "OK"버튼을 누르면 됩니다.

구동이 완료되면 에뮬레이터에 아래와 같이 실행 결과가 타나납니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android TIP] 에뮬레이터 생성하기

☞호야☜ — Thu, 26 Jan 2012 10:19:33 +0900

다른 플렛폼들의 경우에는 개발한 소스를 테스트하기 위한 에뮬레이터가 완제품 형태로 제공되지만 안드로이드의 경우에는 개발자가 직접 에뮬레이터를 생성해 주어야 합니다.

이번 포스팅에서는 안드로이드 에뮬레이터를 생성해 보도록 하겠습니다.
이 과정은 Window와 Mac에서 공통으로 적용되는 내용입니다.

안드로이드 에뮬레이터 (AVD)의 추가

우선 이클립스에서 "Android Virtual Device Manager"를 실행시켜야 합니다. 이클립스의 AVD Manager 아이콘을 클릭합니다. (아래의 화면을 참고하세요.)

"Android Virtual Device Manager"라는 창이 나타나면 새로운 에뮬레이터를 생성하기 위해서 좌측에 있는 "New"버튼을 클릭합니다.

아래 화면과 같이 "Create new Android Virtual Device"라는 창이 나타납니다.
아래 화면을 참고해서 값을 입력(혹은 선택)하세요.

Name : 에뮬레이터에 부여하는 이름입니다. 한글만 아니라면 편하게 작성할 수 있습니다.
Target : 에뮬레이터에 탑제될 안드로이드 운영체제의 버전입니다. 여기서는 최신 버전을 적용했습니다.
SD Card > Size : 에뮬레이터에 탑제될 SD카드의 용량을 지정합니다.

나머지 항목을 기본값대로 지정하면 해상도가 WVGA800 (480x800) 사이즈인 에뮬레이터가 생성됩니다.

에뮬레이터가 생성되면 생성된 항목을 선택하고 "Start"버튼을 누르세요.

실행 확인창이 나타납니다. 그냥 "Launch"버튼을 누르시면 에뮬레이터가 구동됩니다.

에뮬레이터가 구동되면서 안드로이드 운영체제가 부팅됩니다. 이 화면에서 인내력을 요구합니다. 부팅... 상당히 느립니다.

부팅이 완료되고 나면 안드로이드 운영체제의 모습을 볼 수 있습니다.

에뮬레이터가 PC모니터를 벗어나는 경우

(주로 해상도가 작은 노트북에서 실행할 경우) 에뮬레이터가 컴퓨터의 모니터보다 커서 화면을 빠져 나가는 경우가 간혹 있습니다.

이 경우에는 에뮬레이터의 "Launch Options"에서 Sacle 값을 지정해서 해결할 수 있습니다.
아래 화면은 에뮬레이터를 시작할 때 나왔었던 확인창입니다. "Scale display to real size"체크박스를 체크하고 "Screen Size"란에 7이라고 입력한 후에 실행합니다. (1~10 / 값이 클수록 확대됨)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android TIP] 안드로이드 개발환경 설치하기 (for Windows)

☞호야☜ — Wed, 25 Jan 2012 12:51:13 +0900

이번 포스팅은 윈도우 운영체제에서 안드로이드를 개발하기 위한 개발환경을 설정하는 과정을 소개하고자 합니다. 이 블로그에 안드로이드 관련 글들이 은근히 올라와 있는 시점에서 뒤늦게 이렇게 안드로이드 설정관련 포스티을 올리는 까닭은 제가 진행하고 있는 강의에서의 보조교제로서 이 포스팅을 활용하기 위해서 입니다.

안드로이드의 개발환경 구축단계는 다음의 과정을 거쳐서 진행됩니다.

JDK의 설치와 환경변수 설정
Eclipse Classic 버전의 다운로드 및 설치
Android SDK의 다운로드 및 설치
Android Development Tool (ADT) 플러그인의 설치

여기서는 설치가 완료된 전체 패키지를 압축하여서 나중에 다른 환경에서도 압축만 풀면 즉시 안드로이드 개발을 진행할 수 있도록 만들겠습니다.

JDK의 설치와 환경변수 설정

안드로이드 역시 자바기반에서 진행되는 개발이니만큼 JDK의 설치및 설정이 필수 입니다. JDK의 다운로드 및 설치는 다음의 포스팅을 참조하시기 바랍니다.

[JAVA] 개발환경 준비하기 - JDK의 설치

이클립스의 다운로드 및 설치

안드로이드 개발 툴킷은 이클립스의 플러그인 형태로 제공됩니다. 그렇기 때문에 안드로이드 개발을 위해서는 Eclipse를 다운로드 받아서 설치해야 합니다. 이클립스는 http://www.eclipse.org에서 다운로드 받을 수 있습니다.

사이트에 접속한 후 상단 메뉴에서 "Download"를 클릭하여 다운로드 페이지로 이동합니다. 다운로드 페이지에 나열되는 패키지들 중에서 "Eclipse Classic"버전을 설치되어 있는 운영체제의 버전에 맞게 선택합니다.

운영체제에 맞는 버전을 선택하면 다운로드 링크가 제공되는 페이지로 이동합니다. 여기서 아래 화면을 참조하여 이클립스를 다운로드 받습니다.

이클립스는 설치 패키지가 아닌 압축파일의 형태로 제공됩니다. C드라이브에 eclipse+andsdk-r16-win32-x86-64bit 라는 폴더를 만들고 그 안에 압축을 풀어둡니다. 이 때 폴더이름은 편하게 지으시면 됩니다. 다만 폴더 이름을 명시할 때 한글이나 공백이 들어가지 않도록 주의하시기 바랍니다.

이클립스의 압축이 모두 풀리면 그 안에 workspace라는 폴더를 생성합니다. 이 폴더에 소스파일들이 저장되도록 지정할 것입니다.

이제 이클립스를 실행하면 아래 화면과 같이 workspace를 물어보는 화면이 나타납니다. 이 화면에서 workspace의 경로를 앞에서 생성한 디렉토리로 지정하여 줍니다.
만약 이 단계를 무시하고 지나쳤다면 이클립스의 "File > Switch Workspace"메뉴를 통해서 다시 지정해 줄 수 있습니다.

Android SDK의 다운로드 및 설치

이클립스의 설치가 잘 마무리되면 이번에는 Android SDK를 다운로드 받아서 설치할 차례입니다.
Android SDK는 초기에는 단순히 압축파일의 형태로만 제공이 되었습니다. 후에 이 압축파일이 설치 패키지 형태로 변경이 되었는데 그렇다고 해서 변한것은 없습니다. 즉 설치 완료 후에 그 파일을 다시 압축해서 다른곳에 압축을 풀어도 정상적으로 사용이 가능하다는 것이죠.

이 점을 이용해서 이클립스가 설치된 디렉토리안에 android-sdk-windows라는 폴더를 만들고 그 경로에다 Android SDK를 설치할 것입니다.

그렇게 되면 설치 완료 후에 이클립스와 함께 통째로 압축하면 언제든지 재사용이 가능해 집니다.

안드로이드 SDK를 다운로드 받기 위해서 http://developer.android.com 에 접속합니다. 사이트에 접속한 후에 두번째 메뉴인 SDK를 클릭하면 운영제체 버전에 맞는 SDK를 다운로드 받을 수 있는 페이지가 나타납니다.

여기서는 Windows 환경에서 설치를 진행할 것이므로, Installer_r16_windows.exe 파일을 다운로드 받습니다.

다운로드가 완료되면 다운로드 받은 파일을 실행하여서 설치를 시작합니다.

설치 과정중에 JDK의 설치 여부를 확인합니다. 만약 JDK의 설치가 되어 있지 않다면 JDK를 설치하신 후에 다시 이 패키지를 실행하셔야 합니다.

SDK가 설치될 경로를 묻는 화면이 나타납니다. 앞에서도 이야기 했듯이 여기서는 C:\이클립스폴더\android-sdk-windows 경로에 이 패키지를 설치할 겁니다. 아래 화면을 참고하여서 "Browse"버튼을 누릅니다.

폴더 찾아보기 창이 나타나면 앞에서 생성했던 android-sdk-windows의 폴더를 지정하여 줍니다.

지정된 경로를 확인하고 "Next"버튼을 눌러서 설치를 계속 진행합니다.

시작메뉴 폴더를 물어봅니다. 가볍게 "Next"버튼을 누릅시다.

설치가 진행됩니다. 완료되면 여기서도 "Next"를 누릅시다.

설치가 완료되면 Android의 버전별 API를 내려받아야 합니다. 설치 완료 후 API 다운로드 창을 구동시키기 위한 "Start SDK Manager" 체크박스를 체크하고 "Finish"버튼을 눌러줍니다.

설치 프로그램이 종료되면서 Android SDK Manager라는 창이 나타납니다. 기본적인 SDK이외에 Android의 버전별 API와 추가적인 툴들을 내려받도록 하는 화면입니다.

Android API는 최신 버전인 Android 4.0.3 버전과 일반적으로 개발시에 최 하위 버전으로 적용하는 2.1버전만을 다운로드 받습니다. 1.6과 1.5는 지나치게 하위버전이여서 탑제되어 있는 단말기도 드물기 때문에 배제합니다.

실제 프로젝트 진행은 4.0.3으로 진행하면서 최하위 지원 버전을 2.1로 지정하기 위해서 위와 같이 체크합니다.
그 외에 Extra라는 추가 기능들도 포함시킵니다.

이용약관에 동의하고 다운로드를 진행합니다.

실제 다운로드가 진행됩니다. 이 과정이 상당히 오래 걸립니다. 저는 이거 걸어놓고 스타를 한판 했습니다. -.-;;;
다운로드가 완료되면 별다른 메시지가 나타나지 않고 진행되던 프로그래스바가 회색으로 바뀝니다. 그럼 이 창을 그냥 닫아주면 됩니다.

ADT의 다운로드와 설치

ADT란 Android Developement Tools의 줄임말로 이클립스에 설치되어 Android SDK를 다룰 수 있도록 도와주는 이클립스 플러그인을 말합니다.

ADT를 다운로드 받고 설치하기 위해서는 이클립스를 사용해야 합니다. 이클립스의 Help메뉴 하위의 "Install New Software"를 선택합니다.

"Install"창이 나타나면 우측 상단의 "Add"버튼을 누릅니다.

Add Repository창이 나타나면 Name 속성에 "ADT"라고 입력하고 Location 속성에는 다음의 주소를 입력합니다. 여기서 입력한 주소로부터 이클립스 플러그인을 내려받게 됩니다. 입력이 완료되면 "OK"버튼을 눌러 창을 닫고 원래의 화면으로 돌아갑니다.

https://dl-ssl.google.com/android/eclipse/

원래의 화면으로 돌아가면 화면 중앙의 목록에 잠시 "Pending..."이라는 메시지가 나타났다가 다운로드 받을 수 있는 항목들이 체크박스와 함께 나타납니다. 모든 항목을 체크한 후에 "Next"버튼을 눌러서 다운로드 받습니다.

선택한 항목을 확인하는 페이지 입니다. "Next"버튼을 누릅니다.

이용약관을 확인하는 페이지 입니다. 동의한다는 의미의 "I accept ..."에 체크하고 "Finish"를 누릅니다. 이 페이지의 내용을 꼼꼼히 읽어보실 분들은... 안말립니다. -_-;;;

다운로드가 시작됩니다. 이 과정이 상당히 오래 걸립니다. 식사라도 하고 오셔야 합니다.

다운로드 중에 Anti Virus 프로그램에 대한 경고가 나타나는 경우가 있습니다. 가볍게 "OK"를 누르시면 됩니다.

다운로드가 완료되면 이클립스를 재시작해야 한다는 메시지가 아래 화면과 같이 나타납니다. "Restart Now"를 눌러서 이클립스를 재실행 합니다.

이클립스가 재실행 되고 나면 아래 화면과 같이 Android API를 내려받는 창이 자동으로 나타납니다. 우리는 앞에서 Android SDK를 설치하면서 미리 받아두었기 때문에 여기서는 "Cancel"을 눌러서 창을 닫습니다.

이제 여기까지 진행한 후에 이클립스를 닫고 이클립스가 설치된 디렉토리를 통째로 압축하면 다른 PC에 가서도 동일한 경로에 압축만 풀어주면 바로 안드로이드 개발을 진행할 수 있습니다.

저는 압축을 풀기 전에 이클립스의 폰트를 변경하고 소스파일의 왼쪽에 라인수가 표시되는 설정을 추가한 후에 압축했습니다.

안드로이드의 세계에 오신것을 환영합니다.

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[MySQL] 윈도우환경에서 MySQL 설치하기

☞호야☜ — Tue, 24 Jan 2012 17:52:36 +0900

이번 포스팅에서는 윈도우 환경에서의 MySQL 설치 과정에 대해서 소개해 보겠습니다.
오라클이 MySQL을 인수한 후로 MySQL에도 많은 변화가 있어왔습니다. 5.1버전까지만 설치해서 사용해 보았었는데 5.5. 버전에서는 설치 단계가 획기적으로 변경이 되었더군요.
그래서 한번 소개해 보겠습니다.

MySQL의 다운로드

MySQL은 http://www.mysql.com/downloads에서 다운로드 받을 수 있습니다. 해당 사이트에 접속하면 아래와 같은 화면이 나옵니다. 화면 중앙에 보이는 큼지막한 다운로드 버튼을 클릭하여 다운로드 페이지로 이동합니다.

페이지를 이동하고 나면 화면 중앙부에 윈도우 버전에 맞는 다운로드 버튼이 제공됩니다. 이 버튼을 클릭하여 설치 패키지 파일을 다운로드 받기 위해서 페이지를 이동합니다.

MySQL사이트에 로그인하라는 인증 화면이 나타납니다. 하지만 스크롤을 더 내려보면 인증창 아래 로그인 없이 다운로드만 받겠다는 텍스트 링크가 있습니다. 이 링크를 통하여 MySQL을 가입이나 로그인 절차 없이 바로 다운로드 받을 수 있습니다.

설치 패키지 파일을 다운로드 받기 위한 링크가 제공됩니다. 아래 화면을 참고하여서 설치 패키지를 다운로드 받습니다.

MySQL의 설치

다운로드 받은 설치 패키지를 실행하면 Windows Installer가 실행되면서 MySQL의 설치를 시작합니다. 설치 과정이 이전보다 더 세련되게 바뀌어서 무척 마음에 들었었습니다.
설치 페이지의 첫 화면에서 세개의 메뉴가 제공되는데 Install MySQL Products항목을 선택하여 설치를 시작합니다.

이용약관에 동의합시다.

현재 설치 버전보다 높은 최신 버전을 온라인상에서 검색하는 페이지가 나타납니다. 조금전에 mysql.com에서 최신파일을 다운로드 받은 상태이기 때문에 여기서는 화면 하단부의 "Skip"체크박스를 체크하고 "Next"버튼을 눌러서 이 단계를 건너뛰었습니다.

설치 형태를 결정하는 화면입니다. 대부분 MySQL을 로컬PC에 설치하는 이유는 어떠한 플랫폼 기반으로 개발을 진행하면서 연동을 테스트하기 위함일 겁니다. 개발자를 위한 기본 환경이 구성되는 "Developer Default"항목을 선택하고 "Next"를 누릅니다.

설치하는데 필요한 구성요소가 있는지를 검사하여서 없다면 MySQL설치 전에 먼저 설치하는 화면입니다. 화면 중앙에 나오는 항목들이 모두 체크가 되어 있다면 MySQL 설치에 필요한 구성요소가 모두 설치되어 있는 경우 입니다. 그런 경우에는 가볍게 "Next"버튼을 누르면 다음단계로 넘어갑니다.

만약 아래 화면처럼 하나 이상의 항목이 체크가 되지 않은 상태라면 "Next"버튼을 누르면 개별적인 구성요소가 설치됩니다.

개별 구성요소가 설치되고 나면 아래와 같이 모든 항목이 체크된 상태로 변경됩니다. "Next"를 눌러서 다음 단계로 넘어갑니다.

설치될 MySQL 구성요소들을 보여줍니다. "Next"를 누르면 실제 설치 과정이 진행됩니다.

설치를 설치설치~!!

설치가 완료되면 비활성 상태였던 "Next"버튼이 활성화 됩니다. 이 버튼을 눌러서 다음 단계로 이동합시다.

기본적인 설치는 끝이 났으니 기본 환경설정을 진행하겠다는 화면입니다. 여기서도 가볍게 "Next"를 눌러 줍니다.

MySQL을 어떤 환경에서 구동할 것인지를 물어봅니다. 앞에서도 이야기 했듯이 여기서는 개발에 필요한 요소로서 설치하는 것입니다. 당연히 "Developer Machine"을 선택하고 "Next"를 누릅니다.

가장 중요한 MySQL 기본 환경 설정입니다. 기본적으로 TCP/IP 포트번호가 3306으로 지정되어 있는것을 확인할 수 있습니다. 또한 백그라운드에서 항상 실행할 수 있도록 Windows Service에 등록하는 옵션도 지정되어 있습니다.

이 두가지 옵션은 기본값대로 두고, 그 밑에 있는 MySQL의 관리자 계정인 root의 초기 비밀번호를 지정해 준 후에 "Next"를 누릅니다.

환경설정이 진행됩니다.

샘플과 예제들을 설치할지 결정하는 화면입니다. 가볍게 "Next"를 누릅시다.

설치가 완료되면 아래와 같은 화면이 나타납니다. "Start MySQL workbench after Setup"항목을 체크한 후에 "Finish"를 누르면 MySQL Installer가 종료된 후에 쿼리문을 작성하고 테이블이나 DB관리를 GUI 형태로 진행할 수 있는 기본 프로그램이 실행됩니다.

이전 버전에서는 포함되어 있지 않던 기능인데 5.5부터 지원하는가 봅니다. MySQL의 최신버전을 설치하면서 가장 놀랐던 부분이 여기였습니다.

MySQL workbench의 사용법은 나중에 한번 다루어 보겠습니다.

환경변수의 지정

MySQL workbench의 추가로 인해서 기존에 사용하던 커멘드 환경에서의 MySQL 접속은 이제 필요가 없어졌습니다만, 혹시라도 프롬프트상에서 접속이 필요한 경우를 대비해서 MySQL의 bin 디렉토리를 window 환경변수에 추가하겠습니다.

내 컴퓨터를 마우스 우클릭하여 맨 아래 있는 "속성"메뉴를 누릅니다. Windows7 환경에서는 아래와 같은 화면이 나타납니다. 왼쪽 메뉴에서 "고급 시스템 설정"을 선택합니다.

XP에서 실행하는 경우 내 컴퓨터의 "속성"메뉴를 클릭한 후 다음 단계로 바로 이동합니다.

시스템 속성창에서 "고급"탭으로 이동하여 화면 하단부에 있는 "환경변수"버튼을 누릅니다.

화면이 아래와 같이 나타나는데, 아래쪽에 있는 "시스템 변수"항목에서 Path값을 찾아서 "편집"버튼을 누릅니다.

시스템 변수값은 하나의 이름에 여러개의 값이 지정될 수 있습니다. 값이 여러개가 지정될 때 각 값의 구분은 세미콜론(;)으로 처리합니다.

기존의 값들과 구분하기 위해서 "변수 값"항목에 마우스 커서를 놓고 키보드의 End키를 눌러서 세미콜론(;)을 하나 추가합시다. 그 뒤에 MySQL이 설치된 경로의 bin 디렉토리를 입력합니다. (가급적 윈도우 탐색기에서 경로를 복사해서 넣으세요.)

C:\Program Files\MySQL\MySQL Server 5.5\bin

이제 열려있는 모든 창을 확인 버튼을 눌러서 닫습니다.

MySQL의 설치가 끝났습니다.

이제... 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[MySQL] MacOS에 MySQL 설치

☞호야☜ — Tue, 24 Jan 2012 15:41:21 +0900

JSP와의 연동등을 이유로 하여 Mac에서 개발을 진행하다 보면(윈도우에서도 마찬가지 입니다.) 로컬 시스템에 MySQL을 설치해야 하는 경우가 종종 있습니다.

이번 포스팅에서는 Mac OS에서 MySQL을 설치하는 과정을 소개해 보도록 하겠습니다.

MySQL의 다운로드

http://www.mysql.com/downloads 페이지에 접속하여 좌측 메뉴에서 MySQL Community Server 항목을 클릭합니다.

다운로드 페이지로 이동하게 되면 화면 중간쯤에 Mac OS ver전의 DMG Archive 항목을 다운로드 받습니다.

이전 페이지에서 다운로드 버튼을 클릭하면 로그인을 요구하는 창이 나타납니다. 하지만 스크롤을 조금만 더 밑으로 내리면 로그인 없이 다운로드만 가능하도록 하는 텍스트 링크가 있습니다. 이 링크를 통해서 로그인 없이 다운로드가 가능합니다.

다음 단계로 넘어가게 되면 다운로드 링크가 나타납니다. 아래 표시된 화면을 참고하여 DMG파일을 다운로드 받도록 합니다.

MySQL의 설치

다운로드 받은 파일을 더블클릭하면 DMG파일이 마운트 되고 Finder 창이 열리면서 패키지 안에 들어 있는 파일을 보여줍니다. 패키지 파일중에서 "mysql-5.5.20-osx10.6-x86.pkg > MySQLStartupItem.pkg > MySQL.prefPane" 의 순서로 설치합니다.

설치과정은 단순히 "Next"버튼만을 클릭하면 되기 때문에 자세한 화면은 생략하도록 하겠습니다. 설치가 끝나면 운영체제를 한번 재부팅 해 주는 것이 좋습니다.

재부팅후에 시스템 환경설정안에 "MySQL"이라는 항목이 추가되어 있는 것을 확인할 수 있습니다.

시스템 환경설정에 추가된 항목을 더블클릭해 보면 MySQL을 운영체제가 시작할 때 자동으로 시작하도록 하는 체크박스와 MySQL의 구동상태등을 볼 수 있도록 되어 있습니다.
만약 아래 화면에 둥글게 표시한 것과 같이 running 이라고 표시되지 않는다면 그 옆의 버튼을 눌러서 MySQL을 구동시킵니다.

MySQL의 root 패스워드 지정

root란 MySQL에 자동으로 추가되어 있는 최고 관리자의 계정이름 입니다. 초기 설치 상태에는 이 관리자의 비밀번호가 설정되어 있지 않습니다. 이 관리자의 비밀번호를 지정하도록 하겠습니다.

우선 터미널을 엽니다. 터미널을 연 상태에서 /usr/local/mysql/bin 디렉토리로 이동합니다.

>> cd /usr/local/mysql/bin

mysql에 접속하기 위해서 다음의 명령어를 입력합니다. 명령어 입력후 비밀번호를 물어보면 운영체제에 로그인할 때 인증한 사용자 비밀번호를 입력합니다.

>> sudo ./mysql

sudo는 Mac OS에서 운영체제 관리자의 권한을 요구하는 작업을 수행할 때 필요한 명령어 입니다. 그렇기 때문에 앞에서 입력한 명령어에 대해서는 운영체제의 비밀번호를 입력해 주어야 합니다. 만약 sudo 명령어를 2번 이상 사용한다면 두번째부터는 운영체제 비밀번호를 묻지 않습니다.

정상적으로 접속이 된다면 터미널 상의 커서가 "mysql>"형태로 변합니다. 이 상태에서 다음의 명령어를 차례로 입력합니다.

mysql> use mysql;
mysql> update user set password=password('관리자비밀번호지정') where user='root';
mysql> flush privileges;

관리자 비밀번호가 지정되었으니 앞으로 mysql에 접속하기 위해서는 터미널에 다음과 같이 입력하면 됩니다.

>> sudo ./mysql -uroot -p
Enter Password: 비밀번호입력

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] 이클립스로 개발시 WebContent 디렉토리의 설정

☞호야☜ — Tue, 24 Jan 2012 09:58:35 +0900

톰캣의 디렉토리 구조

Apache Tomcat를 설치해서 이클립스 없이 (에디트 플러스나 울트라 에디트등을 사용하여) 개발시 톰켓 안에서 웹 프로그램(JSP소스)들이 위치하는 경로는 기본적으로 /톰캣설치경로/webapps 디렉토리 입니다. 이 디렉토리안에 있는 ROOT라는 경로가 http://localhost:기본포트(8080) 의 주소와 맵핑됩니다.

예를 들어서 /Applications/Apache Tomcar v7.0/webapps/ROOT/helloJSP.jsp 라는 파일이 존재한다면 이 파일에 대해서 웹상에서 접근하기 위한 주소는 http://localhost:8080/helloJSP.jsp 경로가 됩니다.

만약 ROOT디렉토리 햐위에 다른 디렉토리가 존재한다면 웹 주소에서는 슬래쉬(/)로 구분하여 디렉토리 이름을 명시해 주면 됩니다.

다시 한번 예를 들어본다면 /Applications/Apache Tomcat v7.0/webapps/ROOT/HelloJSP/index.jsp 라는 파일이 있을 경우 이 파일에 대한 웹상에서의 접근 주소는 http://localhost:8080/HelloJSP/index.jsp 가 됩니다.

다른 경우도 있습니다. /톰캣설치경로/webapps/MyApp/index.jsp 상에 위치한 파일도 웹에서 접근할 때는 http://localhost:8080/MyApp/index.jsp 의 주소가 됩니다.

디렉토리와 주소간의 관계를 정리한다면 다음의 표와 같습니다.

실제 디렉토리	웹 접근 경로
톰캣 설치 경로/webapps/ROOT	http://localhost:8080
톰캣 설치 경로/webapps/ROOT/myapp	http://localhost:8080/myapp
톰켓 설치 경로/webapps/myapp	http://localhost:8080/myapp
톰켓 설치 경로/webapps/ROOT/myapp/test	http://localhost:8080/myapp/test
톰켓 설치 경로/webapps/myapp/test	http://localhost:8080/myapp/test

위의 표를 보면 두번째 경우와 세번째 경우의 웹 접근 경로가 같은 것을 확인할 수 있습니다.

톰캣은 웹 주소상에서 포트번호 뒤에 특정 디렉토리의 이름이 주어지면 우선 /webapps 디렉토리 안에 동일한 이름의 폴더가 존재하는지 찾습니다. 만약 없다면 ROOT 디렉토리 안에 동일한 이름의 폴더가 있는지를 찾습니다.

webapps 디렉토리 안의 디렉토리들은 모두 Context라고 불리는 단위로서 각각 독립적인 웹 어플리케이션 단위입니다. 이 Context 안에 위치하는 디렉토리들은 단순한 디렉토리 입니다.

이클립스를 통한 프로젝트의 디렉토리 구조

앞에서 살펴본 바로면 Context로 지정된 디렉토리 안에 위치한 JSP파일들이 웹 브라우저상에 노출이 됩니다. 하지만 이클립스를 통해서 프로젝트를 진행하게 되면 Context로 지정된 디렉토리 안에 특수한 디렉토리가 하나 더 생성되는 것을 볼 수 있습니다.

바로 WebContent라는 디렉토리입니다. 이클립스를 통해서 프로젝트를 진행하게 되면 이 디렉토리안에 JSP나 HTML파일들이 위치하게 됩니다.

문제는 이클립스의 Run버튼을 통해서 웹 어플리케이션을 실행하게 되면 실제 웹 브라우저에 노출되는 경로는 이 WebContent라는 디렉토리를 숨긴다는 점입니다.

예를 들어서 /톰캣디렉토리/webapps/HelloJSP/WebContent/index.jsp 라는 파일이 있을 경우 이 파일이 이클립스를 통해서 실행하게 되면 http://localhost:8080/HelloJSP/index.jsp 라는 주소로 실행이 되게 됩니다.

하지만 이클립스를 통해서가 아니라 그냥 톰캣만을 단독으로 구동시켜서 프로그램을 실행시켜 보면 WebContent라는 디렉토리가 숨겨지지 않게 됩니다. 즉 http://localhost:8080/HelloJSP/WebContent/index.jsp 의 경로로 실행이 되게 됩니다.

이런 현상은 이클립스가 톰켓을 구동할 때, 특정한 환경설정값을 지정하여 주기 때문입니다.
이클립스를 통한 실행이 아니라 직접 톰캣을 통하여 실행할 때는 무척 번거로운 작업이 됩니다.

이클립스상에서의 실행과 톰캣상에서의 직접 실행을 모두 동일하게 통일하기 위해서는 톰캣에 이클립스와 동일한 환경설정을 추가해 주면 됩니다.

톰캣이 설치된 디렉토리 안의 conf 디렉토리를 확인하면 server.xml파일이 있습니다. 이 파일을 텍스트 에디터로 엽니다.

server.xml 파일의 스크롤을 맨 아래로 내리면 다음과 같은 부분이 있습니다.

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log." suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
               
      </Host>
    </Engine>
  </Service>
</Server>

이 파일의 끝에서 다섯번째 라인인 </Host>전 라인에 다음의 XML 구문을 추가합니다.

<Context path="/프로젝트명" docBase="프로젝트명/WebContent" reloadable="true"></Context>

새로운 구문이 추가된 후에는 톰캣을 재실행 합니다. HelloJSP라는 프로젝트에 대한 새로운 구문이 추가된 server.xml의 내용은 아래와 같습니다.

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log." suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
               
        <Context path="/HelloJSP" docBase="HelloJSP/WebContent" reloadable="true"></Context>
      </Host>
    </Engine>
  </Service>
</Server>

이 설정은 이클립스에 프로젝트가 추가될 때마다 넣어주어야 합니다.

이렇게 구문을 추가해 주고 난 후에는 이클립스를 통해서 프로젝트를 실행했을 경우와 이클립스 없이 직접 톰캣을 실행해서 접근한 경우 모두 동일한 경로로 웹 브라우저를 통해서 결과를 확인할 수 있습니다.

WebContent 디렉토리는 웹 URL상에 숨겨지게 됩니다.

이제... 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] Tomcat 7.x + Eclipse EE를 통한 JSP 개발환경 구축 (for Mac)

☞호야☜ — Mon, 23 Jan 2012 12:52:04 +0900

이번 포스팅에서는 Mac OS기반에서의 JSP 개발환경 구축에 대해서 살펴보도록 하겠습니다.

윈도우 환경에서의 개발환경 구축에 대해서 살펴보실 분들은 아래의 포스팅을 참조하시기 바랍니다.

[JSP] Tomcat 7.x + Eclipse EE를 통한 JSP 개발환경 구축 (for Windows)

Mac의 경우 JDK는 OS에서 기본으로 지원하고 있기 때문에 별도로 설치할 필요가 없습니다. 만약 JDK가 설치되어 있지 않다 하더라도 JDK가 필요한 순간 OS가 알아서 업데이트를 받으므로 참 편리합니다.

그렇기 때문에 Mac에서의 개발환경 구축은 톰캣 설치, 이클립스 설치, 이클립스 환경설정 이렇게 세단계로 진행됩니다.

톰캣의 설치

우선은 맥에서 설치 가능한 톰캣을 다운로드 받아야 합니다. 톰캣은 http://tomcat.apache.org 에서 다운로드 받을 수 있습니다.
사이트에 접속한 후에 왼쪽 메뉴에서 Tomcat 7.0 링크를 통해서 다운로드 페이지로 이동합니다.

다운로드 페이지로 이동하게 되면 스크롤을 내려서 Binary Distributions > Core 항목 아래 있는 tar.gz 형식을 다운로드 받습니다. UNIX 계열 운영체제에서 사용하는 압축 형식입니다. 맥에서는 별다른 설치 패키지가 아니라 단순히 압축된 파일만 받아 압축을 풀어주면 됩니다.

저는 다운로드 받아서 압축을 풀어둔 폴더를 Finder를 열어서 "응용 프로그램"안에 넣었습니다. 저렇게 압축을 풀어두니 실제 경로는 /Applications/apache-tomcat-7.0.23 이 되었습니다.

이클립스의 설치

윈도우용 이클립스와 마찬가지로 Mac에서도 이클립스는 단순히 압축만 풀어주면 설치가 완료됩니다. http://www.eclipse.org 로 접속하여 "Download"메뉴를 클릭합니다.
다운로드 페이지로 이동을 한 후에는 화면 중간쯤에 위치한 "Eclipse IDE for Java EE Developers"항목의 우측에 있는 링크를 클릭합니다. OS의 상태에 따라서 32bit 버전과 64bit 버전을 선택하시면 됩니다. 저는 32bit버전을 선택했습니다.

다운로드 받을 버전을 선택하여 페이지가 이동되면 아래 화면을 참고하셔서 다운로드 링크를 클릭하면 압축파일이 다운로드 됩니다.

이번에도 다운로드 받은 파일을 "Finder"를 열어서 "응용 프로그램"안에 압축을 풀어 넣었습니다.

이클립스 환경설정

이클립스를 처음으로 실행하면 아래 화면과 같이 작업한 소스가 저장되기 위한 Worksapce라는 경로를 묻습니다. 이 경로를 톰캣이 설치된 디렉토리 (/Applications/apache-tomcat-7.0.23) 로 지정하여 줍니다. 만약 이 화면을 그냥 지나쳤다면 이클립스의 메뉴에서 "File > Switch Workspace"를 통해서 재설정 할 수 있습니다.

이제 이클립스와 톰캣의 연결을 위한 환경설정을 진행해야 합니다. 이클립스의 메뉴에서 "Eclipse > 환경설정"을 선택하여 환경설정 페이지를 엽니다.

환경설정 페이지가 열리면 왼쪽의 트리에서 "Server > Runtime Environments"항목을 선택한 후에 우측의 "Add"튼을 클릭합니다.

"Add"버튼을 눌러서 페이지가 열리면 "Apache Tomcat v7.0"항목을 선택합니다. 만약 설치된 톰캣의 버전이 다를 경우에는 상황에 맞는 버전을 선택하여 줍니다.
선택이 완료되면 "Next"버튼을 누릅니다.

다음단계로 넘어가게 되면, 우측의 "Browse"버튼을 눌러서 톰캣이 설치되어 있는 경로를 지정하여 준 후에 "Finish"버튼을 눌러줍니다.

"Finish"버튼을 눌러 창이 닫히면 원래의 환경 설정 페이지로 되돌아 오는데, "OK"를 눌러서 창을 닫습니다.

이클립스의 메인창의 하단부에 보면 "Servers"라는 탭이 있습니다. 이 탭으로 이동한 후에 화면의 빈 공간에서 마우스를 우클릭하여 "New > Server"항목을 선택합니다.

"New Server"페이지에서 추가할 서버의 종류를 Tomcat v7.0 Server로 지정하고 "Server runtime environment"항목에서 앞에서 추가했던 "Apache Tomcat v7.0"을 지정하여 준 후에 "Finish"버튼을 눌러줍니다.

이제 모든 환경설정이 완료되었습니다. 이후 프로젝트의 진행에 대해서는 Mac환경과 Windows 환경에 따른 차이점은 없습니다. 첫번째 페이지를 테스트해 보기 위한 Hello World 예제는 다음의 포스팅을 참조하시기 바랍니다.

[JSP] Hello JSP

이제 즐깁시다!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] 이클립스를 통한 실행시 내장 웹브라우저가 아닌 시스템 브라우저로 결과 확인

☞호야☜ — Sun, 22 Jan 2012 13:41:19 +0900

이클립스를 사용해서 JSP를 개발하는 경우, 기본상태에서는 이클립스에 내장된 웹 브라우저가 구동됩니다. 경우에 따라서는 이 상태가 매우 편리한 환경일 수 있으나 어떤 경우에는 오히려 IE나 FF, Chrome등과 같이 운영체제에 설치되어 있는 시스템 기본 브라우저를 통해서 직접 실행하는 것이 더 편할 수 있습니다. (아마도 개인취향적인 문제가 더 클 것 같습니다.)

이클립스의 "Window > Web Browser"메뉴의 하위에 보면 이클립스를 통해서 구동할 웹 브라우저들의 목록이 나타납니다. 기본값인 "0 Internal Web Browser"를 선택하면 이클립스를 통해서 결과가 확인됩니다. 이 값을 다른 값으로 변경하면 선택된 값에 따라서 웹 브라우저가 구동됩니다.

저는 "1 Default system web browser"를 선택하여 운영체제에 설정되어 있는 기본 웹 브라우저인 IE로 결과를 확인하도록 설정을 변경했습니다.

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] 이클립스에서 실행시 "'Starting Tomcat v7.0 Server at localhost' has encountered a problem" 에러 해결

☞호야☜ — Sun, 22 Jan 2012 13:30:12 +0900

JSP소스를 작성한 후에 결과를 확인하기 위해서 이클립스의 "Run"버튼을 클릭하면 아래와 같이 에러가 발생하는 경우가 있습니다.

문제의 원인은 이클립스를 통해서 톰켓을 실행하려고 하였으나 이미 톰켓이 실행중인 경우입니다.
윈도우용 톰켓을 설치한 경우 윈도우 트레이 아이콘 영역에 보면 아래 화면과 같이 톰켓의 아이콘이 실행상태로 표시됩니다. 이 트레이 아이콘을 더블클릭하여 톰켓 모니터창을 띄웁니다.

톰켓 모니터 창에서 "Stop"버튼을 눌러서 톰켓을 중지한 후에 다시 이클립스에서 "Run"버튼을 클릭합니다.

위와 같이 처리하였음에도 문제가 해결되지 않은 경우에는 이미 이클립스에서 톰켓을 실행중인 상태에서 반복 실행을 하려고 한 경우 입니다.

이클립스의 하단부에 있는 "Server"탭에서 등록된 서버를 확인하여서 "Started"상태이면 아래 화면을 참고하여 중지 버튼을 클릭하여 서버를 중단한 후에 다시 이클립스의 "Run"버튼을 클릭합니다.

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] Hello JSP

☞호야☜ — Sun, 22 Jan 2012 13:06:33 +0900

이번 글에서는 앞의 포스팅에 이어서 Hello JSP를 출력하는 간단한 예제를 통해서 JSP 개발의 진행방법에 대해서 알아보도록 하겠습니다.

먼저 JSP의 개발환경에 대한 내용은 앞의 포스팅을 참고하시기 바랍니다.

[JSP] Tomcat 7.x + Eclipse EE를 통한 JSP 개발환경 구축 (for Windows)

새로운 프로젝트의 생성

이클립스의 좌측 상단의 툴바 아이콘중에서 가장 첫번째 아이콘이 "New"아이콘입니다. 이 아이콘을 클릭해서 "New"대화상자를 엽니다.

"New"대화상자에서 "Web > Dynamic Web Project"항목을 선택한 후에 "Next"버튼을 누릅니다.

"Project name"항목에 프로젝트이름을 입력하고 "Finish"버튼을 누릅니다. 여기서는 HelloJSP라고 입력했습니다.

JSP 소스파일의 추가

생성된 프로젝트가 이클립스 좌측의 Package Explorer라는 창에 나타납니다. 이 화면에서 트리를 내려보면 "WebContent"라는 폴더가 있습니다. 이 폴더에 "JSP"파일이 위치하게 됩니다. 이 폴더를 선택한 상태에서 다시 "New"아이콘을 클릭하여 "New"대화상자를 엽니다.

이번에는 "Web > JSP File"항목을 선택하고 "Next"를 누릅니다.

소스파일의 위치를 물어보는 대화상자가 나타납니다. 앞에서 이미 "WebContent"를 선택한 상태에서 "New"아이콘을 클릭하였기 때문에 위치가 지정되어 있습니다. 만약 아래 화면과 같이 나타나지 않는다면 현재 창에서 소스파일의 위치를 프로젝트 안의 "WebContent"로 지정하시면 됩니다.

파일의 이름을 "HelloJSP.jsp"로 지정하고 "Finish"버튼을 누릅니다.

소스파일의 작성

추가한 소스파일이 나타나면 아래의 구문을 작성합니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
    <% out.print("Hello JSP"); %>
</body>
</html>

작성결과 확인

이클립스의 툴바 아이콘중에서 "New"아이콘을 클릭합니다.

아래와 같이 "Run On Server"항목이 나타나면 화면 중간에서 등록되어 있는 Tomcat 서버를 지정하고 "Finish"버튼을 클릭합니다.

이클립스에 내장되어 있는 웹 브라우저를 통해서 결과를 확인할 수 있습니다. 만약 소스파일을 수정한 후에 결과를 다시 새로고침하여 확인하고 싶다면 이클립스 브라우저의 주소표시줄 우측에 있는 화살표 버튼을 클릭하면 됩니다.

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[JSP] Tomcat 7.x + Eclipse EE를 통한 JSP 개발환경 구축 (for Windows)

☞호야☜ — Sun, 22 Jan 2012 12:26:38 +0900

기본 Java와 Android만을 강의하다가 1년 반만에 JSP의 강의를 맡게 되었습니다. 기존의 JSP강의에서는 톰켓과 에디트플러스를 사용하여서 강의를 진행했었는데, 이번에는 이클립스를 사용해 보고자 개발환경 구축에 대한 포스팅을 새롭게 합니다.

JDK의 설치와 자바 환경변수 설정

우선 JSP역시 자바언어를 기반으로 구동되는 플렛폼이기 때문에 JDK의 설치와 기본 설정은 필수 입니다. JDK의 설치 및 설정에 관한 내용은 다음의 포스팅을 참조하시기 바랍니다.

[JAVA] 개발환경 준비하기 - JDK의 설치

Tomcat의 다운로드 및 설치

JDK의 설정이 끝나면, 그 다음은 JSP를 구동시킬 웹 서버 및 Servlet컨테이너인 톰켓을 설치해야 합니다.

#01. 톰켓의 다운로드

톰켓의 다운로드는 http://tomcat.apache.org 에서 다운받으실 수 있습니다. 사이트에 접속한 후에, 왼쪽 메뉴에서 Download > Tomcat 7.0 을 클릭합니다.

페이지가 이동된 후에는 (윈도우의 경우) 페이지의 스크롤을 이동하여 최신 버전대의 항목중에 "Windows Service Installer" 항목을 통해서 설치 패키지 파일을 다운로드 받습니다.

#02. 톰켓의 설치

톰켓의 설치는 (윈도우답게) 무척이나 간결하고 쉽습니다. 우선 다운로드 받은 Installer 파일을 더블클릭하여 설치를 시작합니다.

이용약관이 나오면 가볍게 "Agree"를 선택하면 됩니다.

설치할 항목을 선택하는 창이 나옵니다. 저는 기본값대로만 설치했습니다.

설치 과정중에 톰켓 서버의 기본 설정을 묻는 화면이 나타납니다.
우선 HTTP/1.1 Connector Port 라는 항목에 8080이라는 값이 들어 있는 것에 주목하세요.
이 포트번호가 웹 서비스를 구동시킬 포트입니다.
80포트를 사용하면 URL에 포트번호를 명시할 필요가 없어지지만, 그 외의 포트번호는 URL에 포트번호를 명시해 주어야 합니다.

그 외에 서버 관리자를 생성하기 위한 Tomcat Administrator Login 항목의 User Name과 Password 항목이 있습니다. 관리자 계정을 만들지 않더라도 설치는 가능합니다. 하지만 서버 관리를 환경설정 파일이 아닌 GUI 환경에서 수행하기 위해서는 가급적 지정해 주는 것이 좋습니다.

JDK가 설치되어 있다면, 이 화면에서 설치된 JDK의 경로가 자동으로 보여집니다. 만약 JDK가 설치되어 있음에도 불구하고 경로가 나타나지 않는다면 찾아보기를 사용하여 JDK의 경로를 지정해 줍니다. (사실 톰켓은 JDK가 설치되어 있지 않으면 설치 자체가 불가능 합니다.)

최종적으로 톰켓이 설치될 경로를 지정해 주고 "Next"를 누릅니다.
저는 기본값대로 설치했습니다.

설치가 완료되면 Finish를 눌러 마무리 합니다. 설치가 완료되면 처음 서버는 중지된 상태입니다. 그리고 서버의 가동 역시 매번 수동으로 진행해 주어야 합니다. 등록된 트레이 아이콘을 통해서 자동 시작으로 설정할 수 있지만 이클립스를 통해서 구동되지 않고 직접 구동할 경우 이클립스에서 톰켓을 제어하지 못하게 되기 때문에 시작상태에 대한 설정은 건드리지 않고 톰켓 설치를 마무리 합니다.

#03. 톰켓의 환경변수 설정

톰켓의 설치가 완료되면 톰켓의 설치 경로에 대한 환경변수를 설정해 주어야 합니다.

우선 C드라이브의 Program Files 폴더안에 설치된 톰켓의 경로를 확인합니다.
여기서는 C:\Program Files\Apache Software Foundation\Tomcat 7.0 경로에 설치되어 있습니다.

윈도우의 내 컴퓨터를 마우스로 우클릭하여 맨 밑의 속성을 클릭한 후에 왼쪽 메뉴에서 "고급 시스템 설정"을 선택합니다. (윈도우 XP의 경우 내 컴퓨터를 마우스 우클릭하여 속성을 선택한 후에 다음 단계로 넘어가시면 됩니다.)

시스템 속성창의 "고급" 탭으로 이동한 후에 화면에서 보이는 "환경변수" 버튼을 누릅니다.

"환경 변수"창이 열리면 화면 하단의 "새로 만들기"버튼을 누릅니다.

"환경변수"의 새로 만들기 창이 나타나면 이름과 값에 다음과 같이 입력합니다. 입력이 완료되면 모든 창을 확인 버튼을 눌러서 빠져 나옵니다.

변수 이름: CATALINA_HOME
변수 값 : 앞에서 확인한 톰켓의 설치 경로 (C:\Program Files\Apache Software Foundation\Tomcat 7.0)

이클립스의 다운로드와 설치

이클립스는 JSP소스를 작업하기 위한 IDE 개발툴 입니다. Java계열 플렛폼을 다루는데 매우 편리한 기능들을 다양하게 제공하고 있어서 자바 프로그래밍의 대표적인 툴로 자리잡고 있습니다.

#01. 이클립스의 다운로드

이클립스는 http://www.eclipse.org/ 사이트에서 다운로드 받을 수 있습니다. 사이트에 접속한 후에 download 메뉴를 클릭합니다.

다운로드 페이지로 이동한 후에 "Eclipse IDE for Java EE Developers"항목에 대해서 설치된 운영체제에 맞는 버전을 선택합니다. 여기서는 Windows 32 Bit 버전을 선택했습니다.

다운로드 받을 서버를 선택하여 다운로드 받습니다.

#02. 이클립스의 설치

이클립스는 설치 패키지가 아닌 압축파일의 형태로 제공됩니다. 다운로드 받은 압축파일을 적당한 경로에 압축을 풀면 됩니다. 다만 이클립스의 경로에 한글이나 공백이 있는 경우에는 실행시에 문제가 발생하는 경우가 간혹 있습니다. 그렇기 때문에 이클립스를 바탕화면과 같이 한글이나 공백이 포함된 경로에 압축을 푸는 것은 권장하지 않습니다.

여기서는 C드라이브에 압축을 풀었습니다.

이클립스의 Workspace 설정

이클립스를 처음 실행시키면 소스파일을 작성할 경로를 지정하기 위한 Worksapce를 확인하기 위해서 다음과 같은 창이 나타납니다.

이 창에서 Workspace의 경로를 톰켓이 설치된 디렉토리 안의 webapps로 지정하여 줍니다.

만약, workspace를 지정하는 과정을 그냥 지나쳐서 설정하지 못한 상태라면, 이클립스에서 "File > Switch Workspace" 메뉴를 통해서 다시 지정해 줄 수 있습니다.

이클립스의 톰켓 환경 설정

이클립스와 톰켓은 각각 독립된 프로그램입니다. JSP는 톰켓에 의해서 실행되기 때문에 JSP의 소스를 작성하는 프로그램인 이클립스에게 톰켓의 경로를 알려줄 필요가 있습니다. 이클립스에 대한 톰켓의 환경설정은 다음의 절차에 따라서 진행됩니다.

이클립스에서 "Window > Preferences" 메뉴를 선택합니다. 환경설정 창이 나타나면, 왼쪽의 트리에서 "Server > Runtime Environments" 항목을 선택한 후에 화면 우측의 "Add"버튼을 클릭합니다.

"New Server Runtime Environment"창이 나타나면 화면 중간에서 "Apache Tomcat v7.0"을 선택하고 "Next"버튼을 누릅니다. 만약 설치되어 있는 톰켓이 다른 버전이라면 설치된 버전에 맞는 항목을 선택해 줍니다.

화면 우측의 "Browse"버튼을 클릭하여 설치된 톰켓의 경로를 지정해 준 후에 "Finish"버튼을 클릭합니다.
(C:\Program Files\Apache Software Foundation\Tomcat 7.0)

"OK"버튼을 눌러서 창을 닫습니다.

이클립스 창의 하단부에서 "Server"라는 탭으로 이동합니다. 이 곳에 조금전에 등록한 Tomcat을 추가해 주어야 합니다. 탭 화면의 빈 공간에서 마우스를 우클릭하여 "New > Server"메뉴를 선택합니다.

"New Server"창이 나타나면 화면 중간에서 "Tomcat v7.0 Server"를 선택하고 하단의 "Server runtime enviromenets" 드롭다운에서 앞에서 등록한 "Apache Tomcat v7.0"을 선택해 준 후에 "Finish"버튼을 눌러서 빠져 나옵니다.

이제 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

JAVA SDK의 환경변수를 설정한 후에 이클립스가 실행되지 않는 경우

☞호야☜ — Mon, 12 Dec 2011 11:46:00 +0900

이클립스를 실행하기 위해서는 다음의 단계가 선행되어야 합니다.

1. JDK의 최신버전 다운로드 (http://www.oracle.com/technetwork/java/javase/downloads/index.html 에서 다운로드 받을 수 있습니다.)
2. JDK의 bin디렉토리를 윈도우 환경변수(PATH) 값에 등록

위 단계에 따라서 정상적으로 JDK의 bin디렉토리를 PATH변수에 등록해 주어도 이클립스가 "Fail to create the Java Virtual Machine" 라는 에러메시지를 보여주면서 실행되지 않는 경우가 있습니다.

이런 경우에는 수동으로 직접 이클립스의 환경설정을 해 주어야 합니다.

eclipise가 설치된 디렉토리에 보면 eclipse.ini 파일이 있습니다. 이 파일을 메모장등의 텍스트 편집기로 엽니다.

-startup
plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.0.v20100503
-product
org.eclipse.epp.package.jee.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-vm
C:\Program Files\Java\jdk1.6.0_21\bin\javaw.exe
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

위에서 빨간색으로 표시되는 부분에 대해서 추가해 주시면 됩니다. 다만 실제 경로는 설치하신 JDK의 버전에 따라서 각각 다를 수 있으니, 반드시 윈도우 탐색기에서 C:\Program Files\Java 디렉토리 밑의 JDK 경로를 확인하신 후에 적용하셔야 합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

HTML태그 시작하기

☞호야☜ — Tue, 06 Dec 2011 09:46:17 +0900

HTML

1) 웹 페이지를 만드는 구조적 언어 (Markeup Language)

2) 내용을 감싸는 태그(Tag)를 중첩하여 작성한다.

3) HTML태그는 반드시 시작과 끝이 존재하고, 그 중간에 내용이 위치한다.

<div>내용</div>

4) 내용이 필요 없는 태그의 경우 끝태그가 시작태그와 병합된다. <br />

5) HTML5 문서의 시작을 알리는 선언.

<!DOCTYPE HTML>

6) HTML문서의 범위

<html> ~ </html>

7) HTML문서의 속성을 지정하는 부분

<head> ~ </head>

8) HTML 문서의 본문을 지정하는 부분

<body> ~ </body>

9) (5)~(8)에 의한 소스 기본 형식

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

<head>~</head> 태그에 적용되는 내용

1) 문서의 언어 속성을 지정하는 태그

<meta charset="utf-8" />

2) 페이지의 제목을 표시하는 태그

<title>~</title>

3) (1)~(2)에 의한 소스 적용

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8" />
    <title>페이지 제목</title>
    </head>
    <body>
    </body>
</html>

body 태그에 적용될 수 있는 내용

1) 문단을 나누는 태그

<div>~</div>

하나의 문단 안에는 또 다른 문단이 들어갈 수 있으며, 다른 태그들도 적용될 수 있다.

<div>
    <div>~</div>
    <div>~</div>
</div>

2) 문장중에서 줄바꿈을 처리하는 태그
<br />

3) 페이지 이동을 처리하기 위한 태그

<a href="이동할 주소">클릭할 텍스트</a>

ex)
** 클릭시 이동 없음

<a href="#">클릭할 텍스트</a>

** 다른 HTML 페이지로 이동

<a href="second.html">클릭할 텍스트</a>

** 다른 사이트로 이동

<a href="http://www.naver.com">클릭할 텍스트</a>

** 메일보내기

<a href="mailto:hoya4232@gmail.com">클릭할 텍스트</a>

** 전화걸기 (스마트폰 전용)

<a href="tel:01028674232">클릭할 텍스트</a>

4) 이미지를 표시하기 위한 태그

<img src="이미지파일 경로" [width="폭"] [height="높이"] [border="태두리두깨"]/>

ex)
** 현재 html 파일과 동일한 경로에 있는 파일

<img src="1.jpg" width="300" height="200" border="0" />

** 현재 html파일과 다른 경로에 있는 파일
(상대경로 방식)

<img src="../images/1.jpg" />

(절대경로 방식)

<img src="/images/1.jpg" />

** 다른 사이트에 있는 이미지

<img src="http://www.abc.com/images/1.jpg" />

5) 링크를 이미지에 줄 수 있다. 이 경우, 이미지에 border="0"속성을 반드시 부여한다.

<a href="#><img src="1.jpg" border="0" /></a>

6) 제목을 표시하기 위한 헤드라인 태그

<h1>첫째 수준의 제목</h1>
<h2>둘째 수준의 제목</h2>
<h3>셋째 수준의 제목</h3>
<h4>넷째 수준의 제목</h4>
<h5>다섯째 수준의 제목</h5>
<h6>여섯째 수준의 제목</h6>

6) 목록을 정의하는 태그
** 순서 없는 목록

<ul>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
 </ul>

** 순서 있는 목록

 <ol>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
 </ol>

연습문제

아래 화면과 같이 작성해 보세요.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>자기소개</title>
</head>

<body>
    <div>
        <div>
            <h1>자기소개</h1>
        </div>
        <div>
            <img 
src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif" border="0" />
        </div>
        <div>
            <ul>
                <li>
                    이름: 이광호
                </li>
                <li>
                    나이: 19
                </li>
                <li>
                    취미: 사진
                </li>
                <li>
                    전화번호: <a href="tel:01028674232">010-2867-4232</a>
                </li>
                <li>이메일: 
<a href="mailto:hoya4232@gmail.com">hoya4232@gmail.com</a></li>
                <li>URL: 
<a href="http://hoyanet.pe.kr">http://hoyanet.pe.kr</a></li>
            </ul>
        </div>        
    </div>
</body>
</html>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS핵 정리

☞호야☜ — Mon, 21 Nov 2011 14:49:46 +0900

CSS핵의 기본에 대해서 잘 정리된 포스팅이 있어서 소개합니다.
원문의 URL은 http://blog.naver.com/preserde/130021317266 입니다.

브라우저마다 HTML렌더링하는 방식이 조금씩 차이가 나고, 때로는 버그가 존재하는 관계로(망할 IE) 모든 CSS 코드가 모든 웹브라우저에서 똑같이 보이지 않습니다. 따라서 이러한 특성을 이용하여 특정 브라우저를 제외하거나, 특정 브라우저에서만 CSS를 적용하는 기법을 CSS 핵(Hack) 이라고 부릅니다.

그래서 문법적으로 맞지 않거나, 특정 브라우저에만 적용되는 비표준인 경우가 많기 때문에 이러한 CSS핵은 어쩔 수 없는 경우가 아니면 사용하지 않아야 합니다. 또한, 단순히 눈앞의 문제만을 해결하기 위해 핵을 사용하면 나중에 페이지를 수정하거나 브라우저의 버전이 올라갈 때에 문제가 생기는 경우도 있구요.

CSS핵은 이런게 있다는 것도 알아두고, CSS핵을 사용하기 이전에 근본적으로 디자인을 수정하거나 다른 표준 태그로 해결하는게 좋을 듯 합니다.

웹표준 교과서에서 소개하는 CSS 핵 & 필터 안내 페이지

평소에 자주 사용하는 팁으로서의 CSS 핵 정리

Netscape 4 배제하기

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

Netscape 는 media 속성이 screen 이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함.

Win IE 3~4, Mac IE 4~4.5, Netscape 4 배제하기

@import url("/css/style.css")

Win IE 4, Mac IE 4 는 인용부호가 "가 아니면 읽지 못하는 버그 존재. IE 3과 Netscape 4는 @import 지원하지 않음.

Mac IE 5 배제하기

H1 { /* \*/ color:red; /* */ }

Holly 핵이라 하며, 주석 안의 내용이 적용되지 않음.

Win IE 4~5 배제하기

H1/**/ { color:red; }

셀렉터 뒤에 /**/ 삽입.

Win IE 4~5, Mac IE 4.5~5 배제하기

H1 { color/* */:red; }

속성과 속성값을 구분하는 콜론(:) 앞에 /* */ 삽입.

Win IE 4~6, Mac IE 4, Netscape 4 배제하기

html>body H1 { color:red; }

셀렉터 앞에 html>body 삽입.

Win IE 6 제외시키기

H1 { color /**/:red; }

속성과 속성값을 구분하는 콜론(:) 앞에 스페이스와 /**/ 삽입.

언더스코어 핵 (_)

H1 { _color:red; }

Win IE 4~6 에 적용.

닷핵 (.)

H1 { .color:red; }

속성 앞에 . 삽입. Win IE 6~7 에만 적용. 타 브라우저는 정확히 확인하지 못했습니다.
이 핵에 대해선 계속 확인중인데 블로그스피어나 여타 서적에는 전혀 언급이 없는 이상한 핵(?)입니다.

해시 핵(#)

H1 { #color:red; }

속성 앞에 # 삽입. Win IE 4~6, Mac IE 5, Opera 7, Mozilla계열, Firefox 에 적용.

스타 핵

*HTML H1 { color:red; }

셀렉터 앞에 *html 삽입. Win IE 4~6, Mac IE 4~5 에 적용.

스타7 핵

HTML*H1 { color:red; }

셀렉터 앞에 html* 삽입(공백없이). Win IE 5.5~6, Mac IE 5, Safari 에 적용.

xmlns 속성 핵

HTML[xmlns] H1 { color:red; }

셀렉터 앞에 속성 선택자를 삽입. Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용.

:root 가상클래스 핵

:root H1 { color:red; }

셀렉터 앞에 :root 가상클래스 삽입. Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용.

Tantek 박스모델 핵

H1 {
    width:500px;
    voice-family: ""}"";
    voice-family:inherit;
    width:400px;
}

Tantek Celik 이 고안한 유명한 박스모델 핵. Win IE 4~5, Mac IE 4, Netscape 4 에서는 voice-family 속성 이전의 스타일 적용. 그외의 브라우저는 뒤의 속성 적용.

단순 박스모델 핵

H1 {
    width:500px;
    w\idth:400px; //Win IE 6, Mac IE 5, Mozilla, Opera, Safari
    \width:450px; // only Win IE 5
}

속성의 첫번째, 두번째 글자 사이에 \를 삽입하면 Win IE 6, Mac IE 5, Mozilla, Opera, Safari 에 적용.
추가로 속성의 앞에 \를 삽입하면 Win IE 5 에만 적용.

IE 7, Opera 적용하기

*+html body H1 { color:red; }

셀렉터 앞에 *+html body 삽입. IE 7, Opera 8 이후 버전 적용. Opera를 배제한 IE7 전용으로 하고 싶을 때는 *+html>/**/body 로 Opera 전용 속성 기술.

IE 7 적용하기

*:first-child+html H1 { color:red; }

셀렉터 앞에 *:first-child+html 삽입. IE 7에만 적용되고, 이외의 브라우저는 앞에서 기술한 셀렉터의 속성 적용.

Win IE 6 패스필터(?)

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

Win IE 7 패스필터(?)

<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]-->

모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5, Opera 8 이하, Netscape 4 이하 제외)

@import "null?"{";
@import "/css/style.css";
@import "null?"}";

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안드로이드용 PhoneGap 1.2버전에서의 history.back() 처리

☞호야☜ — Fri, 18 Nov 2011 16:56:31 +0900

얼마전에 phonegap 1.2 버전이 나왔습니다.
새로운 버전이 나온다고 하는것은 꽤나 즐거운 일이죠. 더욱 강력해진 기능과 이전 버전에서의 미흡한 점에 대한 보완등이 기대되기 때문입니다.

이전 버전의 phonegap에서는 안드로이드에서 history.back(); 가 먹지 않는 문제가 발생했었습니다. phonegap javascript 소스를 살펴보니 잘못되어 있던 부분을 주석으로 막아서 해결할 수 있었습니다.

이번에 새로 나온 phonegap 1.2에서는 이 문제가 해결되기를 기대했습니다만, 여전히 문제는 해결되지 않았었습니다. 오히려 이전 버전과 소스의 내용도 달라져서 문제를 해결할 방법조차도 다시 찾아야 했습니다.

이전 페이지로 이동하는 방법

폰갭 1.2에서 제공하는 기본 방식으로 이전 페이지 이동부분을 찾아보니 navigator.app.backHistory(); 이라고 처리해 주면 되었습니다. 반면 history.back();는 전혀 동작하지 않더군요. 아마도 phonegap 내부에서 이 함수를 막아놓았나봅니다.

history.back(); 사용을 위한 스크립트 추가

phonegap내부에서 history.back()을 막아놓았다면 외부에서 history.back()을 재정의 해 주면 됩니다. 자바스크립트 재정의를 위해서 다음의 로직을 사용했습니다.

history.back = function() {
    navigator.app.backHistory();
}

그냥 저렇게만 해 놓으면 phonegap을 거치지 않고 직접 접속했을 경우에도 모두 적용이 되어 버리기 때문에 이번에는 phonegap이 아닌 다른 브라우저들에서 문제를 야기 시킬겁니다. 그래서 위의 소스를 phonegap의 deviceready 이벤트 안으로 넣었습니다.

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.addEventListener("deviceready", function() {
        history.back = function() {
            navigator.app.backHistory();
        }
    }, true);
}
</script>

위와 같이 처리한다면 history.back() 메소드는 phonegap과 phonegap이 아닌 모든 환경에서 적절히 이전 페이지로의 이동을 처리할 것입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

가볍고 빠른 이미지 뷰어 - Just Looking

☞호야☜ — Mon, 07 Nov 2011 17:39:18 +0900

맥용 기본 이미지 뷰어인 "미리보기" 프로그램은 이미지를 보여주는데 생각보다 많이 느립니다.

iPhoto를 사용하면 된다고 하시는 분들도 더러 계시지만, iPhoto보다 더 가벼운 이미지 뷰어 프로그램을 찾다가 알아낸 것이 바로 Just Looking이라는 프로그램입니다.

이미지를 표시하는데 있어서 기본 "미리보기" 유틸리티보다 더 빠른 속도를 보여주기 때문에 저는 이 프로그램을 사용하고 있습니다.

이미지 확대,축소 등의 기능도 꽤나 만족스럽군요.

개발자 홈페이지 : http://chipmunkninja.com/JustLooking
무료

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Mac용 TotalCommander 프로그램 - ForkLift2

☞호야☜ — Mon, 07 Nov 2011 17:32:54 +0900

Mac에서의 파일 관리는 Finder라는 기본 프로그램이 윈도우에서의 탐색기 역할을 합니다.

윈도우에서도 다수의 파일을 관리할 때, TotalCommander 같은 프로그램을 사용하듯이 맥에서도 비슷한 프로그램이 있습니다.

구글링을 해서 여러개의 프로그램을 추천받아서 이것저것 사용해 봤지만, 제가 사용해 본 것 중에서 가장 뛰어난 프로그램은 ForkLift라는 프로그램이였습니다.

꽤나 편리한 인터페이스를 보여줍니다. 다수 파일을 관리하고자 할 경우 가장 쓸만한 맥용 유틸리티라고 생각합니다.

웹사이트 : http://binarynights.com/
App Store : http://itunes.apple.com/kr/app/forklift/id412448059?mt=12
Single User Licence : $29.99

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android] Facebook 인증 기능 구현

☞호야☜ — Sat, 05 Nov 2011 17:43:17 +0900

이번 글에서는 PhoneGap의 ChildBrowser 플러그인을 사용하여서 Facebook인증을 구현해 보겠습니다. 이 글을 작성하는데, http://ujeani.wordpress.com/2011/09/09/006/ 의 포스팅을 참조하였음을 미리 밝힙니다.

PhoneGap의 ChildBrowser 플러그인 추가

이 포스팅의 내용을 이해하기 위해서는 PhoneGap의 ChildBrowser에 대한 이해가 필요합니다. Andorid용 ChlidBrowser 플러그인 추가에 대해서는 다음의 포스팅을 참조하시기 바랍니다

[Andorid] ChildBrowser 플러그인 설치하기

Facebook 연동키 발급받기

Facebook과 연동하기 위해서는 Facebook 개발자 사이트로부터 ClientID를 발급받아야 합니다. Facebook의 개발자 사이트 주소는 다음과 같습니다.

http://developers.facebook.com/?ref=pf

상단 메뉴에서 "앱"이라는 링크를 선택하면, 개발한 어플리케이션의 정보를 등록하고 키를 발급받을 수 있는 페이지가 나타납니다. 이 곳에서 어플리케이션을 등록하고 키를 발급 받습니다.

연동 절차

Facebook의 연동절차는 다음과 같습니다. (NativeApp 동일)

로그인 버튼을 눌렀을 때, 어플리케이션은 새로운 브라우저를 띄워서 Facebook에서 지정한 인증 페이지인 https://graph.facebook.com/oauth/authorize 에 정해진 파라미터를 가지고 접속합니다.
Facebook 아이디와 패스워드를 입력하고 “Log in” 버튼을 누르면 인증절차가 수행되고 인증이 완료되면 redirect_uri로 지정된 http://www.facebook.com/connect/login_success.html 페이지로 이동하는데 이때 childBrowser.onLocationChange=function(loc) {…}에서 페이지 이동을 체크하고 URL에서 access token 을 분리해 내는 것입니다.
앱은 인증키를 저장하고 원래의 화면으로 복귀합니다.

위 과정이 정리된 소스코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hello PhoneGap</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function() {
            $.mobile.autoInitializePage = false;
            document.addEventListener("deviceready", function(){
                $.mobile.initializePage();
            }, false);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script type="text/javascript">
    function doFbLogin() {
        var redirect_uri= http://www.facebook.com/connect/login_success.html;
        var client_id="163798480376592";
        var authorize_url  = https://graph.facebook.com/oauth/authorize?;
            authorize_url += "client_id=" + client_id;
            authorize_url += "&redirect_uri=" + redirect_uri;
            authorize_url += "&display=touch";
            authorize_url += "&type=user_agent";
            authorize_url += "&scope=publish_stream,read_stream,offline_access,";
            authorize_url += "user_about_me,user_location";
        window.plugins.childBrowser.showWebPage(authorize_url);
        window.plugins.childBrowser.onLocationChange=function(loc) {
            if (loc.indexOf(redirect_uri) == 0) {
                window.plugins.childBrowser.close();
                var fbCode = loc.match(/access_token=(.*)$/)[1];
                alert(fbCode);
            }
        }
    }
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Facebook Login</h1>
    </div>
    <div data-role="content">
        <a href="#" data-role="button" onclick="doFbLogin()">Login</a>
    </div>
</div>
</body>
</html>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

PhoneGap Plugin 설치하기

☞호야☜ — Sat, 05 Nov 2011 14:18:50 +0900

이번 포스팅은 phonegap의 플러그인에 대해서 잘 정리한 글이 있어서 소개하고자 합니다.
http://ujeani.wordpress.com/2011/09/07/004/ 페이지에 게시된 글입니다.
그 외에 phonegap에 대해서 좋은 자료가 많으니 꼭 한번 방문해 보시기 바랍니다.

PhoneGap에는 각 플랫폼의 고유한 기능을 javascript를 이용하여 사용할 수 있도록 다양한 plugin들이 개발되어지고 있다. PhoneGap의 로드맵에서 보면 2.0부터는 모든 기능을 plugin으로 대체하고 phonegap은 직접 지원하는 API가 아예 없는 형태의 플랫폼을 계획하고 있다.

현재도 다양한 plugin들이 개발되어 배포되고 있는데 각 플랫폼별 plugin들은 github의 plugin 부분을 살펴보기 바란다. 이 plugin 들을 이용해서 각 플랫폼이 고유하게 제공하는 기능들을 PhoneGap을 기반으로 하는 javascript로 접근, 활용이 가능하다.

각각의 plugin들을 어떻게 설치하고 사용하는지에 대해서는 해당 plugin의 설명을 읽어보아야하나 전반적인 설명들이 상세히 되어있지 않은 경우도 많고 현재의 phonegap 버전에 맞지 않는 경우도 많다. 구글을 통해 plugin 의 설치, 사용법을 검색해보면 plugin이 제대로 동작하지 않는 경우에 대한 질문이 많고 대답이 많지만 대부분 기본적인 설치상 유의할 점을 지키지 않아 동작이 안되는 경우가 많은 것 같다. 가장 기본적인 실수는

PhoneGap 의 버전 1.0.0에서 이전 버전(0.9.5 ?)의 plugin 설치 방식을 따라한 경우
Android/iPhone 에서 사용해야 할 js 파일이 다른 경우가 많은데 이걸 헷갈린 경우

인 것으로 생각된다.

Android 용 plugin 설치 방법

아래의 설명은 phonegap의 위키에 있는 플러그인 설치 방법을 번역, 요약한 것이다. 이후에 몇 개의 plugin을 설치, 활용하는 글에서 각 plugin을 설치하는 방법을 설명하겠지만 기본적으로 plugin을 어떻게 설치하는지에 대해서는 항상 이 설명을 참고하는 게 좋을 듯 하다.

Phonegap plugin은 대부분 native 코드와 Javascript 코드의 두 부분으로 되어 있다.

Android 프로젝트에서 plugin의 자바 소스 코드는 소스의 형태 또는 JAR 라이브러리 의 형태로 프로젝트에 포함되어야 한다. (./src 폴더와 ./libs 폴더에 추가되어야 하는데 각 plugin 설치를 설명하는 글에서 따로 설명하겠다.)

Plugin의 javascript 코드를 프로젝트의 ./assets/www/* 폴더에 추가하고 HTML 소스 코드에 링크시켜야 한다.

마지막으로 ./res/xml/plugins.xml 파일에 새로 추가된 plugin에 대한 정보를 추가하여야 한다. plugins.xml 파일은 Javascript에서 호출될 수 있는 plugin들에 대한 정보를 포함하고 있고 plugin class를 plugin 명에 매핑시키는 역할을 한다. plugins.xml에 새로운 plugin을 추가할 때 다음과 같은 형태가 될 것이다.

<plugins>
...
<plugin name="BatteryLevelPlugin" value="com.example.BatteryLevelPlugin" />
...
</plugins>

lugin의 name, value는 개발자가 알려줄 것이고 각 plugin 설명시에 설명하겠다. 만약 plugin 개발자가 이걸 제대로 알려주지 않았다면 수고스럽지만 plugin 의 소스코드 (*.js)에서 PhoneGap.exec(success, failure, “BatteryLevelPlugin”, “…”); 와 같이 호출되는 부분과 plugin source code를 참조하면 Java class 이름을 찾을 수 있다. (라고 설명하고 있지만 초보가 이거 어떻게 아나요? plugin마다 구글링을 열심히 해보는게 더 좋겠다!)

iPhone 용 plugin 설치 방법

아래의 내용은 phonegap의 위키에 있는 플러그인 설치 방법을 번역, 요약한 것이다.

Phonegap plugin은 대부분 native 코드와 Javascript 코드의 두 부분으로 되어 있다.
iOS에서 plugin의 Objective-C 소스 코드는 소스의 형태 또는 framework(? : 원문에도 물음표가 되어있다!!)의 형태로 프로젝트에 포함되어야 한다. (./plugins 폴더)
Plugin의 javascript 코드를 프로젝트의 ./www/* 폴더에 추가하고 HTML 소스 코드에 링크시켜야 한다.
마 지막으로 PhoneGap.plist파일에 새로 추가된 plugin에 대한 정보를 추가하여야 한다. (프로젝트의 Supporting Files 폴더에 있다.) PhoneGap.plist 파일은 Javascript에서 호출될 수 있는 plugin들에 대한 정보를 포함하고 있고 plugin class를 plugin 명에 매핑시키는 역할을 한다. PhoneGap.plist에 새로운 plugin을 추가할 때 다음과 같은 형태가 될 것이다.
```
<plist version="1.0">
<dict>
...
<key>Plugins</key>
<dict>
...
<key>BatteryLevelPlugin</key>
<string>PGBatteryLevelPlugin</string>
...
</dict>
...
</dict>
</plist>
```
Plugin의 key, string은 개발자가 알려줄 것이고 각 plugin 설명시에 설명하겠다. 만약 plugin 개발자가 이걸 제대로 알려주지 않았다면 수고스럽지만 plugin 의 소스코드 (*.js)에서 PhoneGap.exec(success, failure, “BatteryLevelPlugin”, “…”); 와 같이 호출되는 부분과 plugin source code를 참조하면 Java class 이름을 찾을 수 있다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

드림위버를 사용한 PhoneGap + jQueryMobile 프로젝트 생성

☞호야☜ — Sat, 05 Nov 2011 13:29:28 +0900

드림위버 CS 5.5에서 가장 매력적인 부분은 아마도 모바일에 대한 지원의 강화가 아닐까 생각됩니다. 이곳저곳 웹 서핑을 하다 보니 Adobe사에서 PhoneGap을 인수했다는 소식도 들립니다. (폰갭 사이트에서 확인 가능합니다.)

앞으로 드림위버는 스마트폰 디바이스로까지 그 영역을 점차 넓혀 나갈겁니다.
이 포스팅에서는 드림위버를 통한 PhoneGap 프로젝트 생성을 알아보겠습니다.

드림위버의 Site생성

우선 드림위버에서 프로젝트의 개념을 갖는 사이트라는 것을 생성해야 합니다. 드림위버에서의 Site생성 방법은 다음의 포스팅을 참조하시기 바랍니다.

드림위버 CS 5.5를 이용한 jQueryMobile 프로젝트 만들기

드림위버의 SDK 설정

드림위버에서 Android와 iPhone용의 PhoneGap 어플리케이션을 개발하기 위해서는 각 플렛폼의 SDK를 연결해 주어야 합니다.
윈도우 환경에서는 Android밖에 처리할 수 없습니다. iOS를 고려하신다면, Mac OS기반에서 작업하셔야 합니다.
우선, Android SDK를 적절한 디렉토리에 다운로드 받아 놓습니다. 맥의 경우 XCode를 (기본경로로) 설치해 놓습니다.

SDK가 준비되었다면, 드림위버의 "Site > Mobile Applications > Config Application Framework..." 메뉴를 차례로 선택합니다.

아래 화면과 같은 창이 나타나면, Android와 iOS용 SDK의 경로를 지정해 줍니다.

PhoneGap이 적용된 새로운 HTML 문서의 생성

jQuery Mobile 기반의 WebPage를 생성하는 방식과 마찬가지로, "File > New" 메뉴를 선택하신 후에, "Page from Sample > Mobile Starters > jQuery Mobile (PhoneGap)" 항목을 차례대로 선택합니다.

"Configure Application Framework"가 정상적으로 셋팅이 되어 있다면, 드림위버는 새로운 문서를 저장할 때, Phonegap.js라는 파일을 사이트 루트에 함께 복사해 넣을 것입니다.

PhoneGap을 적용한 NativeCode 프로젝트의 설정

드림위버를 통해서 PhoneGap 프로젝트를 만들면, 각 프레임워크별로 빌드를 수행할 수 있습니다.
빌드를 수행하기에 앞서 드림위버는 자동으로 Native Code의 Project를 생성합니다.
그 프로젝트에 대한 정보를 설정해야 하는데, "Site > Mobile Applications > Application Settings..." 메뉴에서 수행할 수 있습니다.

해당 메뉴가 열리면, 프로젝트의 Bundle ID (패키지명), Application Name (프로그램 명), Auther Name (배포자 명), Icon Image (아이콘 용 png 이미지), SnapShout (인트로 화면 png이미지) 등을 지정해 줍니다. 재미있는 점은 안드로이드의 경우 별도의 에뮬레이터를 생성하지 않았더라도, 드림위버에서 자동으로 하나의 에뮬레이터를 만들어 준다는 점입니다.

이미지 파일의 경우에는 반드시 확장자가 png여야 하며, WebProject의 root폴더 (여러분이 만드신 사이트 루트폴더) 의 하위에 위치할 수 없습니다. 만약 이미지의 사이즈가 적절하지 않다면, 드림위버는 자동으로 이미지를 적절히 변환해 줄 것입니다.

프로젝트의 빌드

HTML페이지의 작업이 끝나면, 빌드를 해야 합니다.
이 빌드는 Android와 iSO별로 수행합니다.

드림위버에서 "Site > Mobile Applications > Build > Android (혹은 iPhone, iPad) 를 선택하면, 드림위버는 자동으로 각 플렛폼별 Native Code Project를 생성하고 빌드해 줍니다.

"Site > Mobile Applications > Build and Emulate > 플랫폼이름" 메뉴를 선택하면 빌드 후에 에뮬레이터까지 띄워서 자동으로 보여주는 것을 알 수 있습니다.

하지만...

분명히 이전 버전의 SDK까지는 잘 동작을 합니다만, 드림위버 CS 5.5가 출시된 이후에 iOS SDK는 버전5로 업그래이드를 했고, Android SDK는 아이스크림을 출시하면서 r15로 버전업을 했습니다. 최신 버전의 SDK들을 적용한 경우 제 환경에서는 빌드에 실패하는 결과를 보였습니다.

분명히 프로젝트는 잘 만들어 지고, 이 프로젝트 파일을 이클립스나 XCode에서 불러서 실행해 보면 이상이 없습니다. 아마도 SDK들의 변경사항을 드림위버가 잘 인지하지 못하는 것 같습니다.

jQueryMobile의 경우 훌륭하게 드림위버에서 지원을 해 주었지만, PhoneGap을 사용한 안드로이드 SDK와의 연동이나 iOS SDK의 연동은 제가 테스트한 MAC OS기반에서 안드로이드 최신 버전 (r15)와 iOS SDK최신버전 (iOS 5) 기반에서는 드림위버가 빌드를 정상적으로 수행하지 못하는 결과를 보여주었습니다.

네이티브 코드에 대한 부분까지 드림위버에게 기대를 한다는 것은 어찌 보면 어불성설일지도 모릅니다. 빠르게 버전업이 되는 개발 SDK의 최신버전들을 모두 지원할 수 있을 것이라는 생각도 들지를 않구요... 제 생각에 PhoneGap의 적용은 직접 NativeCode를 사용해서 처리하는 것이 더 좋다고 생각됩니다.

번거로운 프로젝트 셋팅이라도 자동화 해 준다는것이 어딥니까?

이제... 즐깁시다~!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

드림위버CS5.5로 jQueryMobile과 PhoneGap기반의 프로젝트를 위한 버전업

☞호야☜ — Sat, 05 Nov 2011 11:44:04 +0900

jQueryMobile을 활용한 웹앱을 개발하기 위한 적절한 툴을 위한 고민을 상당히 오래 한 것 같습니다.

강의를 진행하는 도중에는 에디트 플러스를 사용하곤 했지만, PC의 OS를 전적으로 MAC으로 전향하고 나서는 Editplus는 사용할 길이 없었죠. 그러던 중, Coda라는 툴을 알게 되어서 사용해 보았지만, 어딘지 모르게 저에게는 맞지 않는것 같았습니다.

Aptana Studio라는 이클립스 기반의 훌륭한 툴이 있지만, 어디까지나 코딩 기반의 작업만으로 진행해야 한다는 리스크는 쉽사리 선택을 결정할 수 없게 머뭇거리게 하는 요소였습니다.

그러던 중, 드림위버 CS 5.5가 jQueryMobile과 Phonegap을 지원한다는 이야기를 듣고 자료를 찾아서 한번 진행해 보기로 했습니다.

하지만, 이 글을 쓰는 시점에서 jQueryMobile은 RC2가 릴리즈되었고, phonegap은 1.1.0이 릴리즈 되었는데, 드림위버에 탑재된 버전은 jQueryMobile의 경우 Alpha 3, phonegap의 경우에는 0.9.7이 기본으로 탑재되어 있어, 최신 버전으로 버전업을 해야 할 필요가 있었습니다.

jQueryMobile의 경우 훌륭하게 드림위버에서 지원을 해 주었지만, PhoneGap을 사용한 안드로이드 SDK와의 연동이나 iOS SDK의 연동은 제가 테스트한 MAC OS기반에서 안드로이드 최신 버전 (r15)와 iOS SDK최신버전 (iOS 5) 기반에서는 드림위버가 빌드를 정상적으로 수행하지 못하는 결과를 보여주었습니다.

네이티브 코드에 대한 부분까지 드림위버에게 기대를 한다는 것은 어찌 보면 어불성설일지도 모릅니다. 빠르게 버전업이 되는 개발 SDK의 최신버전들을 모두 지원할 수 있을 것이라는 생각도 들지를 않구요... 제 생각에 PhoneGap의 적용은 직접 NativeCode를 사용해서 처리하는 것이 더 좋다고 생각됩니다.

드림위버 CS 5.5의 설치와 실행

사실 이건 각자의 재량에 달린것 같습니다. 맥용이건 윈도우용이건 각자 알아서 구입을 하시건... 아니면 어둠의 경로를 찾아 보시건... 저요? 비밀입니다. 후훗...

드림위버 CS 5.5에 내장된 jQueryMobile의 버전 올리기

드림위버 CS 5.5에는 기본적으로 jQueryMobile alpha 3버전이 탑재되어 있습니다. 하지만 지금 이 글을 쓰는 시점에서 jQuery Mobile의 가장 최신 버전은 RC 2입니다. 드림위버에 내장된 jQuery Mobile의 버전을 최신버전으로 판올림 해 보겠습니다.

먼저 jQueryMobile사이트에서 jQuery Mobile 최신버전과 jQuery 라이브러리를 다운로드 받습니다. (http://www.jquerymobile.com/download)

이제 드림위버에 내장된 라이브러리 파일들을 변경해 주어야 합니다.

Windows에서의 영문버전(English)의 jQuery Mobile 경로 :
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\configuration
\Third Party Source Code\jquery-mobile

Windows에서의 한국어버전(Korean)의 jQuery Mobile 경로 :
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\ko_KR\Configuration
\Third Party Source Code\jquery-mobile

Mac에서의 영문버전(English)의 jQuery Mobile경로:
/Applications/Adobe Deamweaver CS 5.5/Third Party Source Code/jquery-mobile

자신의 시스템환경에 맞는 경로로 이동한 후에, 그 안의 파일들을 제거하고 새로이 jQuery웹사이트에서 다운로드한 jQuery 파일과 jQuery Mobile 파일을 복사해 줍니다.

드림위버 탬플릿의 수정

드림위버로 새로운 문서를 만들면 불러와 지게 되는 템플릿 파일들이 참조하는 스크립트 파일명들을 위에서 복사해 준 파일이름으로 변경해야 합니다.

드림위버의 jQuery Mobile페이지의 문서 템플릿은 다음과 같은 경로에 위치합니다.

Window에서의 영문버전(English)의 jQuery Mobile Template 경로 :
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\configuration\BuiltIn\Mobile Starters

Window에서의 한국어버전(Korean)의 jQuery Mobile Template 경로 :
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\ko_KR\Configuration\BuiltIn\Mobile Starters

Mac에서의 영문버전(English)의 jQuery Mobile Template 경로 :
/Applicaitons/Adobe Dreamweaver CS5.5/Configuration/BuiltIn/Mobile Starters

위의 경로로 이동하면 다음의 세 개의 파일이 존재합니다.

jQueryMobileLocalMultiPage.htm
jQueryMobileMultiPage.htm
jQueryMobilePhoneGapMultiPage.htm

세 파일 모두 6~8라인에 다음과 같은 구문이 있습니다.

<link href="../../Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="../../Third Party Source Code/jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="../../Third Party Source Code/jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>

위 구문에서 참조하고 있는 스크립트와 CSS 파일의 이름을 위에서 복사해준 파일의 이름으로 변경합니다. 현재 시점에서 최신버전인 RC2를 적용한 결과는 아래와 같습니다.

<link href="../../Third Party Source Code/jquery-mobile/jquery.mobile-1.0rc2.min.css" rel="stylesheet" type="text/css"/>
<script src="../../Third Party Source Code/jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Third Party Source Code/jquery-mobile/jquery.mobile-1.0rc2.min.js" type="text/javascript"></script>

안드로이드용 PhoneGap의 Upgrade

PhoneGap 라이브러리를 http://www.phonegap.com에서 다운로드 받아, 압축을 풀어 둡니다.
압축을 푼 PhoneGap 라이브러리안의 Android 폴더안에 보면 다음의 두 파일이 있습니다.

phonegap-1.1.0.jar
phonegap-1.1.0.js

이 두개의 파일을 드림위버의 라이브러리 참조 폴더로 복사해 넣어야 합니다.
두개의 파일을 각각 다음과 같은 경로에 동일한 파일명으로 덮어 씌웁니다.

Windows에서의 경로 (모든 버전 동일)

phonegap-1.1.0.jar
C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\configuration\NativeAppFramework\DWPhoneGap\android\PhoneGapApp\libs\phonegap.jar

phonegap-1.1.0.js
C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\configuration\NativeAppFramework\DWPhoneGap\android\PhoneGapApp\assets\www\phonegap.js

Mac에서의 경로 (모든 버전 동일)

phonegap-1.1.0.jar
/Applications/Adobe Dreamweaver CS5.5/configuration/NativeAppFramework/DWPhoneGap/android/PhoneGapApp/libs/phonegap.jar

phonegap-1.1.0.js
/Applications/Adobe Dreamweaver CS5.5/configuration/NativeAppFramework/DWPhoneGap/android/PhoneGapApp/assets/www/phonegap.js

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android] PhoneGap 1.1 상에서 history.back();가 동작하지 않는 문제

☞호야☜ — Fri, 04 Nov 2011 23:16:56 +0900

안드로이드용 PhoneGap에서는 (아이폰도 마찬가지인지는 확인해 보지 않았습니다.) javascript의 history.back()가 동작하지 않습니다.

외국사이트를 뒤져서 겨우 해결방법을 찾아서 소개합니다.

안드로이드용 phonegap-1.1.0.js 파일의 1277라인을 보면 다음과 같은 부분이 있습니다.

PhoneGap.addConstructor(function() {
    navigator.app = new App();
    navigator.app.origHistoryBack = window.history.back;
    window.history.back = navigator.app.backHistory;
});

위 코드를 다음과 같이 주석처리 합니다. (아래 두줄만...)

PhoneGap.addConstructor(function() {
    navigator.app = new App();
    // navigator.app.origHistoryBack = window.history.back;
    // window.history.back = navigator.app.backHistory;
});

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

드림위버 CS 5.5를 이용한 jQueryMobile 프로젝트 만들기

☞호야☜ — Fri, 04 Nov 2011 22:11:34 +0900

다들 Dreamweaver CS 5.5가 좋다고 하길래 호기심에 한번 설치를 해 보고 프로젝트를 만들어 보았습니다.
Dreamweaver 4 이후에 Adobe로 인수된 후, 그동안 이렇다할 특별함을 보여주지 못했던 Dreamweaver가 이번에는 정말 대박 사고 하나 쳤습니다.

LiveView라는 기능을 사용해서 실시간으로 페이지의 모습을 그대로 확인하면서 jQuery Mobile의 페이지를 작업할 수 있게 되었습니다.

드림위버 프로젝트의 시작

드림위버를 실행한 후에는 원활한 작업을 위해서 Site를 생성해야 합니다. 드림위버에서의 Site라는 개념은 다른 개발툴에서 이야기하는 프로젝트의 단위라고 생각하시면 됩니다.

사이드를 만들기 위해서는 드림위버의 메뉴상에서 Site > New Site를 클릭하면 됩니다.
아래와 같은 화면이 나타나면, 사이트 이름과 사이트의 root 폴더를 지정해 줍니다. 사이트의 이름이 프로젝트 명에 해당하는 것이고, 사이트의 루트 폴더가 프로젝트 디렉토리가 되는 것입니다.

새로운 HTML페이지의 생성

드림위버를 처음 실행시키면 화면 중앙에 다음과 같은 창이 나타납니다. 이 창의 가운데줄의 맨 마지막 항목인 Other를 선택합니다.
아래와 같은 창이 보이지 않을 경우 File메뉴에서 New 항목을 선택해도 동일합니다.

위의 화면에서 More 항목을 선택하거나 "File > New"메뉴를 선택하면 아래와 같이 "New Document"대화상자가 타나납니다.

화면 왼쪽의 "Page from Sample"항목을 선택한 후에, 차례대로 오른쪽으로 옮겨가면서 "Mobile Starters"와 "jQuery Mobile (Local)을 선택합니다.

jQuery Mobile 항목중에 CDN, Local, PhoneGap이라는 항목이 각각 있으며, 각 항목의 의미는 다음과 같습니다.

CDN - jQuery Mobile을 사용하는데 필요한 JavaScript 파일과 CSS 파일을 jQuery Mobile 서버로 부터 참조하는 것을 의미합니다.
Local - jQuery Mobile을 사용하는데 필요한 JavaScript 파일과 CSS 파일을 내 프로젝트 안에 복사하는 것을 의미합니다.
PhoneGap - 작성된 HTML Page (WebApp)을 PhoneGap이라는 컨테이너로 감싸서 실재로 스마트폰에 설치 가능한 App형태로 구성하는 것을 의미합니다.

새로 페이지가 생성되면, 일단 다른이름으로 저장을 합니다. 저는 사이트 루트에 index.html이라는 이름으로 저장했습니다.
저장을 하는 과정에서 jQueryMobile스크립트와 CSS를 복사할 것인지 물어봅니다. 모두 복사합니다.

페이지 작업의 진행

새로운 페이지가 생성되면 다음과 같은 창이 나타납니다.

원래 jQuery Mobile은 Runtime시에 HTML내의 DOM 구조를 제어하는 라이브러리이기 땜문에 브라우저를 통해서 실행되기 전에는 위와 같이 나오는것이 지극히 정상입니다.
하지만, 이럴것이였다면 이렇게까지 드림위버를 소개할 이유가 없습니다.
드림위버의 새로워진 면모는 이제 부터 입니다.

소스편집창 상단의 "LiveView"라는 버튼을 누르면 Design창이 아래와 같이 실시간으로 jQuery Mobile의 결과를 보여줍니다.

소스 하이라이팅과 Code Assitance 기능은 기본입니다.

드림위버 화면 우측의 도구상자들 중에서 "Insert"라는 창의 드롭다운을 "jQuery Mobile"로 맞춰주면, jQuery Mobile에서 재공하는 기능들을 손쉽게 페이지에 추가할 수 있습니다.

iPhone 에뮬레이터로 확인해 봤더니 대박입니다.

이제... 즐깁시다!!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[안드로이드 UI] Activity를 팝업 Dialog창으로 띄우기

☞호야☜ — Wed, 02 Nov 2011 15:49:34 +0900

이번 프로젝트를 하면서 팝업창이 일반 Alert Dialog가 아닌, 직접 UI를 구현한 형식의 Dialog창이여야 했습니다.
AlertDialog.Builder 클래스를 사용해서 View를 넣어주는 방식도 있었지만, 문제는 Dialog창에서 프로그램 로직을 돌려야 할 경우 어떻게 처리해야 하는가에 대한 부분이였습니다.

예를 든다면 팝업창이 뜨면서 서버로부터 데이터를 받아와서 팝업창의 내용을 뿌려야 한다던가 하는 식의 처리였죠.

웹에서 자료를 찾다 보니 딱 제가 원하는 방식이 있어서 정리해 봅니다.

먼저 팝업으로 사용할 Activity를 하나 만들어야 합니다.
그리고 AndroidMenifest.xml에서 해당 클래스를 Activity로서 등록하는 Attribute에 android:theme="@android:style/Theme.Dialog" 라는 속성을 추가해 줍니다.

<ACTIVITY
	android:name="Activity 클래스 이름"
	android:theme="@android:style/Theme.Dialog"></ACTIVITY>

그런 다음 팝업창으로 동작할 해당 Activity 클래스의 소스파일에 onApplyThemeResource 라는 메소드를 재정의 해 줍니다.

@Override
protected void onApplyThemeResource(Resources.Theme theme, int resid, boolean first)
{
	super.onApplyThemeResource(theme, resid, first);
		
	// no background panel is shown
	theme.applyStyle(android.R.style.Theme_Panel, true);
}

이제 이 부모창에서 이 Activity를 Intent를 통해서 startAcvity() 메소드로 호출하면 팝업창으로서 동작합니다. 물론 페이지의 디자인이 화면의 전체 사이즈보다 작아야 하겠죠.

startActivityForResult() 메소드를 활용하면 팝업창으로 부터의 결과를 부보창이 받아볼 수 도 있게 됩니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[안드로이드 UI] 롤오버버튼 만들기

☞호야☜ — Wed, 26 Oct 2011 17:15:36 +0900

UI를 구성할 때, 그래픽이 적용된 버튼을 만들어야 할 경우가 있습니다.
이미지버튼의 src속성을 사용하고 백그라운드를 투명하게 처리하면, 선택되었을 때의 강조되는 느낌이 나타나지를 않게 되기 때문에 이럴 때는 selector라는 xml파일을 사용하게 됩니다.

예를 들어서 button_off.png 와 button_on.png 파일이 있다고 가정해 봅시다.

이 두개의 이미지 파일을 사용해서 롤오버 버튼을 만들어 보겠습니다.

일단 이 이미지파일들은 drawable-hdpi 폴더에 넣겠습니다.
이제 이 drawable-hdpi 폴더에 xml파일을 하나 추가하겠습니다. (drawable에 반드시 이미지 파일만 있어야 하는 것은 아니라는 것을 이번에 알았습니다. (__);; )

다음의 형식에 맞춰서 xml파일을 만들고, 파일 이름을 button_bg.xml 이라고 지정하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="false" android:state_pressed="true"
        android:drawable="@drawable/button_on" />
    <item android:drawable="@drawable/button_off" />
</selector>

이제 버튼 컨트롤의 background 속성에 저 XML파일의 id값을 지정해 주면 됩니다.

Button btn = new Button(getApplicationContext());
btn.setBackgroundDrawable(R.drawable.button_bg);

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

JQM + PhoneGap 작업시 두 라이브러리의 초기화 처리

☞호야☜ — Mon, 24 Oct 2011 19:09:27 +0900

jQuery Mobile은 어플리케이션이 모바일 환경에 최적화되도록 자동으로 HTML의 상당 부분을 변경하거나 개선합니다. 이러한 jQuery Mobile의 자동 최적화는 대부분의 모바일 어플리케이션에서 유용한 것이지만 어떤 특별한 경우에는 필요치 않거나 오히려 없는 편이 더 나을 수도 있습니다. jQuery Mobile은 이런 상황을 감안해 기본 설정의 주요 부분을 재정의할 수 있게 지원합니다.

PhoneGap은 HTML파일을 읽어들이면서 HTML문서에서 참조하도록 정의된 phonegap-1.1.0.js 라는 파일을 찾습니다. 그리고 해당 파일이 정상적으로 포함된 경우 deviceready 라는 이벤트를 발생시킵니다.

이 두 라이브러리가 서로 각자 초기화가 완료된 후에야 각 라이브러리에서 제공하는 모든 기능을 충분히 활용할 수 있게 됩니다. 하지만 이 두 라이브러리의 초기화 과정에서 서로 충돌이 발생해서 둘중 한가지는 충분히 초기화 되기 이전에 페이지가 사용자에게 노출되어 에러를 발생하게 하는 원인이 됩니다.

PhoneGap의 초기화 이벤트 처리하기

앞에서 이야기 했듯이 PhoneGap은 deviceready라는 이벤트를 HTML문서가 초기화 되면 발생시킵니다.

HTML파일에서는 다음과 같이 PhoneGap의 초기화 이벤트를 처리할 수 있습니다.

<script src="phonegap-1.1.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function(){
    // 초기화에 필요한 수행
}, false);
</script>

jQuery Mobile의 초기화 수행

jQuery Mobile에서는 jQuery Mobile이 초기화 되기 이전에 필요한 기본 처리들을 충분히 수행한 후에 초기화 할 수 있도록, 자동 초기화를 중지시키고 수동으로 초기화하는 기능을 제공하기 위해서 jQuery Mobile이 초기화 되기 이전에 mobileinit라는 이벤트를 발생시킵니다.

이 mobileinit라는 이벤트를 구현해서 jQuery Mobile이 초기화를 하지 못하도록 막을 수 있습니다.

$.mobile.autoInitializePage 라는 속성에 false라는 값을 대입하면 됩니다.

<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.mobile.autoInitializePage = false;
});
</script>

이 mobileinit라는 이벤트는 jQuery 라이브러리가 로드되고, jQuery Mobile 라이브러리가 로드되기 전에 발생합니다. 따라서 위의 소스는 위치가 매우 중요해 지는데요, 다음과 같이 작성되어야 합니다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.mobile.autoInitializePage = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

이렇게 $.mobile.autoInitializePage = false; 속성을 지정해 주면 jQuery Mobile은 명시적으로 $.mobile.initializePage(); 라는 메소드를 호출하기 전까지 초기화를 수행하지 않습니다.

PhoneGap과 연관 없이 단순히 필요한 사전 처리만을 수행한 후에, jQuery Mobile을 수행하기 위해서는 다음과 같이 처리하도록 jQuery Mobile API에서 소개하고 있습니다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.mobile.autoInitializePage = false;
    // 초기화에 필요한 처리 (1)
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script src="phonegap-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 초기화에 필요한 처리 (2)
     $.mobile.initializePage();
});
</script>

만약 초기화 과정에서 jQuery Mobile에서 제공하는 $.mobile 이라는 객체의 기능을 사용해야 한다면, 초기화 처리는 (2)번 부분에 기술되어야 하며, 그렇지 않은 경우는 (1)과 (2) 원하는 곳에 넣으면 됩니다. 처음에는 $.mobile.initializePage(); 를 mobileinit 이벤트 함수 안에서 호출했더니 메소드를 찾지 못한다면에 에러가 났었습니다.

moibleinit 이벤트에서 deviceready 이벤트 처리

jQuery Mobile과 phonegap을 함께 초기화 하기 위해서는 jQuery Mobile의 mobileinit 이벤트에서 $.mobile.autoInitializePage = false; 를 지정하여 초기화를 중지시킨 다음에 이 부분에 phonegap의 deviceready 이벤트를 정의해 줍니다.

아래와 같이 처리해 주면, jQuery Mobile은 스스로의 초기화를 중지시킨 후에, phonegap의 deviceready 이벤트가 발생할 때 까지 기다릴 겁니다.

$(document).bind("mobileinit", function() {
    $.mobile.autoInitializePage = false;
    document.addEventListener("deviceready", function(){
        // phonegap의 초기화가 완료된 후의 처리
    }, false);
});

deviceready 이벤트가 발생하여 phonegap의 초기화가 완료되면, 그 안에서 아직 수행되지 않은 jQuery Mobile의 초기화를 명시적으로 호출합니다.

<script src="phonegap-1.1.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
    $.mobile.autoInitializePage = false;
     document.addEventListener("deviceready", function(){
        $.mobile.initializePage();
    }, false);
});
</script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

샘플코드

아래 샘플은 위와 같은 초기화 방식을 적용하여, jQuery Mobile에서 phoneGap의 deviceready 이벤트를 받아, 단말기의 기본 사양을 출력하도록 한 샘플입니다.

출력 값의 속성 이름을 알기 위해서 phonegap의 샘플 코드를 참조했으며, 출력값을 inset-listview에 넣었습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hello PhoneGap</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
    <script src="phonegap-1.1.0.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function() {
            $.mobile.autoInitializePage = false;
            document.addEventListener("deviceready", function(){
                $.mobile.initializePage();
                document.getElementById("platform").innerHTML = device.platform;
                document.getElementById("version").innerHTML = device.version;
                document.getElementById("uuid").innerHTML = device.uuid;
                document.getElementById("name").innerHTML = device.name;
                document.getElementById("width").innerHTML = screen.width;
                document.getElementById("height").innerHTML = screen.height;
                document.getElementById("colorDepth").innerHTML = screen.colorDepth;
            }, false);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>PhoneGap Init</h1>
    </div>
    <div data-role="content">
        <ol data-role="listview" data-inset="true" data-theme="d">
            <li>Platform: <span id="platform"> &nbsp;</span></li>
            <li>Version: <span id="version"> &nbsp;</span></li>
            <li>UUID: <span id="uuid"> &nbsp;</span></li>
            <li>Name: <span id="name"> &nbsp;</span></li>
            <li>Width: <span id="width"> &nbsp;</span></li>
            <li>Height: <span id="height"> &nbsp;</span></li>
            <li>Color Depth: <span id="colorDepth"> &nbsp;</span></li>
        </ol>
    </div>
</div>
</body>
</html>

실행하면 아래와 같이 결과가 나옵니다. 안드로이드 (삼성 갤럭시S2)에서만 테스트 해 봤습니다.

혹시 iOS나 다른 폰에서 결과가 동일하지 않다면 피드백 주시면 감사하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Android] 인트로 화면을 포함한 PhoneGap 어플 만들기

☞호야☜ — Mon, 17 Oct 2011 15:40:48 +0900

iOS용의 PhoneGap을 처음 사용했을 때는 자동으로 인트로 화면까지 생성해 주는 것을 보고는 우와~ 좋다~ 라고 생각했었습니다. 하지만 안드로이드용 PhoneGap에서는 인트로 화면 없이 달랑 폰갭 화면만 보여주었습니다.

하나의 App을 만들면서 첫 페이지는 그 프로그램의 인상을 결정짓는 매우 중요한 역할을 합니다. 이번 포스팅에서는 안드로이드에서 PhoneGap을 활용한 App을 작업하면서 인트로 페이지까지 추가해 보겠습니다.

인트로 화면을 포함한 안드로이드 프로젝트의 작성

우선은 일반 안드로이드 프로젝트를 생성한 후에, 인트로 화면을 추가해야 합니다. 안드로이드에서 인트로 화면을 추가하는 방법은 다음의 포스팅을 참고하시기 바랍니다.

[안드로이드 GUI] 안드로이드 인트로화면 만들기

저는 MyHybrid 라는 이름의 프로젝트를 Android 2.1 기반으로 생성했으며, 여기에 위에서 소개한 포스팅의 내용대로 인트로 화면+로딩바+두번째 화면을 추가했습니다.

두번째 화면은 PhoneGap을 적용할 것이기 때문에 레이아웃 XML은 필요지 않았으며, 클래스 이름은 MyPhoneGapActivity 라고 했습니다.

PhoneGap 라이브러리의 추가

이제 MyHybird 프로젝트에 PhoneGap 라이브러리를 추가하고 사용하기 위한 준비를 진행합니다.
PhoneGap을 사용하기 위한 JAVA 소스는 두번째 화면에 해당하는 MyPhoneGapActivity 파일에 작성했습니다.

PhoneGap 라이브러리를 추가하기 위한 방법은 아래의 포스팅을 참고하시기 바랍니다.

[Android] 안드로이드 환경에서의 PhoneGap 프로젝트 진행

프로젝트 구성이 완료되면 아래와 같은 상태가 됩니다.

이 두가지 내용을 하나의 프로젝트로 종합하여서 처리하면 안드로이드에서 폰갭을 사용한 App의 기본 형태가 완성됩니다. 이제 그 다음은 HTML을 얼마만큼 잘 활용해서 사용자 경험을 구현할지에 대한 부분이겠지요...

이 예제의 샘플코드는 아래의 링크에서 다운로드 받으시면 됩니다.

MyHybrid.zip

이제 즐기시길 바랍니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.