부루의 코드 갤러리: 2013

2013년 12월 12일 목요일

ptty나 telnet으로 접속한 후

-tomcat 정지
./tomcat/bin/shutdown.sh

-tomcat 시작
./tomcat/bin/startup.sh

[오류] Unable to process Jar entry [com/mchange/Debug.class] from Jar

심각: Unable to process Jar entry [com/mchange/Debug.class] from Jar [jar:file:/D:/javaide/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/taxi/WEB-INF/lib/c3p0-0.9.1.1.jar!/] for annotations
java.util.zip.ZipException: invalid LOC header (bad signature)
at java.util.zip.ZipFile.read(Native Method)
at java.util.zip.ZipFile.access$1400(ZipFile.java:56)
at java.util.zip.ZipFile$ZipFileInputStream.read(ZipFile.java:679)
at java.util.zip.ZipFile$ZipFileInflaterInputStream.fill(ZipFile.java:415)
at java.util.zip.InflaterInputStream.read(InflaterInputStream.java:158)
at java.io.BufferedInputStream.fill(BufferedInputStream.java:235)
at java.io.BufferedInputStream.read(BufferedInputStream.java:254)
at java.io.DataInputStream.readInt(DataInputStream.java:387)
at org.apache.tomcat.util.bcel.classfile.ClassParser.readID(ClassParser.java:237)
at org.apache.tomcat.util.bcel.classfile.ClassParser.parse(ClassParser.java:114)
at org.apache.catalina.startup.ContextConfig.processAnnotationsStream(ContextConfig.java:2118)
at org.apache.catalina.startup.ContextConfig.processAnnotationsJar(ContextConfig.java:1994)
at org.apache.catalina.startup.ContextConfig.processAnnotationsUrl(ContextConfig.java:1960)
at org.apache.catalina.startup.ContextConfig.processAnnotations(ContextConfig.java:1945)
at org.apache.catalina.startup.ContextConfig.webConfig(ContextConfig.java:1319)
at org.apache.catalina.startup.ContextConfig.configureStart(ContextConfig.java:878)
at org.apache.catalina.startup.ContextConfig.lifecycleEvent(ContextConfig.java:376)
at org.apache.catalina.util.LifecycleSupport.fireLifecycleEvent(LifecycleSupport.java:119)
at org.apache.catalina.util.LifecycleBase.fireLifecycleEvent(LifecycleBase.java:90)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5322)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1559)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1549)
at java.util.concurrent.FutureTask.run(FutureTask.java:262)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at java.lang.Thread.run(Thread.java:724)

위와 같은 에러 메시지를 만나게 된다면.....

그래서 이런경우에 Maven clean, Project clean, Server clean 을 하고 server를 다시 설치해도 해결이 되지 않았다.

구글링으로 찾아 보니, clean을 하는 도중에 jar파일이 깨지는 경우가 발생한다고 한다.
그래서 해당 jar파일을 다운받아서 다시 넣어주면 간단하게 해결할수 있다.!!

2013년 12월 11일 수요일

Cordova 3.2 에서 FacebookConnection plugin 등록과 테스트까지

Adobe Phonegap Build의 Plugin 에서 FacebookConect Plugin 을 찾아서들어가면 repository주소가 있다고 그러면 github로 가게 될것이다.
https://build.phonegap.com/plugins

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

이제 repository 주소를 복사해서
커맨드창을 열어서 plugman을 이용해서 FacebookConnect plugin을 설치해 준다.

$ plugman install --platform android --project c:\workspace\HellWorld --plugin https://github.com/phonegap-build/FacebookConnect.git --variable APP_ID=123345 --variable APP_NAME=Hello

plugin설치는 이것을 다된것이다. 이제는 테스트를 해볼 차례인데.

그전에 필요한 작업이 있다.

READ ME에 친절하게 설명이 되어 있지만 영어라서 너무 울렁 거린다.

Facebook 연동을 위해
https://developers.facebook.com
에서 개발자 등록을 해주고 앱등록을 해주어야 한다.

앱등록 할때 매우 주의해야 할 사항이 있다.
저는 이것때문에 1박2일을 쩔었습니다.
READ ME를 좀더 꼼꼼하게 보고 따라 했으면 안그랬을 것을 말입니다.

key hash를 등록하는 부분인데
Elipse에서 c:\Users\사용자이름\.android\debug.keystore 를 생성 하게 되는데,
이것을 openssl을 이용해서 hashkey 값을 받아서 등록을 해줘야 하는 하는데.

이때 openssl을 설치 해야 하는데 openssl이 문제였습니다.
window 64비트 이용자 같은 경우에는 0.9.8e , 0.9.8d 이 두개의 버전 중에 하나를 이용해야 합니다.
아니면 테스트 도중에 "Invalid android_key parameter.~~~ " 이런 에러를 만나실수 있습니다.

openssl 다운로드 받고 환경병수를 잡아 준다.
https://code.google.com/p/openssl-for-windows/downloads/list

이제 hash key를 생성할 준비가 다 된것이다.
생성하자.

$ keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

