iOS2013.04.11 12:45

1. 직접 View 를 띄우기


UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:[NSBundle mainBundle]];

UIViewController *view = [storyboard instantiateViewControllerWithIdentifier:@"MyStoryBoardView"];   


[self presentViewController:view animated:TRUE completion:nil];


네비게이션 컨트롤러를 사용할 땐

UINavigationController *navi = [storyBoard instantiateViewControllerWithIdentifier:@"MyStoryBoardNavi"];


[self presentViewController:navi animated:TRUE completion:nil];


로 바꿔준다.


위 코드에서 instantiateViewControllerWithIdentifier 는 띄울 스토리보드의 아이덴티디 인스펙터에서 

Identity 의 StoryBoard ID 이다.



2. Segue를 통해 띄우기


[self performSegueWithIdentifier:@"transitionView" sender:self];


performSegueWithIdentifier 는 스토리보드에서 각각의 View를 연결하는 화살표를 클릭하여 볼수 있는 어트리뷰트 인스펙터의 Identifier 이다.

위 메소드는 modal View 일때만 가능하다.


performSegueWithIdentifier를 이용하면 불러오는 View에 데이터를 전달 할수 있는데 이는 다음의 델리게이트 메소드를 이용하면 된다.


- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

    myViewController *view= [segue destinationViewController];

    view.mystring = @"넘기는 값";

}



3. View의 종료


스토리보드도 dismissViewControllerAnimated 를 통해 종료할 수 있다.


//애니메이션 결정

[self setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];

//종료

[self dismissViewControllerAnimated:YES completion:nil];

Posted by 하품 - yawn 하품 - yawn
PHP/Example2013.03.29 11:38


일단 지금 하고 있는 것이 PHP라 PHP형식으로 그냥 씁니다.



자주 쓰이는 게시판 페이징 알고리즘. 그렇다고 외울정도로 자주 쓰이는건 아니기에 게시판 만드는게 필요할때 마다 다시 생각해서 알고리즘을 짜니 시간이 오래 걸린다.


그렇기에 아예 블로그에 정리!



1. 우선 한 페이지에 게시글 목록을 띄우기위한 사전작업을 합니다.

// 페이지 설정 $linePerPage = 10; // 한페이지 줄수 - 한 페이지당 몇개의 글을 보여줄 것인가. $blockPerScreen = 5; // 한페이지 블럭수 - 위 스샷에 보이는 [1][2][3] 이런걸 몇개까지 띄워줄 것인가. $total; // 전체글수 보통 DB Query로 알아온다. $totalPage = ceil ($total / $linePerPage); // 총페이지수(올림함수) $totalBlock = ceil ($totalPage / $blockPerScreen); // 총블럭수(올림함수) //현재 페이지를 띄워주기 위한 설정 if (!$page) $page = 1; // 현재페이지 - 외부에서 넘겨받은 값 $block = ceil ($page / $blockPerScreen); // 현재블럭 $startRow_Num = ($page - 1) * $linePerPage; // 게시판 글 시작 순서

주석이 자세하니 대충 감이 오실 겁니다.

전체 글 수와, 한페이지 줄수, 블럭수 를 이용해 총 페이지와 블럭을 구합니다.


11번째 줄은 현재 페이지 번호 입니다. 보통 숫자를 누르거나 위 스샷에서 보이는 < 라던가 << 눌렀을때 페이지 번호를 넘겨주죠.

아예 게시판 첨 접속한다 하면 넘겨주는 페이지번호가 없으니 1로 잡습니다.


그리고 현재의 블록을 구하고, 중요한 startRow_Num 을 구해야 합니다.

즉 각 페이지 마다 첫번째 줄에 갖다놓을 DB 행번호 입니다.


이 번호를 첫글로 해서 위의 소스에서는 10개씩 데이터베이스에서 가져옵니다.

(총 100개의 행이 있다면 그중에서 30번째 행부터 10개를 가져오기 위한 시작 번호)


이부분은 데이터베이스마다 SELECT을 작성하는게 다릅니다.

MY-SQL은 쉬우니 넘어가고... 오라클은 이곳을 참조하세요.


이렇게 가져온 데이터를 화면에 그냥 뿌려주면 됩니다.



2. 페이지 이동 작업하기

위의 보이는 스샷을 표현하는 방법입니다.

