부루의 코드 갤러리: 10월 2013

2013년 10월 31일 목요일

2013년 10월 24일 목요일

2013년 10월 21일 월요일

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일 목요일

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>