이렇게 치면 비밀번호를 입력하라고 한다. 이때 이클립스가 만들때 비밀번호를 android로 만들 었기 때문에 android를 입력해주면된다.
## 주의해야 할 것은 만약 비밀번호를 입력하라고 하지 않으면 무엇인가 잘못 된것이다. 키값을 주지만 잘된것 키 값이니 낚이지 말자!!!
오타를 확인해 보고 .android/debug.keystore가 있는지 확인해 보자.

이제 Sample폴더의 index.html 를 옮겨다 놓고 테스트 하면 된다.

Phonegap (Cordova) 3.2 프로젝트 만들고 플러그인 추가 하기

phonegap VS cordova VS adobe phonegap build ??????
: 원래의 이름은 phonegap 이고 apache제단으로 편입되면서 cordova라는 이름을 가지게 된것이고 폰갭을 이용하는데 있어서 많은 지식없이도 빌드를 쉽게할수 있도록 서비스를 제공해주는 곳이 adobe phonegap build 이다.
adobe phonegap build는 1개까지는 무료로 제공해주고 그 이후 부터는 유료다.

api 참고는 cordova 사이트에서 하는것을 추천 한다.
http://cordova.apache.org/docs/en/3.2.0/index.html

Cordova 설치
Cordova 설치서 부터 프로젝트 생성 플러그인 추가/삭제 까지 너무 친절하게 나와 있다.
영어를 거의 못하는 나조차도 명령어만 따라 쳐보고 감이 올 정도다.
아래를 참고 하면 더욱더 좋다.
http://cordova.apache.org/docs/en/3.2.0/guide_cli_index.md.html#The%20Command-Line%20Interface

Cordova를 설치하기 전에 필요한 준비물이 있다.
node.js 와 apache 제단은 ant가 필요하다.
http://www.nodejs.org/download/
node.js 를 다운받아 설치 해주고

http://ant.apache.org/bindownload.cgi
최신번전 압축파일을 받아 주고,
압축을 풀고 bin폴더를 환경변수에 잡아주도록 한다.

환경변수 잡는 방법은 따로 검색을 해보도록 한다.

이렇게 두가지를 다했다면 Cordova 설치 준비가 끝난 것이다.

Cordova는 2.x 버전 까지는 다운받아서 설치를 해야하지만 3.x버전 부터는 커맨트 창에서 명령어를 입력하는 방식으로 설치를 하게 된다.

#윈도우 사용자라면 sudo를 붙이지 않는다. 그리고 '$'는 입력하지 않는다.

Cordova 설치

$ sudo npm install -g cordova

프로젝트 생성

  $ cordova create hello com.example.hello HelloWorld
  $ cd hello

사용할 플랫폼 등록

    $ cordova platform add ios
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

$ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

빌드

  $ cordova build

플러그인 등록/삭제

$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation
$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.file-transfer

$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration

$ cordova plugin add org.apache.cordova.contacts
$ cordova plugin add org.apache.cordova.globalization
$ cordova plugin add org.apache.cordova.splashscreen
$ cordova plugin add org.apache.cordova.inappbrowser
$ cordova plugin add org.apache.cordova.console

$ cordova plugin rm org.apache.cordova.console
    $ cordova plugin remove org.apache.cordova.console

추가로 필요한 플러그인들은 필요에 따라 만들어서 꼽을수도 있고 다른 사람이 만들어 놓은 플러그인도 꼽아서 쓸수 있다.그것은 아래서 다시 알아 보자.

이제 Cordova 프로젝트가 만들어 졌으니 Android 프로젝트 만들어볼 차례다

이클립스에서 좀전에 생성된 hello 폴더로 들어가서 Android Applicatoin Project를 import하면 된다.

이제 이미 개발된 html / js / css 를 asset/www 폴더로 이동시키고,
res/xml/config.html 파일 안에서 index.html로 된부분을 원하는 시작페이지 경로로 바꿔 주기만 하면 된다.

plugman
Cordova 3.2버전에서는 plugman 이라는 것이 제공되는데 이것은 프로젝트 진행중에도 플러그인은 꼽았다 제거할수 있는 매우 유용한 툴이다.

설치

$ npm install -g plugman

plugin 등록 / 삭제

$ plugman install --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]
$ plugman uninstall --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]

<>는 와야할 것이고 [] 없어도 상관없는 것이다.
아래와 같이 작성하면된다.

$ plugman install --platform android --project c:\workspace\HellWorld --plugin org.apache.cordova.Device
$ plugman install --platform android --project c:\workspace\HellWorld --plugin https://github.com/phonegap-build/FacebookConnect.git --variable APP_ID=123345 --variable APP_NAME=Hello

위에서 보면 알수 있듯이github 주소로도 등록이 가능한데 이때 한가지 조건이 필욯다.
CLI 툴이 설치 되어 있어야 한다.
http://git-scm.com/downloads
CLI툴 중하나인 git-GUI 를 설치하면 에러 없이 git주소로도 plugin 등록이 가능해 진다.

## 추가적인 plugin이 필요한 경우
adobe phonegap build > plugin을 적극 활용하도록 하자 많은 플러그인들을 만날수 있다.