// 페이지의 이동 $firstPage = (($block - 1) * $blockPerScreen) + 1; // 첫번째 페이지번호 $lastPage = min ($totalPage, $block * $blockPerScreen); // 마지막 페이지번호 $prev = $page - 1; // 이전페이지 '<' 표시 $next = $page + 1; // 다음페이지 '>' 표시 // 페이지 블럭의 이동 $prevBlock = $block - 1; // 이전블럭 $nextBlock = $block + 1; // 다음블럭 $prevBlockpage = $prevBlock * $blockPerScreen; // '<<' 눌렀을때의 페이지번호 이전 블럭에서의 마지막 페이지 번호이다. $nextBlockpage = $nextBlock * $blockPerScreen - ($blockPerScreen - 1); // '>>' 눌렀을때의 페이지번호 다음 블럭에서의 첫 페이지 번호이다.

[1][2][3][4] 등등은 사실 쉽습니다.
그냥 각 페이지 번호를 넘겨주는 링크만 걸어주면 됩니다. 
www.dkanrjskdmdkdkd.com/page?page=4

뭐 이런식으로 GET방식 링크를 걸어줘도 되고요. 개발자 하기 나릅입니다.
위 코드에서 $first_page, $last_page는 [1][2][3][4] 를 fot문 돌려서 보여주기 위한 변수입니다.
위 두개의 코드대로면은 페이지 블록 이동에 따라


[1][2][3][4][5], [6][7][8][9][10] 등으로 표시가 되겠지요.


약간 계산이 필요한건 '<' '>' 와 '<<' '>>' 입니다.

'<' '>' 는 그냥 현재 페이지에서 -1을 하거나 +1을 한 페이지를 링크로 만들면 되니 쉽습니다.


페이지 블럭 이동을 위한 '<<' '>>' 의 페이지 번호로 사용되는건

$prevBlockpage 와, $nestBlockpage 입니다.


블럭 이동후 보여지는 페이지를 어떤 페이지로 할거냐에 따라 계산이 약간씩 바뀝니다.

여기서는 이전 블럭으로 넘어가면 그 블럭의 마지막 페이지를 보여주려 하고,

다음 블럭으로 넘어가면 그 블럭의 첫 페이지를 보여주고자 위 처럼 작성하였습니다.


Posted by 하품 - yawn 하품 - yawn
CSS2013.03.27 18:30

* IE8 이상에서만 정상적으로 동작하는 방법입니다. 이전 버전 IE에서는 CSS HACK을 써야하니... 

전 그냥 지원안합니다 -_-;; I hate IE.


1. 가로 정렬.

가로정렬은 쉽습니다.


CSS
#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
}
#horizon {
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 0 auto;
}
HTML



위와 같이 margin: 0 auto; 만 주면 되거든요.

물론 #horizon 에 display:inline-block을 주어 인라인 요소로 만든후 #wrap에 text-align:center 형태로 해도 되지만 margin이 가장 간단한듯 싶군요.


2. 세로정렬

세로 정렬이 조금 힘들어 집니다.

일단 기본적인 방법을 봅시다.


CSS

- 첫번째 방법

#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
    position: relative;
}
#vertical {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top:50%;
    margin-top: -25px;
}

- 두번째 방법

#wrap {
    width: 150px;
    height: 150px;
    background-color: yellow;
    display: table-cell;
    vertical-align: middle;
}
#vertical{
    width: 50px;
    height: 50px;
    background-color: green;
    display: inline-block;
}
HTML


첫번째는 안쪽 초록색 블록의 크기를 정확히 알고 있을 때 사용하는 방법입니다.

시작 지점을 50% 내린다음에, 블록크기 절반만큼 위로 마이너스 마진을 준 것이죠.

크기를 모를때는 사용할 수 없습니다.


그래서 크기와 상관없이 무조건 세로 중앙정렬을 사용하는 방법으로는 두번째 방법을 사용하셔야 합니다.



하지만... 여기서 또 문제가 발생하는 부분이 있는데요?

float:left, float:right 등으로 플로팅 된 박스 모델의 경우 세로정렬이 또 제대로 동작을 하지 않는다는 겁니다.


미치겠네요.

그래도 방법은 있습니다. 

첫번째 방법처럼 position 속성을 조정함으로써 일일이 다 컨트롤해 주던가, table 구조로 만들어 버리면 됩니다.


다음은 그 대망의 완성본 입니다.


3. floating Div 에서 가로세로 중앙 정렬