2013년 11월 30일 토요일

[참고] CSS 의 길이 단위 정리 참고 블로그

http://blog.kaludin.com/967864

최상위 엘리먼트: em

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

2013년 11월 25일 월요일

[참고] mobile 화면 height 여백 꽉 채우기 참고

http://goldbio.blogspot.kr/2012/04/jquery-mobile-content-window.html

위의 링크처럼 하면 전체 화면 싸이즈를 가져오기 때문에 폰갭에 올렸을 경우 화면이 맞지 않는 현상 발생.

$(window).width();
$(window).height();
를 이용하면 전체 화면 싸이즈가 아닌 사용하는 사이즈만 가져올수 있다.

2013년 11월 24일 일요일

[참고] 안드로이드 개발 테스트 빠른 애뮬레이터

http://www.kmshack.kr/347

2013년 11월 21일 목요일

[참고] JQuery Mobile 상하 swipe

JQuery Mobile에서 상하 swipe에 대해서 검색하다 StackoverFlow에서 올라온 답변에서 퍼옴.

(function() {
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
setup: function() {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;

function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};

// prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function(event, sourceEvent){
$.event.special[event] = {
setup: function(){
$(this).bind(sourceEvent, $.noop);
}
};
});

})();

[참고] 이클립스 유용한 플러그인 30

http://www.ajaxline.com/best-eclipse-plugins

2013년 11월 14일 목요일

[참고] UML툴 - StartUML

무료 UML툴

http://sourceforge.net/projects/staruml/files/staruml/5.0/

2013년 11월 13일 수요일

[참고] log4jsql

http://log4sql.sourceforge.net/index_kr.html
사용법
1.다운받은 zip파일을 압축을 풀고 log4sql.jar를 클래스 패스에 넣습니다.
2.commons-lang.jar파일을 다운받아서 클래스 패스에 넣습니다.
3.드라이버명을 다음과 같이 바꿉니다.

JDBC TYPE	Origin Your Driver Class	->	log4sql Driver Class
[ORACLE DRIVER CLASS]	'oracle.jdbc.drirver.OracleDriver'	->	'core.log.jdbc.driver.OracleDriver'
[MYSQL DRIVER CLASS]	'com.mysql.jdbc.Driver' or'org.gjt.mm.mysql.Driver'	->	'core.log.jdbc.driver.MysqlDriver'
[SYBASE DRIVER CLASS]	'com.sybase.jdbc2.jdbc.SybDriver'	->	'core.log.jdbc.driver.SybaseDriver'
[DB2 DRIVER CLASS]	'com.ibm.db2.jcc.DB2Driver'	->	'core.log.jdbc.driver.DB2Driver'
[INFOMIX DRIVER CLASS]	'com.informix.jdbc.IfxDriver'	->	'core.log.jdbc.driver.InfomixDriver'
[POSTGRESQL DRIVER CLASS]	'org.postgresql.Driver'	->	'core.log.jdbc.driver.PostgresqlDriver'
[MAXDB DRIVER CLASS]	'com.sap.dbtech.jdbc.DriverSapDB'	->	'core.log.jdbc.driver.MaxDBDriver'
[FRONTBASE DRIVER CLASS]	'com.frontbase.jdbc.FBJDriver'	->	'core.log.jdbc.driver.FrontBaseDriver'
[HSQL DRIVER CLASS]	'org.hsqldb.jdbcDriver'	->	'core.log.jdbc.driver.HSQLDriver'
[POINTBASE DRIVER CLASS]	'com.pointbase.jdbc.jdbcUniversalDriver'	->	'core.log.jdbc.driver.PointBaseDriver'
[MIMER DRIVER CLASS]	'com.mimer.jdbc.Driver'	->	'core.log.jdbc.driver.MimerDriver'
[PERVASIVE DRIVER CLASS]	'com.pervasive.jdbc.v2.Driver'	->	'core.log.jdbc.driver.PervasiveDriver'
[DAFFODILDB DRIVER CLASS]	'in.co.daffodil.db.jdbc.DaffodilDBDriver'	->	'core.log.jdbc.driver.DaffodiLDBDriver'
[JDATASTORE DRIVER CLASS]	'com.borland.datastore.jdbc.DataStoreDriver'	->	'core.log.jdbc.driver.JdataStoreDriver'
[CACHE DRIVER CLASS]	'com.intersys.jdbc.CacheDriver'	->	'core.log.jdbc.driver.CacheDriver'
[DERBY DRIVER CLASS]	'org.apache.derby.jdbc.ClientDriver'	->	'core.log.jdbc.driver.DerbyDriver'
[ALTIBASE DRIVER CLASS]	'Altibase.jdbc.driver.AltibaseDriver'	->	'core.log.jdbc.driver.AltibaseDriver'
[MCKOI DRIVER CLASS]	'com.mckoi.JDBCDriver'	->	'core.log.jdbc.driver.MckoiDriver'
[JSQL DRIVER CLASS]	'com.jnetdirect.jsql.JSQLDriver'	->	'core.log.jdbc.driver.JsqlDriver'
[JTURBO DRIVER CLASS]	'com.newatlanta.jturbo.driver.Driver'	->	'core.log.jdbc.driver.JturboDriver'
[JTDS DRIVER CLASS]	'net.sourceforge.jtds.jdbc.Driver'	->	'core.log.jdbc.driver.JTdsDriver'
[INTERCLIENT DRIVER CLASS]	'interbase.interclient.Driver'	->	'core.log.jdbc.driver.InterClientDriver'
[PURE JAVA DRIVER CLASS]	'org.firebirdsql.jdbc.FBDriver'	->	'core.log.jdbc.driver.PureJavaDriver'
[JDBC-ODBC DRIVER CLASS]	'sun.jdbc.odbc.JdbcOdbcDriver'	->	'core.log.jdbc.driver.JdbcOdbcDriver'
[MSSQL 2000 DRIVER CLASS]	'com.microsoft.jdbc.sqlserver.SQLServerDriver'	->	'core.log.jdbc.driver.MssqlDriver'
[MSSQL 2005 DRIVER CLASS]	'com.microsoft.sqlserver.jdbc.SQLServerDriver'	->	'core.log.jdbc.driver.Mssql2005Driver'