CSS
/*왼쪽상자*/
#floating_v_align {    
    width: 150px;
    height: 150px;    
    background-color: yellow;
    float: left;
    display: table;
}
#floating_v_align #cell {
    display: table-cell;
    vertical-align: middle;
}
#block {
    width: 50px;
    height: 50px;
    background-color: green;
    margin: 0 auto;
}

/*오른쪽상자*/
#floating_wrap {
    width: 150px;
    height: 150px;
    background-color: blue;
    float: left;    
    position: relative;
}
#block2 {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    left: 50%;
}
HTML




참고 : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

'CSS' 카테고리의 다른 글

[CSS] 100% Height  (1) 2013.07.10
[CSS] css를 이용한 가로 중앙, 세로 중앙 정렬  (0) 2013.03.27
Posted by 하품 - yawn 하품 - yawn
JAVA2013.01.01 18:05

RTTI

Run-Time Type Information

Run-Time시 객체에 관한 정보(Type등)을 알아내는 방법, 혹은 프로그래밍 기능.


자바의 경우 .getClass() 함수 등으로 해당 객체의 타입등을 알아낼 수 있다.

이에 대해 좀더 자세하게 알기위해선 리플렉션을 공부해야 할 듯

참조 : http://www.gisdeveloper.co.kr/610



박싱과 언박싱

기본타입에서 객체(박스) 타입으로 변환 시키는 것 : 박싱

int -> Integer

객체(박스) 타입에서 기본 타입으로 변환 시키는 것 : 언박싱

Integer -> int


기본타입은 단순히 자기 값만을 갖는다.

객체타입은 말그대로 객체.(힙 메모리에 올라간다)


객체타입은 Collections 등에서 키와 값등에 사용 된다.

Map<Integer, Integer> 형태.

위 맵에서 Integer를 꺼내와 기본 타입인 int 변수에 대입하면 자동으로 언박싱이 일어난다.

자바는 이런 오토 박싱, 오토 언방싱을 지원한다.


하지만 오토 박싱, 오토 언방식은 상당한 비용이 소모 되므로 다음과 같은 코드를 작성하는 것은 금물이다.

Integer sum = 100;  

for (int i = 0; i < 100; i++) {  

    //오토 박싱과 언박싱이 계속 해서 일어난다.

    sum += i;  

}



자바의 동적 클래스 로딩과 클래스 로더

http://javacan.tistory.com/entry/1

http://javacan.tistory.com/entry/2

http://javacan.tistory.com/entry/15

http://javacan.tistory.com/entry/28

어느정도 이해는 하겠는데... 명확하게 "어떨때 써야 겠다"란게 아직 와닿지 않는 부분...

아직 경험이 부족하단 소리인듯 하다.


어노테이션(Annotation)

JDK 1.5 부터 추가된 사항. 

일종의 메타데이터 기능이다. 어노테이션은 코드 조각의 작성자 명이나 컴파일러가 특정 오류를 억제하도록 지시하는 것과 같이 프로그램의 일부가 아닌 프로그램에 관한 데이터를 제공해 준다.

 어노테이션을 사용하면 프로그램에서 컴파일러가 테스트하고 검증해야 하는 부가 정보를 정해진 형식으로 설명하는 것이 가능하다. 또한 설명 파일이나 새로운 클래스 정의를 생성하여 공통 코드를 작성하는 부담을 줄이는 용도로도 활용할 수 있다. 어노테이션을 사용하면 소스코드에 메타데이터를 보관할 수 있으며 컴파일 타임의 체크뿐 아니라 어노테이션 API를 사용하여 코드의 가독성을 높일 수 있다. 비록 자바 SE5가 제공하는 메타데이터의 종류가 많지 않지만 개발자의 자유로운 추가가 가능하므로 활용 가능성이 높다.


JCF(Java Collection Framework)

크게 세가지 형태로 분류

List - 순서가 있는 데이터 집합, 중복 허용

Set - 순서가 없는 데이터 집합, 중복 비허용

Map - 키,값의 쌍으로 이루어진 데이터 집합, 연관배열의 형태, 순서가 없다.


기본적으로 저 세가지의 큰형태에서 분화되어 

ArrayList, LinkedList

Set, TreeSet

HashMap, HashTable 등등등이 있다.

각각의 자세한 API는 다음의 블로그를 참조

http://enjoyjava.tistory.com/entry/Java-Collection-Framework-Overview


ArrayList

AbstratCollection<E>, AbstractList<E> 를 상속