콘솔에서 확인해보면 쿼리가 출력되고 실행시간도 출력이 됩니다.
log4sql.jar commons-lang.jar

[퍼옴] http://jbluewing.tistory.com/92

2013년 11월 3일 일요일

[참고] Cross Domain 문제 해결 Jsonp 관련 블로그

http://warmz.tistory.com/739

2013년 10월 31일 목요일

[참고] MySlq 날짜 관련 함수 블로그

http://blog.daum.net/metamoi/13121024

2013년 10월 24일 목요일

2013년 10월 21일 월요일

[참고] Tmap 관련 블로그

http://blog.daum.net/slee.dooly/4

2013년 10월 18일 금요일

[참고] Google App Engine 웹호스팅 방법 참고 블로그

http://kimho.pe.kr/wordpress/?p=254

https://developers.google.com/appengine/docs/java/gettingstarted/installing

2013년 10월 17일 목요일

[참고] ajax cross domain 해결

http://webtn.tistory.com/entry/javascriptCross-Domain-%EA%B9%A8%EB%B6%80%EC%88%98%EA%B8%B0

필터 추가
"Access-Control-Allow-Origin"

@WebFilter("*")
public class AjaxFilter implements Filter {

@Override
public void destroy() {}

@Override
public void doFilter(
ServletRequest request,
ServletResponse response,
FilterChain next) throws IOException, ServletException {

HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "*");

next.doFilter(request, response);
}

@Override
public void init(FilterConfig arg0) throws ServletException {}

}

[참고] 크롬에서 모바일 화면으로 보기

http://musiclife.tistory.com/243

2013년 10월 16일 수요일

[12주차 4일] node.js

http://nodejs.org/

[12주차 4일] PhoneGap

http://phonegap.com/

node.js 설치후

powershell 에서
아래 명령어 입력해서 phonegap 설치한다

npm install -g phonegap

원하는 폴더에서 프로젝트 생성
phonegap create my-app

ant툴 필요
http://ant.apache.org/bindownload.cgi
다운 받고
환경변수 등록
D:\javaide\apache-ant-1.9.2\bin

cordova 설치
http://archive.apache.org/dist/cordova/

phonegap create hello com.java41.Hello

cd hello

cordova platform add android

[12주차 4일] 폰갭

[참고] 책모음

https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md

[참고] Backbone.js, AngularJS, Ember.js, KnockoutJS

[12주차 3일] Android

2013년 10월 14일 월요일

[참고] JSONP

자바스크립트를 다운받지 않는 곳과도 Ajax 통신을 할수 있는 기술

[서적추천] 자바스크립트 완벽 가이드

자바스크립트 완벽 가이드 (꼭! 사람 자바스크립트 바이블)
자바스크립트 코딩기법과 핵심 패턴
초고속 웹사이트 구축

[12주차 2일] JQuery - 기본 함수

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
// jQuery의 대부분의 함수가 리턴하는것은 앨리먼트가 아닌,
// 앨리먼트를 담은 배열이를 명심할것!!!!
// $("*"), $(".class"), $("h1").....
console.log($("*").length);
// jQuery에서 값을 설정하는 방법
// 1. 값을 직접준다.
//$('*').css('color', 'red');
//$('*').css('border', '1px blue solid');

// 2. 값을 리턴하는 함수를 준다.
/*
$("*").css("color", function(index) {
if ((index % 2) == 0)
return "red";
else
return "blue";
});
$("h1").css("border", "1px solid black");
*/

// 3. 속성명과 값을 객체에 포장하여 준다.
$("h1").css({
color: function(index) {
if ((index % 2) == 0)
return "red";
else
return "blue";
},
border: "1px solid black"
});
});
</script>
</head>
<body>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum</p>
<div>Lorem ipsum</div>
<div>
<div>
<p>Lorem ipsum</p>
</div>
</div>
</body>
</html>

[12주차 1일] JQuery - CDN 방식 라이브러리

[12주차 1일] JQuery - Compressed / Uncompressed

개발하는동안 uncompressed 버전을 쓰고
배포할때는 compressed 방법을 써라

매번 로드를 해야하기 때문에 용량이 적을 수록 성능이 좋아 진다

[참고] javascript 압축툴

http://javascriptcompressor.com/
http://jscompress.com/
http://refresh-sf.com/yui/

[12주차 1일] JQuery

2013년 10월 13일 일요일

[12주차 1일] Ajax의 URL Encoding

-URL Encoding

-ajax는 URL Encoding을 알아서 처리해 주지 않는다.

그리서 국내에서는 괜찮아도 해외에서는 깨질 가능성이 크다

[참고] Ajax를 이용한 파일 업로드

XMLHttpRequest로는 멀티파트를 처리할수 없다.
Google의 라이브러리를 사용해라!

[참고] JQuery 의 getter / setter

JQuery에서는 대부분의 메서드가 인자값이 하나면 getter로 사용되고
인자값이 한개 이상이면 setter로 사용되는 경우가 많다

[12주차 1일] Element에 원래 없던 속성을 추가할 때 권고하는 사항

앞에 "data-"를 붙이도록 한다.

예> $("<a>").attr("data-no", projects[i].no)

[참고] html5로 웹개발시 페이지분리 기준

기본적으로 윈도우 프로그램처럼 페이지 전환시에도 하나의 메인에서 내용만 바꿔주는 것을 기본으로 하되 불가피한 상황일 경우 페이지 분리하는것을 원칙으로 삼고 개발하면 좋을 듯 하다.

예를 들면 관리자 페이지라던지 로그인페이지 등등

[12주차 1일] 캐쉬되서 변경한것이 적용안 될때

브라우저 '새시크릿 창' 에서 테스트 하기

2013년 10월 10일 목요일

[11주차 5일] JQuery

[11주차 5일] Ajax - 비동기방식

많은 데이터를 출력해 줄때
사용자가 기다리는것을 지루하지 않게 하기위해서
산발적으로 그때그때 데이터를 받아서 처리해 주기 위해서 등장했다.

-5개의 상태

0 (uninitialized)
1 (loading)
2 (loaded)
3 (interactive)
4 (complete)

[11주차 4일] Ajax - 동기방식

2013년 10월 9일 수요일

[11주차 4일] JSON

[11주차 4일] Server에서 Client 분리

[11주차 4일] Ajax

2013년 10월 8일 화요일

[11주차 2일] Javascript - event

2013년 10월 7일 월요일

[11주차 2일] DOM

[11주차 2일] Javascript - Object

[11주차 2일] node.js

[11주차 2일] pulling, push

[11주차 1일] Javascript - function

2013년 10월 6일 일요일

[참고] mysql auto commit , safe update 설정

-- auto commit 조회
SELECT @@AUTOCOMMIT;
-- auto commit 설정
SET AUTOCOMMIT = FALSE;
commit;

-- safe udpate 조회
SELECT @@SQL_SAFE_UPDATES;
-- safe update 설정
SET SQL_SAFE_UPDATES = FALSE;
COMMIT;

[참고] mysql 쿼리 참고 블로그

http://blog.naver.com/PostView.nhn?blogId=stone08&logNo=130129024670

[11주차 1일] SQL

2013년 10월 3일 목요일

[10주차 5일] HTML5 - header, aside navi, sectoin, footer 태그

div태그중에서 의미 있는 것들에 의미를 부여한 태그.

- section
: 정보를 하나로 묶어 주는 것.

- nav 처리
: 네비게이션의 항목들은 <ul>태그를 사용 하도록 하고, 모양은 스타일로 변경해라.

2013년 10월 2일 수요일

[참고] log4j 사용 및 참고 블로그

http://changpd.blogspot.kr/2013/05/spring-lo4j.html

[10주차 3일] CSS - div태그로 테이블 만들

#tableContainer {
display: table;
border-spacing: 10px;
}

#tableRow {
display: table-row;
}

#drinks {
display: table-cell;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}

#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}

#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
vertical-align: top;
}