Serializable, Cloneable, Iterable<E>, Collection<E>, List<E>, RandomAccess 인터페이스를 구현

순서가 있다. 중복 허용.

기본 Capacity는 10. 이보다 데이터의 개수가 커지면 Capacity를 늘리는 알고리즘이 작동(시간이 걸림) 한다.

만일 사용하는 ArrayList에 최적인 Capacity를 구할 수 있다면 성능 향상을 꾀할 수 있다.

ThreadSafe 하지 않음


Stack

AbstratCollection<E>, AbstractList<E>,Vector<E> 를 상속

Serializable, Cloneable, Iterable<E>, Collection<E>, List<E>, RandomAccess 인터페이스를 구현

후입선출


HashSet

AbstratCollection<E>, AbstractSet<E> 를 상속

Serializable, Cloneable, Iterable<E>, Collection<E>, Set<E> 인터페이스를 구현

순서가 전혀 없음. Set중에 가장 좋은 성능

*LoadFactor : (데이터의 개수)/(저장공간)을 의미, 데이터의 갯수가 증가하여 설정한 로트팩터보다 커지면 재정리 작업이 발생 생성자중 HashSet(int initialCapacity, float loadFactor) 라는 로드팩터를 지정해주는 생성자가 있다.

데이터중 중복된 요소를 거르는데 유용함


LinkedList

AbstratCollection<E>, AbstractList<E>, AbstractSequentialList<E> 를 상속

Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E> 인터페이스를 구현

중간의 삽입 삭제가 자유로움.


HashMap

AbstractMap<K,V> 상속

Serializable, Cloneable, Map<E> 인터페이스를 구현

순서가 없다


TreeMap

AbstractMap<K,V> 상속

Serializable, Cloneable, Map<K,V>, NavigableMap<K,V>, SortedMap<K,V>

순서가 있다. 

정렬 방식(Comparator 사용)을 정해주지 않으면 자연적인[?] 정렬(숫자>알파벳 대문자>알파벳 소문자> 한글) 순서로 정렬이 된다.




ArrayList와 LinkedList는 보통 어떤 때 쓰는가.

ArrayList의 경우 추가삭제가 적고 많은 조회가 이루어지는 데이터를 다룰 때

LinkedList의 경우 추가삭제가 빈번하게 일어나는 데이터를 다룰 때 사용한다.

http://codeflow.co.kr/question/251/linkedlist-%EC%99%80-arraylist-%EB%A5%BC-%EA%B0%81%EA%B0%81-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98%EC%9A%94/


기본적으로 자바 API에 다 나와있는 이야기이나 역시 영어가ㅠㅠ



Posted by 하품 - yawn 하품 - yawn
iOS2012.12.10 12:14

일일이 포스팅 하기 힘듬으로 링크로 대체-


http://www.iosappdev.co.kr/?p=2131



http://jeremyko.blogspot.kr/2012/10/ios6-autorotation-viewdidunload.html



변경사항 중 

viewDidUnload가 deprecated 되면서 xCode에서 자동으로 생성된 메소드에 이놈이 없다. 

최근 개발 시작하는바람에 바보같이 viewDidLoad를 viewDidUnload로 잘못보고 거기다가 메모리 해제 처리를 하는바람에

시뮬이 제대로 동작안하는걸 찾느라몇시간 동안 개삽질 -_-;;;


개발할때 API가 버전업 되면 꼭 변경사항을 확인하자 ㅠㅠㅠㅠㅠ

Posted by 하품 - yawn 하품 - yawn
OS/Linux2012.12.06 15:56

1. 상태

입력상태 <-> 명령상태 <-> Ex모드


명령 상태 - 처음 vi를 실행했을 때, 입력/EX 상태에서 ESC

입력 상태 - 실제로 타이핑을 하는 상태. 문서를 작성하게되는 상태, 명령상태에서 a,i,o등의 키

Ex 모드 - 각종 치환 파일 저장, 설정드으이 작업을 수행. 명령상태에서 ':' 눌러 들어오고 esc를 눌러 명령상태로



2. 명령 상태에서의 명령어


- 이동관련

기본적으로 vi에디터는 입력상태가 아닌 명령상태에서 커서이동을 하도록 되어있다.

k

커서를 위로 움직임

j

커서를 아래로 움직임

h

커서를 왼쪽으로 움직임

l

커서를 오른쪽으로 움직임

-

커서를 줄의 처음으로 옮김

e, E

다음단어의 끝으로, 문자단위 이동

w, W

다음단어의 처음으로, 문자단위 이동

$

줄의 마지막으로

0

줄의 처음으로

^

줄의 처음으로(공백이 아닌 처음시작되는 문자)

Shift+g

문서의 마지막으로 이동한다.

gg, 1g

문서의 처음으로 이동한다. 1대신 다른 숫자를 입력하면 해당 숫자의 라인으로 이동한다.

), (

다음, 이전 문장의 처음으로

}, {

다음, 이전문단의 처음으로

]], [[

다음, 이전 구절의 처음으로



- 화면 이동 관련

ctrl + F

한 화면 을 앞으로 스크롤

ctrl + B

한 화면 을 뒤로 스크롤

ctrl + D

반 화면 을 앞으로 스크롤

ctrl + U

반 화면 을 뒤로 스크롤

ctrl + E

한줄 앞으로 스크롤

ctrl + Y

한줄 뒤로 스크롤

Shift + h

화면의 맨 윗줄로

Shift + m

화면의 중간줄로

Shift + l

화면의 맨 아랫줄로


-입력관련 명령어

i

현재위치에서 삽입

I

현재줄의 처음위치에서 삽입

a

현재위치에서 한칸앞으로 이동해서 삽입

A

현재줄의 마지막위치에서 삽입

o

새로운 줄을 커서 아래에 연다

O

새로운 줄을 커서 위연다

s

현재 위치의 문자를 지우고 입력모드로 들어간다.

S

현재위치의 라인을 지우고 입력모드로 들어간다.


-편집 관련 명령어

y

한줄 복사

y[n]

현재 라인에서부터 n라인만큼 복사

p

복사된 내용 붙이기

yw

커서가 있는 단어 복사

yy

커서가 있는 줄을 복사

x,dl

커서위치의 글자 삭제

X

커서 바로 앞의 글자 삭제

dw

한 단어를 삭제

d0

커서 위치부터 행 처음까지 삭제

D, d$

커서 위치부터 행 끝까지 삭제

dd

커서가 있는 행을 삭제

dj

커서가 있는 행과 그 다음 행 삭제

dk

커서가 있는 행과 그 앞 행 삭제

J

현재 행의 개행문자를 제거

u

언도

.

리도


-블럭 명령어

v

단어단위로 블럭지정이 가능하다. 블럭범위는 이동명령인 'hjkl' 로 원하는 범위 만큼 지정할수 있다.

Shift+v

라인단위 블럭지정이다. 라인전체가 선택되며, 위아래 이동명령 'hj' 으로 범위 지정이 가능하다.

Ctrl+v

블럭단위 블럭지정이다. 4각형의 블럭지정이 가능하며 이동명령인 'hjkl' 로 원하는 범위를 지정할수 있다.




3. EX모드에서의 명령어


- 문자열 찾기

/[찾고자하는 문자열]

아래로가면서 문자열을 찾는다.

?[찾고자하는 문자열]

위로 올라가면서 문자열을 찾는다.

n(N)

다음(이전) 찾기


- 파일 저장 등

:e [filename]

filename 으로 파일열기

:q, :q!, :wq

종료, 강제종료, 저장후 종료

:w, :w [filename]

현재파일명으로 저장, filename 로 저장

:<범위>w [filename]

지정한 범위만 다른 파일로 저장

:e [filename]

filename 을 편집하기 위해서 연다

ZZ

지금파일을 저장하고 vim 을 종료한다.

:f

현재 작업중인 파일의 이름과, 라인수를 출력한다



기타 더욱 자세한 사항은 아래의 링크를 참조하자


http://shinluckyarchive.tistory.com/117





Posted by 하품 - yawn 하품 - yawn
TroubleShooting2012.11.28 14:24

* 자바스크립트 라이브러리로 jQuery 를 사용하고 있음을 가정한다.


Q : (상황 설명)

웹 페이지 구성상 컨텐츠를 담고있는 Block 엘레먼트들의 ID가 중복이 될 수 있는 상황이다.

그렇기에 Block 엘레먼트의 ID 속성은 없애고 그 대신에 자식 엘레먼트의 value값을 조합하여 이를 키값으로 사용하고자 한다.


다음과 같은 형태로 구성이 되었을 때 3번째 content_block을 선택하려면 어찌해야 하는가?

  
contents.....
contents.....
contents.....
contents.....
A :
jQuery Selector인 .has()Next Adjacent Selector (“prev + next”) 를 이용하여 선택이 가능하다.

코드는 다음과 같다.

$(".content_block").has(".id[value='3'] + .type[value='img'] + .set[value='7']").css("background-color","pink");



- 결과 -




Posted by 하품 - yawn 하품 - yawn
WEB/ASP2012.10.24 17:55

일반적으로 개인용 제품군(Windows7, Windows8) 에선 버전별로 3~10명으로 제한이 되고

서버 제품군에선 무제한이라 보면 될듯 싶다.


자세한내용은 아래 링크를 참조


http://www.jpelectron.com/sample/WWW%20and%20HTML/IIS-%20OS%20Version%20Limits.htm

Posted by 하품 - yawn 하품 - yawn
javascript/jQuery2012.09.26 18:34

여러가지 일로 직장을 그만둬서 개발을 잠시 쉬었다가

다시 개발하려니까 이거저거 막히는게 장난이 아니다. 게다가 난 오래 개발했던 사람도 아니라 더더욱 힘든듯 ㅠㅠ(이제 경력 10개월 -ㅅ-)

감이 잘 안잡힌다. 이제 1주일 됐으니 당연한걸지도 모르지만...



현재 jQuery를 이용한 개발을 하고 있습니다.

요즘은 사실 이런 라이브러리를 쓰지 않고 개발하는 게 더욱 드물지요.

여튼 저 역시도 배워서 사용하고 있는데...

갑자기 다시 쓰다보니 기억이 뒤죽박죽 radio버튼이나 checkbox같은 경우 jQuery로 어떻게 값을 가져오나도 까먹었습니다.


방법은 쉽지만 의외로 알아내기 힘들다 생각되어 메모!


<input type="radio" name="range" value="3">3일 
<input type="radio" name="range" value="7" checked="checked">7일 
<input type="radio" name="range" value="14">14일 
<input type="radio" name="range" value="30">1달

위가 같은 형태로 작성을 했다면


$('input[name="range"]:checked').val();

or

$('input[name="range"]:checked').attr("value");


형태로 해당 값을 가져올 수 있다.


혹시 check값이 아닌, 그 이외의 값을 가져와야할 경우,


$('input[name="range"]').eq(0).val();


등으로 eq() 셀렉터를 이용하여 원하는 radio버튼의 값을 가져올 수 있다.

Posted by 하품 - yawn 하품 - yawn
개발 단상2012.08.14 21:38

지각변동급의 집안사정이 터져 회사도 퇴사하고, 멘붕이오고, 가정이무너지고 사회가무너지고[?]

했던 집안일이 일단락 되었습니다.


이제 구직도 다시 시작해야하고, 이 블로그도 다시 시작 해야겠네요.

본의아니게 블로그 시즌2가 되었군요.



아니... 그보다 구직이 걱정인데...

아... 구직스트레스 어쩔꺼야 ㅠㅠ

야근 별로 없고, 마음맞는 사람이 많은 회사갔으면 좋겠다.

Posted by 하품 - yawn 하품 - yawn
javascript/jQuery2012.05.09 14:14


jQuery 셀릭터...

jQuery('#id') 혹은 $('#id') 형태로 가져온 객체는 Dom 객체가 아닌 jQuery 객체다.


즉, $('#id')와 document.getElementById('id')가 반환하는 값은 다르다.


document.getElementById는 말그대로 해당 id의 Dom 객체를 가져오지만,

jQuery 셀력터는 해당 id의 Dom객체를 감싼 jQuery객체를 가져온다.


그렇기에 경우에 따라서 Dom 객체를 사용해야 할 경우가 생기면 다음과같이 jQuery 객체에서 Dom 객체를 가져와야 한다.



1. $('#id')[0]


2. $('#id').get(0) 



jQuery객체도 배열 형태를 띄고 있기때문에 1번처럼 직접 배열 인덱스를 주어서 가져와도 되고,

2번처럼 .get() 메소드를 이용해서 가져와도 된다. 결과는 동일하다.


가져오는 객체가 여러개라면 해당 배열인덱스를 주어서 가져오면된다

ex>$('#id').get(3)


참고로 get메소드는 Dom객체들을 가진 Array[]를 리턴한다.


밑은 각각의 메소드의 차이를 보여주는 스샷 구글 크롬의 Watch Expression을 이용하였다.




Posted by 하품 - yawn 하품 - yawn
javascript/jQuery2012.04.27 15:27


다른 자바스크립트 라이브러리등과 jQuery를 함께 사용하면 $ 별칭이 전역적 충돌이 일어날 수 있다.

(ex : prototype.js) 


이 때 익명의 자기호출 함수를 만들어 해결 할수 있다.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery demo</title>
		
		<!--css style-->
		<style> 
			a.test {
				font-weight: bold;
			}
		</style>
	</head>
	<body>		
		
		<a href="http://jquery.com/">jQuery</a>		
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!--jquery 로드-->
                <script src="prototype.js"></script>
		<script>			
		
		(function ($) {
			$("a").click(function(event) {
					
					$("a").addClass('test');
					
					alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
					
					$("a").removeClass('test');
					
					event.preventDefault();
					
					$('a').hide("slow");
				});			
		})(jQuery);
				
		</script>
	</body>
</html>

위의 코드처럼
(function($){
//jQuery 코딩
})(jQuery);

형태로 캡슐화를 시키면 prototyp의 $와 jQuery의 $가 충돌하지 않음을 보장하며, jQuery를 사용할 수 있다.
(해당 부분을 지우면 jQuery가 동작하지 않음을 확인할 수 있다. 23줄과 36줄을 주석처리 해보라)

다른 방법들은 여기서 확인할수 있다

참고문헌 : 실전 jQuery쿡북 (O'Reilly, Bj퍼블릭)


Posted by 하품 - yawn 하품 - yawn
javascript/jQuery2012.04.27 15:08


.ready() 메소드는 window.onLoad 이벤를 대체하는 것 뿐만 아니라 페이지가 다 로드되지 않았더라도, DOM이 다 로드되었다면 jQuery/javascript 이벤트등을 실행 시킬 수 있다.


[jQuery] jQuery Basic, 간단한 jQuery 기본 코딩 의 소스 코드 참조.


위의 형태처럼 스크립트를 코딩하면 DOM로드시 페이지로드에 상관없이 이벤트를 발생시킬 수 있다.


사실 여기서 위의 .ready() 메소드는 페이지의 문서 상 가장 위쪽<head> 요소 안에 놓여있는 경우에만 필요하다. 

위의 소스에서 페이지의 로드를 빠르게 하기 위하여 모든 자바스크립트와 인라인 코드를<body>요소의 닫는 태그 앞에 둘 수있다.  이때는 .ready() 메소드는 사실 필요가 없다.

(때문에 .ready()메소드 최적화란 제목은 사실상 올바르지 않다)


변경된 소스.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery demo</title>
		
		<!--css style-->
		<style> 
			a.test {
				font-weight: bold;
			}
		</style>
	</head>
	<body>		
		
		<a href="http://jquery.com/">jQuery</a>		
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!--jquery 로드-->		
		<script>			
				$("a").click(function(event) {
					
					$("a").addClass('test');
					
					alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
					
					$("a").removeClass('test');
					
					event.preventDefault();
					
					$('a').hide("slow");
				});
		</script>
	</body>
</html>

위의 jQuery 소스에서 ready()메소드로 감싼 부분이 사라졌으나.

동작은 동일하게 동작 한다.



위의 소스가 페이지 로드가 더 빠르다는 것엔 두가지 이유가 있다.


첫째, 최근으 최적화 기술은 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다고 한다. 실제로 소스 앞부분에 자바스크립트 소스가 있다면, 자바스크립트 소스의 컴파일이 되는 동안 페이지이 로딩을 중단하기 때문에 페이지 로딩이 느려진다.


둘째, 많은 양의 소스코드보다 적은양의 소스코드가 로딩이 빠르다. 실제 위의 소스에서 ready()메소드가 사라짐으로 코드의 양이 적어졌다.



참고문헌 : 실전 jQuery쿡북 (O'Reilly, Bj퍼블릭)

Posted by 하품 - yawn 하품 - yawn
javascript/jQuery2012.04.26 18:24


앵커태그를 생성하고, 그 앵커태그에 대핸 이벤트를 설정,

CSS클래스 추가와 삭제등을 하는 간단한 jQuery 코딩.

코드를 보며 jQuery의 쓰임에 대한 감을 잡아보자.


1. 전체 소스와 해당 결과


전체소스



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery demo</title>
		
		<!--css style-->
		<style> 
			a.test {
				font-weight: bold;
			}
		</style>
	</head>
	<body>		
		
		<a href="http://jquery.com/">jQuery</a>		
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!--jquery 로드-->
		
		<script>
			$(document).ready(function() {
				//onLoad 이벤트
				
				$("a").click(function(event) {
					
					$("a").addClass('test');
					
					alert("더이상 jQuery 홈페이지로 연결하지 않습니다.");
					
					$("a").removeClass('test');
					
					event.preventDefault();
					
					$(this).hide("slow");
				});
			});

		</script>
	</body>
</html>



결과




첫 모습



클릭 했을 때 test 클래스가 적용되며 글자가 굵어짐이 확인




2. 코드 설명


8~12 줄

css 클래스.

클래스 명 : test


16 줄

jQuery 사이트로 링크된 앵커태그


18 줄

jQuery 프레임웍 로드


21 ~ 39 줄

jQuery 코드

$(달러 사인) 뒤에오는 괄호 안에 연결할 객체가 들어간다.

$(document) 는 document객체를 연결한 것.


22 줄 .ready( handler )

window.onLoad 이벤트를 대체하는 jQuery 이벤트

handler엔 함수가 들어간다.

$(document).ready( handler ) 형 태로 사용

즉 onLoad 이벤트시 handler의 함수가 실행됨.


25 줄 .click( handler )

onClick 이벤트

$("a").click( handler )

즉 a 태그의 onClick 이벤트 발생시 handler(함수) 를 실행한다.


27줄 .addClass('test');

css 클래스를 추가하는 jQuery 메소드.

8~12 줄에서 정의한 css 클래스 test가 a태그에 적용된다.


29줄 - alert 창이 띄워짐


31줄 $("a").removeClass('test');

css 클래스를 제거하는 jQuery 메소드

앞서 적용된 test 클래스가 사라진다.


33줄 event.preventDefault();

해당 이벤트에서 이 메소드가 호출이 되면

해당 이벤트의 기본 이벤트가 사라진다.


이 예제에서는 a태그의 클릭시 기본 이벤트(다른 사이트로 이동)가 사라져 아무런 동작도 하지 않는다.


35줄 $(this).hide("slow");

jQuery 애니메이션 이벤트.

해당 객체를 사라지게 많든다.

위의 메소드는 

$('a').hide('slow');

와 동일하다.





기본적인 jQuery의 동작은

$(찾는객체).메소드()


의 형태로 동작.



참조 사이트 : http://docs.jquery.com/Tutorials:How_jQuery_Works

Posted by 하품 - yawn 하품 - yawn
JSP/Learn2012.04.10 17:24


리스너와 함께 대표적인 특별한 형태의 서블릿

사용자 요청에 따라 특정 서블릿이나 JSP가 실행되기전 사전 작업 수행한다.


여러 개의 서블릿을 다양한 조건으로 설정해 하나의 요청에 여러 필터가 사전에 수행 될 수 있도록 할 수 있음



동작구조는 다음과 같다.

1. web.xml에 명시된 Filter의 url-pattern에 맞는 요청이 들어옴.

2. 해당요청에 따른 ServletFilter가 먼저 실행

3. 본래 요청한 페이지로


밑은 간단한 서블릿 필터 예제.



FilterTest.java

public class FileterTest implements Filter {

    public FileterTest() {
    }

	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		// 이곳에 사전처리 작업이 들어간다.
		request.setCharacterEncoding("utf-8");
		request.setAttribute("filter", "나는 필터입니다");
		chain.doFilter(request, response);
	}
	public void init(FilterConfig fConfig) throws ServletException {
	}

}



FilterTester.java

public class FilterTester extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public FilterTester() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out =response.getWriter();
		
		String tester = (String)request.getAttribute("filter");
		
		out.println("필터에서 넘어온 값 : " + tester);
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

}



web.xml 부분


 <servlet>

    <description></description>

    <display-name>FilterTester</display-name>

    <servlet-name>FilterTester</servlet-name>

    <servlet-class>ex.FilterTester</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>FilterTester</servlet-name>

    <url-pattern>/FilterTester</url-pattern>

  </servlet-mapping>

  

  <filter>

    <display-name>FileterTest</display-name>

    <filter-name>FileterTest</filter-name>

    <filter-class>ex.FileterTest</filter-class>

  </filter>

  <filter-mapping>

    <filter-name>FileterTest</filter-name>

    <url-pattern>/*</url-pattern>

  </filter-mapping>



결과




위의 예제에서는 모든 주소에 대하여 Filter가 처리된다.

Posted by 하품 - yawn 하품 - yawn