<div id="tableContainer">
<div id="tableRow">
<div id="drinks">
<h1>커피</h1>
<p>하우스 블랜드, $1.49</p>
<p>모카 카페 라떼, $2.35</p>
<p>카푸치노, $1.89</p>
<p>차이티, $1.85</p>
<h1>음료</h1>
<p>
헤드퍼스트 라운지에서 자랑스럽게 출시한 건강에 좋은 음료입니다.
</p>
<p>시원한 녹차, $2.99</p>
<p>차가운 산딸기 농축과즙, $2.99</p>
<p>블루베리 블리스, $2.99</p>
<p>노화방지용 크렌베리 블래스트, $2.99</p>
<p>차가운 차이맛 음료, $2.99</p>
<p>블랙 브레인 음료, $2.99</p>
</div>
<div id="main">
<h1>좋은 품질의 커피와 카페인</h1>
<p>
스타버즈 커피에서는 좋은 품질의 커피와 차를 통해 여러분에게 필요한 카페인을 채우는데
심혈을 기울이고 있습니다. 물론, 여러분이 맛있는 커피 한 잔과 그 맛의 추억을 깊이 간직하길 바라고
있습니다. 카페인 수치를 지속적으로 관리하고 최적화하는 회사는 저희 회사가 유일합니다.
잠깐 들러 커피한잔 하시거나, 새롭게 선보이고 있는 빈 머신 페이지를 통해 온라인으로 주문해서,
표준 카페인 섭취량을 채워줄 품질 좋은 스타버즈 커피를 맛보세요.
</p>
<p>
저희가 <em>카페인</em> 이라고 말했나요?
저희 회사는 흥미로운 연구를 수행하고 있는 <a href="http://buzz.wickedlysmart.com"
title="버즈에서 카페인에 대한 모든 내용을 읽어보세요">카페인 버즈</a>를 후원하고 있습니다.
최신 커피와 카페인 제품이 필요하시면 잠깐 들러 관련 제품을 구입하세요.
</p>
<h1>회사연혁</h1>
<p>
"사람, 계획, 커피 빈!" 멋스러운 사훈은 아니지만, 정말 좋은 커피를 만들었습니다.
스타버즈 CEO도 평범한 사람이며, 여러분도 이미 그의 계획을 알고 있을 것입니다. .
바로 구석구석에 스타버즈 매장을 세우는 것입니다.
</p>
<p>불과 몇 년만에 그는 자신의 계획을 실행에 옮겨, 오늘날 여러분은 어느 곳에서나 스타버즈 커피를 즐길 수 있습니다.
물론 올해의 가장 큰 뉴스는 스타버즈가 헤드퍼스트 독자들과 힘을 합쳐 스타버즈 웹 시연회를 개최한 것이죠.
이 시연회는 급속도로 성장하고 있고 새 고객들의 카페인 필요량을 충족시키는데 도움을 주고 있습니다.
</p>
<h1>스타버즈 커피 음료</h1>
<p>
저희 스타버즈에서 카페인이 함유된 다양한 음료를 즐길 수 있습니다.
<a href="beverages.html#house" title="하우스 블랜드">하우스 블랜드</a>,
<a href="beverages.html#mocha" title="모카 카페 라떼">모카 카페 라떼</a>,
<a href="beverages.html#cappuccino" title="카푸치노">카푸치노</a>,
그리고 저희 고객들이 선호하는,
<a href="beverages.html#chai" title="차이티">차이티</a>.
</p>
<p>
또한 집에서 사용할 수 있도록 다양한 종류의 커피 빈도 제공하고 있습니다.
<a href="form.html">커피공장</a>을 통해 지금 바로 온라인으로 주문해서,
집에서도 스타버즈 커피를 즐겨보세요.
</p>
</div>

<div id="sidebar">
<p class="beanheading">
<img src="images/bag.gif" alt="Bean Machine bag">
<br>
온라인으로 주문하세요
<a href="form.html">커피공장</a>
<br>
<span class="slogan">
빠르고 <br>
신선하게 <br>
여러분의 집으로 직접 배송해 드립니다 <br>
</span>
</p>
<p>
무엇을 망설이고 있나요? 저희가 마련한 최신 자동주문 시스템인 커피공장을 통해
온라인으로 지금 바로 품질좋은 커피를 주문할 수 있습니다. 어떻게 주문하냐고요?
커피공장 링크를 클릭해서 주문서를 작성하면, 무대 뒤에서 커피를 준비하고,
포장해서 여러분 집 앞으로 바로 배달해 드립니다.
</p>
</div> 
</div> 
</div>

[10주차 3일] CSS - position

- position: absolute;
: absolute 조상의 좌표(없다면 body)를 기준으로 삼는다.

- position: fixed;
: 브라우저의 내용창 좌표를 기준으로 삼는다.

- position: relative;
left: 100px;
: float처럼 띄우지 않고 위치를 이동할 수 있음.

2013년 10월 1일 화요일

[10주차 3일] CSS - Color

- backgroud-color: rgb(80%, 60%, 40%);

- backgroud-color: rgb(204, 40, 0);

- backgroud-color: #cd4f3a;

- backgroud-color: #df7;
== backgroud-color: #ddff77;

[10주차 3일] CSS - Font

- font-family : Verda, Geneva, Arial, sans-serif;

Verada를 찾아보고 없으면 Geneva를 찾고 없으면 Arial을 찾고 없으면 sans_serif로 설정한다.

첫번째는 윈도우용
두번째는 맥or리눅스용 으로 설정하는것이 적합하다.

- Sans-serif (고딕)
: 끝이 깔끔한것
ex) 굴림, 맑은고딕

- serif (명조)
: 끝이 꺽여있음
ex) 바탕, 궁서

- monospace
: 가로 간격이 일정한것

- 판타지 패밀리
: 희안한 글씨체들

- 사이즈 지정
px: 픽셀
%: 퍼센트
em: 몇배

가급적 지정된 사이즈를 사용하는것을 추천한다.
기본사이즈를 small으로 추천 한다.

body에 기본 사이즈를 지정 하고 상대사이즈로 설정하는것을 추천 한다.

[10주차 3일] CSS

/*
selector {
스타일명 : 값;
스타일명 : 값;
}

1. selector
- 스타일을 적용해야할 대상을 가르킴

1) 태그명
p {}
h1, h2 {...} // h1과 h2

2) 스타일 분류명(스타일 클래스명)
.클래스명 {...}

[html]
<div class="header">...</div>
<div class="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div class="tail">...</div>

[css]
.header {....}
.content {....}
.tail {....}
.artist {....}

3) 태그 아이디
[html]
<div id="header">...</div>
<div id="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div id="tail">...</div>

[css]
#header {....}
#content {....}
#tail {....}
.artist {....}

4) 여러개의 태그 지정
h1, h2, p {...}

5) 자식 태그 지정
부모 > 자식 {....}

[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>

div > a {,,,,}

6) 자속태그 지정
조상 자존 {...}

[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>

div a {,,,,}

7) 자식태그와 클래스의 합작
태그.클래스 > 자식태그 {...}

ex) div.c1 > a {...}

8) 자손태그와 클래스의 합작
조상태그.클래스 자손태그 {...}
ex) div.c1 a {...}

[html]
<div>
<a>aaa</a>
</div>
<div class="c1">
<a>bbb</a>
<p>
<a>okok</a>
</p>
</div>
<div class="c2">
<a>ccc</a>
</div>

*문제.
div#okok a {...}

2. pseudo-selector (별정 셀렉터)
div:first-child {...}

[html]
<body>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</body>

.c1 a {...}

3. 스타일 값 설정 방법
1) border: 1px; // 12시,3시,6시,9시(top, right, bottom, left)
2) border: 10px, 20px; // top/bottom, right/left
3) border: 10px, 20px, 30px; // top, right/left, bottom
4) border: 10px, 20px, 30px, 40px; // top, right, bottom, left

5) border-top: 1px; // top

6) border-width: 1px;
border-color: red;
border-style: sold;

border: 1px red solid;
border: red 1px solid;
border: solid 1px red;

4. 스타일의 상속
- 스타일의 일부는 자식 앨리먼트에 상속된다.(메뉴얼 확인 필요)

body {
font-size: 10px;
}

[html]
<body>
<div>
<p>...</p>
<p>...</p>
<p>...</p>
<p>
....
<a>...</a>
</p>
</div>
...
...
</body>

[10주차 3일] URL

URL(Uniform Resource Identifier)
: 단일 자원 식별자

- URL
ex> protocaol://xxx/xxx

- URN
ex> xxx::xxx::xxx::

[10주차 3일] HTML

<!DOCTYPE
: 규격 정의

<blockquote></blockquote> : 인용하는 부분에 사용 하는 태그

[참고] @SessionAttributes 와 @ModelAttribute 참고 블로그

http://springmvc.egloos.com/535572

2013년 9월 30일 월요일

[10주차 2일] XML

-well-formed XML

-DTD(Document Type Definition)
: 유효한 문서(Validate Document)

외부DTD
내부DTD

-XML 스키마
: DTD보다 정밀도를 높게 정의 할수 있는 것

[10주차 2일] RESTful

HTTP 프로토콜에 맞춰서
데이터를 주고 받는 것
리턴형식은 JSON, XML

[10주차 2일] Web Service

[10주차 2일] RMI, RCP

RMI
: stub관 skeleton 자동으로 생성

-stub

-skeleton

[10주차 2일] HTML & XML

[10주차 1일] Session 애노테이션으로 얻어오기

@SessionAttribute("객체명") 으로 해당 객체를 세션에서 받아올 것을 선언

이렇게 세션객체를 가져올 때는
sessoin.invalidate() 가 동작하지 않는다.

그러므로

SessionStatus status를 인자값으로 설정한후
status.setComplete() 메서드를 호출해서
세션을 종료시킬수 있다.

2013년 9월 29일 일요일

[10주차 1일] View Resolver

[10주차 1일] WEB-INF

WEB-INF 는 소스 및 설정이 들어가는 폴더이기 때문에

외부에서 접근을 할수 없다.

그러므로 jsp등의 View를 노출 시지 않으려면 WEB-INF아래에 놓으면 된다.

[참고] 윈도우 실행 명령어 블로그

http://blog.naver.com/ees4man?Redirect=Log&logNo=30111980408

[10주차 1일] @Transcational 애노테이션으로 Transaction 처리

http://docs.spring.io/spring/docs/3.2.4.RELEASE/spring-framework-reference/html/transaction.html#transaction-declarative

[10주차 1일] @Controller, @Service, @Repository 붙이기

[10주차 1일] Layer간의 interface를 두는 이유

- Presentation

- Business

- Persistance

2013년 9월 26일 목요일

[9주차 5일] Spring 사용시 Controller의 Return Type

- ModelAndView

- Model

- Map

-String

- void

[9주차 5일] Spring을 이용할 파일 전달

http://docs.spring.io/spring/docs/3.2.4.RELEASE/spring-framework-reference/html/mvc.html#mvc-multipart-forms-non-browsers

[9주차 5일] Spring사용시 용해서 Controller에서 Jsp로 값 전달

-Map

-Model

-ModelMap

[9주차 5일] Spring사용할때 Controller사용 및 Method에서 파라미터 받아오기

[9주차 4일][ Spring에서 Transaction처리하기

[9주차 4일] DispatcherServlet

[9주차 4일] ContextLoaderListener

2013년 9월 25일 수요일

[9주차 4일] Maven

http://dimdim.tistory.com/entry/Maven-%EC%A0%95%EB%A6%AC

[9주차 4일] Sprint Web MVC framework

[참고] egit 사용방법 참고 블로그

http://blog.naver.com/platinasnow?Redirect=Log&logNo=30166249802

[9주차 4일] Tramsaction 관리 정책

Rrequired
: 트랜젝션 필요
없다면? 새로생성
있다면? 기존트랜젝션 사용

RrequiresNew
: 트랜젝션 필요
없다면? 새로생성
있다면? 새로생성

[9주차 4일] Transaction 관리

1. programmetic
: 비지니스 로직변경시 코드 변경

2. 선언적방법
: 별도 외부 파일에 트랜젝션 관리 방법을 설정
Bean Container가 관리

// 1. Transaction 처리 정책 정의
DefaultTransactionDefinition def = new DefaultTransactionDefinition();
// explicitly setting the transaction name is something that can only be done programmatically
def.setName("tx1");
def.setPropagationBehavior(TransactionDefinition.PROPAGATION_REQUIRED);

// 2. Transaction 정책을 적용한 작업자 얻기
TransactionStatus txStatus = txManager.getTransaction(def);

2013년 9월 23일 월요일

[9주차 2일] Spring Framwork

- AOP(Aspect Oriented Programming)
: 메서드 앞뒤로 필터를 끼워서 쓸수 있도록 하는 프로그래밍

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd">




<bean id="s1" class="net.bitacademy.java41.test.t01.Student"></bean>


<bean id="s2" class="net.bitacademy.java41.test.t01.Student">
<property name="name" value="홍길동"></property>
<property name="age">
<value>50</value>
</property>
<property name="tel" value="1111-2222"/>
</bean>


<bean id="s3" class="net.bitacademy.java41.test.t01.Student">
<constructor-arg value="임꺽정"/>
<property name="age" value="30"/>
<property name="tel" value="1111-2222"/>
</bean>


<bean id="s4" class="net.bitacademy.java41.test.t01.Student" scope="prototype">
<constructor-arg value="임꺽정"/>
<property name="age" value="30"/>
<property name="tel" value="1111-2222"/>
</bean>


<bean id="s5" class="net.bitacademy.java41.test.t01.Student"
p:name="일지매" p:age="60" p:tel="3434-3434"/>

</beans>

package net.bitacademy.java41.test.t01;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class Spring01 {

public static void main(String[] args) {
ApplicationContext ctx = new ClassPathXmlApplicationContext("net/bitacademy/java41/test/t01/application-context.xml");
Student s = (Student) ctx.getBean("s5");

System.out.println(s.getName());
System.out.println(s.getAge());
System.out.println(s.getTel());
}

public static void main04(String[] args) {
ApplicationContext ctx = new ClassPathXmlApplicationContext("net/bitacademy/java41/test/t01/application-context.xml");
Student s = (Student) ctx.getBean("s4");

// 기본적으로 객체는 싱글톤 방식으로 관리한다.
Student s2 = (Student) ctx.getBean("s4");
s2.setName("임꺽정2");
s2.setAge(50);
s2.setTel("5555-6666");

System.out.println(s.getName());
System.out.println(s.getAge());
System.out.println(s.getTel());

System.out.println("---------------");
System.out.println(s2.getName());
System.out.println(s2.getAge());
System.out.println(s2.getTel());

if (s == s2) {
System.out.println("s == s2 같은객체");
} else {
System.out.println("s != s2 다른객체");
}
}

public static void main03(String[] args) {
ApplicationContext ctx = new ClassPathXmlApplicationContext("net/bitacademy/java41/test/t01/application-context.xml");
Student s = (Student) ctx.getBean("s3");
System.out.println(s.getName());
System.out.println(s.getAge());
System.out.println(s.getTel());

// 기본적으로 객체는 싱글톤 방식으로 관리한다.
Student s2 = (Student) ctx.getBean("s3");
if (s == s2) {
System.out.println("s == s2 같은객체");
}
}

public static void main02(String[] args) {
ApplicationContext ctx = new ClassPathXmlApplicationContext("net/bitacademy/java41/test/t01/application-context.xml");
Student s = (Student) ctx.getBean("s2");
System.out.println(s.getName());
System.out.println(s.getAge());
System.out.println(s.getTel());
}

public static void main01(String[] args) {
ApplicationContext ctx = new ClassPathXmlApplicationContext("net/bitacademy/java41/test/t01/application-context.xml");
Student s = (Student) ctx.getBean("s1");
if (s != null) {
System.out.println("정말 자동 생성된다.");
} else {
System.out.println("엥.....");
}
}

}