Easy for anyone.

키 반복이 안될때

ezBuilder — Mon, 5 Jun 2023 13:34:28 +0900

터미널 실행한 후 아래 명령어를 입력한다. 이후 재부팅 정상 동작 확인! 끝.

defaults write -g ApplePressAndHoldEnabled -bool false

Nuxt3(+Pinia) HMR 동작하지 않을 때 hmr 활성화 하기

ezBuilder — Sun, 4 Jun 2023 21:18:33 +0900

Nuxt3 HMR not working, page reload needed for HMR to fire

nuxt.config.ts

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                port: 3008
            }
        }
    }
})

Firebase App named '[DEFAULT]' already exists 해결방법

ezBuilder — Wed, 31 May 2023 21:03:43 +0900

name항목을 추가하고 프로젝트ID를 입력하면 쉽게 해결된다.

await Firebase.initializeApp(

name: '프로젝트ID를 입력하세요',

options: DefaultFirebaseOptions.currentPlatform,

);

[신규 iOS] 항공편(비행기) 실시간 운항 정보(인천공항,한국공항)

ezBuilder — Mon, 29 May 2023 13:08:41 +0900

https://apps.apple.com/app/id6449462207

‎항공편(비행기) 실시간 운항 정보(인천공항,한국공항)

‎1. 모든 국내 공항 항공편에 대한 출발 / 도착 정보를 조회하실 수 있습니다. 2. 알람을 등록 하시면 모든 스케줄 변경사항에 대해 실시간으로 알림 서비스를 받으실 수 있습니다. 3. 비행기의

apps.apple.com

012345678

1. 모든 국내 공항 항공편에 대한 출발 / 도착 정보를 조회하실 수 있습니다.

2. 알람을 등록 하시면 모든 스케줄 변경사항에 대해 실시간으로 알림 서비스를 받으실 수 있습니다.

3. 비행기의 현재 위치 확인 및 추적이 가능합니다.

4. 공항별 날씨 정보를 제공합니다.

5. 인천국제공항

- 코드셰어가 적용 되었습니다.

- 출발편에 한해 공항 혼잡도 조회 하실 수 있습니다.

6. 항공사에 대한 정보를 제공 합니다.

* 주의사항 *

- 현재 인천국제공항 및 한국공항공사으로 부터 제공받는 스케줄을 토대로 하였기에 약간의 시간적 오차가 발생할 수 있으며, 해당 기관의 서버에 문제가 발생할 경우 스케줄 서비스를 제공해드리지 못할 수 있습니다.

- 알림 서비스는 서버의 상태에 따라 다소 지연될 수 있습니다.

- 실제 공항에서는 공항 안내방송 및 스케줄 안내에 따라 행동하시기 바랍니다.

* 공항 *

- 인천국제공항 (인천공항)

- 김포국제공항 (김포공항)

- 김해국제공항 (김해공항)

- 제주국제공항 (제주공항)

- 대구국제공항 (대구공항)

- 청주국제공항 (청주공항)

- 무안국제공항 (무안공항)

- 양양국제공항 (양양공항)

- 울산공항

- 광주공항

- 여수공항

- 포항공항

- 사천공항

- 군산공항

- 원주공항

* 라이센스 *

- 스케줄 : 인천국제공항 및 한국공항공사

- 날씨 : 기상청 및 네이버

- 폰트 : 정선군 (www.jeongseon.go.kr)

- 비행기 위치 추적: flightaware.com

* 문의

이메일: builder.ez@gmail.com

[업데이트] 항공편(비행기) 실시간 운항 정보(인천공항,한국공항)

ezBuilder — Mon, 29 May 2023 13:05:11 +0900

https://play.google.com/store/apps/details?id=com.siriware.flightrealschedule

항공편(비행기) 실시간 운항 정보(인천공항,한국공항) - Google Play 앱

국내 모든 공항에 대한 스케줄을 실시간으로 제공하며, 알람등록시 푸시를 통해 변경사항을 바로 확인하실 수 있습니다. 실시간 위치 추적 가능.

play.google.com

새로운 기능

1. 시스템 안정화를 위해 최신 기술을 적용 하였습니다.
2. 앱 디자인이 변경 되었습니다.
3. 각 공항의 바람에 대한 정보를 추가 하였습니다.
4. 테마를 원하는 색상으로 선택이 가능 합니다.
5. 스케줄 사이에 삽입 되었던 광고가 제거 되었습니다.
6. 앱 오프닝 광고가 추가 되었습니다.(랜덤 적용)

1. 모든 국내 공항 항공편에 대한 출발 / 도착 정보를 조회하실 수 있습니다.
2. 알람을 등록 하시면 모든 스케줄 변경사항에 대해 실시간으로 알림 서비스를 받으실 수 있습니다.
3. 비행기의 현재 위치 확인 및 추적이 가능합니다.
4. 공항별 날씨 정보를 제공합니다.
5. 인천국제공항
- 코드셰어가 적용 되었습니다.
- 출발편에 한해 공항 혼잡도 조회 하실 수 있습니다.
6. 항공사에 대한 정보를 제공 합니다.

* 주의사항 *
- 현재 인천국제공항 및 한국공항공사으로 부터 제공받는 스케줄을 토대로 하였기에 약간의 시간적 오차가 발생할 수 있으며, 해당 기관의 서버에 문제가 발생할 경우 스케줄 서비스를 제공해드리지 못할 수 있습니다.
- 알림 서비스는 서버의 상태에 따라 다소 지연될 수 있습니다.
- 실제 공항에서는 공항 안내방송 및 스케줄 안내에 따라 행동하시기 바랍니다.

* 공항 *
- 인천국제공항 (인천공항)
- 김포국제공항 (김포공항)
- 김해국제공항 (김해공항)
- 제주국제공항 (제주공항)
- 대구국제공항 (대구공항)
- 청주국제공항 (청주공항)
- 무안국제공항 (무안공항)
- 양양국제공항 (양양공항)
- 울산공항
- 광주공항
- 여수공항
- 포항공항
- 사천공항
- 군산공항
- 원주공항

* 라이센스 *
- 스케줄 : 인천국제공항 및 한국공항공사
- 날씨 : 기상청 및 네이버
- 폰트 : 정선군 (www.jeongseon.go.kr)
- 비행기 위치 추적: flightaware.com

* 구글 플레이스토어
전화번호: 080-234-0051

* 문의
이메일: builder.ez@gmail.com

항공편 실시간 출발 도착 정보(비행기 스케줄, 공항) 새로 만들었어요.

ezBuilder — Sun, 1 Mar 2020 13:31:11 +0900

https://play.google.com/store/apps/details?id=com.siriware.flightrealschedule

항공편 실시간 출발 도착 정보(비행기 스케줄, 공항)

1. 모든 국내공항 항공편에 대한 출발 / 도착 정보를 조회하실 수 있습니다.
2. 알람을 등록하시면 모든 스케줄 변경사항에 대해 실시간으로 푸시알림 서비스를 받으실 수 있습니다.
3. 공항별 날씨정보를 제공합니다.

* 주의사항 *
- 현재 인천국제공항 및 한국공항공사에서 제공받은 스케줄을 토대로 하였기에 약간의 오차가 발생할 수 있으며, 해당 기관의 서버에 문제가 발생할 경우 스케줄 서비스를 제공해드리지 못할 수 있습니다.
- 푸시알림 서비스는 서버의 상태에 따라 다소 지연될 수 있습니다.
- 실제 공항에서는 공항 안내방송 및 스케줄 안내에 따라 행동하시기 바랍니다.

* 공항 *
- 인천국제공항 (인천공항)
- 김포국제공항 (김포공항)
- 김해국제공항 (김해공항)
- 제구국제공항 (제주공항)
- 대구국제공항 (대구공항)
- 청주국제공항 (청주공항)
- 무안국제공항 (무안공항)
- 양양국제공항 (양양공항)
- 울산공항
- 광주공항
- 여수공항
- 포항공항
- 사천공항
- 군산공항
- 원주공항

* 자료제공 *
- 스케줄 및 배경이미지 : 인천국제공항 및 한국공항공사
- 폰트 : 네이버
- 날씨 : 기상청

* 항공사 *
- 대한항공
- 아시아나항공
- 이스타항공
- 제주항공
- 진에어
- 에어부산
- 중국남방항공
- 중국동방항공
- 춘추항공
- 캐세이드래곤항공
- 타이거항공
- 티웨이항공
- 홍콩익스프레스
- 상하이 항공
- 에바
- 일본항공
- 전일본공수
- 중국국제항공
- 중화항공
- S7 항공
- 가루다인도네시아항공
- 남아프리카항공
- 니키
- 델타항공
- 라오항공
- 란항공
- 로얄 브루네이 항공
- 로얄 에어 모로코
- 루프트한자항공
- 만다린항공
- 말레이시아항공
- 몽골항공
- 미얀마국제항공
- 베네주엘라 국제항공
- 베를린 항공
- 베트남항공
- 비엣젯항공
- 사천항공
- 산동항공
- 상하이항공
- 세부퍼시픽항공
- 세이셸항공
- 스리랑카항공
- 스쿳 항공
- 심천항공
- 싱가포르항공
- 아르헨티나 항공
- 아메리칸항공
- 아에로멕시코
- 알리탈리아 항공
- 야쿠티아 항공
- 에미레이트항공
- 에바항공
- 에어 뉴질랜드
- 에어 마카오
- 에어 비쉬켁
- 에어 프랑스
- 에어로플로트항공
- 에어서울
- 에어세르비아
- 에어아스타나
- 에어아시아 필리핀
- 에어아시아엑스
- 에어인디아
- 에어캐나다
- 에티오피아항공
- 에티하드 항공
- 영국항공
- 오로라항공
- 오스트리아 항공
- 우즈베키스탄항공
- 유나이티드항공
- 유니항공
- 제트 에어웨이즈
- 중국하문항공
- 체코항공
- 카타르항공
- 캐세이패시픽항공
- 케냐항공
- 케이엘엠네덜란드항공
- 코파항공
- 콴타스항공
- 타이에어아시아엑스
- 타이항공
- 터키항공
- 텐진 에어라인
- 폴란드항공
- 피치항공
- 핀에어
- 필리핀항공
- 하와이안항공
- 호주 항공
- 홍콩익스프레스항공
- 홍콩항공
- 네덜란드
- 베트남
- 세부퍼시픽
- 아메리칸 에어라인
- 아에로 플로트 항공
- 알리탈리아
- 에어아시아 엑스
- 중국하이난항공
- 캐세이드레곤항공
- 캐세이퍼시픽
- 프랑스항공
- 필리핀에어아시아
- 하와이안에어

항공편 실시간 출발 도착 정보 앱 개발

ezBuilder — Sun, 16 Apr 2017 00:18:39 +0900

https://play.google.com/store/apps/details?id=com.siriware.flightrealschedule

항공편 실시간 출발 도착 정보(비행기 스케줄, 공항)

ezBuilder 여행 및 지역정보

광고 포함

일부 기기와 호환되는 앱입니다.

1. 모든 국내공항 항공편에 대한 출발 / 도착 정보를 조회하실 수 있습니다.
2. 알림을 등록하시면 모든 스케줄 변경사항에 대해 실시간으로 푸시알림 서비스를 받으실 수 있습니다.
3. 공항별 날씨정보를 제공합니다.

* 개인정보알림 *
- 현재 서버에서 보관하는 사용자 데이터는 앱 설치시 생성되는 ID 값이 전부입니다.
- ID 값을 이용하여 로그인 없이 앱을 이용하시는 분들께 알림(푸시)서비스를 제공해 드리고 있습니다.
- 이외 어떠한 개인정보도 수집하지 않습니다.

* 주의사항 *
- 현재 인천국제공항 및 한국공항공사에서 제공받은 스케줄을 토대로 하였기에 약간의 오차가 발생할 수 있으며, 해당 기관의 서버에 문제가 발생할 경우 스케줄 서비스를 제공해드리지 못할 수 있습니다.
- 푸시알림 서비스는 서버의 상태에 따라 다소 지연될 수 있습니다.
- 실제 공항에서는 공항 안내방송 및 스케줄 안내에 따라 행동하시기 바랍니다.

* 공항 *
- 인천국제공항 (인천공항)
- 김포국제공항 (김포공항)
- 김해국제공항 (김해공항)
- 제구국제공항 (제주공항)
- 대구국제공항 (대구공항)
- 청주국제공항 (청주공항)
- 무안국제공항 (무안공항)
- 양양국제공항 (양양공항)
- 울산공항
- 광주공항
- 여수공항
- 포항공항
- 사천공항
- 군산공항
- 원주공항

* 자료제공 *
- 스케줄 및 배경이미지 : 인천국제공항 및 한국공항공사
- 폰트 : 네이버
- 날씨 : 기상청

* 항공사 *
- 대한항공
- 아시아나항공
- 이스타항공
- 제주항공
- 진에어
- 에어부산
- 중국남방항공
- 중국동방항공
- 춘추항공
- 캐세이드래곤항공
- 타이거항공
- 티웨이항공
- 홍콩익스프레스
- 상하이 항공
- 에바
- 일본항공
- 전일본공수
- 중국국제항공
- 중화항공
- S7 항공
- 가루다인도네시아항공
- 남아프리카항공
- 니키
- 델타항공
- 라오항공
- 란항공
- 로얄 브루네이 항공
- 로얄 에어 모로코
- 루프트한자항공
- 만다린항공
- 말레이시아항공
- 몽골항공
- 미얀마국제항공
- 베네주엘라 국제항공
- 베를린 항공
- 베트남항공
- 비엣젯항공
- 사천항공
- 산동항공
- 상하이항공
- 세부퍼시픽항공
- 세이셸항공
- 스리랑카항공
- 스쿳 항공
- 심천항공
- 싱가포르항공
- 아르헨티나 항공
- 아메리칸항공
- 아에로멕시코
- 알리탈리아 항공
- 야쿠티아 항공
- 에미레이트항공
- 에바항공
- 에어 뉴질랜드
- 에어 마카오
- 에어 비쉬켁
- 에어 프랑스
- 에어로플로트항공
- 에어서울
- 에어세르비아
- 에어아스타나
- 에어아시아 필리핀
- 에어아시아엑스
- 에어인디아
- 에어캐나다
- 에티오피아항공
- 에티하드 항공
- 영국항공
- 오로라항공
- 오스트리아 항공
- 우즈베키스탄항공
- 유나이티드항공
- 유니항공
- 제트 에어웨이즈
- 중국하문항공
- 체코항공
- 카타르항공
- 캐세이패시픽항공
- 케냐항공
- 케이엘엠네덜란드항공
- 코파항공
- 콴타스항공
- 타이에어아시아엑스
- 타이항공
- 터키항공
- 텐진 에어라인
- 폴란드항공
- 피치항공
- 핀에어
- 필리핀항공
- 하와이안항공
- 호주 항공
- 홍콩익스프레스항공
- 홍콩항공
- 네덜란드
- 베트남
- 세부퍼시픽
- 아메리칸 에어라인
- 아에로 플로트 항공
- 알리탈리아
- 에어아시아 엑스
- 중국하이난항공
- 캐세이드레곤항공
- 캐세이퍼시픽
- 프랑스항공
- 필리핀에어아시아
- 하와이안에어

########################
One developer, ezBuilder
########################

[CentOS 6.6] Node.js 설치하기

ezBuilder — Sat, 11 Apr 2015 00:42:58 +0900

NodeJS 의존 패키지 설치

su root
yum install gcc gcc-c++
yum install openssl-devel
yum install make

Node.js 다운로드 후 압축해제 및 디렉토리 이동(여기에서는 리눅스 64비트용을 다운받는다.)

cd /usr/local
mkdir server
cd ../src
wget http://nodejs.org/dist/v0.12.2/node-v0.12.2-linux-x64.tar.gz
tar zxvf node-v0.12.2-linux-x64.tar.gz
mv node-v0.12.2-linux-x64 ../server/node

profile을 수정하여 Node.js PATH 설정하기

vi /etc/profile

export NODE_HOME=/usr/local/server/node
export PATH=$PATH:$NODE_HOME/bin

PATH 적용

source /etc/profile

root에서의 실행은 보안문제가 발생함으로 새로운 계정을 생성하여 실행한다.

useradd nodejs
passwd nodejs
su nodejs

NodeJS 테스트

node
console.log('test')
- 결과 -
test
undefined

모듈 설치하기

1. express : 웹 어플리케이션 프레임워크

2. forever : 어플리케이션이 예기치 못한 오류로 꺼지거나 하는 경우를 방지.

3. supervisor : 소스 수정시 자동반영.

4. socket.io : 웹소켓.

npm -g install forever supervisor express express-generator socket.io

종속성 모듈 설치

npm install -d

[CentOS 6.6 + MySQL 5.6x] 설치하기

ezBuilder — Wed, 8 Apr 2015 01:30:11 +0900

기존 설치되어 있는 mysql을 삭제한다. 이후 최신 버전의 mysql레포지토리 등록후 설치한다.

cd /usr/local/src
yum remove mysql-server
cd /usr/local/src
wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpm
rpm -ivh mysql-community-release-el6-5.noarch.rpm
yum install mysql-server

DB인코딩을 UTF-8로 변경한다.

vi /var/lib/mysql/ishm/db.opt

default-character-set=utf8
default-collation=utf8_general_ci

vi /etc/my.cnf

[client]
default-character-set=utf8

[mysqld]
init_connect='SET collation_connection=utf8_general_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_general_ci
skip-character-set-client-handshake
#port=3306

[mysql]
default-character-set=utf8

mysql을 실행한 후 계정생성 및 root 비밀번호 설정 및 자동실행 되도록 한다.

service mysqld start
/usr/bin/mysqladmin -u root password '비밀번호'
chkconfig mysqld on

mysql에 접속하여 사용할 계정 및 데이터베이스를 생성한다.

mysql -uroot -p mysql

create database 데이터베이스;
insert into user (Host, User, Password, ssl_cipher, x509_issuer, x509_subject ) values('%','계정',password('비밀번호'),'','','');
flush privileges;
grant all privileges on {데이터베이스}.* to {User Name}@localhost identified by '{User Password}' with grant option;
flush privileges;
show variables like '%character%';
show variables like '%collation%';
exit;

외부 접속을 위해 방화벽 규칙에 추가한다.

vi /etc/sysconfig/iptables

-A INPUT -p tcp -m state --state NEW -m tcp --dport 3306 -j ACCEPT

방화벽 규칙을 적용한 후 외부에서 접속이 되는지 테스트한다.

/etc/init.d/iptables restart

CentOS 6.6 Tomcat 8 설치

ezBuilder — Wed, 8 Apr 2015 00:45:10 +0900

보안을 위해 톰캣계정을 생성하여 진행한다.

useradd tomcat
passwd tomcat
su tomcat

톰캣 최신버전 8.0.21을 다운로드 한다. 이후 압축해제 및 다운로드 파일을 삭제한다.

cd /usr/local
mkdir server
cd server
wget http://mirror.apache-kr.org/tomcat/tomcat-8/v8.0.21/bin/apache-tomcat-8.0.21.tar.gz
tar -zxvf apache-tomcat-8.0.21.tar.gz
rm apache-tomcat-8.0.21.tar.gz

톰캣 설정파일을 수정한다. 대용량 파일 업로드를 위해 시간제한 해제. UTF-8 인코딩 처리.

vi tomcat/conf/server.xml

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="1200000"
URIEncoding="UTF-8"
disableUploadTimeout="true"
redirectPort="8443" />

<connector port="8009" protocol="AJP/1.3" redirectport="8443" uriencoding="UTF-8"/>

자바 경로 및 톰캣 경로를 설정한다.

vi /etc/profile

JAVA_HOME=/usr/local/java
CATALINA_HOME=/usr/local/server/tomcat
CLASSPATH=.:$JAVA_HOME/lib/tools.jar:$CATALINA_HOME/lib-jsp-api.jar:$CATALINA_HOME/lib/servlet-api.jar
PATH=$PATH:$JAVA_HOME/bin:$CATALINA_HOME/bin
export JAVA_HOME CLASSPATH PATH CATALINA_HOME

서버 구동시 톰캣이 자동실행되도록 설정파일을 작성한다.

vi /etc/rc.d/init.d/tomcat

#!/bin/bash
# dcription: Tomcat Start Stop Restart
# processname: tomcat
# chkconfig: 234 20 80
export JAVA_HOME=/usr/local/java
export CATALINA_HOME=/usr/local/server/tomcat
export JAVA_OPTS="-Dfile.encoding=UTF-8 \
-Dnet.sf.ehcache.skipUpdateCheck=true \
-Djava.net.preferIPv4Stack=true
-Djava.net.preferIPv4Addresses
-XX:+UseConcMarkSweepGC \
-XX:+CMSClassUnloadingEnabled \
-XX:+UseParNewGC \
-XX:MaxPermSize=256m \
-Xms512m -Xmx1024m"

case $1 in
start)
    sh $CATALINA_HOME/bin/startup.sh
    ;;
stop)
    sh $CATALINA_HOME/bin/shutdown.sh
    ;;
restart)
    sh $CATALINA_HOME/bin/shutdown.sh
    sh $CATALINA_HOME/bin/startup.sh
;;
esac
exit 0

톰캣 자동실행 설정파일을 적용한다.

chmod +x /etc/init.d/tomcat
chkconfig --add tomcat
chkconfig --level 2345 tomcat on

톰캣 폴더를 tomcat으로 심볼릭 링크처리한다.

이후 톰캣이 사용하는 8080포트를 열어 외부접속이 되도록 오픈한다.

ln -s apache-tomcat-8.0.21 tomcat
vi /etc/sysconfig/iptables

적당한 위치에 아래 내용을 추가한다.

-A INPUT -m state --state NEW -m tcp -p tcp --dport 8080 -j ACCEPT

방화벽 규칙이 적용되도록 재실행한다.

이후 톰캣을 실행하고,

netstat로 8080포트가 정상적으로 동작하는지 확인한다.

/etc/init.d/iptables save
service iptables restart
service tomcat start
netstat -ntl

Date().getFullYear.toLocaleString('ar'), getFullUTCYear(), toLocaleString('ko')

ezBuilder — Sat, 7 Jun 2014 19:41:57 +0900

2014-06-11 추가.

아래 사항은 getFullYear()의 리턴값이 numberic이여서 toLocaleString()시 발생되는 현상임.
parseInt(5000).toLocaleString('kr')의 결과는 "5,000"이다. 자동으로 콤마를 표시해준다.

---------------------------------------------------------------------------------------

오늘 아럽어를 가지고 날짜를 변환하는 과정에서 발견된 getFullYear().toLocaleString() ~~버그 사항.~~

영어?만 빼고 getFullYear() 또는 getFullUTCYear()에서 toLocaleString('ar') 또는 ko등등..으로 했을 경우 년도의 값에 (,) 콤마가 찍혀 나온다. 한국어의 경우 replace(',','')로 해결되나 아랍어의 경우 유니코드?라서 그런지(,)콤마가 아닌 (٬)로 찍혀나온다. 아럽어의 경우 다음과 같이 replace('٬',''))로 해야만 된다.

[JSP] DBCP를 이용한 커넥션 풀(Connection Pool) 사용하기.

ezBuilder — Wed, 5 Jun 2013 17:28:52 +0900

1. 필수 jar 파일( WEB-INF > lib 폴더에 복사)

commons-dbcp-1.2.2.jar

commons-pool-1.4.jar

2. 이클립스에서 pool.jocl 파일 작성하기(경로 : src > pool.jocl)

:: MySQL ::

<object class="org.apache.commons.dbcp.PoolableConnectionFactory" xmlns="http://apache.org/xml/xmlns/jakarta/commons/jocl">
	<object class="org.apache.commons.dbcp.DriverManagerConnectionFactory">
		<string value="jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8"/>		
		<string value="test"/>		
		<string value="test"/>	
	</object>
	
	<object class="org.apache.commons.pool.impl.GenericObjectPool">	
		<object class="org.apache.commons.pool.PoolableObjectFactory" null="true" />	
	</object>	

	<object class="org.apache.commons.pool.KeyedObjectPoolFactory" null="true"/>	
	
	<string null="true"/>	
	
	<boolean value="false"/>
	
	<boolean value="true"/>
</object>

:: Oracle ::

<object class="org.apache.commons.dbcp.PoolableConnectionFactory" xmlns="http://apache.org/xml/xmlns/jakarta/commons/jocl">
	<object class="org.apache.commons.dbcp.DriverManagerConnectionFactory">
		<string value="jdbc:oracle:thin:@localhost:1521:XE"/>
		<string value="test"/>
		<string value="test"/>
	</object>
	
	<object class="org.apache.commons.pool.impl.GenericObjectPool">
		<object class="org.apache.commons.pool.PoolableObjectFactory" null="true" />
	</object>	
	
	<object class="org.apache.commons.pool.KeyedObjectPoolFactory" null="true"/>
	
	<string null="true"/>
	
	<boolean value="false"/>	
	
	<boolean value="true"/>
</object>

3. 커넥션 풀 초기화(경로 : src > DBCPInit.java)

import java.util.StringTokenizer;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

public class DBCPInit extends HttpServlet{

	@Override
	public void init(ServletConfig config) throws ServletException {
		try{
			String drivers = config.getInitParameter("jdbcDriver");
			StringTokenizer st = new StringTokenizer(drivers, ",");
			
			while(st.hasMoreTokens()){
				String jdbcDriver = st.nextToken();
				Class.forName(jdbcDriver);				
			}
			
			Class.forName("org.apache.commons.dbcp.PoolingDriver");
			
		}catch(Exception e){
			throw new ServletException(e);
		}
	}
	
}

4. web.xml파일에 DBCPInit 등록하기

<servlet>
	<servlet-name>DBCPInit</servlet-name>
	<servlet-class>DBCPInit</servlet-class>
	<init-param>
		<param-name>jdbcDriver</param-name>
		<param-value>com.mysql.jdbc.Driver</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>

5. 커넥션 풀 사용하기

:: test.jsp ::

<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>회원 목록</title>
</head>
<body>
<caption>Member 테이블의 내용</caption>
<table width="100%" border="1">
	<thead>
		<tr>
			<th>이름</th>
			<th>아이디</th>
			<th>이메일</th>
		</tr>
	</thead>
	<tbody>
	<%
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		try{
			String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
			
			conn = DriverManager.getConnection(jdbcDriver);
			
			pstmt = conn.prepareStatement("select * from ez_member");
			
			rs = pstmt.executeQuery();
			
			while(rs.next()){
	%>
		<tr>
			<td><%= rs.getString("name") %></td>
			<td><%= rs.getString("id") %></td>
			<td><%= rs.getString("email") %></td>
		</tr>
	<%
			}
		}catch(SQLException se){
			se.printStackTrace();
		}finally{
			if(rs != null) rs.close();
			if(pstmt != null) pstmt.close();
			if(conn != null) conn.close();
		}
	%>
	</tbody>
</table> 
</body>
</html>

[JSP] MySQL jdbcDriver 자동로드 및 트랜잭션 처리하기.

ezBuilder — Wed, 5 Jun 2013 17:00:35 +0900

1. MySQL JdbcDriver 자동로드시키기 위해 아래와 같이 web.xml 파일에 추가한다.

<servlet>
	<servlet-name>jdbcDriver</servlet-name>
	<servlet-class>utility.DriverLoader</servlet-class>
	<init-param>
		<param-name>jdbcDriver</param-name>
		<param-value>com.mysql.jdbc.Driver</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>

2. MySQL 트랜잭션 처리하기

:: test.jsp ::

try{
	String jdbcDriver = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8";
	String dbUser = "test";
	String dbPwd = "test";

	conn = DriverManager.getConnection(jdbcDriver, dbUser, dbPwd);

	// 트랜잭션 시작
	conn.setAutoCommit(false);

	pstmt = conn.prepareStatement("insert into item_1 values (?)");
	pstmt.setInt(1, 10);
	pstmt.executeUpdate();

	pstmt = conn.prepareStatement("insert into item_2 values (?)");
	pstmt.setInt(1, 100);
	pstmt.executeUpdate();

	// 트랜잭션 작동여부 확인을 위한 예외오류 발생시키기
	if(request.getParameter("error") != null){
		throw new Exception("예외 발생!");
	}

	// 트랜잭션 종료
	conn.commit
}catch(Throwable e){
	if(conn != null){
		try{
			// 오류발생시 롤백
			conn.rollback();
		}catch(SQLException se){}
	}

}finally{
	if(pstmt != null) pstmt.close();
	if(conn != null) conn.close();
}

[JSP] MySQL + JSP로 DB연결하여 결과 가져오기

ezBuilder — Wed, 5 Jun 2013 01:29:44 +0900

1. MySQL 5.x용 JDBC 드라이버

mysql-connector-java-5.1.25-bin.jar

2. viewMemberList.jsp

<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>회원 목록</title>
</head>
<body>
<caption>Member 테이블의 내용</caption>
<table width="100%" border="1">
	<thead>
		<tr>
			<th>이름</th>
			<th>아이디</th>
			<th>이메일</th>
		</tr>
	</thead>
	<tbody>
	<%
		Class.forName("com.mysql.jdbc.Driver");
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		
		try{
			String jdbcDriver = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8";
			String dbUser = "test";
			String dbPwd = "test";
			
			conn = DriverManager.getConnection(jdbcDriver, dbUser, dbPwd);
			
			pstmt = conn.prepareStatement("select * from ez_member");
			
			rs = pstmt.executeQuery();
			
			while(rs.next()){
	%>
		<tr>
			<td><%= rs.getString("name") %></td>
			<td><%= rs.getString("id") %></td>
			<td><%= rs.getString("email") %></td>
		</tr>
	<%
			}
		}catch(SQLException se){
			se.printStackTrace();
		}finally{
			if(rs != null) rs.close();
			if(pstmt != null) pstmt.close();
			if(conn != null) conn.close();
		}
	%>
	</tbody>
</table> 
</body>
</html>

[JSP] 세션시간 설정하기

ezBuilder — Tue, 4 Jun 2013 23:40:27 +0900

:: web.xml에 추가( 단위 = 분 ) ::

<session-config>

<session-timeout>50</session-timeout>

</session-config>

또는

JSP페이지 세션설정부분에서 아래 내용을 추가

session.setMaxInactiveInterval(60 * 60); // 초단위로 60분으로 설정함.

[JSP] jsp:include 와 include 디렉티브의 차이

ezBuilder — Tue, 4 Jun 2013 20:21:47 +0900

<jsp:include 액션 태그와 include 디렉티브의 차이

비교항목	<jsp:include>	include 디렉티브
처리시간	요청 시간에 처리	JSP 파일을 자바 소스로 변활할 때 처리
기능	별도의 파일로 요청 처리 흐름을 이동	현재 파일에 삽입시킴
데이터 전달방법	request 기본객체나 <jsp:param>을 이용한 파라미터 전달	페이지 내의 변수를 선언한 후 변수에 값 저장
용도	화면의 레이아웃의 일부분을 모듈화 할 때 주료 사용	다수의 JSP 페이지에서 공동으로 사용된는 변수를 지정하는 코드나 저작권과 같은 문장을 포함

[JSP] 코드 조각 자동 포함시키기

ezBuilder — Tue, 4 Jun 2013 20:07:12 +0900

JSP 2.0 버전부터 사용가능.

:: web.xml에 추가 ::

<jsp-config>

<jsp-property-group>

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

<include-prelude>/common/variable.jspf</include-prelude>

<include-coda>/common/footer.jspf</include-coda>

</jsp-property-group>

</jsp-config>

[MySQL] MySQL 5.x Function 및 Procedure 예제

ezBuilder — Sat, 1 Jun 2013 00:36:16 +0900

delimiter $$

DROP FUNCTION IF EXISTS dbname.string_print$$

CREATE FUNCTION dbname.string_print( str VARCHAR(20) ) RETURNS VARCHAR(20)

BEGIN

DECLARE copy_str VARCHAR(20);

SET copy_str = str;

RETURN copy_str;

END $$

delimiter ;

SELECT dbname.string_print('Hello world');

delimiter $$

DROP PROCEDURE IF EXISTS dbname.string_print$$

CREATE PROCEDURE dbname.string_print( str VARCHAR(20) )

BEGIN

DECLARE copy_str VARCHAR(20);

SET copy_str = str;

SELECT copy_str;

END $$

delimiter ;

CALL dbname.string_print('Hello world');

이번엔 예외처리...

delimiter $$

DROP PROCEDURE IF EXISTS db_name.procedure_name$$

CREATE PROCEDURE db_name.procedure_name(IN num INT, IN ch VARCHAR(2))

BEGIN

     DECLARE err INT DEFAULT '0';
     DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET err = -1;

     START TRANSACTION;

     INSERT INTO table_name VALUES (num, ch);     // 성공
     INSERT INTO table_name VALUES (ch, num);     // 실패

     IF err < 0 THEN
          ROLLBACK;
     ELSE
          COMMIT;

END IF;

END $$

delimiter ;

: IN -> input, OUT -> output <가독성을 위한 표시 기능>

: 예외 핸들링을 위한 변수 선언. 쿼리 실패시 err값은 '-1'

이번엔 루프문을...

delimiter $$

DROP PROCEDURE IF EXISTS db_name.procedure_name$$

CREATE PROCEDURE db_name.procedure_name(IN ch VARCHAR(2))

BEGIN

DECLARE val INT DEFAULT '0';

WHILE val < 5 DO
INSERT INTO table_name VALUES (val, ch);

SET val = val + 1;

END WHILE;

END $$

delimiter ;

이번엔 커서를...

delimiter $$

DROP PROCEDURE IF EXISTS proc_name$$

CREATE PROCEDURE proc_name()
BEGIN

DECLARE cur_state INT DEFAULT '0';
DECLARE copy_column1 INT DEFAULT '0';
DECLARE copy_column2 INT DEFAULT '0';
DECLARE result_count INT DEFAULT '0';

DECLARE cur CURSOR FOR SELECT column1, column2 FROM table1;

DECLARE CONTINUE HANDLER FOR SQLSTATE '02000' SET cur_state = 1;

OPEN cur;

REPEAT

FETCH cur INTO copy_column1, copy_column2; →커서 이동 및 결과 매칭

IF NOT cur_state THEN →커서 상태 체크

UPDATE ...;
SET result_count = result_count + 1;

END IF;

UNTIL cur_state END REPEAT;

CLOSE cur;

IF result_count > 0 THEN

SELECT result_count;

ELSE

SELECT 0;

END IF;

END $$

delimiter ;

: 커서 정의 - cur은 'SELECT column1, column2 FROM table1;'의 커서이다.

: 커서 상태 핸들러 지정(※'02000'의 의미는 잘모르겠다.)

: 커서 열고 닫기.

: do while문과 비슷한 문법.

이번엔 SELECT 결과를 변수에...

delimiter $$

DROP PROCEDURE IF EXISTS proc_name$$

CREATE PROCEDURE proc_name()
BEGIN

DECLARE result INT DEFAULT '0';

SELECT column1 INTO result FROM table1 WHERE ...;

SELECT reslut;

END $$

delimiter ;

※ MySQL에선 'result = column1'이 안된다.

http://cafe.naver.com/q69/119958

[MySQL] 기본명령어

ezBuilder — Fri, 31 May 2013 15:53:28 +0900

mysql -u계정 -p DB

show variables like 'c%' 인코딩 확인

MySQL의 기본 명령어와 SQL문 정리. 내가 RDBMS에 완전 문외한이기 때문에 기본 SQL쿼리까지...
Redhat Linux 7.3, MySQL 3.23.58 에서 테스트함.
설치는 Redhat 기본 제공 RPM으로 했다.

데이터베이스 접속

$ mysql -u 사용자명 -p dbname

설치 직후에는 root 사용자에 비밀번호가 없으므로 다음과 같이 접속하여 MySQL을 관리할 수 있다.

$ mysql -u root mysql

비밀번호 변경
MySQL을 설치한 직후에는 root 계정에 암호가 지정되어 있지 않다.
다음 세가지 방법으로 비밀번호를 변경 할 수 있다.

mysqladmin이용

$ mysqladmin -u root password 새비밀번호
update문 이용

$ mysql -u root mysql

mysql> UPDATE user SET password=password('새비밀번호') WHERE user='root';
mysql> FLUSH PRIVILEGES;
Set Password 이용

SET PASSWORD FOR root=password('새비밀번호');

일단 root 비밀번호가 설정된 상태에서는 mysql이나 mysqladmin 명령을 실행할 때 -p 옵션을 붙여주고 기존 비밀번호를 입력해야만 한다.

사용자 추가/삭제

mysql> GRANT ALL PRIVILEGES ON dbname.* TO username@localhost IDENTIFIED BY 'password';

username 이라는 사용자를 password라는 비밀번호를 갖도록 하여 추가한다. username은 dbname이라는
데이타베이스에 대해 모든 권한을 가지고 있다.
username 사용자는 로칼 호스트에서만 접속할 수 있다. 다른 호스트에서 접속하려면

GRANT ALL PRIVILEGES ON dbname.* TO username@'%' IDENTIFIED BY 'password';

위를 또한 번 실행한다. '%'에서 홑따옴표를 주의한다.

http://tech.zhenhua.info/2009/01/mysql-error-104528000-access-denied-for.html 에 따르면 '%'란 localhost 를 제외한 모든 호스트를 뜻한다고 한다. 즉, localhost에 대해서는 명시적으로 따로 권한을 지정해야 한다.

불필요한 사용자 삭제는

mysql> DELETE FROM user WHERE user='username';
mysql> FLUSH PRIVILEGES;

데이터베이스 생성/보기

데이터베이스를 생성하고,

mysql> CREATE DATABASE dbname;
현재 존재하는 데이터베이스 목록을 보여준다.

mysql> SHOW DATABASES;
특정 데이타베이스를 사용하겠다고 선언한다.

mysql> USE dbname;
쓸모 없으면 과감히 삭제한다.

mysql> DROP DATABASE [IF EXISTS] dbname;

IF EXISTS 옵션은 비록 데이타베이스가 없더라도 오류를 발생시키지 말라는 의미이다.

테이블 생성/보기

테이블을 생성하고,

mysql> CREATE TABLE tablename (
column_name1 INT,
column_name2 VARCHAR(15),
column_name3 INT );
현재 데이타베이스의 테이블 목록을 보고

mysql> SHOW TABLES;
테이블 구조를 살펴본다.

mysql> EXPLAIN tablesname;
혹은
mysql> DESCRIBE tablename;
이름을 잘못 지정했으면 이름을 변경할 수도 있다.

mysql> RENAME TABLE tablename1 TO tablename2[, tablename3 TO tablename4];
필요 없으면 삭제한다.

mysql> DROP TABLE [IF EXISTS] tablename;

현재 상태 보기

mysql> status

--------------
mysql Ver 11.18 Distrib 3.23.58, for pc-linux (i686)

Connection id: 26
Current database: study
Current user: study@localhost
Current pager: stdout
Using outfile: ''
Server version: 3.23.58
Protocol version: 10
Connection: Localhost via UNIX socket
Client characterset: latin1
Server characterset: euc_kr
UNIX socket: /var/lib/mysql/mysql.sock
Uptime: 2 hours 9 min 59 sec

Threads: 1 Questions: 160 Slow queries: 0 Opens: 28 Flush tables: 1
Open tables: 1 Queries per second avg: 0.021
--------------

INSERT

mysql> INSERT INTO tablename VALUES(값1, 값2, ...);

혹은

mysql> INSERT INTO tablename (col1, col2, ...) VALUES(값1, 값2, ...);

SELECT

mysql> SELECT col1, col2, ... FROM tablename;

컬럼명을 *로 하면 모든 컬럼 의미.

mysql> SELECT col1 AS '성명', col2 AS '국어점수' FROM grade;

컬럼의 이름을 바꿔서 출력.

mysql> SELECT * FROM tablename ORDER BY col1 DESC;
mysql> SELECT col1, korean + math english AS '총점' FROM tablename ORDER BY '총점' ASC;

DESC는 내림차순 ASC는 오름차순.

mysql> SELECT * FROM grade WHERE korean < 90;

조건줘서 SELECT.

mysql> SELECT * FROM grade LIMIT 10;

결과중 처음부터 10개만 가져오기

mysql> SELECT * FROM grade LIMIT 100, 10;

결과중 100번째부터 10개만 가져오기. 첫번째 레코드는 0번 부터 시작한다.

UPDATE

mysql> UPDATE tablename SET col1=새값 WEHER 조건

DELETE

mysql> DELETE FROM tablename WEHRE 조건

mysql에서 쿼리 결과 세로로 보기
-E 옵션을 줘서 실행한다.

$ mysql -E -u root -p mysql

mysql에서 발생한 오류나 경고 다시 보기

mysql> show errors;
mysql> show warnings;

http://wiki.kwonnam.pe.kr/database/mysql/basic

[Android] SharedPreferences 사용하기

ezBuilder — Tue, 21 May 2013 01:31:50 +0900

protected void onPause() {
        SharedPreferences myPref = getSharedPreferences("myPref", Activity.MODE_WORLD_WRITEABLE);
        SharedPreferences.Editor myEditor = myPref.edit();
        myEditor.putString("name", "홍길동");
        myEditor.commit();
}

 protected void onResume() {
        SharedPreferences myPref = getSharedPreferences("myPref", Activity.MODE_WORLD_READABLE);
        String myPrefValue = myPref.getString("name", "").toString();
        Log.d("myPref :",myPrefValue);
}

[Android] 한글키보드 사용하기

ezBuilder — Tue, 14 May 2013 12:11:44 +0900

1. 아래 한글키보드 앱을 다운로드 받아 SDK의 platform-tools폴더에 복사한다.

HangulKeyboard.apk

2. sdk의 platform-tools 폴더로 이동하여 설치한다.

adb -s emulator-고유번호 install HangulKeyboard.apk

[JSP] JSTL

ezBuilder — Sat, 11 May 2013 17:05:32 +0900

1. JSTL 태그종류

라이브러리	하위 기능	접두어	관련URI
코어	변수지원 흐름 제어 URL 처리	c	http://java.sun.com/jsp/jstl/core
XML	XML 코어 흐름 제어 XML 변환	x	http://java.sun.com/jsp/jstl/xml
국제화	지역 메시지 형식 숫자 및 날짜 형식	fmt	http://java.sun.com/jsp/jstl/fmt
데이터베이스	SQL	sql	http://java.sun.com/jsp/jstl/sql
함수	콜렉션 처리 String 처리	fn	http://java.sun.com/jsp/jstl/functions

2. 코어태그 라이브러리 종류

기능분류	태그	설명
변수 지원	set	JSP에서 사용될 변수를 설정한다.
변수 지원	remove	설정한 변수를 제거한다.
흐름 제어	if	조건에 따라 내부 코드를 수행한다.
	choose	다중 조건을 처리할 때 사용된다.
	forEach	콜렉션이나 Map의 각 항목을 처리할 때 사용된다.
	forTokens	구분자로 분리된 각각의 토큰을 처리할 때 사용된다.
URL 처리	import	URL을 사용하여 다른 자원의 결과를 삽입한다.
	redirect	지정한 경로로 리다이렉트 한다.
	url	URL을 재작성 한다.
기타 태그	catch	예외 처리에 사용된다.
기타 태그	out	JspWriter에 내용을 알맞게 처리한 후 출력한다.

3. JSTL이 제공하는 주요 EL 함수

함수	설명
length(obj)	obj가 List와 같은 Collection인 경우 저장된 항목의 개수를 리턴하고, obj가 문자열일 경우 문자열의 길이를 리턴한다.
toUpperCase(str)	str을 대문자로 변환한다.
toLowerCase(str)	str을 소문자로 변환한다.
substring(str, idx1, idx2)	str.substring(idx1, idx2)의 결과를 리턴한다. idx2가 -1일 경우 str.substring(idx1)과 동일하다.
trim(str)	str 좌우의 공백문자를 제거한다.
replace(str, src, dest)	str에 있는 src를 dest로 변환한다.
indexOf(str1, str2)	str1에서 str2가 위치한 인덱스를 구한다.
startsWith(str1, str2)	str1이 str2로 시작할 경우 true를, 그렇지 않을 경우 false를 리턴한다.
endsWith(str1, str2)	str1이 str2로 끝나는 경우 true를, 그렇지 않을 경우 false를 리턴한다.
contains(str1, str2)	str1이 str2를 포함하고 있을 경우 true를 리턴한다.
escapeXml(str)	XML의 객체 참조에 해당하는 특수 문자를 처리한다. 예를 들어, '&'는 '&'로 변환한다.

[HTML] HTML5 Layout

ezBuilder — Thu, 9 May 2013 22:18:28 +0900

[JAVA] Assertion의 설명과 문법

ezBuilder — Tue, 30 Apr 2013 11:30:18 +0900

Assertion 이란?
Assertion? Programmer 자신이 전개하고 있는 Code 내용에서 Programmer가 생각하고 있는 움직임과 그리고 특정 지점에서의 Program상의 설정 값들이 일치하고 있는지를 검사할 수 있도록 하는 것이 바로 Assertion이다. 예로 어느 특정 method의 Arguement 값은 10이상이어야 한다는 Programmer의 확고함이 있다고 하자! 이럴 때 Assertion을 사용하여 Programmer가 주장하는 확고함을 조건으로 명시하고 그 조건을 만족할 때만 Code가 실행할 수 있도록 하는 것이 Assertion이다.

Assertion과 exception(Exception)의 차이점은?
Exception은 특정한 Code에서 exception가 발생하므로 일어나는 비 정상적인 Program 종료와 같은 1차적인 손실을 막고 exception에 대한 처리로 인해 Program의 신뢰성을 높이는 것. 하지만 Assertion은 어떤 결과를 위해 특정 Code나 변수의 값을 Programmer가 예상하는 값이어야 하는 것을 검증하는 것에 차이가 있다.

Assertion의 문법은 다음 두 가지로 나눈다.
1번 째

assert [boolean식];

2번 째

assert [boolean식] : [표현식];

Assertion 간단한 예문

assert var>10;

assert var<10 : “10보다 작은 값이어야 함!”;

assert str.equals(“”);

assert !str.equals(“”);

assert str != null : “str에 null값이 들어오면 안됨!”;

Assertion 컴파일 및 실행 법

Java Compiler는 ‘Assertion’기능을 수행하지 않으면서 Compile을 하게 되어 있다. 그러므로 Compiler에게 ‘Assertion’기능을 부여하면서 Compile을 수행하도록 하기 위해서는 다음과 같은 옵션을 주어야 한다.

java –source 1.5 [File name]

실행 할 때도 마찬가지로 다음과 같이 옵션을 주면서 실행해야 한다.

java –ea [class name]

-ea : Enable Assertions라고 해서 Assertion기능을 사용 가능하게 하는 Option이다.

-da : Disable Assertions라고 해서 ea의 반대 Option이다.

Assertion 예제

public class AssertTest1 {
     
    public static void main(String[] args){
        assert args.length>0:"시작시 인자값이 없습니다.";
        System.out.println(args[0]);
    }
 
}

[JSP] StringTokenizer 와 String.split()

ezBuilder — Mon, 29 Apr 2013 17:21:36 +0900

특정 구분자(경계기호:Delimter)를 기준으로 문자열을 분해 할 때 흔히 사용하는 방법이 java.util.StringTokenizer를 이용해서 분해를 하거나 jdk1.4대에 새로 추가 된 java.lang.String.split(String regex)을 사용하는 방법입니다.

이들 둘은 "문자열에서 특정 구분자를 기준으로 문자열을 분해 한다"는 기본 기능은 같지만 그 결과는 "분해 할 문자열이 어떻게 구성이 되어 있느냐"에 따라서 서로 다른 결과값을 도출합니다.

예를 살펴보기 위해서 다음과 같은 가정을 하겠습니다.

분해 할 문자열은 "아이디, 이름, 전자우편주소,휴대전화"로 구성 된다.
"아이디, 이름" 이외의 항목은 있을 수도 있고 그렇지 않을 수도 있다.
각 항목을 구분하는 구분자는 ","로 한다.

1. 먼저 각 항목이 모두 존재 하는 경우를 살펴 보겠습니다. 이 경우라면 다음과 같은 형태가 될 것입니다.

neoburi,inkuk,neoburi@neoburi.com,019-366-5815

이 경우는 다음과 같이 분해를 할 수 있을 것입니다.

String str = "neoburi,inkuk,neoburi@neoburi.com,019-366-5815";

String[] values = str.split(",");

또는,

StringTokenizer values = new StringTokenizer( str, "," );

이 때에는 String.split(String regex)이나 StringTokenizer의 결과 값은 같게 나옵니다.

그런데 문제는 이렇게 모든 항목이 존재하지 않는 경우가 있을 때입니다.

2. 일부 항목만으로 문자열이 구성 된 경우를 살펴 보겠습니다.

예를 든다면 다음과 같은 값을 가질 때겠지요.

"아이디,이름,,전화번호" 일 경우
"아이디,이름,전자우편," 일 경우
또는 "아이디,이름,," 일 경우

1) "아이디,이름,,전화번호" 일 경우를 살펴 보겠습니다.

문자열은 다음과 같이 구성이 될 것입니다.

String str = "neoburi,inkuk,,019-366-5815";

String[] values = str.split(",");을 사용 할 경우 해보면 결과는 아래와 같습니다.
for( int x = 0; x < values.length; x++ ){

System.out.println( "문자(열) " + (x+1) + " : " + values[x] );

}

결과 :
StringTokenizer tokens = new StringTokenizer( str, "," );를 사용 할 경우

for( int x = 1; tokens.hasMoreElements(); x++ ){

System.out.println( "문자(열) " + x + " : " + tokens.nextToken() );

}

결과 :

문자(열) 1 : neoburi

문자(열) 2 : inkuk

문자(열) 3 : 019-366-5815

결과와 같이 split(String regex)을 이용한 경우에는 비록 값이 존재하지 않더라고 해당 데이터가 없다는 것을 확실하게 판단을 할 수 있습니다. 즉 구분자를 기준으로 데이터가 없는 부분도 그 결과를 반환해준다는 얘기지요.

그렇지만 StringTokenizer는 비록 구분자로 문자열간 구분이 되어 있더라도 구분자와 구분자 사이에 데이터가 존재하지 않으면 (",,"의 경우) 해당 데이터는 무시를 하고 실제 값이 존재하는 부분만 값을 반환합니다.

두 결과 사이에는 많은 차이가 남을 볼 수 있습니다.

2) "아이디,이름,전자우편," 일 경우

이 역시 문자열은 다음과 같이 구성이 될 것입니다.

String str = "neoburi,inkuk,neoburi@neoburi.com,";

String[] values = str.split(",");
for( int x = 0; x < values.length; x++ ){

System.out.println( "문자(열) " + (x+1) + " : " + values[x] );

}

결과 :
StringTokenizer tokens = new StringTokenizer( str, "," );

for( int x = 1; tokens.hasMoreElements(); x++ ){

System.out.println( "문자(열) " + x + " : " + tokens.nextToken() );

}

결과 :

문자(열) 1 : neoburi

문자(열) 2 : inkuk

문자(열) 3 : neoburi@neoburi.com

위에서 보는 바와 같이 분해하고자 하는 문자열의 마지막 요소가 존재하지 않을 경우 String.split(String regex)과 StringTokenizer는 같은 결과를 보여줍니다.

두 결과사이에는 차이가 없음에도 불구하고 잃어 버리는 데이터가 생겼습니다. 개발자는 분명히 사용자의 정보로부터 4개의 항목을 얻어 표현을 하고 싶지만 그렇게 할 수가 없습니다. 물론 어거지로 한다면 가능은 하겠지만요.^^

그러면 String.split(String regex)과 StringTokenizer를 사용 하더라고 분해하고자 하는 마지막 항목이 없을 경우는 분해 할 방법이 없을까요? 그렇지 않습니다.

API를 어느정도 보신 분들이라면 아마 "그것은 이렇게 하면 되지!"라고 속으로 생각 하실 겁니다.

java.lang.String클래스에는 split()메소드가 2개가 있습니다.

하나는 split( String regex )이고
다는 하나는 split( String regex, int limit )입니다.

String.split( String regex, int limit )를 사용해서 분해를 해보겠습니다.

String[] values = str.split(",", 4);
for( int x = 0; x < values.length; x++ ){

System.out.println( "문자(열) " + (x+1) + " : " + values[x] );

}

결과 :

비록 마지막 분해 요소의 값이 존재하지 않더라고 split( String regex, int limit )를 이용하면 고스란히 원하는 형태의 데이터를 얻는 것을 볼 수 있습니다.

StringTokenizer의 경우는 구분자 사이에 분해할 요소의 값이 존재하지 않으면 무시하게 되어 있습니다. 완전하게 모든 요소의 값이 존재하는 경우라면 사용을 해도 되겠지만 예에서 본 바와 같이 가변적인 데이터라면 사용하기 불편한(?) 것이 사실입니다.

String.split()의 경우 limit를 저정 하지 않았을 경우에는 제일 마지막에 오는 요소의 값이 없을 경우 그 요소를 무시하도록 되어 있습니다. 이 역시 데이터가 정형화 되어 있는 경우라면 사용해도 무리 없겠지만 가변요소가 존재 한다면 StringTokenizer와 크게 다를 게 없습니다.

대신 limit를 지정 했을 경우 해당 숫자만큼만 분해를 합니다. limit는 분해를 한 후 얻고자 하는 String[]의 요소크기라고 보시면 됩니다.

limit가 분해하고자 하는 요소의 개수와 같거나 클 경우 요소의 개수만큼의 String[]을 되돌려 주지만, 요소의 개수보다 작을 경우 지정한 숫자만큼의 String[]으로 되돌려 줍니다.

좀 더 자세히 알고 싶으신 분들은 자바 원천 소스에서 java.lang.String과 java.util.StringTokenizer를 살펴보시기 바랍니다.

[MySQL] 테이블 수정하기

ezBuilder — Mon, 29 Apr 2013 16:50:27 +0900

이름 바꾸기

mysql> ALTER TABLE tablename RENAME bbs;

컬럼 속성 수정

mysql> ALTER TABLE tablename MODIFY colname INT NOT NULL AUTO_INCREMENT PRIMARY KEY;

ALTER TABLE tablename MODIFY 컬럼이름 컬럼속성

컬럼 이름 바꾸기

sysql> ALTER TABLE tablename CHANGE colname newcolname INT NOT NULL AUTO_INCREMENT;

CHANGE는 컬럼 속성뿐아니라 이름도 바꿔준다.

컬럼 추가

mysql> ALTER TABLE bbs ADD name varchar(10);

ALTER TABLE tablename ADD 컬럼이름 컬럼속성

컬럼 삭제

mysql> ALTER TABLE bbs DROP colname;

특정 컬럼 뒤에 새로운 컬럼 추가

mysql> ALTER TABLE bbs ADD newcol varchar(10) AFTER num;

num 컬럼 뒤에 newcol 컬럼 추가.

기존 컬럼을 지우고 맨 앞에 컬럼 추가

mysql> ALTER TABLE bbs DROP newcol, ADD newcol VARCHAR(10) FIRST;

맨 앞에 추가하려면 FIRST를 사용한다.

PRIMARY KEY 속성 삭제

mysql> ALTER TABLE test DROP PRIMARY KEY;

이미 PRIMARY KEY인 컬럼의 속성을 바꿀 때
PRIMARY KEY 속성은 지정하지 말고, NOT NULL 속성을 함께 지정해 주면 기존 PRIMARY KEY 속성은 그대로 남은 상태로 컬럼의 속성을 변경할 수 있다.

mysql> ALTER TABLE test MODIFY a CHAR(1) NOT NULL;

테이블의 내용 전체 삭제

mysql> TRUNCATE TABLE tablename;

트랜잭션에 의해 복구될 수 없다.

[Oracle] DBMS_LOB 데이터 조회 방법

ezBuilder — Mon, 29 Apr 2013 09:16:05 +0900

오라클의 LOB 데이터 조회

1. 첫번쨰
SELECT DBMS_LOB.INSTR(content, '영문', 1, 1) FROM tb_board_clob
WHERE DBMS_LOB.INSTR(content, '영문', 1, 1) <> 0;

2. 두번째
SELECT DBMS_LOB.SUBSTR(CONTENTS_TXT, DBMS_LOB.GETLENGTH(CONTENTS_TXT), 1) FROM LOCALBBS_ALL WHERE BBS_TYPE = 'T'

이렇게 하면 content 의 내용중에서 '영문' 이라는 문자를 찾아
그곳의 byte 또는 위치값을 Return 합니다.

content 필드에서 '영문' 이라는 문자열을 1 번째 offset으로 부터
시작하여 1 번째 찾아라, 뭐 그런 뜻입니다.

찾지 못하면 0 을 Return 합니다. 그러니 0 과 같지 않으면 찾았다고
보면 되는 거죠.

그럼.. 좋은 정보였으면 합니다.

----------------------------------------------------------------

DBMS_LOB

BLOB 또는 CLOB 타입의 컬럼 데이터에 대한 여러 가지 연산을 제공하는 패키지

패키지 활용

DBMS_LOB 패키지 내의 프로시저와 함수를 이용하여 대용량 객체인 LOB타입의 전체 또는 일부에 대하여 읽기, 쓰기 등의 작업을 수행할 수 있다.

패키지 구성

[DBMS_LOB 패키지 내 프로시저]

APPEND
COPY
CREATETEMPORARY
ERASE
READ
TRIM
WRITE
WRITEAPPEND

[DBMS_LOB 패키지 내 함수]

COMPARE
FREETEMPORARY
GETLENGTH
INSTR
ISTEMPORARY
SUBSTR.

DBMS_LOB 패키지 내 프로시져

**BLOB타입은 출력결과를 바로 확인할 수 없으므로, CLOB타입을 중심으로 예제를 작성한다.

APPEND

[Call Syntax]


DBMS_LOB.APPEND(dest_lob, src_lob)

**dest_lob : 대상 LOB locator

**src_lob : 원본 LOB locator

[테스트예제]


--‘All’s fair in’ 뒤에 ’love and war’문장을 붙이는예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
dest_lob CLOB := 'All''s fair in ';
src_lob CLOB := 'love and war';
BEGIN
DBMS_LOB.APPEND(dest_lob, src_lob);
DBMS_OUTPUT.PUT_LINE('Result = ' || dest_lob);
END;
/
Result = All's fair in love and war
PSM completed.

COPY

: 원본 LOB 데이터 전체 또는 일부를 대상 LOB 데이터에 복사하는 프로시저

[Call Syntax]


DBMS_LOB.COPY(dest_lob, src_lob, amount, dest_offset, src_offset)

**dest_lob : 대상 LOB locator
**src_lob: 원본 LOB locator
**amount: 복사할 문자의 개수
**dest_offset: 대상 LOB 데이터 내의 시작위치
**src _offset: 원본 LOB 데이터 내의 시작위치

[테스트예제]


--’I love’뒤에 src_lob에서 3글자를 뺀 나머지 데이터를 복사하여 dest_lob 데이터에 +1한 위치에
붙여넣는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
dest_lob CLOB := 'I love ';
src_lob CLOB := 'you him';
BEGIN
DBMS_LOB.COPY(dest_lob, src_lob, length(src_lob)-3,
length(dest_lob)+1, 1);
DBMS_OUTPUT.PUT_LINE('Result = ' || dest_lob);
END;
/
Result = I love you
PSM completed.

CREATETEMPORARY

: Temporary CLOB 또는 BLOB을 생성하는 프로시저

[Call Syntax]


DBMS_LOB.APPEND(dest_lob, src_lob)

** lob : 대상 LOB locator

**cache :LOB 데이터를 읽을 때 버퍼캐쉬(buffer cache)에 저장할지 여부(boolean 타입)

[테스트예제]


-- DBMS_LOB.CREATETEMPORARY프로시저를 통해 임시로 CLOB타입 lob_1변수를 열어
lob_2데이터를 붙여 넣는 예제.
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob_1 CLOB;
lob_2 CLOB := 'tibero';
BEGIN
DBMS_LOB.CREATETEMPORARY(lob_1, false);
DBMS_LOB.APPEND(lob_1, lob_2);
DBMS_OUTPUT.PUT_LINE(lob_1);
END;
/
tibero
PSM completed.

ERASE

: LOB 데이터의 일부 또는 전체를 삭제하는 프로시저.

(삭제된 영역에는 0(BLOB 데이터) 또는 공백(CLOB 데이터)으로 채워진다.)

[Call Syntax]


DBMS_LOB.ERASE(lob, amount, offset)

** lob : 대상 LOB locator
**amount: 삭제할 문자의 개수
**offset: 삭제할 시작위치

[테스트예제]


-- CLOB타입 변수에 ‘Tmaxsoft Tibero’라는 데이터를 저장한 후, 앞에서 9번째부터 7글자를 삭제
하며 삭제 전, 후의 데이터와 크기를 비교하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'Tmaxsoft Tibero';
amount NUMBER := 7;
BEGIN
DBMS_OUTPUT.PUT_LINE('Length of original LOB = ' || length(lob));
DBMS_LOB.ERASE(lob, amount, 9);
DBMS_OUTPUT.PUT_LINE('Value of erased LOB = ' || lob);
DBMS_OUTPUT.PUT_LINE('Length of erased LOB = ' || length(lob));
END;
/
Length of original LOB = 15
Value of erased LOB = Tmaxsoft
Length of erased LOB = 15
PSM completed.

READ

: 대상 LOB 데이터의 일부 또는 전체를 읽어서 출력 파라미터 buffer에 저장하는 프로시저

[Call Syntax]


DBMS_LOB.READ(lob, amount, offset, buffer)

**lob: 읽을 대상 LOB locator
**amount: 읽을 문자의 개수
**offset: 읽을 대상 LOB데이터 내의 시작할 위치
**buffer: 읽을 데이터를 저장하는 출력 버퍼

[테스트예제]


-- CLOB 타입 변수에 ‘KOREA fighting’라는 데이터를 저장한 후, 저장된 데이터의 앞에서 8번째부터
읽어 들여 출력하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'KOREA fighting!!!';
buffer VARCHAR2(256);
amount BINARY_INTEGER := 8;
BEGIN
DBMS_LOB.READ(lob, amount, 7, buffer);
DBMS_OUTPUT.PUT_LINE('Value to be read = ' || buffer);
END;
/
Value to be read = fighting
PSM completed.

TRIM

: 대상 LOB 데이터의 길이를 지정된 길이로 설정하는 프로시저

[Call Syntax]


-- CLOB 타입 변수에 ‘KOREA fighting’라는 데이터를 저장한 후, 저장된 데이터의 앞에서 8번째부터
DBMS_LOB.TRIM (lob, newlen)

**lob : 대상 LOB locator
**newlen: 대상 LOB 데이터의 새로운 길이.

TRIM

: 대상 LOB 데이터의 길이를 지정된 길이로 설정하는 프로시저

[테스트예제]


-- DBMS_LOB.TRIM 프로시저를 통해 CLOB 타입의 변수에 저장된 데이터의 길이를 새로 설정하
는 예제( 본 예제에서는 25자 길이의 데이터로 재설정하였음.)
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'A pity beyond all telling is in the heart of love';
BEGIN
DBMS_LOB.TRIM(lob, 25);
DBMS_OUTPUT.PUT_LINE('Value = ' || lob);
DBMS_OUTPUT.PUT_LINE('Length = ' || length(lob));
END;
/
Value = A pity beyond all telling
Length = 25
PSM completed.

WRITE

: 대상 LOB 데이터의 지정된 오프셋 위치에 주어진 데이터를 지정된 크기만큼 저장하는 프로시저.

[Call Syntax]


DBMS_LOB.WRITE(lob, amount, offset, buffer)

**lob: 대상 LOB locator
**amount: 저장할 데이터의 크기
**offset: 데이터를 저장할 시작위치
**buffer: 저장할 데이터.

[테스트예제]


-- CLOB타입 변수를 임시로 열어 buffer에 저장된 데이터의 크기만큼 CLOB타입 변수의 1번째 오
프셋 위치에 저장하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB;
buffer VARCHAR2(100);
BEGIN
DBMS_LOB.CREATETEMPORARY(lob, false);
buffer := 'Love is friendship set on fire';
DBMS_LOB.WRITE(lob, length(buffer), 1, buffer);
DBMS_OUTPUT.PUT_LINE(lob);
END;
/
Love is friendship set on fire
PSM completed.

WRITEAPPEND

: 대상 LOB 데이터의 끝에 주어진 데이터를 지정된 크기만큼 저장하는 프로시저

[Call Syntax]


DBMS_LOB.WRITEAPPEND(lob, amount, buffer)

**lob: 대상 LOB locator
**amount: 저장할 데이터의 크기
**buffer: 저장할 데이터

[테스트예제]


-- CLOB타입 변수 lob에 저장된 데이터 끝에 buffer에 저장된 데이터의 크기만큼 저장하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'Parting is such ';
buffer VARCHAR2(100) := 'sweet sorrow';
BEGIN
DBMS_LOB.WRITEAPPEND(lob, length(buffer), buffer);
DBMS_OUTPUT.PUT_LINE('Result = ' || lob);
END;
/
Result = Parting is such sweet sorrow
PSM completed.

DBMS_LOB 패키지 내 함수

COMPARE

: 두 개의 LOB 데이터의 전체 또는 일부를 비교하는 함수
(같은 타입의 LOB 데이터 간에만 비교가 가능)

[Call Syntax]


DBMS_LOB.COMPARE (lob_1, lob_2) --return INTEGER(전체비교)
DBMS_LOB.COMPARE (lob_1, lob_2, amount, offset_1, offset_2) --return INTEGER(일부비교)

**amount : 비교할 데이터의 크기

[테스트예제]


--lob_1 데이터와 lob_2데이터 전체를 비교하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob_1 CLOB := 'abcdefgh';
lob_2 CLOB := 'abcdefgg';
BEGIN
IF DBMS_LOB.COMPARE(lob_1, lob_2) = 0 then
DBMS_OUTPUT.PUT_LINE('LOB_1 equals LOB_2');
ELSE
DBMS_OUTPUT.PUT_LINE('LOB_1 does not equals LOB_2');
END IF;
END;
/
LOB_1 does not equals LOB_2
PSM completed.

FREETEMPORARY

: 이미 생성된 temporary BLOB 또는 CLOB을 삭제하는 함수

[Call Syntax]


DBMS_LOB.FREETEMPORARY (lob)

[테스트예제]


--이미 생성된 temporary CLOB을 삭제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB;
BEGIN
DBMS_LOB.CREATETEMPORARY(lob, false);
DBMS_LOB.FREETEMPORARY(lob);
END;
/
PSM completed.

GETLENGTH

: 대상 LOB 데이터의 길이를 반환하는 함수
(입력 LOB 데이터의 타입에 따라 바이트 또는 문자 단위의 값이 반환됨)

[Call Syntax]


DBMS_LOB.GETLENGTH(lob) --return INTEGER

[테스트예제]


--lob 데이터의 길이를 얻어 출력하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'Korea';
BEGIN
DBMS_OUTPUT.PUT_LINE(DBMS_LOB.GETLENGTH(lob));
END;
/
5
PSM completed.

INSTR

: 대상 LOB 데이터 내에서 주어진 패턴이 n 번째로 나타나는 오프셋을 반환하는 함수

[Call Syntax]


DBMS_LOB.INSTR(lob, pattern, offset, nth) --return INTEGER

**offset: LOB 데이터 내의 탐색을 시작할 위치.
**nth : 탐색할 패턴 개수

[테스트예제]


--lob 데이터에서 ‘or’패턴이 3번째 오프셋부터 탐색을 시작하여 2번째로 나타나는 오프셋을 반환
하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'Corporate floor';
result NUMBER;
BEGIN
result := DBMS_LOB.INSTR(lob, 'or', 3, 2);
DBMS_OUTPUT.PUT_LINE('Result offset = ' || result);
END;
/
Result offset = 14
PSM completed.

ISTEMPORARY

: 주어진 LOB이 temporary LOB인지 여부를 반환하는 함수

[Call Syntax]


DBMS_LOB.ISTEMPORARY(lob) --return INTEGER

** return 값이 1이면 temporary lob이고, 0이면 아님.

[테스트예제]


--주어진 lob이 temporary lob인지 아닌지의 여부를 판단하여 맞으면 ’true’ ,틀리면 ‘false’를 출력
하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB;
BEGIN
DBMS_LOB.CREATETEMPORARY(lob, false);
IF DBMS_LOB.ISTEMPORARY(lob) = 1
THEN
DBMS_OUTPUT.PUT_LINE('TRUE');
ELSE
DBMS_OUTPUT.PUT_LINE('FALSE');
END IF;
END;
/
TRUE
PSM completed.

SUBSTR

: 대상 LOB 데이터의 지정된 오프셋 위치로부터 지정된 크기만큼의 데이터를 반환하는 함수

[Call Syntax]


DBMS_LOB.SUBSTR(lob, amount, offset) --return RAW (BLOB)
--return VARCHAR (CLOB)

[테스트예제]


--lob 데이터에서 6번째 데이터부터 6문자를 잘라서 대문자로 만들어 하나의 완성된 문장을 출력
하는 예제
SQL> SET SERVEROUTPUT ON
SQL> DECLARE
lob CLOB := 'Your friend is too old';
buffer VARCHAR2(100);
BEGIN
buffer := DBMS_LOB.SUBSTR(lob, 6, 6);
DBMS_OUTPUT.PUT_LINE('My favorite word is ' || UPPER(buffer));
END;
/
My favorite word is FRIEND
PSM completed.

[Oracle] 페이징 처리

ezBuilder — Sun, 28 Apr 2013 10:43:11 +0900

1. 페이지 수를 계산하여 셀렉트

SELECT B.* FROM (
SELECT

CEIL(ROWNUM/10) PAGE
--, COUNT(*) OVER() AS TOTAL_COUNT
, A.* FROM (

SELECT * FROM OP_SAMPLE
ORDER BY ID DESC
) A
) B
WHERE PAGE = 100000;

100만 건인 경우 수행시간 : 1.327초, TOTAL_COUNT 까지 조회시 : 3.848초
10만 건인 경우 수행시간 : 0.135초 TOTAL_COUNT 까지 조회시 : 0.255초

2. ROW_NUMBER()를 이용한 페이징

SELECT * FROM (
SELECT A.*, ROW_NUMBER() OVER(ORDER BY ID DESC) AS NUM
FROM OP_SAMPLE A
)
WHERE NUM BETWEEN 999991 AND 1000000;

100만 건인 경우 수행시간 : 1.136초
10만 건인 경우 수행시간 : 0.253초

3. ROWNUM을 이용한 페이징

SELECT * FROM (
SELECT ROWNUM AS RNUM, Z.* FROM (
SELECT * FROM OP_SAMPLE ORDER BY ID DESC
) Z WHERE ROWNUM <= 1000000
) WHERE RNUM >= 999991;

100만 건인 경우 수행시간 : 0.826초
10만 건인 경우 수행시간 : 0.087초

4. ROWNUM + 인덱스를 이용한 페이징

SELECT * FROM (
SELECT /*+ INDEX_DESC(Z OP_SAMPLE_PK) */ ROWNUM AS RNUM, Z.* FROM (
SELECT * FROM OP_SAMPLE
) Z WHERE ROWNUM <= 1000000
) WHERE RNUM >= 999991;

100만 건인 경우 수행시간 : 0.687초
10만 건인 경우 수행시간 : 0.079초

참고로 MySql 쿼리 조회시 (mysql 5, innoDB)

SELECT * FROM OP_SAMPLE
ORDER BY ID DESC LIMIT 999991, 10;

100만 건인 경우 수행시간 : 0.033초

일반적인 페이징 처리 방법

SELECT * FROM (
   SELECT A.*,
     ROWNUM AS RNUM,
     FLOOR((ROWNUM-1)/{디스플레이수}+1) AS PAGE,
     COUNT(*) OVER() AS TOTCNT FROM (
      {검색쿼리 - 정렬이 필요할 경우 정렬조건 포함}
     )
   A)
WHERE PAGE = {페이지번호};

SELECT * FROM (
    SELECT A.*,
      ROWNUM AS RNUM,
      COUNT(*) OVER() AS TOTCNT FROM (
       {검색쿼리 - 정렬이 필요할 경우 정렬조건 포함}
      )
    A)
WHERE RNUM > {범위부터} AND RNUM <= {범위까지};

대용량 페이징 처리 방법

SELECT * FROM (
    SELECT ROWNUM AS RNUM, A.* FROM (
      {검색쿼리 - 정렬이 필요할 경우 정렬조건 포함}
    ) A
WHERE ROWNUM <= {범위까지}) WHERE RNUM > {범위부터};

OR

SELECT * FROM (
    SELECT /*+ INDEX_ASC or INDEX_DESC(A {정렬조건 인덱스명}) */
     ROWNUM AS RNUM, A.* FROM (
     {검색쿼리 - 정렬이 필요한 경우 정렬조건을 포함하지 않고 ORACLE 힌트사용}
    ) A
WHERE ROWNUM <= {범위까지}) WHERE RNUM > {범위부터};

[Oracle] JSTL 사용하기

ezBuilder — Thu, 25 Apr 2013 14:41:10 +0900

우선 아래 파일을 다운받는다.

jstl-1.2.jar

받은 파일을 이클립스 기준으로 WebContent > WEB-INF > lib 폴더에 복사하면 사용할 수 있다.

JSP 상단에 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 를 삽입한다.

JSP	JSTL	설명
<%= %>	${변수이름}
for문	<c:forEach items="" var=""></c:forEach>	items에는 list 또는 map이 들어감.
if문	<c:if test=""></c:if>	""안에 조건문이 들어감.

[Oracle] 자동 증가 컬럼(Sequence) 사용하기

ezBuilder — Thu, 25 Apr 2013 10:21:44 +0900

Unique Key를 생성하는 방법은 DBMS마다 차이가 있다.
MS-SQL은 IDENTITY를, MySQL은 auto_increment와 같이 쉽게 사용할 수 있는 방법이 있는데 오라클에서는 Sequence를 사용하여 다음과 같이 유사하게 구현할 수 있다

1. 자동증가컬럼을 사용하고자 하는 MYTABLE테이블을 생성한다.

CREATE TABLE MYTABLE
(ID NUMBER, NAME VARCHAR2(20));

2. CREATE SEQUENCE 라는 문장을 사용하여 SEQ_ID라는 이름의 시퀀스를 만든다.

CREATE SEQUENCE SEQ_ID INCREMENT BY 1 START WITH 10000;

-- INCREMENT BY 1 : 증가값은 1
-- START WITH 10000 : 10000부터 증가

3. 테이블에 데이터 입력시에는 NEXTVAL이라는 슈도 칼럼(Pseudo-column)을 이용하여 시퀸스를 사용한다.

INSERT INTO MYTABLE VALUES( SEQ_ID.NEXTVAL, '홍길동');

-- CURRVAL : 현재 값을 반환 합니다. .
-- NEXTVAL : 현재 시퀀스값의 다음 값을 반환 합니다.

----------------------------------------------------------------------------------------------------------

* Sequence 구문

CREATE SEQUENCE sequence_name
[START WITH n]
[INCREMENT BY n]
[MAXVALUE n | NOMAXVALUE]
[MINVALUE n | NOMINVALUE]
[CYCLE | NOCYCLE]

* START WITH
시퀀스의 시작 값을 지정합니다. n을 1로 지정하면 1부터 순차적으로 시퀀스번호가 증가 합니다.

* INCREMENT BY
시퀀스의 증가 값을 말합니다. n을 2로 하면 2씩 증가합니다.
START WITH를 1로 하고 INCREMENT BY를 2으로 하면 1, 3, 5,7,..
이렇게 시퀀스 번호가 증가하게 됩니다.

* MAXVALUE n | NOMAXVALUE
MAXVALUE는 시퀀스가 증가할수 있는 최대값을 말합니다.
NOMAXVALUE는 시퀀스의 값을 무한대로 지정합니다.

* MINVALUE n | NOMINVALUE
MINVALUE는 시퀀스의 최소값을 지정 합니다.
기본값은 1이며, NOMINVALUE를 지정할 경우 최소값은 무한대가 됩니다

[사용규칙]

* NEXTVAL, CURRVAL을 사용할 수 있는 경우
- subquery가 아닌 select문
- insert문의 select절
- insert문의 value절
- update문의 set절

* NEXTVAL, CURRVAL을 사용할 수 없는 경우
- view의 select절
- distinct 키워드가 있는 select문
- group by, having, order by절이 있는 select문
- select, delete, update의 subquery
- create table, alter table 명령의 default값

[수정과 삭제]

ALTER SEQUENCE sequence_name
[INCREMENT BY n]
[MAXVALUE n | NOMAXVALUE]
[MINVALUE n | NOMINVALUE]
[CYCLE | NOCYCLE]

START WITH는 수정할수 없습니다.
START WITH 절이 없다는 점을 빼고는 CREATE SEQUENCE와 같습니다.

DROP SEQUENCE sequence_name

자료참고 : http://www.oracleclub.com/

[Oracle] 문법정리

ezBuilder — Thu, 25 Apr 2013 09:52:35 +0900

* 데이터 검색
SELECT 칼럼명 , GROUP 함수
FROM 테이블명
WHERE 조건식
GROUP BY 칼럼명
HAVING 조건식
ORDER BY 칼럼이나 표현식 ;
- DISTINCT : 중복행을 제거함.
항상 SELECT 바로 다음에서 기술
DISTINCT뒤에 나타나는 컬럼들은 모두 DISTINCT의 영향를 받음
기본적으로 오름차?nbsp;정렬됨
- ALIAS : 나타날때 컬럼에 대하여 다른 이름을 부여함
- GROUP BY : 전체 데이터를 소그룹으로 나눌 칼럼을 명시한다.
- HAVING : GROUP에 대한 조건을 기술한다.
- WHERE절에 사용되는 연산자의 3가지 부류
논리 연산자 - AND : 여러조건을 동시에 만족한다.
- OR : 여러조건들 중 어느 하나라도 만족한다.
- NOT : 조건에 대한 반대를 돌려준다.
논리 비교 연산자 - = : 같다.
- > : 보다 크다.
- >= : 보다 크거나 같다.
- < : 보다 작다.
- <= : 보다 작거나 같다.
SQL 비교 연산자 - BETWEEN a AND b : a와 b사이에 있다.(a,b값 포함)
- IN (list) : list의 값 중 어느 하나와 일치한다.
- IS NULL : NULL값을 가졌다.
LIKE '%문자_문자%‘ : % 는 0개서부터 여러개까지의 문자열
을 나타내는 와일드카드 (wildcard)이고
_ 는 단 하나의 문자를 나타내는 와일드카드입니다.
와일드 카드를 일반문자처럼 쓰고 싶은 경우에는 ESCAPE 옵션을 사용
WHERE name LIKE '%X_Y%' ESCAPE ''

SQL> SELECT name,salary*18 AS 연봉
2 FROM s_emp;
SQL> SELECT name||' '||title
2 FROM s_emp ;
SQL> SELECT name, salary*18 연봉 , title
2 FROM s_emp
3 ORDER BY salary*18 DESC ;
SQL> SELECT name , salary
2 FROM s_emp
3 WHERE salary BETWEEN 1000 AND 1500;
SQL> SELECT name, title , dept_id
2 FROM s_emp
3 WHERE dept_id IN (110,113) ;
SQL> SELECT name, start_date , title
2 WHERE start_date BETWEEN '01-JAN-91'
3 AND '31-DEC-91' ;
SQL> SELECT dept_id , count(*) 인원수
2 FROM s_emp
3 WHERE dept_id = 110
4 GROUP BY dept_id ;
SQL> SELECT dept_id , AVG(salary)
2 FROM s_emp
3 GROUP BY dept_id ;
SQL> SELECT dept_id , AVG(salary)
2 FROM s_emp
3 WHERE title = '사원'
4 GROUP BY dept_id ;
SQL> SELECT dept_id , title , COUNT(*)
2 FROM s_emp
3 GROUP BY dept_id , title ;
SQL> SELECT title , AVG(salary) , COUNT(*)
2 FROM s_emp
3 GROUP BY title
4 HAVING COUNT(*) > 2 ;
SQL> SELECT title , SUM(salary) 급여총합
2 FROM s_emp
3 WHERE title NOT LIKE ‘%부장’
5 HAVING SUM(salary) > 10000
6 ORDER BY SUM(salary) ;

* SQL*PLUS의 기능

- 버퍼에 있는 명령어 편집하기
A(PPEND) text : line의 끝에 text를 추가함
C(HANGE)/old/new : old를 new로 바꿈
DEL n : n line을 지움
I(NPUT) text : 다음 line에 text를 추가함
L(IST) : 전체 문장을 보여줌
n text : n line전체를 text로 바꿈
R(UN) : buffer에 있는 문장을 실행함(/ 와 같음)
EDIT : buffer에 있는 문장을 파일로 부름(afiedt.buf)

- 파일에 있는 명령어 편집하기
SAVE a : buffer에 있는 내용을 a.sql 파일로 저장
GET a : 파일 a에 있는 내용을 buffer로 부름
START a (=@a) : 파일 a를 실행함
! : UNIX Shell로 나들이
!vi a.sql : 파일 a.sql을 vi편집기로 부름

- 환경설정 : SET 환경변수 값
COLSEP (text) : 칼럼이 표시될때 칼럼간의 구별문자 기본값은 공백
FEEDBACK (off|on) : 선택된 행이 몇행인지를 표시함 기본값은 6행 이상인 경우에 on
HEADING (off|on) : 칼럼에 대한 HEADING를 표시함 기본 값은 on
LINESIZE (n) : 한 라인당 표시되는 문자의 수 기본값은 80
PAGES (n) : 한 페이지당 표시되는 라인수 기본값은 24
PAUSE (off|on|text) : 「ENTER」키를 누를 때마다 화면이 지나감 기본값은 off
TIMING (off|on) : SQL문장이 처리되는데 걸리는 시간을 표시 기본값은 off
SHOW : SET 환경이 어떻게 설정되어 있는지 보는 명령어
SHOW ALL : 전체가 어떻게 설정되어 있는지 보고 싶은 경우
자신이 쓰는 환경을 항상 맞추고 싶으면
login.sql 파일에 SET환경을 설정하면 됩니다.

- 표시형식
COL(UMN) 칼럼이나 ALIAS 옵션
- 옵션의 종류 - CLE(AR) : 칼럼에 지정된 형식을 지움
- FOR(MAT) : 형식 칼럼에 대한 표시 형식과 폭을 바꿈
- HEADING text : 칼럼에 대한 HEADING를 지정함
SQL> COL name HEADING ‘사원이름’ FORMAT A10
SQL> COL salary FORMAT $9,999,999
SQL> COL salary CLEAR
CLEAR COLUMNS : 지정된 형식을 다 지우고 싶은 경우

- 변수사용
&변수 사용 : 사용자가 원하는 데이터를 사용할 때마다 입력하고 싶은 경우에
치환변수를 사용. 사용시에는 &기호를 이용
&&기호를 사용하면 한번 입력받은 변수값을 다시 적용할 수 있음
&기호를 이용하여 조건, 칼럼명, 테이블명, 전체 SELECT구문도 받을 수 있음
SQL> SELECT id,name,dept_id
2 FROM s_emp
3 WHERE dept_id = &부서번호 ;
Enter value for 부서번호: 112
old 3: WHERE dept_id = &부서번호
new 3: WHERE dept_id = 112
ACCEPT를 사용한 변수
사용자가 SELECT구문을 사용하기 전에 미리 변수를 설정해 놓는 경우에
ACCEPT를 사용할 수 있습니다.
> ACCEPT 변수명 데이터타입 FORMAT PROMPT text HIDE
데이터타입 : NUMBER,CHAR,DATE 중에서 지정
FORMAT : A10, 9,999등의 표시 형식지정
PROMPT text : 사용자가 데이터를 입력할 때 보여주는 문장
HIDE : password등을 지정시 화면에 보이지 않도록 함
SQL> ACCEPT p_salary NUMBER PROMPT ‘급여 입력 :’
SQL> ACCEPT pswd CHAR PROMPT 'Password : ' HIDE

* 단일행 함수
- 문자형 함수
UPPER : 모든 문자를 대문자로 전환
LOWER : 모든 문자를 소문자로 전환
INITCAP : 문자를 단어별로 앞머리는 대문자 나머지는 소문자로 전환
CONCAT : 두 문자열을 합성. ||연산자와 같은 용도로 사용
SUBSTR : 특정문자열의 부분을 선택
LENGTH : 문자열의 길이를 구함
LPAD : 왼쪽 문자 자리를 채움
RPAD : 오른쪽 문자 자리를 채움
LTRIM : 왼쪽 문자를 지움
RTRIM : 오른쪽 문자를 지움
TRANSLATE : 특정 문자열을 대체
REPLACE : 특정 문자열을 대신

UPPER(문자값) : UPPER('Oracle Server')
→ ORACLE SERVER
LOWER(문자값) : LOWER('Oracle Server')
→ oracle server
INITCAP(문자값) : INITCAP('Oracle Server')
→ Oracle Server
CONCAT(문자값1, 문자값2) : CONCAT('Oracle',' Server')
→ Oracle Server
SUBSTR(문자값, a, b)
a 선택할 문자열의 시작위치.
음수면 끝에서부터 시작
b 선택할 문자열의 개수.
이 인자는 생략할 수 있으며,
생략할 경우 문자열의 끝까지 선택
: SUBSTR('강남구 역삼동‘,5,2)
→ 역삼
LENGTH(문자값1, a, 문자값2) : LENGTH(‘홍길동’)
→ 3
LPAD(문자값1, a, 문자값2)
RPAD(문자값1, a, 문자값2)
a : 전체 채울 자리수
문자값2 : 채울 문자
생략할 수 있으며, 생략되면
공백값임
: LPAD(‘홍길동’,10 ‘*’)
→ ****홍길동
LTRIM(문자값1, 문자값2)
RTRIM(문자값1, 문자값2)
문자값1에서 왼쪽(오른쪽)에서부터
더이상 문자값2를 만나지 않을 때까지 지움
: LTRIM('XXAXBA','X')
→ AXBA
TRANSLATE(문자값, a, b)
a 대체하고 싶은 문자(from)
b 대체할 결과의 문자(to)
: TRANSLATE('AABBA','B','C')
→ AACCA
REPLACE (문자값, a, b)
a 바꾸고 싶은 문자(from)
b 바꿀 결과의 문자(to)
: REPLACE ('JACK and JUE','J','BL')
→ BLACK and BLUE

- 숫자형 함수
ROUND : 숫자를 반올림
TRUNC : 숫자를 절사
MOD : 나누기 연산에서 나머지 구함
POWER : 거듭제곱
SQRT : 제곱근
SIGN : 양수인지 음수인지 0인지를 구벌함
CHR : ASCII 값에 해당하는 문자를 구함

ROUND(숫자값, a), TRUNC(숫자값, a)
a 숫자값을 반올림(버림)하여 a자리까지
돌려줌.a가 양수이면 소수이하자리를,
음수이면 정수 부분 자리임
생략할 수 있으며, 생략하면 0
: ROUND(35.735,2)→35.74
MOD(숫자값, a )
a 숫자값을 나누기 할 수 있음
: MOD(7,2)→1
POWER(숫자값1, 숫자값2) : POWER(3,2)→9
SQRT (숫자값) : SQRT(25)→5
SIGN(숫자값) : SIGN(-15)→-1
CHR(숫자값) : CHR(65)→A

- 날짜형 함수
SYSDATE : 현재 시스템의 날짜 및 시간을 구함
LAST_DAY : 지정한 날짜의 해당 월의 마지막 날짜를 구함
MONTHS_BETWEEN : 두 날짜 사이의 개월 수를 구함
ADD_MONTHS : 지정한 날짜로부터 몇 개월 후의 날짜를 구함
ROUND : 날짜에 대한 반올림
TRUNC : 날짜에 대한 버림

SYSDATE : SYSDATE → 10-MAY-99
LAST_DAY(날짜값) : LAST_DAY('17-FEB-98') → 28-FEB-98
MONTHS_BETWEEN(날짜값1, 날짜값2) : MONTHS_BETWEEN('26-APR-97','22-JUL-95') → 21.1290323
ADD_MONTHS(날짜값, 숫자값) : ADD_MONTHS('22-JUL-95',21) → 22-APR-97
ROUND(날짜값, 자리수) : 현재 날짜가 1999년 5월 10일이라고 가정하자.
ROUND(SYSDATE,'MONTH') → 01-MAY-99
TRUNC(날짜값, 자리수) : 현재 날짜가 1999년 5월 10일이라고 가정하자.
TRUNC(SYSDATE,'YEAR') → 01-JAN-99

- 날짜에 대한 산술연산
날짜 + 숫자 : 날짜 특정한 날로부터 몇일 후의 날짜 계산
날짜 - 숫자 : 날짜 특정한 날로부터 몇일 전의 날짜 계산
날짜 - 날짜 : 숫자 두 날짜 사이의 차이를 숫자로 계산

- 변환형 함수
TO_CHAR : 숫자나 날짜를 문자열로 변환
TO_NUMBER : 문자를 숫자로 변환
TO_DATE : 문자를 날짜로 변환

- TO_CHAR에서 숫자를 문자로 변환시에 형식에 사용되는 요소
9 : 일반적인 숫자를 나타냄
0 : 앞의 빈자리를 0으로 채움
$ : dollar를 표시함
L : 지역 통화 단위(ex )
. : 소숫점을 표시함
, : 천단위를 표시함
- TO_CHAR에서 날짜를 문자로 변환시에 형식에 사용되는 요소
SCC : 세기를 표시 S는 기원전(BC)
YEAR : 연도를 알파벳으로 spelling
YYYY : 4자리 연도로 표시
YY : 끝의 2자리 연도로 표시
MONTH : 월을 알파벳으로 spelling
MON : 월의 알파벳 약어
MM : 월을 2자리 숫자로 표시
DAY : 일에 해당하는 요일
DY : 일에 해당하는 요일의 약어
DDD,DD,D : 연도,월,일 중의 날짜를 숫자로 표시
HH , HH24 : (1-12) , (0-23)중의 시간을 표시
MI : 분을 표시
SS : 초를 표시
AM(A.M.),PM(P.M.) : 오전인지 오후인지를 표시

TO_CHAR(문자값,‘형식’)
숫자를 문자로 변환 : TO_CHAR(350000,'$999,999')→ $350,000
숫자를 날짜로 변환 : TO_CHAR(SYSDATE,'YY/MM/DD')→ 95/05/25
TO_DATE(문자값, ‘형식’) : TO_DATE('10 SEPTEMBER 1992','DD MONTH YYYY')→10-SEP-92
TO_NUMBER(문자값) : TO_NUMBER('1234')→ 1234

- DECODE 함수
DECODE 함수는 값을 비교하여 해당하는 값을 돌려주는 함수
> DECODE (형식,비교값1,결과치1,비교값2,결과치2,...기본치 )
형식 : 컬럼이나 값
비교값1 : 형식이 비교값1에 맞는지를 비교
결과값1 : 형식이 비교값1에 맞을 때 갖는 값
기본치 : 형식이 비교값1,2,...에 맞지 않을 때 가지는 값
생략될 수 있으며, 생략되면 NULL이다.

SQL> SELECT name,title,DECODE(SUBSTR(title,-2,2),
2 '부장',salary*1.1,
3 '과장',salary*1.07,
4 '사원',salary*1.05,
5 salary) 이번달급여
6 FROM s_emp
7 ORDER BY 3 DESC ;

* 다중행 함수
- 그룹함수
COUNT( a ) : a의 행의 개수를 구함
AVG( a ) : a의 평균을 구함
SUM( a ) : a의 합계를 구함
MIN( a ) : a의 최소값을 구함
MAX( a ) : a의 최대값을 구함
STDDEV( a ) : a의 표준 편차를 구함
VARIANCE( a ) : a의 분산을 구함

COUNT(*)를 제외한 모든 그룹함수는 NULL값을 고려하지 않습니다.
중복값을 제거하고 싶은 경우는 a의 앞에 DISTINCT를 기술합니다.
MAX , MIN , COUNT를 제외한 그룹함수는 숫자타입의 데이터에만 가능합니다

* JOIN
- EQUIJOIN
컬럼에 있는 값들이 정확하게 일치하는 경우에 =연산자를 사용하여 JOIN하는 방법을 말합니다.
WHERE 절에서 JOIN조건을 기술하도록 합니다.

SELECT 테이블명.컬럼명, 테이블명.컬럼명, ...
FROM 테이블1, 테이블2
WHERE 테이블1.컬럼1 = 테이블2.컬럼2 ;

SQL> SELECT s_emp.name, s_emp.dept_id , s_dept.name
2 FROM s_emp , s_dept
3 WHERE s_emp.dept_id = s_dept.id ;
SQL> SELECT e.name 사원명, e.dept_id , d.name 부서명
2 FROM s_emp e, s_dept d
3 WHERE e.dept_id = d.id ;
SQL> SELECT e.name 사원명, d.name 부서명
2 FROM s_emp e, s_dept d , s_region r
3 WHERE e.dept_id = d.id
4 AND d.region_id = r.id
5 AND r.name LIKE '%서울%‘ ;

- NON-EQUIJOIN
Non-Eqijoin이란 한 칼럼의 값이 다른 칼럼의 값과 정확히 일치하지 않는 경우에
=연산자외의 다른 연산자를 사용하여 JOIN하는 방법을 말합니다

SQL> SELECT e.name, e.salary , g.grade 급여등급
2 FROM s_emp e, salgrade g
3 WHERE e.salary BETWEEN g.losal AND g.hisal ;

- OUTER JOIN
Outer join이란 JOIN조건을 만족하지 않는 경우에도 모든 행들을 다 보고자하는 경우에 JOIN하는 방법
SQL> SELECT e.name 사원명 ,e.id,c.name 고객명
2 FROM s_emp e, s_customer c
3 WHERE e.id (+) = c.sales_rep_id
4 ORDER BY 2;

- SELF JOIN
Self join이란 한 테이블의 행을 같은 테이블에 있는 행과 연결하는 방법으로 같은
테이블을 마치 두개의 테이블인 것처럼 사용하여 JOIN하는 방법을
SQL> SELECT w.id 사번, w.name 사원명 ,
2 m.id 부서장사번, m.name 부서장명
3 FROM s_emp w, s_emp m
4 WHERE w.manager_id = m.id ;

- SET 연산자의 활용
UNION : 각 QUERY결과의 합집합
UNION ALL : 각 QUERY결과의 합집합에 공통부분을 더함
INTERSECT : 각 QUERY결과의 교집합
MINUS : 첫번째 QUERY결과와 두번째 QUERY결과의 차집합

SELECT 칼럼1, 칼럼2 . . .
FROM 테이블1 . . .
SET 연산자
SELECT 칼럼1`, 칼럼2` . . .
FROM 테이블2 . . .
ORDER BY ;

SQL> SELECT name , dept_id , title
2 FROM s_emp
3 WHERE dept_id = 110
4 UNION
5 SELECT name , dept_id , title
6 FROM s_emp
7 WHERE dept_id = 113
8 ORDER BY 1 ;

* SUBQUERY
- SUBQUERY의 문형

SELECT 검색할 컬럼들
FROM 테이블명
WHERE 형식 연산자 (SELECT 검색할 컬럼들
FROM 테이블명
. . . );

SUBQUERY는 괄호로 묶여 있어야 합니다.
SUBQUERY구문에서는 ORDER BY절을 포함할 수 없습니다.
SUBQUERY는 연산자의 오른쪽에 나타나야 합니다.
SUBQUERY에서 사용할 수 있는 연산자의 종류에는
- 단일행 연산자(=, >, >=, <, <=, <>)
- 복수행 연산자 (IN, NOT IN)가 있습니다.

SUBQUERY를 사용할 수 있는 절의 종류
WHERE 절
HAVING절
UPDATE절
INSERT구문의 INTO절
UPDATE구문의 SET절
SELECT나 DELETE의 FROM절

- SINGLE ROW SUBQUERY
SUBQUERY에서 Main Query로 전달되는 행이 단 하나인 경우
이런 경우는 단일 행 연산자를 사용합니다
SQL> SELECT name, title , dept_id
2 FROM s_emp
3 WHERE dept_id = 김정미가 근무하는 부서;
SQL> SELECT dept_id
2 FROM s_emp
3 WHERE name = '김정미';
SQL> SELECT name, title , dept_id
2 FROM s_emp
3 WHERE dept_id = (SELECT dept_id
4 FROM s_emp
5 WHERE name = ‘김정미’) ;
SQL> SELECT name, salary ,title
2 FROM s_emp
3 WHERE title = (SELECT title
4 FROM s_emp
5 WHERE name = ‘최정선’)
6 ORDER BY salary ;

- MULTI ROW SUBQUERY
SUBQUERY에서 Main Query로 전달되는 행이 여러 개인 경우를 말합니다.
이런 경우는 다중 행 연산자를 사용합니다.
SUBQUERY에서 넘어오는 행이 여러 개이므로, 이때 사용되는 연산자는 IN임을 주의하세요.
SQL> SELECT name, dept_id
2 FROM s_emp
3 WHERE dept_id IN (SELECT id
4 FROM s_dept
5 WHERE region_id =3 ) ;
SQL> SELECT name , dept_id
2 FROM s_emp
3 WHERE dept_id IN
4 (SELECT id
5 FROM s_dept
6 WHERE region_id =
7 (SELECT id
8 FROM s_region
9 WHERE name = ‘서울특별시’) ) ;

- MULTI COLUMN SUBQUERY
SUBQUERY구문을 작성할 때 WHERE절에서 비교하는 컬럼이 하나가 아니라
여러개의 컬럼을 동시에 비교하는 경우를 말하며, 이런 경우를 Pair-wise되었다고 합니다.

Non-Pairwise SUBQUERY
SQL> SELECT name, dept_id, salary
2 FROM s_emp
3 WHERE salary IN (SELECT MIN(salary)
4 FROM s_emp
5 GROUP BY dept_id );

Pairwise SUBQUERY
SQL> SELECT name, dept_id, salary
2 FROM s_emp
3 WHERE (salary,dept_id) IN
4 (SELECT MIN(salary),dept_id
5 FROM s_emp
6 GROUP BY dept_id );

- FROM절에서의 SUBQUERY
한 테이블에 데이터 양이 많은 경우에는 FROM절에 테이블 전체를 기술하여
사용하면 효율이 떨어질 수 있으므로 이런 경우에는 필요한 행과 열만을
선택하여 FROM절에 SUBQUERY로 기술함으로써 효율적인 데이터 검색을 할 수 있습니다.
SQL> SELECT e.name , e.title , d.name
2 FROM (SELECT name ,title , dept_id
3 FROM s_emp
4 WHERE title = ‘사원’) e , s_dept d
5 WHERE e.dept_id = d.id ;

- HAVING절에서의 SUBQUERY
일반적인 조건은 WHERE절에서 기술하지만, GROUP에 대한 조건은 HAVING절에서 기술합니다.
이 때 HAVING의 조건에 기술할 값이 주어져 있지 않은 경우에 모르는 값에 대한 데이터를
검색하기 위하여 SUBQUERY를 사용할 수 있습니다
SQL> SELECT dept_id , AVG(salary)
2 FROM s_emp
3 GROUP BY dept_id
4 HAVING AVG(salary) > (SELECT AVG(salary)
5 FROM s_emp
6 WHERE dept_id = 113) ;

- CORRELATED SUBQUERY
Outer Query의 candidate row가 더 이상 남지 않을때까지 반복됩니다.
CORRELATED SUBQUERY인 경우는 Outer Query의 각 행에 대해서 Inner Query가 매번 수행됩니다.

SQL> SELECT name, salary ,dept_id
2 FROM s_emp outer
3 where salary < (SELECT AVG(salary)
4 FROM s_emp
5 WHERE dept_id = outer.dept_id) ;

바로 2번째 LINE의 OUTER라는 테이블 ALLAS를 5번 LINE에서 사용하게 되면
내부적으로 CORRELATE SUBQUERY의 진행방식을 따르게 됩니다.

* 테이블 생성
- ORACLE8 데이터 타입
VARCHAR2(size) : 최대 길이가 size인 가변길이 문자값으로 최소길이는 1,최대길이는 2000
CHAR(size) : 길이가 size인 고정길이 문자값으로 기본길이는 1, 최대길이는 255
NUMBER : 38자리까지 유효한 부동 소수점 숫자
NUMBER(p,s) : 38의 범위 중에서 p의 자릿수까지 유효한 숫자값으로 전체 자릿수 p, 소수점 자릿수 s
DATE : B.C.4712년 1월에서 A.D.4712년 12월 31일 사이의 일자와 시간
LONG : 2GB까지의 가변길이 문자값으로 테이블당 한 개의 LONG열만 허용
RAW와 LONG RAW : 각각 VARCHAR2, LONG과 같지만 이진 데이터를 저장하는데 사용

- 테이블 생성
CREATE　TABLE　[스키마]테이블명
(칼럼명1 DATATYPE [DEFAULT 형식] ,
칼럼명2 DATATYPE [DEFAULT 형식] ,
..... ) ;
스키마 : 객체의 집합으로서 테이블의 소유자를 의미
테이블명 : 새로 생성하고자 하는 테이블의 이름
칼럼명 : 테이블에 포함된 칼럼의 이름
DATATYPE : 칼럼이 가질 데이터의 타입과 크기
DEFAULT : 데이터 입력(INSERT)시에 기본 값을 명시

- Constraint
제약조건이란 사용자가 원하는 조건의 데이터만 유지하기 위한 즉, 데이터의
무결성을 유지하기 위한 가장 보편적인 방법으로 테이블의 특정 칼럼에 설정하는 성질입니다.
테이블을 생성할 때 제약 조건을 반드시 줄 필요는 없습니다.

+ Constraint 성질
Constraint란 데이터 무결성 유지를 위하여 사용자가 지정할 수 있는 성질
모든 Constraint은 데이터 사전(Data Dictionary)에 저장됨
의미있는 이름을 부여했다면 Constraint을 참조하기 쉬움
Constraint의 이름은 표준 객체 명명법을 따르는게 좋음
Constraint의 이름은 한 사용자 내에서 중복될 수 없음
Constraint의 이름을 생략했다면 ORACLE은 SYS_Cn형식의 이름을 만듦

+ Constraint 정의 방법
+ 컬럼레벨 제약조건
각 컬럼별로 제약조건을 정의
제약조건의 어떤 유형도 정의 가능

문형
컬럼 [CONSTRAINT 제약조건 이름] 제한조건 유형

+ 테이블레벨 제약조건
컬럼에 대한 정의와는 별개로 정의
하나 이상의 컬럼(composite column)에 대하여 정의할때 사용
NOT NULL을 제외한 어떤 제약조건도 정의 가능

문형
컬럼 , ...
[CONSTRAINT 제약조건 이름] 제한조건 유형 (컬럼1,컬럼2..)

+ Constraint 종류
o NOT NULL 제약 조건
NOT NULL 제약 조건은 NULL값을 컬럼에 사용할 수 없게 합니다.
NOT NULL 제약 조건이 없는 컬럼은 NULL값을 가질 수 있습니다.
NOT NULL 제약 조건은 컬럼 레벨로만 정의할 수 있습니다.
... last_name VARCHAR2(25)
CONSTRAINT friend_last_name_nn NOT NULL , ...

o UNIQUE 제약 조건
UNIQUE 제약조건은 컬럼이나 컬럼의 조합을 고유 키로 지정합니다.
테이블에는 이 키에 대해 같은 값을 갖는 행이 하나 밖에 없습니다.
UNIQUE 키가 한 컬럼에 대한 것이라면 NULL 값을 쓸 수 있습니다.
컬럼 레벨이나 테이블 레벨에서 모두 정의할 수 있습니다.
UNIQUE 컬럼에 대해 UNIQUE 인덱스가 자동으로 생성됩니다.
(Column) ....phone VARCHAR2(10)
CONSTRAINT s_emp_phone_uk UNIQUE ,...
(Table) ....phone VARCHAR2(10),
CONSTRAINT s_emp_phone_uk UNIQUE(phone),...

o PRIMARY KEY 제약 조건
테이블에 단 하나의 Primary key만 허용합니다.
여러 컬럼일지라도 NULL값을 허용하지 않습니다.
테이블이나 컬럼 레벨에서 정의할 수 있습니다.
UNIQUE 인덱스를 자동으로 생성합니다.
(Column) .... id NUMBER(7)
CONSTRAINT s_emp_id_pk PRIMARY KEY....
(Table) .... id VARCHAR2(7),
CONSTRAINT s_emp_id_pk PRIMARY KEY(id),...

o FOREIGN KEY 제약 조건
foreign key는 자식(child) 테이블에 정의합니다.
부모(Parent) 테이블의 값과 일치하거나 NULL이어야 합니다.
테이블이나 컬럼 레벨에서 정의할 수 있습니다.
Foreign Key 제약조건을 줄 때 주의사항
1. 참조하고자 하는 테이블이 먼저 생성되어 있어야 합니다.
2. 참조하고자 하는 컬럼이 PRIMARY KEY 또는 UNIQUE 제약조건이 있어야 합니다.
3. ·참조하고자 하는 컬럼의 데이터 타입이 일치해야 합니다.
ON DELETE CASCDE옵션
FOREIGN KEY제약조건을 줄 때 ON DELETE CASCDE옵션을 줄 수 있습니다.
참조하는(child) 테이블쪽에 이 옵션을 주면 참조되는(parent) 테이블의
행을 삭제 가능하게 할 뿐만 아니라 참조하는 행들도 자동으로 삭제해 주는 옵션입니다.
(Column) 　....dept_id NUMBER(7)
CONSTRAINT s_emp_dept_id_fk REFERENCES s_dept(id)....

(Table) 　....dept_id NUMBER(7),
CONSTRAINT s_emp_dept_id_fk FOREIGN KEY(dept_id) REFERENCES s_dept(id)....

o CHECK 제약 조건
CHECK 제약 조건은 각 행이 만족해야 하는 조건을 정의합니다.
CHECK 제약 조건에서 사용할 수 없는 것은 다음과 같습니다.
CURRVAL, NEXTVAL, LEVEL, ROWNUM에 대한 참조
SYSDATE, UID, USER, USERENV 함수에 대한 호출
다른 행의 값을 참조
ORACLE7 Server의 예약어는 쓸 수 없다.
컬럼이나 테이블 레벨에서 모두 정의할 수 있다.
(Column) .... salary NUMBER(11,2)
CONSTRAINT s_emp_salary_ck CHECK (salary between 500 and 10000)..

(Table) ... salary NUMBER(11,2) ,
CONSTRAINT s_emp_salary_ck CHECK (salary between 500 and 10000)..

o SQL> CREATE TABLE c_emp
2 (id　　　　 NUMBER(5)
3 CONSTRAINT c_emp_id_pk PRIMARY KEY ,
4 name VARCHAR2(25)
5 CONSTRAINT c_emp_name_nn NOT NULL,
6 salary NUMBER(7,2) ,
7 phone VARCHAR2(15)
8 CONSTRAINT c_emp_phone_ck CHECK
9 (phone like '3429-%') ,
10　dept_id NUMBER(7)
11 CONSTRAINT c_emp_dept_id REFERENCES S_DEPT(ID) ) ;
SQL> CREATE TABLE emp_113(사번, 이름,메일,입사일)
2 AS SELECT id, name, mailid, start_date
3 FROM s_emp
4 WHERE dept_id = 113 ;

* 데이터 조작어
- INSERT
SQL> INSERT INTO emp(id,name,salary,title,in_date,dept_name)
2 VALUES (100,'무궁화',950,'대리',TO_DATE('1998/05/01','YYYY/MM/DD'),'영업부');
SQL> INSERT INTO emp
2 VALUES (100,'무궁화',950,'대리',TO_DATE('1998/05/01', 'YYYY/MM/DD'),'영업부');
SQL> INSERT INTO emp
2 VALUES (110, USER,1000,'과장',SYSDATE,'관리부');
SQL> INSERT INTO emp
2 VALUES (120, '진달래',NULL,NULL,SYSDATE,'관리부');
SQL> INSERT INTO emp
2 VALUES (120, '진달래','','',SYSDATE,'관리부');
SQL> INSERT INTO emp(id, name, in_date, dept_name)
2 VALUES (130, '개나리',SYSDATE,'관리부');

- UPDATE
SQL> UPDATE emp
2 SET dept_name = '영업부', salary = 800
3 WHERE id = 130 ;

- DELETE
DELETE FROM 테이블명
[WHERE 조건식];

- SUBQUERY 이용
SQL> INSERT INTO emp_113
2 (id, name, mailid , start_date)
3 SELECT id, name, mailid , start_date
4 FROM s_emp
5 WHERE dept_id = 118 ;
SQL> UPDATE s_emp
2 SET dept_id= ( SELECT dept_id
3 FROM s_emp
4 WHERE title = '사장')
5 WHERE name = '안창환' ;

* TRANSACTION CONTROL 과 DICTIONARY
- 명시적인 (Explicit) 트랜잭션 제어 명령어
COMMIT : 아직 저장되지 않은 모든 데이터 변경 사항을 데이터베이스에 저장하고 현재의 트랜잭션을 종료
SAVEPOINT 이름 : 현재의 트랜잭션에 savepoint를 지정
ROLLBACK [TO SAVEPOINT 이름] :아직 저장되지 않은 모든 데이터 변경 사항을 취소하고
현재의 트랜잭션을 종료

- 암시적인 (Implicit) 트랜잭션 제어 명령어
자동 COMMIT : DDL 명령이나 DCL 명령 실행
COMMIT나 ROLLBACK을 명시적으로 실행하지 않고 SQL*Plus를 정상적으로 종료
ROLLBACK [TO SAVEPOINT 이름] : SQL*Plus의 비정상적 종료나 시스템 실패

- COMMIT나 ROLLBACK 이전 데이터 상태
단지 buffer에만 영향을 받았기 때문에 데이터의 이전 상태는 복구 가능
현재 사용자는 SELECT 문으로 DML의 결과를 확인 가능
다른 사용자는 현재 사용자가 수행한 DML문의 결과를 볼 수 없음
변경된 행은 Lock이 설정되어서 다른 USER가 변경할 수 없음

- SAVEPOINT를 이용한 ROLLBACK
SAVEPOINT명령어로 현재의 트랜잭션중에 위치를 지정할 수 있음
ROLLBACK TO SAVEPOINT문을 써서 특정 SAVEPOINT까지 ROLLBACK 할 수 있음
SQL>INSERT...
SQL> SAVEPOINT in_done;
Savepoint created.
SQL> UPDATE..
SQL> ROLLBACK TO in_done;
Rollback complete.

* DICTIONARY
- DICTIONARY의 개념
데이터베이스가 생성될 때 ORACLE8 SERVER에 의해서 자동으로 생성되며
그 내용도 자동으로 갱신, 유지보수됩니다.
DATA Dictionary는 주로 읽기 전용의 테이블들의 집합으로써 사용자가 직접 access하여
데이터를 조작할 수 없고 단지 사용자의 DDL에 연관한 작업이 자동으로 DATA Dictionary에 반영됩니다
ORACLE7 Server 사용자명, 사용자에게 허가된 권한, 데이터베이스 객체명(TABLE, SEQUENCE, VIEW, INDEX 등)
테이블 제약조건 감사(Auditing) 정보 등이 기록되어 있습니다.

- DICTIONARY의 종류
View의 종류
접두어(prefix) 설 명
USER_ 사용자가 소유한 객체에 관한 정보를 저장
ALL_ 사용자에게 액세스가 허용된 객체에 관?nbsp;정보를 저장
DBA_ DBA권한을 가진 사용자가 액세스 할 수 있는 정보를 저장
V$ 서버의 성능과 Locking에 관한 정보를 저장. 일반적으로 DBA에게만 허용됨.

기타 뷰
뷰 이름 설 명
DICTIONARY 모든 데이터 사전 테이블, 뷰, 동의어 저장
TABLE_PRIVILEGES 사용자가 권한을 부여했거나(GRANTOR) 부여받은(GRANTEE) 오브젝트에 대한 권한
IND USER_INDEXES 의 동의어(SYNONYMS)

- DICTIONARY 검색
SQL> DESC dictionary
SQL> SELECT *
2 FROM dictionary ; 사용자가 엑세스할 수 있는 모든 데이터 사전 뷰를 검색
SQL> SELECT *
2 FROM dictionary
3 WHERE table_name LIKE 'USER%';
SQL> SELECT table_name
2 FROM dictionary
3 WHERE table_name LIKE 'USER%'; 사용자가 소유한 모든 데이터 사전 뷰의 이름을 검색
SQL> SELECT object_name
2 FROM user_objects
3 WHERE object_type = 'TABLE'; 사용자가 소유한 모든 테이블을 조회
SQL> SELECT *
2 FROM dictionary
3 WHERE LOWER(comments) LIKE '%constraint%';
DICTIONARY 테이블의 COMMENTS 칼럼에서 제약조건과 관련된 주제에 대한
데이터 사전 테이블에 대해 조회하시오.
SQL> DESC user_constraints; USER_CONSTRAINTS 테이블의 구조를 확인하시오.
SQL> SELECT constraint_name, constraint_type,
2 search_condition, r_constraint_name
3 FROM user_constraints
4 WHERE table_name = 'S_EMP'; S_EMP 테이블에 대한 제한조건을 검색하시오.
SQL> SELECT constraint_name,column_name
2 FROM user_cons_columns
3 WHERE table_name = 'S_EMP'; S_EMP 테이블에 대한 칼럼 제한 조건을 검색하시오.

* 데이터 정의어
- 명령어의 종류
CREATE TABLE 새로운 테이블을 생성
DROP TABLE 기존 테이블의 구조 및 모든 행을 삭제
ALTER TABLE 기존 테이블을 변경
- 컬럼의 추가 , 수정
- 제약조건 추가,삭제,활성화,비활성화
TRUNCATE 기존 테이블의 구조는 남기고 모든 행을 삭제
RENAME Object의 이름을 바꿈
COMMENT 테이블이나 컬럼에 주석문 달기

이러한 명령어는 모두 데이터 정의 명령어(DDL)로서 실행시 자동 COMMIT되고
ROLLBACK될 수 없으므로 주의해서 실행해야 합니다.

- 테이블 삭제
DROP TABLE 테이블명 [CASCADE CONSTRAINTS ] ;
모든 데이터가 테이블에서 삭제됨
트랜잭션은 자동 COMMIT되므로 ROLLBACK할 수 없음.
해당테이블의 모든 인덱스가 삭제됨
CASCADE CONSTRAINTS옵션은 종속된 제약조건을 삭제함

- 테이블 구조 변경
o 칼럼의 변경
- 칼럼의 추가
ALTER TABLE 테이블명
ADD (컬럼 datatype [DEFAULT 형식][CONSTRAINT 정의][, 컬럼 datatype] ...) ;
SQL> ALTER TABLE c_emp
2 ADD (title VARCHAR2(25)
3 CONSTRAINT c_emp_title_ck CHECK
4 (title IN ('사장','부장','과장','대리','사원' ) ),
5 in_date date DEFAULT SYSDATE );

- 칼럼의 수정
ALTER TABLE 테이블명
MODIFY (컬럼 datatype [DEFAULT 형식][NOT NULL제약조건][, 컬럼 datatype] ...) ;
컬럼의 크기, 기본값 (DEFAULT), NOT NULL 제약조건을 변경가능
컬럼의 크기를 확장
컬럼이 NULL이거나 테이블에 데이터가 없을때 컬럼의 크기를 축소하거나
데이터 타입을 변경 가능
DEFAULT를 변경하면 다음 입력할 때부터 적용됨
컬럼에 NULL값이 없을 경우에만 NOT NULL 제약 조건을 추가 가능
SQL> ALTER TABLE c_emp
2 MODIFY (phone VARCHAR2(25));
SQL> ALTER TABLE c_emp
2 MODIFY (title VARCHAR2(10));
SQL> ALTER TABLE c_emp
2 MODIFY (phone VARCHAR2(15));

o CONSTRAINT의 변경
- 제약조건의 추가
ALTER TABLE 테이블명
ADD [CONSTRAINT 제약 조건명] 제약조건유형 (칼럼명) ;
NOT NULL제약조건은 테이블 레벨 제약조건으로 기술할 수 없으므로,
칼럼의 MODIFY절에서 가능합니다
SQL> ALTER TABLE c_emp
2 ADD CONSTRAINT c_emp_phone_uk UNIQUE(phone) ;

- 제약조건의 삭제
ALTER TABLE 테이블명
DROP CONSTRAINT 제약 조건명 [CASCADE] ;
SQL> SELECT constraint_name,constraint_type , search_condition
2 FROM user_constraints
3 WHERE table_name = 'C_EMP' ;
SQL> ALTER TABLE c_emp
2 DROP CONSTRAINT c_emp_dept_id_nn ;

- 제약조건의 활성화/비활성화
> ALTER TABLE 테이블명
ENABLE CONSTRAINT 제약 조건명 ;
> ALTER TABLE 테이블명
DISABLE CONSTRAINT 제약 조건명 [CASCADE] ; CASCADE는 참조 조건과 함께 수정
SQL> ALTER TABLE s_emp
2 DISABLE CONSTRAINT s_emp_id_pk CASCADE;
SQL> ALTER TABLE s_emp
2 ENABLE CONSTRAINT s_emp_id_pk ;

o 그 외의 DDL
- RENAME-OBJECT의 이름 변경
테이블, VIEW, SEQUENCE, SYNONYM의 이름 변경
객체의 소유자만이 바꿀 수 있음
> RENAME 이전이름 TO 새로운 이름 ;
SQL> RENAME salgrade TO salary_grade:

- TRUNACTE-테이블의 구조를 남기고 모든 데이터 삭제하기
테이블의 모든 행을 삭제
테이블이 사용한 저장 공간을 반환
TRUNCATE 명령이 행의 삭제를 Rollback할 수 없는데 비해,
DELETE 명령은 삭제된 행을 Rollback가능
> TRUNCATE TABLE 테이블명 ;
SQL> TRUNCATE TABLE salary_grade ;

- COMMENT -테이블이나 칼럼에 주석문 달기
입력된 주석은 다음의 dictionary뷰를 통해 볼 수 있습니다
ALL_COL_COMMENTS
USER_COL_COMMENTS
ALL_TAB_COMMENTS
USER_TAB_COMMENTS
> COMMENT ON TABLE 테이블명 IS '주석문장' ;
> COMMENT ON COLUMN 테이블명.칼럼명 IS '주석문장' ;
SQL> COMMENT ON TABLE s_emp IS '사원정보' ;
SQL> COMMENT ON COLUMN s_emp.name IS '사원명' ;
SQL> SELECT *
2 FROM user_tab_comments
3 WHERE table_name = 'S_EMP' ;

* 데이터 제어어
- DATABASE SECURITY
o Privileges
Privileges란 특정한 SQL문장을 수행하거나 특정 Object에 허가된 작업을 의미합니다.
Privileges에는 특정한 SQL 문장을 실행할 수 있는 권한인 시스템 권한(system privilege)과
특정한 오브젝트에 대한 접근을 제어하는 권한인 오브젝트 권한(object privilege)로 나눌 수 있습니다.
o Role
권한 부여와 접근제어 관리를 손쉽게 하기 위해 연관된 권한들의 집합을 묶어서
정의해 놓은 것을 역할(role)이라고 합니다.
o Schema
Schema란 Table, View, Sequence, Procedure, Function 등의 오브젝트들의 집합으로서
Schema는 데이터베이스 사용자에 의하여 소유되어 있고 사용자의 이름과 같은 이름을 가지고 있습니다.
자신의 스키마에 속한 오브젝트가 아닌 것을 액세스하려고 할 때는 그 오브젝트에 대한
액세스 권한을 부여받아야 합니다.

- PRIVILEGES
o SYSTEM PRIVILEGES
- DBA이 갖는 상위 레벨의 시스템 권한
새로운 사용자 생성(CREATE USER)
사용자 삭제(DROP USER)
테이블 삭제(DROP ANY TABLE) 　
테이블 백업(BACKUP ANY TABLE) 등

o 새로운 사용자 생성 및 삭제 문형
> CREATE USER 사용자명 IDENTIFIED BY 암호 :
사용자를 생성하면 DBA는 GRANT 명령을 실행하여 사용자에게 권한을
부여할 수 있으며 사용자는 다음과 같은 시스템 권한을 부여받을 수 있습니다.
CREATE SESSION : 데이터베이스에 접속가능한 권한
CREATE TABLE
CREATE SEQUENCE
CREATE VIEW
CREATE PROCEDURE 등
> DROP USER 사용자명 [CASCADE] ;
CASCADE옵션은 사용자가 포함한 object까지 같이 drop하는 옵션입니다
SQL> CREATE USER march
2 IDENTIFIED BY spring ;

o 사용자 암호 변경 문형
> ALTER USER 사용자명 IDENTIFIED BY 암호 :
SQL> ALTER USER scott
2 IDENTIFIED BY lion ;

o 시스템 권한 부여 및 박탈
DBA는 특정 시스템 권한을 사용자에게 허가할 수 있습니다.
사용자가 권한을 받으면 즉시 그 권한을 쓸 수 있습니다.
> GRANT 권한 [, 권한...] TO 사용자 [, 사용자 ...] ;
> REVOKE 권한 [, 권한...] FROM 사용자 [, 사용자 ...]
SQL> GRANT create table, create view, create sequence
2 TO scott ;
SQL> REVOKE create sequence
2 FROM scott ;

- OBJECT PRIVILEGES
DBA는 특정한 오브젝트에 대해서 사용자에게 작업을 수행하도록 허가할 수
있습니다. 오브젝트 권한은 오브젝트 유형에 따라서 다양하고, 오브젝트의 소유자는
다른 사용자에게 특정 오브젝트 권한을 부여할 수 있습니다.
> GRANT 권한 [(컬럼명)] [ 권한 ...|ALL ]
ON Object명
TO 사용자 | ROLE | PUBLIC [, 사용자...」
[WITH GRANT OPTION ] ;
> REVOKE 권한 [(컬럼명)] [ 권한 ...|ALL ]
ON Object명
FROM 사용자 | ROLE | PUBLIC [, 사용자...」 ;

o 각 Object에 따른 PRIVILEGES 유형을 알아봅시다.
객체 권한 테이블 뷰 SEQUENCE PROCEDURE SNAPSHOT
ALTER V V
DELETE V V
EXECUTE V
INDEX V v
INSERT V V
REFERENCES V
SELECT V V V
UPDATE V V
WITH GRANT OPTION으로 부여된 권한을 회수하면 그 권한을 받은
다른 사용자에게서도 권한이 회수됩니다.
SQL> GRANT SELECT , INSERT (id,name)
2 ON s_emp
3 TO usera , userb ;
SQL> REVOKE INSERT
2 ON s_emp
3 FROM userb ;
usera.SQL> GRANT select, insert
2 ON s_dept
3 TO scott
4 WITH GRANT OPTION ;
userb.SQL> GRANT select
2 ON usera.s_dept
3 TO PUBLIC ;
usera.SQL> REVOKE select, insert
2 ON s_dept
3 FROM userb ;

- ROLE
ROLE이란 사용자에게 허가할 수 있는 관련된 PRIVILEGES의 그룹을 말합니다.
ROLE을 이용하면 권한부여와 회수를 쉽게 할 수 있음
한 사용자가 여러 ROLE을 access할 수 있고, 여러 사용자에게 같은 ROLE을 부여할 수 있음
사용자는 ROLE에 ROLE을 부여할 수도 있음

o ROLL의 생성
> CREATE ROLE role이름 ;
ROLE의 생성 및 부여는 다음과 같은 순서에 따라야 합니다.
① ROLE의 생성
② ROLE에 권한 부여
③ ROLE을 사용자 또는 ROLE에게 부여
SQL> CREATE ROLE create_obj ;
SQL> GRANT create table, create view TO create_obj ;
SQL> GRANT create_obj TO usera, userb ;

- PRIVILEGES와 ROLE에 관한 DICTIONARY 정보
PRIVILEGES와 ROLE에 관련된 정보를 가지고 있는 데이터 사전 뷰의 종류는 다음과 같습니다.
데이터 사전 뷰 설 명
ROLE_SYS_PRIVS Role에 부여된 시스템 권한
ROLE_TAB_PRIVS Role에 부여된 테이블 권한
USER_ROLE_PRIVS 현재 사용자가 액세스할 수 있는 Role
USER_TAB_PRIVS_MADE 현재 사용자의 객체에 부여한 객체권한
USER_TAB_PRIVS_RECD 현재 사용자의 객체에 부여된 객체권한
USER_COL_PRIVS_MADE 현재 사용자 객체의 특정 칼럼에 부여한 객체권한
USER_COL_PRIVS_RECD 현재 사용자 객체의 특정 칼럼에 부여된 객체권한
SQL> SELECT username, granted_role
2 FROM user_role_privs;

* OBJECT
- OBJECT의 종류
오브젝트 설 명
테이블(TABLE) 행과 열의 조합으로 구성된 데이터의 기본 저장단위
시퀀스(SEQUENCE) 자동으로 고유한 숫자값을 생성해주며 주로 기본 키값을 생성하기 위해 사용
인덱스(INDEX) 쿼리(query) 속도를 향상
뷰(VIEW) 하나 또는 그 이상의 테이블로부터 논리적으로 데이터를
추출한 부분집합으로 논리적이고 가상적인 테이블
시노님(SYNONYM) OBJECT에 대한 또다른 이름으로 ALIAS역할
프로그램 유닛(PROGRAM UNIT) SQL, PL/SQL문으로 작성한 Procedure, Function, Trigger , Package

- SEQUENCE
SEQUENCE란 고유한 숫자값을 생성해 주는 객체로서 SEQUENCE GENERATOR가 자동으로 그 값을 생성해 주며
주로 PK값 생성을 위해 사용됩니다.
SEQUENCE는 공유 가능한 객체로서 한 사용자가 생성하면 다른 사용자도 사용할 수 있을 뿐 아니라,
SEQUENCE는 테이블과 독립적이므로 여러 테이블에서 이 값을 참조하여 사용할 수 있습니다.
> CREATE SEQUENCE 이름
[ INCREMENT BY n ]
[ START WITH n ]
[ { MAXVALUE n | NOMAXVALUE } ]
[ { MINVALUE n | NOMINVALUE } ]
[ { CYCLE | NOCYCLE } ]
[ { CACHE n | NOCACHE } ]
이 름 기 능
INCREMENT BY n SEQUENCE 번호간의 간격.기본값 1씩 증가.
START WITH n 생성되는 첫번째 SEQUENCE 번호.기본값 1부터 시작
MAXVALUE n 생성가능한 SEQUENE의 최대값.
NOMAXVALUE 기본옵션으로 최대값은 1027
MINVALUE n 생성가능한 SEQUENCE의 최소값.
NOMINVALUE 최소값을 1로 지정.
CYCLE | NOCYCLE 최대값이나 최소값까지 값이 생성된 경우에도 값을 생성시키는 것으로 기본은 NOCYCLE
CACHE n|NOCACHE 메모리에 유지할 값의 수로, 기본값은 20.
SQL> CREATE SEQUENCE c_emp_id
2 INCREMENT BY 1
3 START WITH 26
4 MAXVALUE 9999999
5 NOCACHE
6 NOCYCLE ;
SQL> INSERT INTO c_emp (id, name, salary)
2 VALUES (c_emp_id.NEXTVAL, '개나리', 1500 ) ;

SEQUENCE가 가지는 PSEUDO COLUMN은 NEXTVAL, CURRVAL 두 가지가 있습니다.
주로 데이터 입력시에 NEXTVAL을 이용해서 데이터를 입력하게 되면,
CURRVAL은 SEQUENCE의 현재 값으로 NEXTVAL가 할당되어야만 그 값이 CURRVAL로 참조 가능해집니다.
SEQUENCE 자체는 일련적으로 값을 생성하지만 SEQUENCE는 테이블에는 독립적인 Object이므로
같은 테이블에서 SEQUENCE가 사용되거나 ROLLBACK이나 SYSTEM CRASH 에 의해서 GAP이 발생할 수 있습니다.
따라서 SEQUENCE가 특정 테이블에 사용된 경우는 일련번호로 입력되는 것을 보장받기는 어려우며,
단지 UNIQUE NUMBER만 생성할 뿐입니다.

SQL> SELECT sequence_name, min_value,
2 max_value, increment_by, last_number
3 FROM user_sequences ; SEQUENCE 정보 확인

- SEQUENCE의 변경 및 삭제
o SEQUENCE의 변경
> ALTER SEQUENCE SEQUENCE이름
[ INCREMENT BY n ]
[ { MAXVALUE n | NOMAXVALUE } ]
[ { MINVALUE n | NOMINVALUE } ]
[ { CYCLE | NOCYCLE } ]
[ { CACHE n | NOCACHE } ]
자신의 SEQUENCE이거나 그 SEQUENCE에 대한 ALTER 권한을 가져야만 SEQUENCE를 수정할 수 있습니다.
유효성 검사를 하게 됩니다.
예를 들어 새로운 MAXVALUE는 현재의 SEQUENCE 값보다 작지 않아야 합니다.
START WITH 옵션은 ALTER SEQUENCE를 써서 변경할 수 없습니다.
다른 번호에서 시작하려면 이전 SEQUENCE를 삭제하고 다시 생성해야 합니다.

o SEQUENCE의 삭제
> DROP SEQUENCE SEQUENCE이름 ;
SEQUENCE를 제거할 DROP ANY SEQUENCE권한을 가지고 있거나 그 SEQUENCE의 소유자이어야 합니다.

- INDEX
ORACLE에서 제공하는 INDEX는 Pointer를 이용하여 좀더 빠르게 데이터를 검색하도록 하는 Object입니다.
만약 특정 컬럼에 INDEX가 생성되어 있지 않으면 일반적으로 검색시에 Full Scan을 하게 됩니다.

o INDEX의 생성방법에 따른 종류
Unique INDEX NON-Unique INDEX
Primary key , Unique 제약조건에 사용자에 의해서 생성
의해 자동으로 생성
각 INDEX(Table)의 값이 유일함을 보장 각 INDEX(Table)의 값이 유일하지 않음

o INDEX의 생성
> CREATE INDEX 인덱스명 ON 테이블명 (칼럼 [, 칼럼] ... ) ;
- 인덱스를 만드는 때
조건절(WHERE)이나 조인(Join) 조건에서 칼럼을 자주 이용할 때
칼럼이 넓은 범위값을 가질 때
많은 NULL 값을 갖는 칼럼일 때
테이블의 데이터가 많고 그 테이블에서 조회되는 행의 수가 전체의 10-15%정도일 때
- 인덱스를 만들지 않아야 할 때
테이블이 작을 때
칼럼이 조회의 조건으로 사용되는 경우가 별로 없을 때
대부분의 조회가 행의 10-15% 이상을 검색한다고 예상될 때
테이블이 자주 변경될 때
SQL> CREATE INDEX c_emp_name_idx
2 ON c_emp (name) ;
SQL> SELECT id , name , salary
2 FROM c_emp
3 WHERE name = '구원상' ;

o INDEX의 정보 확인
USER_INDEXES 는 인덱스의 이름과 고유성 정보를 갖고 있습니다.
USER_IND_COLUMNS 는 인덱스명, 테이블명, 칼럼명을 갖고 있습니다.
SQL> SELECT ic.index_name, ic.column_name,
2 ic.column_position, ix.uniqueness
3 FROM user_indexes ix, user_ind_columns ic
4 WHERE ic.index_name = ix.index_name
5 AND ic.table_name = 'C_EMP' ;

o INDEX의 삭제
> DROP INDEX 인덱스명 ;
인덱스의 구조는 테이블과 독립적이므로 인덱스의 삭제는 테이블의 데이터에는 아무 영향이 없습니다.
SQL> DROP INDEX C_emp_name_idx ;

인덱스를 삭제하려면 그 인덱스의 소유자이거나 DROP ANY INDEX권한을 가지고 있어야 합니다.
특정 칼럼에 생성된 인덱스를 다른 칼럼으로 변경하는 ALTER는 불가능하므로 인덱스된 칼럼을
변경하려면 삭제한 후 다시 만들어야 합니다.

- VIEW
View란 테이블이나 다른 뷰를 기초로 한 논리적이고 가상(Virtual)의 테이블입니다.
View는 자체의 데이터는 없지만 테이블의 데이터를 보거나 변경할 수 있는 창과 같고,
View는 실제적으로는 질의문장을 가집니다.

o VIEW의 종류 및 특성
Simple View Complex View
테이블 수 ONE MANY
Function의 포함여부 NO YES
Grouping 여부 NO YES
View를 통한 DML여부 YES NO

o VIEW의 생성
CREATE [ OR REPLACE ] [ FORCE | NOFORCE ] VIEW 이름
[ (alias[, alias] ...)]
AS subquery
[ WITH CHECK OPTION [ CONSTRAINT 제약 조건 ] ]
[ WITH READ ONLY ] ;

종 류 역 할
FORCE 기본 테이블 유무에 관계없이 뷰를 만듦.
Alias Subquery로 선택된 값에 대한 칼럼명
WITH CHECK OPTION 뷰에 의해 액세스될 수 있는 행만이 입력되거나 변경될 수 있음
WITH READ ONLY 뷰에서 DML이 수행될 수 없음.

뷰를 정의하는 질의어는 조인, 그룹, Subquery를 포함하는
복잡한 SELECT문장으로 구성될 수 있음
뷰를 정의하는 질의어에는 ORDER BY 절을 쓸 수 없음
제약조건의 이름을 명시하지 않으면 시스템이 SYS_Cn형태의 이름을 지정함
뷰를 삭제하거나 재생성하지 않고 뷰의 정의를 변경하려면 OR REPLACE 옵션을 쓸 수 있음

- 뷰에 대한 DML문 사용 규칙
간단한 뷰에서는 DML연산 수행가능.
뷰가 다음 사항을 포함하는 경우 행을 삭제할 수 없음
- 조인(Join) 조건
- 그룹 함수
- GROUP BY 절
- DISTINCT 명령
뷰가 다음 사항을 포함하는 경우 데이터를 수정할 수 없음
- 위의 조건
- 식으로 정의된 칼럼
ex) SARARY*12
뷰가 다음 사항을 포함하는 경우 데이터를 추가할 수 없음
- 위의 조건
- VIEW에 선택되지 않은 NOT NULL 칼럼

SQL> CREATE VIEW empvu113
2 AS SELECT id, name, title
3 FROM s_emp
4 WHERE dept_id = 113 ;
SQL> CREATE or REPLACE VIEW empvu113
2 AS SELECT id, name NAME, salary MONTHLY_SALARY
3 FROM s_emp
4 WHERE dept_id = 113 ;
SQL> CREATE or REPLACE VIEW empvu113(ID,NAME,MONTHLY_SALARY)
2 AS SELECT id, name , salary
3 FROM s_emp
4 WHERE dept_id = 113 ;
SQL> CREATE OR REPLACE VIEW dept_sum_vu
2 (name, minsal, maxsal, avgsal)
3 AS SELECT d.name, min(e.salary),
4 max(e.salary), avg(e.salary)
5 FROM s_emp e, s_dept d
6 WHERE e.dept_id = d.id
7 GROUP BY d.name;
SQL> CREATE OR REPLACE VIEW empv
2 AS SELECT id,name,dept_id
3 FROM c_emp
4 WHERE dept_id=113 ;

o VIEW 생성시 사용되는 OPTION
OPTION종류 기 능
With CHECK Option View의 연산이 CHECK 조건이 만족될때만 수행되도록 합니다.
With Read Only View 정의에 WITH READ ONLY 옵션을 추가하여 DML 연산이 발생하지
않도록 합니다. View의 행에 대한 DML을 수행하려 한다면
Oracle7 Server error인 ORA-01732가 발생합니다.

SQL> CREATE OR REPLACE VIEW empvu113
2 AS SELECT *
3 FROM s_emp
4 WHERE dept_id=113
5 WITH CHECK OPTION
SQL> CREATE OR REPLACE VIEW empvu113
2 AS SELECT *
3 FROM s_emp
4 WHERE dept_id=113
5 WITH READ ONLY ;

o VIEW의 정보 확인
SQL> DESC user_views
SQL> SELECT view_name , text
2 FROM user_views ;

o VIEW의 삭제
> DESC VIEW view이름 ;
SQL> DROP VIEW empv ;
View에 대한 ALTER 명령어는 제공되지 않습니다. 기존의 View에 대한 정보를
변경하고 싶은 경우에는 OR REPLACE OPTION을 써서 VIEW를 생성합니다.

- SYNONYM
Synonym이란 특정 Object에 부여하는 또다른 이름으로, 사용자의 편의나 참조를 빠르게 하기 위해서
사용합니다.
> CREATE [ PUBLIC ] SYNONYM Synonym명
FOR Object명 ;

PUBLIC은 모든 사용자가 접근가능한 동의어를 생성합니다.
PUBLIC 동의어의 薨?nbsp;및 삭제는 DBA 만이 할 수 있습니다.

USER A가 가 USER B의 s_dept 테이블에 대한 동의어인 dept를 생성하시오.
usera.SQL> CREATE SYNONYM dept
2 FOR userb.s_dept ;

[계정생성] ORACLE 11g R2 계정 생성 및 권한 부여

ezBuilder — Wed, 24 Apr 2013 15:39:03 +0900

Ctrl + R > cmd > sqlplus

- sys접속하기
conn sys/암호 as sysdba

- 계정생성
create use 계정아이디 identified by 암호;

- 기본권한 설정
grant connect, resource to 계정아이디;

- 계정삭제방법
drop user 계정아이디 cascade;

- 계정비밀번호 변경하기
alter user 계정아이디 identified by 새로운 암호;

[ASP] 이것저것

ezBuilder — Wed, 24 Apr 2013 12:26:16 +0900

1. 모든 ASP 코드 페이지 첫줄에 다음과 같은 코드를 추가합니다
< % @CODEPAGE="65001" language="vbscript" %>
< % Option Explicit %>
< % session.CodePage = "65001" %>
< % Response.CharSet = "utf-8" %>
< % Response.buffer=true %>
< % Response.Expires = 0 %>

2. Meta 테그를 다음과 같이 추가 합니다.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

3. Response.ChaRset = "utf-8"
ASP의 response.charset을 이용해서 문자 코드 세트명을 지정하는 부분 입니다.
설정시 <html> 태그 보다 앞에 선언 되어야 HTML 이 출력되면서 해당 속성을 인식하게 됩니다.

4. 에디트플러스나 울트라 에디터에서 수정후 저장할 때 반드시 Encoding 방식을 UTF-8 로 저장합니다

5.DB Insert/Update 시 숫자 타입을 제외한 모든 대상에 N을 추가 합니다
Insert 테이블이름 (칼럼a, 칼럼b) value (N'입력a', N'입력b')
update 테이블이를 set 칼럼a = N'입력a' where 고유칼럼 = '번호'

6.DB like 검색시 N 추가

7. 파일 첨부 DEXT Upload사용(영문으로 설치)
SET uploadform = Server.CreateObject("DEXT.FileUpload")
uploadform.DefaultPath = Server.MapPath(ESP_BBS_DATA)
uploadform.CodePage = 65001
wFileSize = 0
rAttachment = uploadform("txtAttachFile")

If Len(rAttachment) > 0 Then
wFileName = uploadform("txtAttachFile").FileName
wFileSize = uploadform("txtAttachFile").FileLen

response.write uploadform.DefaultPath
rAttachment = uploadform.SaveAs(uploadform.DefaultPath & "" & wFileName , False)
rAttachment = UploadForm.LastSavedFileName
End If

8. 파일 다운로드

< % @LANGUAGE='VBscRIPT' CODEPAGE='65001' %>
< %
'Response.Charset = "UTF-8"
filepath = Request.QueryString("txtFilepath") '// form으로 파라메터 전달해야 함.
filename = Request.QueryString("txtFilename")'// form으로 파라메터 전달해야 함.

If filepath = "" Then
filepath=server.MapPath( Request.QueryString("txtFilename"))
filename = Mid(filepath, InStrRev(filepath, "")+1)
Else
filepath=server.MapPath(filepath)
filename = Request.QueryString("txtFilename")
If filename = "" Then
filename = Request.QueryString("txtattachment")
End If
End If

filepath = filepath &"" & filename
Call FileDown
%>

< %
Sub FileDown
' 참고http://www.taeyo.pe.kr/Lecture/20_TIps/Danny03.asp

Response.Buffer = False
Response.ContentType = "application/x-msdownload"
'ContentType 를 선언합니다.
'server.HTMLEncode
'server.URLPathEncode
Response.AddHeader "Content-Disposition","attachment; filename=" & server.URLPathEncode(filename) '//server.URLPathEncode 사용해야만 파일명 재대로 출력
'헤더값이 첨부파일을 선언합니다.
Set objStream = Server.CreateObject("ADODB.Stream")
'Stream 을 이용합니다.
objStream.Open
'무엇이든 Set 으로 정의했으면 열어야 겠지요^^
objStream.Type = 1
objStream.LoadFromFile filepath
'절대경로 입니다.
download = objStream.Read
Response.BinaryWrite download
'이게 보통 Response.Redirect 로 파일로 연결시켜주는 부분을 대신하여 사용된 것입니다.
Set objstream = nothing
'초기화시키구요.
End Sub
%>

< %
Sub DEXTDown ' DEXT.FileDownload 는 일본어 OS에 영문으로 설치시 한글파일 찾지 못함.(DextUpload 2.0까지는 그랬음)
'On Error Resume Next
Response.Buffer = False
Response.AddHeader "Content-Disposition","inline;filename=" & server.URLPathEncode(filename)
set objFS = Server.CreateObject("scripting.FileSystemObject")

set objF = objFS.GetFile(filepath)

Response.AddHeader "Content-Length", objF.Size
set objF = nothing
set objFS = nothing
Response.ContentType = "application/x-msdownload"
Response.CacheControl = "public"
Set objDownload = Server.CreateObject("DEXT.FileDownload")
objDownload.Download filepath
Set uploadform = Nothing
End Sub
%>

9. CDO Mail발송
Dim iMsg
Dim iConf
Dim Flds
Dim strHTML
Const cdoSendUsingPort = 2 '1:로컬, 2:외부 smtp
set iMsg = CreateObject("CDO.Message")
set iConf = CreateObject("CDO.Configuration")
Set Flds = iConf.Fields
Flds.Item("http://schemas.microsoft.com/cdo/configuration/sendusing") = cdoSendUsingPort
Flds.item("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25 '포트번호
Flds.Item("http://schemas.microsoft.com/cdo/configuration/smtpserver") = "localhost"
Flds.Item("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 10
Flds.Item("http://schemas.microsoft.com/cdo/configuration/sendusername") = "" 'ID
Flds.Item("http://schemas.microsoft.com/cdo/configuration/sendpassword") = "" '암호

Flds.Update
Set iMsg.Configuration = iConf
iMsg.To = "xxxx@xxx.ccx" 'ToDo: Enter a valid email address.
iMsg.From = "xxxx@xxx.ccx" 'ToDo: Enter a valid email address.
iMsg.Subject = "This is a test CDOSYS message (Sent via Port 25)"

'iMsg..TextBody = strHTMLMsg '// 텍스트
iMsg.HTMLBody = strHTML '// HTML 제목 깨짐 발생..

iMsg.BodyPart.Charset="UTF-8" '/// 한글을 위해선 꼭 넣어 주어야 합니다.
iMsg.HTMLBodyPart.Charset="UTF-8" '/// 한글을 위해선 꼭 넣어 주어야 합니다.
iMsg.Send
End With
Set iMsg = Nothing
Set iConf = Nothing
Set Flds = Nothing

10. ASP에서 배달 확인/ 읽음 확인 구현 방법 http://tong.nate.com/windeo/5767827

http://support.microsoft.com/default.aspx?scid=kb;ko;286430

<%
Set oMsg = CreateObject("CDO.Message")
oMsg.Configuration.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
‘ 생성되는 메시지가 SMTP pickup 디렉터리가 아닌 SMTP 서비스로 전송되게 합니다.
oMsg.Configuration.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername") = "이름"
oMsg.Configuration.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword") = "xxxxx"
oMsg.Configuration.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver") = "seo-msg-01"
‘ 생성되는 메시지의 서버, 사서함 및 암호
oMsg.Configuration.Fields.Update

oMsg.From = "smpark@microsoft.com"
oMsg.To = "smpark@microsoft.com"

oMsg.Subject = "읽음 확인 및 배달 확인"
oMsg.DSNOptions = 14
‘ 이 메시지의 배달 상태 확인(delivery status notification:DSN)값으로 14는 배달 성공, 실패 및 지연시
‘ 확인메시지 생성
oMsg.Fields("urn:schemas:mailheader:return-receipt-to") = smpark@microsoft.com <mailto:smpark@microsoft.com>
‘ 받는 사람이 이 메시지를 열었을 때 읽음 확인 메시지가 여기에서 지정된 사람에게 보내집니다.
oMsg.Fields("urn:schemas:mailheader:disposition-notification-to") = smpark@microsoft.com <mailto:smpark@microsoft.com>
‘ MDN(Message Disposition Notification)은 이 메시지의 확인 메시지가 리턴 될 수신자를 지정합니다.
‘ MDN에 대하여는 Request for Comments (RFC) 2298에 자세히 설명됩니다.
oMsg.TextBody = " SMTP 서버를 통한 읽음 확인 및 배달 확인 메시지"
oMsg.Fields.Update
oMsg.Send

Set oMsg = Nothing
%>

[FileReader] 파일 읽어 들여 출력하기

ezBuilder — Thu, 18 Apr 2013 17:26:09 +0900

1. getResourceAsStream 이용하기
<%
String path = "notice.txt";
BufferedReader br = null;
char[] buff = new char[512];
int len = -1;

try{
  br = new BufferedReader(
    new InputStreamReader(
     application.getResourceAsStream(path)
    , "UTF-8"));

  while((len = br.read(buff)) != -1){
   out.println(new String(buff, 0, len));
  }
}catch(IOException ie){
  ie.getStackTrace();
}finally{
  if(br != null){
   try{
    br.close();
   }catch(IOException ie){};
  }
}
%>

2. getResource 이용하기
<%
String path1 = "notice.txt";
BufferedReader br1 = null;
char[] buff1 = new char[512];
int len1 = -1;

try{
  URL url = application.getResource(path1);
  br1 = new BufferedReader(
    new InputStreamReader(
     url.openStream()
    , "UTF-8"));

  while((len1 = br1.read(buff1)) != -1){
   out.println(new String(buff1, 0, len1));
  }
}catch(IOException ie){
  ie.getStackTrace();
}finally{
  if(br != null){
   try{
    br1.close();
   }catch(IOException ie){};
  }
}
%>

[NIO] 파일 복사를 빠르게 하기

ezBuilder — Thu, 18 Apr 2013 12:25:14 +0900

※ 일반 복사 방법 (JDK 1.4이전 IO 패키지 이용)

import java.io.*;
public static void copyFile(String source, String target) throws IOException {
    FileInputStream fis = new FileInputStream(source);
    FileOutputStream fos = new FileOutputStream(target);
    try {
        byte[] buf = new byte[1024];
        int i = 0;
        while ((i = fis.read(buf)) != -1) {
            fos.write(buf, 0, i);
        }
    } catch (IOException e) {
        throw e;
    } finally {
        if (fis != null)
            fis.close();
        if (fos != null)
            fos.close();
    }
}

※ 빠른 복사 방법 (JDK 1.4이상 NIO 패키지 이용)

import java.io.*;
import java.nio.channels.*;

public static void copyFile(String source, String target) throws IOException {
    FileChannel inChannel = new FileInputStream(source).getChannel();
    FileChannel outChannel = new FileOutputStream(target).getChannel();
    try {
        // magic number for Windows, 64Mb - 32Kb
        int maxCount = (64 * 1024 * 1024) - (32 * 1024);
        long size = inChannel.size();
        long position = 0;
        while (position < size) {
            position += inChannel.transferTo(position, maxCount, outChannel);
        }
    } catch (IOException e) {
        throw e;
    } finally {
        if (inChannel != null)
            inChannel.close();
        if (outChannel != null)
            outChannel.close();
    }
}

[JSP] 기초

ezBuilder — Wed, 17 Apr 2013 16:37:59 +0900

ASP	JSP
<%@LANGUAGE="VBSCRIPT" CODEPAGE=65001%>	<%@ page contentType = "text/html; charset=UTF-8"%>
<!--#include virtual="test.asp"-->	<jsp:include page="test.jsp" flush="true"/>
request	request
response	response
session	session
response.redirect = "location"	response.sendRedirect(location)
server.URLEncode("한글")	URLEncoder.encode("한글","UTF-8");
instr(str,"test")	str.indexOf("test");
mid(str, 0, 1)	str.substring(0,1);
str1 = str2	str1.equals(str2);
ucase(str)	str.toUpperCase();
lcase(str)	str.toLowerCase();
ubound(split)	split.length;

JSP
<%@ %>	페이지 디렉티브
<% %>	스크립트릿
<%! %>	선언부
<%=%>	표현식
<%@ page import = "java.util.Date %>	날짜 클래스 삽입.
<%@ page trimDirectiveWhitespaces = "true"%>	html생성시 상단 공백제거.
<%=out.getBufferSize()%>	설정된 버퍼 크기를 구한다.
<%=out.getRemaining%>	버퍼의 남은 크기를 구한다.
<%=out.isAutoFlush%>	autoFlush 속성값을 구한다.
<%=application.getServerInfo()%>	서버정보를 구한다.
<%=application.getMajorVersion%>	서블릿 규약 메이저 버전을 구한다.
<%=application.getMinorVersion%>	서블릿 규약 마이너 버전을 구한다.
<%=application.getRealPath(path)%>	시스템상의 자원경로 리턴.
<%=application.getResource(path)%>	자원에 접근할 수 있는 URL객체 리턴.
<%=application.getResourceAsStream(path)%>	데이터를 읽어올 수 있는 InputStream 리턴 .
<% log("로그 메시지") %>	로그 메시지를 기록한다.

request
메서드	리턴	설명
getRemoteAddr()	String	클라이언트 IP주소 구하기
getContentLength()	long	클라이언트 전송 요청 정보의 길이, 알수 없을 경우 -1 리턴.
getCharacterEncoding()	String	클라이언트 캐릭터의 인코딩 구하기
getContentType()	String	클라이언트가 요청 정보 전송시 사용한 컨텐트 타입( text/html 등 )
getProtocol()	String	클라이언트가 요청한 프로토콜 구하기 ( HTTP/1.1 )
getMethod()	String	웹브라우저의 정보전송시 사용한 방식 구하기 ( GET 또는 POST )
getRequestURI()	String	웹브라우저가 요청한 URL경로 구하기 ( /test/test.jsp )
getContextPath()	String	JSP페이지가 속한 컨텍스트 경로 구하기 ( 서버상의 실제 위치 )
getServerName()	String	도메인명 ( localhost 또는 domain.com 등 )
getServerPort()	int	서버포트 ( 기본 80 )
getParameter(S.name)	String	파라미터의 값을 구한다.
getParameterValues(S.name)	String[]	배열을 받을 때 사용한다.
getParameterName(S.name)	Enumeration	웹브라우저가 전송한 파라미터의 이름을 구한다.
getParameterMap(S.name)	Map	웹브라우저가 전송한 파라미터의 맵을 구한다. (이름, 값)
getHeader(S.name)	String	지정한 이름의 헤더 값을 구한다.
getHeaders(S.name)	Enumeration	지정한 이름의 헤더 목록을 구한다.
getHeaderName()	Enumeration	모든 헤더의 이름을 구한다.
getIntHeader(S.name)	int	지정한 헤더의 값을 정수 값으로 읽어온다.
getDateHeader(S.name)	long	지정한 헤더의 값을 시간 값으로 읽어온다.( 1970.1.1 이후 1/1000초 단위 )

response
메서드	리턴	설명
addDateHeader(S.name, l.date)	void	name헤더에 date를 추가.( 1970.1.1 이후 1/1000초 단위 )
addHeader(S.name, S.value)	void	name헤더에 value 값 추가.
addIntHeader(S.name, i.value)	void	name헤더에 정수 값 추가.
setDateHeader(S.name, l.date)	void	name헤더의 값을 date값으로 지정.( 1970.1.1 이후 1/1000초 단위 )
setHeader(S.name, S.value)	void	name헤더의 값을 value로 지정.
setIntHeader(S.name, i.value)	void	name헤더의 값을 정수 값으로 지정
containsHeader(S.name)	boolean	이름이 name인 헤더 포함여부 확인.

※ 인코딩
     <%@ page import = "java.net.URLEncoder">
     <%
          String encodeVal = URLEncoder.encode("한글","UTF-8");
     %>

※ 브라우저 캐시 사용 금지
    <%
         response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Cache-Control", "no-store"); // FF 버그 픽스용
         response.setDateHeader("Expires", 1L);
    %>

※ 톱캣서버에서 GET을 받을 때 문자열 깨짐 방지를 위해 server.xml파일 수정하기 첫번째 방법
    <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"
    useBodyEncodingForURI="true"/>
     이후 JSP페이지에 request.setCharacteEncoding("UTF-8"); 삽입.

※ 톱캣서버에서 GET을 받을 때 문자열 깨짐 방지를 위해 server.xml파일 수정하기 두번째 방법
    <Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"
     useBodyEncodingForURI="true" URIEncoding="UTF-8"/>
      위의 경우 JSP페이지에 request.setCharacteEncoding("UTF-8"); 필히 지정해줘야 한다.

※ 전송방식 확인하기 - 폼값 저장시 꼭 POST여부 확인하도록!
request.getMethod().equals("POST")
request.getMethod().equals("GET")

[BAK] 파일 복원하기

ezBuilder — Wed, 10 Apr 2013 09:56:58 +0900

--DB 정보 확인
restore filelistonly from disk='D:\test_server.bak' 
 
--DB 복구
restore database test_server from disk='D:\test_server.bak'
with move 'server_Data' to 'D:\test_server.mdf',
move 'server_Log' to 'D:\test_server_log.ldf'

[Javascript] 정규식을 활용한 알파벳, 숫자 입력하기

ezBuilder — Fri, 8 Mar 2013 11:43:00 +0900

- 한글은 입력되지 않고 영문, 숫자 만 입력하기.

@ 아래 코드는 알바벳과 숫자를 200자까지 넣을수 있도록 만든 예제 함수.

function checkBeforeSubmit()

{

var regexp = /^[A-Za-z0-9]{1,200}$/i;

// var regexp2 = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힝]/; -> 이건 한글만 제외

if( document.FORM.LANG_CODE.value == "EN" )

{

if( !regexp.test(document.FORM.MESSAGE.value) )

// if( regexp2.test(document.FORM.MESSAGE.value) )

{

alert("언어코드가 영어(EN) 인경우 한글입력이 불가합니다.");

return false;

}

document.FORM.submit();

}

문자	설명
\	다음에 오는 문자를 특수 문자나 리터럴로 표시합니다. 예를 들어, "n"은 문자 "n"과 일치합니다. "\n"은 줄 바꿈 문자와 일치합니다. 시퀀스 "\\"은 "\"와 같고, "\("는 "("와 같습니다.
^	입력의 시작 부분을 찾습니다.
$	입력의 끝 부분을 찾습니다.
*	앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, "zo*"를 입력하면 "z" 또는 "zoo"를 찾습니다.
+	앞에 오는 문자를 1번 이상 찾습니다. 예를 들어, "zo+"를 입력하면 "zoo"를 찾지만 "z"는 여기에 포함되지 않습니다.
?	앞에 오는 문자를 0번 이상 찾습니다. 예를 들어, "a?ve?"를 입력하면 "never"에 있는 "ve"를 찾습니다.
.	줄 바꿈 문자를 제외한 단일 문자를 찾습니다.
(pattern)	pattern을 찾고 일치하는 내용을 기억합니다. 일치하는 부분 문자열은 Item[0]...[n]을 사용하여 결과로 나오는 Matches 컬렉션에서 검색할 수 있습니다. 괄호 문자 ( )를 찾으려면 "$" 또는 "$"를 사용합니다.
x\|y	x 또는 y를 찾습니다. 예를 들어, "z\|food"는 "z" 또는 "food"를 찾습니다. "(z\|f)ood"로는 "zoo"나 "food"를 찾을 수 있습니다.
{n}	n은 음이 아닌 정수입니다. 정확하게 n번 일치하는 부분을 찾습니다. 예를 들어, "o{2}"는 "Bob"의 "o"를 찾지 않지만 "foooood"의 처음 두 o를 찾습니다.
{n,}	n은 음이 아닌 정수입니다. 적어도 n번 일치하는 부분을 찾습니다. 예를 들어, "o{2,}"는 "Bob"의 "o"를 찾지 않지만 "foooood"의 o는 모두 찾습니다. "o{1,}"은 "o+"와 같습니다. "o{0,}"은 "o*"과 같습니다.
{n,m}	m과 n은 음이 아닌 정수입니다. 최소 n번, 최대 m번 일치하는 부분을 찾습니다. 예를 들어, "o{1,3}"은 "fooooood"의 처음 세 o를 찾습니다. "o{0,1}"은 "o?"와 같습니다.
[xyz]	문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, "[abc]"는 "plain"의 "a"를 찾습니다.
[^xyz]	문자 집합에 없는 문자를 찾습니다. 괄호 안에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, "[^abc]"는 "plain"의 "p"를 찾습니다.
[a-z]	문자 범위입니다. 지정한 범위에 있는 문자 중 하나를 찾습니다. 예를 들어, "[a-z]"는 "a"에서 "z"까지의 알파벳 소문자를 찾습니다.
[^m-z]	지정한 문자 범위가 아닌 집합입니다. 지정한 범위에 있지 않은 문자 중 하나를 찾습니다. 예를 들어, "[m-z]"는 "m"에서 "z"까지에 없는 문자를 찾습니다.
\b	단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, "er\b"는 "never"의 "er"를 찾지만 "verb"의 "er"는 찾지 않습니다.
\B	단어의 경계에 있지 않은 문자를 찾습니다. "ea*r\B"는 "never early"의 "ear"을 찾습니다.
\d	숫자를 찾습니다. [0-9]와 같습니다.
\D	숫자가 아닌 문자를 찾습니다. [^0-9]와 같습니다.
\f	용지 공급 문자를 찾습니다.
\n	줄 바꿈 문자를 찾습니다.
\r	캐리지 리턴 문자를 찾습니다.
\s	공백, 탭, 용지 공급 등 모든 종류의 공백 문자를 찾습니다. "[ \f\n\r\t\v]"와 같습니다.
\S	공백 문자가 아닌 문자를 찾습니다. "[^ \f\n\r\t\v]"와 같습니다.
\t	탭 문자를 찾습니다.
\v	세로 탭 문자를 찾습니다.
\w	밑줄을 포함한 모든 단어 문자를 찾습니다. "[A-Za-z0-9_]"와 같습니다.
\W	단어가 아닌 문자를 찾습니다. "[^A-Za-z0-9_]"와 같습니다.
\num	num을 찾습니다. 여기서 num은 양의 정수입니다. 이전에 참조한 값을 다시 참조합니다. 예를 들어, "(.)\1"은 연속적으로 같은 문자가 두 번 나오는 것을 찾습니다.
\n	n을 찾습니다. 여기서 n은 8진 제어 값입니다. 8진 제어 값은 1, 2, 3 자리 중 하나라야 합니다. 예를 들어, "\11"과 "\011"은 모두 탭 문자를 나타내지만 "\0011"은 "\001" & "1"과 같습니다. 8진 제어 값은 256을 넘을 수 없습니다. 이 값이 256을 넘는 경우에는 처음 두 자릿수 만이 식을 구성합니다. 정규식에 ASCII 코드를 사용할 수 있습니다.
\xn	n을 찾습니다. 여기서 n은 16진 제어 값입니다. 16진 제어 값은 정확히 두 자리이어야 합니다. 예를 들어, "\x41"은 "A"에 해당하지만 "\x041"은 "\x04" & "1"과 같습니다. 정규식에 ASCII 코드를 사용할 수 있습니다.

정규식에 사용할 수 있는 메소드는 test(), compile(), match(), replace(), search()

from. http://newmkka.tistory.com/51

[jQuery강좌] 20. jQuery Performance

ezBuilder — Fri, 8 Mar 2013 11:38:55 +0900

웹 프런티어와 함께하는 jQuery 기초강좌

20th - jQuery Performance

jQuery 성능에 대한 넋두리

이번 시간에는 jQuery 성능에 대해서 이야기를 하려고 합니다.

jQuery는 정말로 많은 기능을 개발자가 사용하기 쉬운 형태로 제공하고 있습니다. 하지만 얻는 게 있다면 잃는 것도 있는 게 세상의 이치이듯 jQeury의 강력한 기능을 사용함으로써 개발에 드는 공수는 줄어 들지만 클라이언트의 부하는 증가하게 됩니다. 하지만 앞으로 설명드릴 내용을 이해 하신다면 어느 정도의 부하를 줄일 수 있습니다.

말은 거창하게 시작했지만 크게 어렵거나 한 부분은 없으니, 부담 없이 강좌를 봐 주시면 되겠습니다.

첫 번째 - 셀렉터의 구체화

다른 사람을 이해시키기 위해서 자세하게 설명 하듯이 jQuery도 마찬가지로 원하는 기능에 대해 자세히 알려주면 성능이 올라갑니다.

$(‘#elementID’), $(‘elementName’)는 조금 상황이 다르지만, “class” 또는 “attribute”를 통한 셀렉트시에는 최대한 자세히 명시를 해 주는 것이 성능에 큰 도움이 됩니다. 셀렉터의 “class”를 이용할 경우에는 단순히 $(“.myClass”) 보다는 $(“div > ul > li.class”)처럼 많은 정보를 주면 jQuery가 HTML문서에서 탐색하는 범위가 줄어들어 성능향상의 효과가 있습니다.

두 번째 ? 셀렉터의 사용 자제

셀렉터를 사용하다 보면 같은 요소를 여러 번 셀렉트 하는 경우가 발생 하곤 합니다. 이런 경우에는 기존에 사용한 셀렉터를 재사용을 하거나, .end() 메서드를 통해 반복 사용하지 않는 것이 좋습니다.

세 번째 ? 순수 자바스크립트 사용

jQuery는 javascirpt의 복잡한 함수로 이루어져 있습니다. jQuery의 함수를 실행할 경우 내부에서 구현된 복잡한 로직을 통해 javascript를 실행하고 있기 때문에 해당 로직을 피하게 되면 그만큼의 성능이 올라간다고 생각을 하시면 됩니다.

자주 사용하는 기능 중에 2개를 예를 들어 설명을 드리면 다음과 같습니다.

1. $(‘#id’) 보다는 document.getElementById(“id”)

2. $(“#id”).css(“color”, “red”) 보다는 document.getElementById(“id”).style.color = “red”;

$(“#id”).hide() 보다는 document.getElementById(“id”).style.display = ‘none’;

또한, DOM 처리를 할 때에도 jQuery 보다는 순수 javascript를 사용하는 것이 성능 면에서 큰 이득이니, 이 부분도 참고 하시기 바랍니다.

$(document).ready(function () {
    var $htmlData = $("<ul/>");
    for (var i = 0; i < 10; i++) {
        $htmlData.append($("<li/>").text('승연아빠(' + i.toString() + ')'));
    }
    $htmlData.appendTo('#contents');
});

$(document).ready(function () {
    var htmlData = '<ul>';
    for (var i = 0; i < 10; i++) {
        htmlData += '<li>승연아빠(' + i.toString() + ')';
    }
    htmlData += '</ul>';
    $('#contents').html(htmlData);
});

[첫 번째 방법 보다는 두 번째 방법이 성능에 좋습니다.]

네 번째 - .css()

.css() 메서드를 사용하여, 선택한 개체에 특정 스타일을 적용할 경우 내부에서 많은 처리를 하게 됩니다. 이런 경우가 많다면 스타일시트를 통한 각각의 스타일 클래스를 작성하고, 해당 클래스를 적용 하시기 바랍니다.

이 부분은 jQuery에서만 적용되는 부분이 아닌, 일반적인 javascript도 해당하는 부분이니 참고 하시기 바랍니다.

from. http://www.sqler.com/395258

[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~

ezBuilder — Fri, 8 Mar 2013 11:37:43 +0900

웹 프런티어와 함께하는 jQuery 기초강좌

19th - jQuery Event(이벤트에 생명을)

이번 시간에는 지난 시간 보다는 좀더 고품격 이벤트 처리에 대해 진행을 할까 합니다. 메서드에도 명품이 있다면 이번에 알려드릴 메서드는 정말 최고의 명품이 아닐까 합니다. 그럼 거두절미하고 바로 강의를 시작해 보도록 하겠습니다.

첫 번째로 알아 볼 메서드는 이벤트에 생명을 주는 live() 입니다.

live() 메서드의 경우 원래는 jQuery의 플러그인으로 개발되어 사용이 되었으나, 너무나 좋은 기능 때문인지 “1.3” 이후 버전의 jQuery에는 기본 기능으로 추가 되었습니다. 단어의 뜻으로는 정확이 무슨 역할을 하는 메서드인지 감이 잡히지 않으시나요? 쉽게 말씀 드리면 지정한 개체에 이벤트라는 생명을 불어 넣어준다고 생각 하시면 됩니다.

아직도 감이 오시지 않으시나요?

.click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면, .live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있습니다.

$(“a”).click(function() { alert(‘click a’); }); 의 경우 HTML 문서에 존재하는 “a”요소를 찾아 마우스 클릭 이벤트를 맵핑 하였으나, 이후에 동적으로 추가된 “a” 요소에는 영향을 주지 못합니다. 하지만 $(“a”).live(‘click’, function() { alert(‘live click a’); });를 사용 한다면 처음 로드 된 요소는 물론 로드 후에 동적으로 생성되는 “a” 요소에 대해서도 동일한 이벤트가 적용됩니다.

앗 ! 구문이 어디서 많이 본거 같지 않으신가요? 바로 이전 시간에 말씀 드린 .bind() 메서드와 전체적인 구문이 비슷합니다.

.bind() 메서드에서 강조 드렸던 여러 이벤트를 한번에 등록 하는 것도 똑같이 적용 가능하며, 메서드명과 하는 역할만 조금 다를 뿐 구문은 동일하니 사용상의 구문은 생략을 하도록 하겠습니다.

좀 더 자세한 내용이 알고 싶으시다면 이전 강좌인 “jQuery Event - bind()”를 참고 부탁 드립니다.(절대로 힘에 부치거나, 지난 강좌를 광고 하려는 목적임을 분명히 밝힙니다. 저는 사회에 찌들었으니까요? 죄송합니다.)

간단한 예제를 통해 .live() 메서드에 대해 좀 더 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').click(function () {
                $('ul').append('<li>list item Add(' + $('li').length + ')</li>');
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 0</li>
        </ul>
        <input type="button" id="btnAdd" value="Add Element" />
    </div>
</body>
</html>

버튼을 클릭할 때 마다 “<li>”요소가 추가 되는 내용 입니다. 결과 화면을 보면 “<li>” 요소가 추가되는 거 외에는 별다른 역할을 하고 있지 않습니다.

이제 live() 메서드를 통해 이벤트를 추가 해 보도록 하겠습니다. 동적으로 생성되는 “<li>” 요소를 클릭할 경우 해당 요소의 text를 경고 창을 통해 보여주도록 하였습니다.

$('li').live('click', function () {
    alert($(this).text());
});

위 예제를 실행을 해 보시면, 동적으로 추가된 “<li>” 요소에 자동적으로 이벤트가 적용 되어 있는걸 확인 할 수 있습니다.

이제는 동적으로 구성되는 요소에 일일이 하드코딩 하지 않고 몇 줄의 코드로 깔끔하게 처리 할 수 있습니다.

.die()

조금은 잔인한 이야기가 될지 모르지만 생명을 주었으니 죽일 수 도 있습니다.

기껏 살려놓은 이벤트를 왜 죽여야 하는지에 대해 아주 살짝 힌트로 말씀을 드리면, 클라이언트에서 돔의 변화를 계속 감지하기 때문에 클라이언트에 부하를 줄 수 있으며, 어느 순간 해당 기능이 필요 없어지는 경우 불필요한 부하를 막거나 계속되는 이벤트 맵핑으로 인한 오류를 미연에 방지하기 위함입니다.

앞서 설명한 live() 메서드의 예제에 해당 메서드를 추가 하여 어떻게 동작을 하는지 알아 보겠습니다.

die() 메서드를 호출할 버튼과 “eventDie” 메서드를 을 하나 추가 했습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAdd').click(function () {
                $('ul').append('<li>list item Add(' + $('li').length + ')</li>');
            });

            $('li').live('click', function () {
                alert($(this).text());
            });

            $('#btnDie').click(eventDie);
        });

        function eventDie() {            
            $('li').die();
            //or $('li').die('click');
        }
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 0</li>
        </ul>
        <input type="button" id="btnAdd" value="Add Element" /> <input type="button" id="btnDie" value="Event Die" />
    </div>
</body>
</html>

“Add Element”를 통해 요소를 동적으로 추가하고 해당 요소를 클릭시에 이전과 동일하게 동작을 하나 “Event Die” 버튼을 클릭하시면 더 이상 경고 창이 뜨지 않는 것을 확인 할 수 있습니다.

$(‘li’).die() 의 경우는 요소 “<li>”과 연결된 모든 이벤트를 삭제를 하며, $(‘li’).die(‘click’);이라고 지정할 경우에는 “<li>”요소와 연결된 ‘click’ 이벤트만을 삭제 합니다. 너무나 간단하게 이벤트를 추가하고, 삭제할 수 있다니 그것도 동적으로 생성되는 요소에 정말 완소 아이템 아니 메서드가 아닌가 싶습니다.

바로 이어서 마지막으로 설명드릴 메서드는 더욱더 뽠따스틱한 기능을 하는 .one() 입니다.

이름에서 뭔가 느껴지지 않으시나요 ? (jQuery를 사용하다 보면 정말 메서드 이름만으로 대략의 기능을 알아 차릴 수 있습니다.)

.bind() 메서드와 동일한 방식으로 이벤트를 추가합니다. 하지만 .one() 메서드를 통해 추가된 이벤트는 딱 한번만 실행이 되고 사라지게 됩니다. 정말 이런 것이 jQuery에서 제공하는 메서드의 호출만으로 적용 할 수 있다니~ 정말 세상 좋아졌습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('li').one('click', function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>
</body>
</html>

바로 앞에 진행한 예제와 기본 동작은 동일합니다. “<li>” 요소를 클릭하면 해당 내용을 경고 창을 통해서 보여줍니다. 설명을 드린 내용과 동일하게 동작을 하는지 확인을 해 보도록 하겠습니다.

역시 이미지로는 동작하는 모습을 보여드리기가 힘드네요…. 정말로 설명한 데로 동작을 하니 꼭 소스를 실행해 보시기 바랍니다. (뻥치는거 절대 아닙니다. 그래도 의심이 가신다면 혹은 예제 실행이 귀찮으시다면 http://api.jquery.com/one/ 를 확인을 부탁 드립니다.)

이번 시간에는 jQuery에서 제공하는 초~ 고급 이벤트 처리에 대해서 알아 보았습니다.

동적인 웹 페이지 구성에는 정말 감초 또는 가뭄에 내리는 단비와 같은 역할을 하는 녀석들이니 사용법을 익혀 두시면 정말 큰 도움이 될 거라고 강력하게 외치며 강좌를 마치도록 하겠습니다.

from. http://www.sqler.com/394534

[jQuery강좌] 18. jQuery Event - bind() 메서드

ezBuilder — Fri, 8 Mar 2013 11:36:31 +0900

웹 프런티어와 함께하는 jQuery 기초강좌

18th - jQuery Event - bind() 메서드를 통한 이벤트 연결

이번 시간에는 jQuery에서 지원하는 이벤트를 좀더 고급스럽게 사용하는 방법에 대해 알아 보도록 하겠습니다.(고급이라고 해 봤자, 표현식이 좀 뭔가 있어 보이는 거 정도일까요 ?)

이번 강좌에서는 고급스런 내용의 첫 번째 주자로 나선 bind() 메서드에 대하여 알~ 차게 이야기를 해 보도록 하겠습니다.

.bind()

.bind() 메서드는 말 그대로 개체와 이벤트를 묶어주는 역할을 합니다.

앞에서 진행한 event 관련 메서드의 경우 해당 메서드를 직접 호출하지만, bind()의 경우 파라미터의 값으로 이벤트 이름을 넣음 으로써 해당 이벤트를 체크하게 됩니다.

$(“div”).click(function() { alert('click’); }

$(“div”).click(function() { alert(‘click’); }
event 메서드에서 이렇게 사용했다면, bind() 메서드를 통해서는 다음과 같이 표현 됩니다.

$(“div”).bind(??click’, function() { alert('bind click’); }

$(“div”).bind(‘click’, function() { alert(‘bind click’); }

두 메서드의 차이점이 보이시나요 ?

.click() 메서드의 직접호출이 아닌 해당 이벤트의 이름을 넘김으로 써 동일한 효과를 얻을 수 있습니다.

이러한 기능을 통해 조건에 따라 매우 간단히 이벤트를 동적으로 할당 할 수 있습니다. 또한, 여러 가지의 이벤트를 손쉽게 선택한 개체에 적용할 수 있습니다. 두 개의 이벤트를 적용한 다음 예제를 통해 좀더 자세히 알아 보도록 하겠습니다.

이번 예제는 마우스의 포인터가 지정한 요소에 들어 왔을 때와, 나갔을 때의 이벤트를 체크하여 상태를 표시하며, bind()에 “mouseenter, mouseleave” 이벤트를 이용하였습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var count = 0;
        $(document).ready(function () {
            $("#mouseArea").bind("mouseenter mouseleave", function (e) {
                count++;
                $("#spResult").text(count + " enter or leave ");
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div id="mouseArea">
        AREA(DIV)
        MOUSE : <span id="spResult"></span>
    </div>
</body>
</html>

붉은색으로 표시된 부분에 마우스 포인터를 위치할 때 마다 카운터가 올라가는 것을 확인 할 수 있습니다. 이렇게 여러 개의 이벤트를 지정 시에도 문제없이 동작을 하는걸 확인 할 수 있습니다.

이번에는 이렇게 복수의 이벤트를 지정 후 각각의 이벤트에 따른 다른 동작을 구현을 하기 위해서는 어떠한 방법이 있는지 알아 보도록 하겠습니다. bind() 메서드에서 매우 중요한 부분이니 주의 깊게 보시기 바랍니다.

다음 예제에서는 bind() 메서드의 파라미터와 eventData릍 사용하여 각각의 이벤트를 어떻게 확인하고 처리하는지 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var countEnter = 0;
        var countLeave = 0;
        $(document).ready(function () {
            $("#mouseArea").bind("mouseenter mouseleave", function (e) {
                if (e.type == 'mouseenter') {
                    countEnter++;
                    $("#spResult").text(countEnter + " MouseEnter");
                }
                else {
                    countLeave++;
                    $("#spResult").text(countLeave + " MouseLeave ");
                }
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div id="mouseArea">
        AREA(DIV)
        MOUSE : <span id="spResult"></span>
    </div>
</body>
</html>

[eventData를 통한 이벤트 확인]

각각의 이벤트에 따라 값이 변경되는걸 확인 할 수 있습니다.

<script type="text/javascript">
    var countEnter = 0;
    var countLeave = 0;
    $(document).ready(function () {
        $("#mouseArea").bind({
            mouseenter : function() {
                countEnter++;
                $("#spResult").text(countEnter + " MouseEnter");
            },
            mouseleave : function() {
                countLeave++;
                $("#spResult").text(countLeave + " MouseLeave ");
            }
        });
    });
</script>

위 소스에서 스크립트 부분만 변경하였으며, eventData 대신에 각각의 이벤트에 관련 함수를 연결하여 해당 이벤트를 구분 짖고 있습니다.
역시나 동일한 동작을 하고 있는 모습을 확인 할 수 있습니다.

이번 시간에는 이벤트와 요소를 연결하고, 요소에 여러가지 이벤트를 연결하고 구분 짖는 고급(?)스러운 jQuery 표현 방식을 알아 보았습니다. 이벤트를 제어하기 위해서 필수적으로 알아야 하는 메서드 이니, 꼭 숙지 하시기를 부탁(?) 드립니다.

from. http://www.sqler.com/390805

[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드

ezBuilder — Fri, 8 Mar 2013 11:35:34 +0900

웹 프런티어와 함께 하는 jQuery 기초강좌

17th - jQuery Events 이벤트 지원 메서드 살펴보기

jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다.

jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다. 그 만큼 개발자가 많은 이벤트를 쉽게 이용할 수 있고 좀더 나은 UX를 만들 수 있다는 큰~ 장점이 있습니다. (일만 많아 지는 건가요?) 이번 시간에는 jQuery를 통해 이벤트를 어떻게 이용할 수 있는지에 대해 알아 보도록 하겠습니다.

이벤트 중에서 이번 시간을 통해 알아볼 내용은 사용자의 입력이나 브라우저의 상태가 변경되었을 경우 발생되는 이벤트 메서드 입니다.

이벤트 종류(형식)	이벤트 설명
.blur()	요소에서 포커스를 잃을 경우에 발생하는 이벤트 입니다.
.change()	<input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트 입니다.
.click()	마우스 클릭 시 발생하는 이벤트 입니다.
.dblclick()	마우스를 더블클릭 했을 경우 발생하는 이벤트 입니다.
.focus()	요소에 포커스 되었을 때 발생하는 이벤트 입니다.
.hover()	마우스가 요소 위에 위치했을 때 발생하는 이벤트 입니다.
.keydown()	키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용이 됩니다.
.keypress()	keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.
.keyup()	키 입력 후 발생되는 이벤트 입니다.
.mousedown()	마우스 클릭 시 발생하는 이벤트입니다.
.mouseenter()	선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트 입니다.
.mouseleave()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 입니다. 인터넷익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 사용할 수 있도록 시뮬레이터 됩니다.
.mouseout()	선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트입니다.
.mouseup()	마우스 클릭 후 발생되는 이벤트입니다.
.ready()	DOM이 모두 준비 되었을 때 발생하는 이벤트입니다.
.resize()	resize 될 경우 발생하는 이벤트입니다.
.scroll()	HTML 문서가 스크롤 되었을 때 발생하는 이벤트입니다.
.select()	선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트입니다.
.submit()	Submit이 일어날 때 발생하는 이벤트입니다. (Form 메서드 참고)
표 1. [jQuery Event 관련 메서드 종류]

우선 jQuery에서 지원하는 이벤트의 목록을 살펴 보면 정말(완전 대박!) 많은 이벤트를 지원하고 있는걸 확인 할 수 있습니다.

목록은 많으나 사용법이 대부분 동일하기 때문에 jQuery에서 지원하고 있는 이벤트가 이런 것이 있구나 하는 정도만 알아 두시면 됩니다.

이벤트 중에서 가장 많이 사용하는 마우스 클릭에 대한 예제를 통해 HTML 요소에 이벤트를 어떻게 할당하고, 처리하는지 알아 보도록 하겠습니다.

예제를 진행하기 전에 예전 웹 프로그램 개발 시에는 HTML과 자바스크립트를 혼용(흔히 말하는 스파게티)하여 사용을 하였으나, 웹 표준이 자리를 잡고 코드 분리를 통한 유지보수 반복적인 패턴의 코드중복을 피하기 위해 스크립트를 통해 HTML 요소와 이벤트를 맵핑하는 방식으로 개발을 하고 있습니다.

이전방식

<script type="text/javascript">
    function tdClick(obj) {
        alert(obj);
    }        
</script>

<tr>
    <td onclick="tdClick('1');">#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td onclick="tdClick('6');">#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

[필요한 함수를 만들고, 해당 이벤트가 필요한 요소에 일일이 적용]

추천방식

<script type="text/javascript">
    $(document).ready(function () {
        $("td").click(function () {
            alert($(this).text());
        });
    });
</script>
<tr>
    <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

[HTML 요소에는 아무런 작업을 하지 않았다.]

처음에는 어색하고 오히려 불편하다고 느낄 수 있으나, HTML에서 사용하는 이벤트가 많아지고 동적으로 이벤트와 HTML의 요소를 맵핑하는 기능 구현 시에는 정말 없어서는 안돼는 흔히 말하는 막노동을 깔끔하게 해결하는 최고의 방법입니다.

.click()

마우스 클릭 시 동작하는 이벤트로 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 해당 정의한 메서드가 실행 되며, 인자 값으로는 eventData로 이벤트에 대한 데이터 값이 전달이 됩니다.

$(“div”).click(function() { alert(‘click’); } 이라고 정의 할 경우 HTML 문서에 존재하는 모든 DIV 요소에 “click” 이벤트를 할당하고, 정의한 메서드의 결과인 alert(‘click’);을 실행하게 됩니다.

다음 예제를 통해 자세히 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").click(function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

클릭 이벤트가 필요한 요소를 셀렉터를 통해 선택하고, 선택된 모든 개체에 일괄적으로 이벤트를 할당합니다.

이런 패턴의 개발은 코드의 양을 줄이고, 관련 메서드를 수정할 때 번거로움이 확~ 줄어 든다는 이점이 있습니다. 또한 클라이언트로 전송되는 데이터도 적어지기 때문에 트래픽에 대한 부담도 많이 줄일 수 있습니다.(한국과 같은 인터넷 환경은 크게 문제가 되지 않지만 3G를 이용하는 모바일 기기, 인터넷 여건이 좋지 않은 지역에서는 큰 효과를 얻을 수 있습니다.)

웹에서 흔히 사용이 되지는 않지만 jQuery를 통해서 쉽게 구현이 가능한 마우스 더블클릭을 이용하고 싶다면, 위의 예제에서 .click() 메서드를 .dblclick()으로 변경만 하면 아무런 문제없이 사용이 가능합니다.

<script type="text/javascript">
    $(document).ready(function () {
        $("td").dblclick(function () {
            alert($(this).text());
        });
    });
</script>

대부분의 이벤트 관련 메서드는 이처럼 관련 메서드 이름만 다를 뿐 사용하는 방법에 대한 차이가 거의 존재 하지 않습니다.
마지막으로 키보드 입력 시 키보드의 값을 알아내는 예제를 통해 eventData의 간단한 사용법을 알아 보도록 하겠습니다.

.keydown() 이벤트를 사용하는 이유는 엔터키와 같은 특수 입력키에 대한 내용도 체크하기 위함이며, 특수키에 대한 값이 필요 없을 경우에는 .keypress() 를 사용하시면 됩니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtInput").keydown(function (e) {
                $("#txtKeyCode").val(e.keyCode);
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <input type="text" id="txtInput" /> </br />
        <input type="text" id="txtKeyCode" />
    </div>
</body>
</html>

입력되는 키에 따른 해당 “keyCode”값이 노출되는걸 확인 할 수 있으며, “Enter”, “Ctrl”, “Shift”등의 특수 키보드의 값도 확인 할 수 있습니다. 앞서 말씀 드린 봐와 같이 jQuery에서 지원하고 있는 이벤트 관련 메서드의 종류는 상당히 많은 편이나, 이번 강좌에서 예제로 보여드린 부분만 이해를 하신다면 다른 이벤트 관련 메서드를 사용하시는데 큰 문제가 없을 것으로 생각이 됩니다.

참고자료 및 참고링크
jQuery Events

http://api.jquery.com/category/events/

from. http://www.sqler.com/390796

[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여

ezBuilder — Fri, 8 Mar 2013 11:34:03 +0900

웹 프런티어와 함께 하는 jQuery 기초강좌

16th - jQuery FORM API

폼(form)을 위한 API

이번 시간에는 Form에 대한 이야기를 진행합니다.

웹 프로그램에서 Form은 매우 중요한 요소입니다. 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다.

ASP.NET에서는 단일 폼의 형태로 구성이 되어 있었으며, 많은 부분이 Form에 대해 크게 신경을 쓰지 않아도 되는 부분이 있었습니다. 하지만 ASP.NET MVC가 나오면서 상황은 바뀌었습니다.

ASP, PHP 처럼 Form을 직접적으로 컨트롤 하고, 다중 폼을 이용한 프로그래밍이 쉬워졌기 때문입니다.

물론 ASP.NET도 Form을 통한 데이터 전달이나 이벤트 발생을 하고 있지만 대부분 개발자가 크게 신경을 써야 하는 부분이 적었던 반면에 ASP.NET MVC의 경우는 ASP 처럼 많은 부분에 Form에 대해 신경을 써야 합니다.

ASP.NET이 단일 폼만을 지원하는 것은 아니며, 흔히 말하는 꼼수를 사용하면 다중 폼도 아무런 문제 없이 사용이 가능합니다.

이번 강좌는 ASP.NET 개발자 보다는 ASP, PHP, ASP.NET MVC 개발자에게는 아주 큰 도움이 되지 않을까 하는 생각이 듭니다.

서론은 여기까지 하고, 바로 본론으로 들어가겠습니다.

Form 하면 꼭 등장하는 녀석이 바로 submit() 입니다.

“submit”은 form에 있는 데이터를 사용자가 지정한 곳에 보내는 역할을 하게 됩니다.

jQuery에서 지원하는 .submit() 동일한 역할을 하고 있으며 다음과 같은 형태를 가지고 있습니다.

.submit(handler(eventObject) 를 살펴 보면, 뒤에 handler라는 것이 존재를 하고 있습니다. .submit()을 호출하게 되면 정의된 handler를 실행하고 리턴 받은 Boolean값을 통해 서버로 데이터 전송 유/무를 결정 하게 됩니다.

일반적으로 아래와 같은 방법을 사용을 하고 있습니다.

function sendSubmit() {
    if (document.getElementById("txtName").value == '')
    {
        alert("이름을 입력하세요.");
        return;
    }
    else
    {
        document.form.submit();
    }
}

위 방법을 jQuery에서 제공하는 .submit(handler);를 사용하게 되면 다음과 같습니다.

$('form').submit(function() {
    if($('#txtName').val() == '') {
        alert("이름을 입력하세요.");
        return false;
    }
    else    {
        return true;
    }
});

약간의 형태만 달라졌지, 기본적인 개념은 기존과 동일하기 때문에 큰 어려움 없이 바로 사용 가능 합니다.

서버간의 데이터 통신을 위해 form에 있는 데이터를 직렬화 하거나 url을 통해 전달을 하는 경우가 있습니다.

특히나 Ajax를 이용한 비동기 통신에서는 데이터의 직렬화를 상당히 많이 사용하고 있습니다. 이럴 때를 위해서 jQuery에서는 form 데이터를 쉽게 직렬화 시킬 수 있는 메서드를 제공하고 있습니다.

바로 지금부터 설명드릴 아래의 두 녀석입니다.

메서드 이름부터가 직렬화입니다.

두 메서드의 역할은 동일하며, 반환되는 값에서 약간의 차이를 보이고 있습니다.

.serialize()의 경우 선택한 폼의 값을 “a=1&b=2&c=3”등의 형태로 반환하며, .serializeArray() 메서드의 경우 jQuery 배열 개체로 반환합니다.

쿼리스트링을 통한 Ajax 관련 데이터를 만들 때는 .serialize()를 사용하시면 됩니다.

다음 예제를 통해 .serialize() 메서드 동작을 확인해 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; } 
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('form').submit(function () {
                var datas = $(this).serialize();
                alert(datas);
                return false;
            });
        });
    </script>
</head>
<body style="padding:10px;">    
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>    
        <form>
            <input type="text" name="a" value="1" id="a" /><br />
            <input type="text" name="b" value="2" id="b" /><br />
            <input type="hidden" name="c" value="3" id="c" /><br />          
            <select name="d">
            <option value="5" selected="selected">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            </select><br />            
            <input type="submit" name="f" value="Submit" id="f" />
        </form>
    </div>
</body>
</html>

[폼 데이터에 대한 값이 serialize 된 결과를 확인 할 수 있습니다. ]

이제 더 이상 쿼리스트링을 만들기 위해서 노가다 작업을 하지 않아도 된다는 아주 큰 희소식입니다.

물론 일반적인 Form 데이터를 전송하게 되면 자동으로 직렬화 형태로 값이 전달이 되지만, Ajax와 같은 특수한 상황에서는 정말로 완소 메소드가 아닌가 싶습니다.

from. http://www.sqler.com/390796

[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여

ezBuilder — Fri, 8 Mar 2013 11:33:04 +0900

웹 프런티어와 함께하는 jQuery 기초강좌

15th - jQuery Attribute(속성 관련 메서드 알아보기)

HTML 문서의 속성 제어하기

이번 시간에는 jQuery를 이용하여, 개체 속성을 제어하는 방법에 대해 알아 보도록 하겠습니다.

HTML 요소에서 이름을 제외한 나머지 요소는 모두 속성이 될 수 있습니다.

즉 <img src="”img/new.gif” alt=”새글” /> 이라는 요소가 있다면 src, alt는 모두 요소가 되며, 정의되지 않은 값을 사용자 임의로 넣어 사용 가능합니다. (사용자 정의 속성은 특별한 오류를 나타내지는 않으나, 간혹 브라우저 특성으로 인해 발생되는 오류가 있으니, 꼭 필요한 곳에만 사용을 하시기 바랍니다.)

.attr()

어디서 많이 본 형태 아닌가요? 맞습니다. 스타일 관련 강좌에서 나왔던 css() 메서드와 이름만 다르지 똑같이 생겼습니다.

동작하는 모습도 클래스에서 속성으로만 변경되었지 동일합니다.

요소의 속성값을 가져오기 위해서는 .attr(attributeName)을 사용하며, 속성값을 설정하기 위해서는 .attr(attributeName, value)를 사용하면 됩니다. 다시 한번 밥 아저씨의 명언이 생각 납니다.

<img src=”img/new.gif” alt=”새글” />
var imgSrc = $(“img”).attr(“src”); //img 요소의 src 속성을 가져옵니다.
$(“img”).attr(“src”, “img/old.gif”); //img 요소의 src 속성을 “img/old.gif”로 변경합니다.

속성값을 성정 할 경우 해당 속성이 존재하면 기존 속성에 덮어쓰기를 하며, 속성이 존재 하지 않을 경우에는 새로운 속성을 할당 하게 됩니다.

Callback 메서드를 통한 속성값 제어는 이미 css() 메서드에서 자세히 설명 했던 부분이므로 넘어 가도록 하겠습니다.

일반적인 자바스크립트를 통해서도 속성에 접근이 가능합니다만, 브라우저마다 지원하는 방식이 다르기 때문에 속성값을 사용할 경우에는 jQuery의 attr() 메서드를 사용하시는 것이 정신 건강에 매우 좋습니다.

.removeAttr()

attr() 메서드를 통해 속성값을 추가 했으니, 이제 삭제를 시키는 방법에 대해 알아 보도록 하겠습니다.

attr(“attributeName”, ””); 와 같은 방법으로 해당 속성값을 삭제(?) 할 수도 있습니다만, FireBug와 같은 툴을 사용해 확인을 해 보면 값만 빈 값으로 변경이 된걸 확인 할 수 있습니다. (당연하다고요 ? 죄송합니다… 혹시나 해서….)

removeAttr() 메서드를 사용시 해당 속성에 대한 이름과 값이 모두 제거되며, 역시나, 자바스크립를 통한 속성값 삭제 보다는 해당 메서드를 사용하길 추천 드립니다.

.val()

선택된 요소의 값을 가져옵니다. jQuery 에서 셀렉터 다음으로 가장 많이 사용되는 메서드가 아닌가 싶습니다.

Input, select 등의 요소에서 value에 해당하는 값을 가져오거나 설정하며, 자바스크립트의 document.getElementById(“txtName”).value; 와 동일한 역할을 합니다.

<input type=”text” name=”txtName” id=”txtName” />
var name = $(“#txtName”).val(); //입력된 값 가져오기
$(“#txtName”).val(“val를 이용한 새로운 값 입력”); //값 입력하기

Callback 함수의 경우 역시 앞서 설명한 부분과 동작이 완전 동일하여, 자세한 설명을 생략합니다.

.text() / .html()

선택된 개체의 text 또는 html을 가져오거나 사용자가 지정하는 값으로 설정하는 역할을 하는 메서드 입니다.

두 개의 메서드 역시 앞서 설명 드린 부분과 사용방법이 크게 다르지 않습니다. 파라미터 인자의 유무에 따라 값을 설정 하거나, 해당 값을 가져오거나.....

사용 방법에 대해 설명 보다는 text 와 html에 대한 차이점에 대한 예제를 끝으로 이번 강좌를 마칠까 합니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var text = $("div").text();
            var html = $("div").html();
            alert(text);
            alert(html);
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    text 그리고 html??? 차이(1)
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    text 그리고 html??? 차이(2)
    </div>
</body>
</html>

[$("div").text()]

[$("div").html()]

두 메서드의 차이점이 보이시나요?

text()의 경우 html을 제외한 순수 text만 가져오는 반면에 html()의 경우는 text를 포함한 모든 html의 내용까지 가져 오는걸 확인 할 수 있습니다.

from. http://www.sqler.com/387878

[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여

ezBuilder — Fri, 8 Mar 2013 11:30:09 +0900

웹 프런티어와 함깨하는 jQuery 기초강좌

14th - jQuery CSS(스타일 관련 메서드 알아보기)

HTML 문서의 스타일 제어하기

jQuery에서는 역시나 굉장히 많은 API를 제공 하고 있습니다만, 여기서는 자주 사용되는 API를 중심으로 설명을 드리고, 필요에 따라서 부수적인 API에 대해 이야기 하도록 하겠습니다.

우선 스타일을 직접적으로 제어하는데 사용되는 API를 알아 보도록 하겠습니다.

.css()

적용된 스타일을 가져오거나, 새로운 스타일을 적용합니다.

$(“div”).css(“background-color”)의 경우 해당 선택된 개체의 배경 색상을 가져옵니다.

기본적인 표현 식은 스타일에서 사용되는 구문을 동일하게 사용하시면 됩니다.

새로운 스타일을 적용하고 싶을 경우에는 css(propertyName, value) 메서드를 사용하시면 됩니다. 앞에서 진행한 예제를 보시면 대부분의 경우 이 메서드를 사용해서 강조하고 있습니다. 사용법 또한 스타일 관련 문법만 알고 계시면 어렵지 않게 활용 가능합니다.

붉은색 배경을 넣고 싶을 경우 $(“div”).css(“background-color”, “red”); propertyName에는 적용할 스타일의 이름과 value에는 원하는 값을 넣기만 하면 됩니다.

$(“div”).css(“background-color”, function(index, value) { }); 와 같은 형식을 통해 자신이 원하는 기능을 확장하여 사용할 수 있습니다. function의 파라미터를 살펴보면 index와 value가 존재하고 있습니다. Index의 경우 선택한 개체의 순서이며, value는 해당 개체의 현재 스타일 속성값입니다. 이 형식을 사용하면, 한번에 개체의 스타일 값을 확인하고 변경할 수 있는 큰 장점이 있습니다.

다음 예제를 통해 간단히 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").css("background-color", function (index, value) {
                if (value == "rgb(255, 255, 0)") {
                    return "red";
                }
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr style="background-color:rgb(255,255,0)">
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr style="background-color:rgb(255,255,0)">
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr style="background-color:rgb(255,255,0)">
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

HTML에서 노랑색으로 강조한 부분이 붉은 색으로 변경 되었습니다. Function의 경우 파라미터가 하나이면 무조건 해당 개체의 index가 반환되니 이점 참고 하시기 바랍니다. Index, value에 대한 값이 필요 없을 경우는 파라미터를 사용하지 않으셔도 무방합니다.

.hasClass(className)

선택된 개체에 className과 동일한 클래스가 존재 하는지에 대한 결과를 true/false 로 반환합니다.

<div class=”myClass”>Content</div>

$(“div”).hasClass(“myClass”)의 경우 “true”를 반환합니다.

$(“div”).hasClass(“noClass”)의 경우 “false”를 반환합니다.

.addClass()

새로운 클래스를 추가하는 메서드입니다.

$(“div”).addClass(“className”) 셀렉터를 통해 가져온 개체에 className이라는 클래스를 추가합니다.

이 부분은 더 드릴만한 설명이 없으므로 function 파라미터를 통한 클래스 제어에 대해 자세히 알아 보도록 하겠습니다.

앞서 설명 드린 “css(propertyName, function(index, value) {})”와 비슷한 형식을 보이는 걸로 봐서는 하는 역할도 비슷할 것이라 생각 하시면 빙고 ~~

css() 메서드의 경우 스타일에 대한 속성값을 제어하고, addClass()의 경우 속성값이 아닌 className에 대한 부분만 제어 한다는 차이만 있을 뿐 거의 동일한 동작을 합니다. function의 파라미터 또한 css() 메서드에서 설명 드린 부분과 동일합니다. Index는 개체의 번호를 currentClass는 value와 같이 현재 개체의 className을 반환합니다.

다음 예제를 통해 addClass(function(index, currentClass))의 사용법을 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .textStyle { font-weight:bold; color:White; }
        .bgred { background-color : Red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").addClass(function (index, currentClass) {                
                if (currentClass == "bgred") {
                    return "textStyle";
                }
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr class="bgred">
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr class="bgred">
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr class="bgred">
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

선택한 개체 중에 클래스 명이 “bgred”일 경우 해당 개체에 “textStyle”이라는 클래스를 추가 하였으며, 결과 화면에서 보듯이 하얀색의 글자와 bold 속성이 적용 되었습니다.

.removeClass()

.addClass()와는 반대로 해당 className을 삭제 합니다.

.addClass()와 동작하는 형태와 사용법은 완전히 동일 하며, 반대로 선언한 클래스를 삭제 한다는 것만 알아 두시면 됩니다.

.toggleClass()

선택한 개체를 마치 스위치처럼 껏다(removeClass()), 켯다(addClass())하는 기능을 하는 메서드입니다.

$(“div”).toggleClass(“myClass”)

선택한 개체에 myClass가 적용 시 myClass를 삭제를 하고, 적용되지 않은 경우에는 myClass를 적용하는 역할을 합니다.

toggleClass(className, switch)의 두 번째 파라미터인 switch(Boolean)값을 통해 사용자가 toggle상태를 지정할 수 도 있습니다. true 라면 addClass()와 같은 효과를 반대로 false라면 removeClass()와 같은 효과를 나타냅니다.

이 메서드 역시 function을 통한 확장된 제어가 가능합니다.

모양을 보아 하니 역시나 이전 메서드에서 설명 드린 부분과 동일한 형태를 취하고 있는걸 확인 할 수 있습니다.

아마도 function의 역할은 toggle할 클래스명의 리턴이 되겠다라는 생각이 팍팍 듭니다.

toggleClass()를 사용하여 목록에서 사용자가 선택한 항목을 강조하는 예제 입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").click(function () {
                var obj = $(this);
                obj.toggleClass("selected");
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

이미지로 표현되어 정확한 동작의 모습을 보여드리지 못하는게 아쉬울 뿐입니다.

예제 소스를 복사하셔서 브라우저로 확인을 해 보시면 한번 클릭하면 toggleClass()로 인해서 selected 클래스가 추가되면 이미 추가된 항목을 선택하면 selected 클래스가 삭제되어 이전의 모습으로 돌아 가는 모습을 확인 할 수 있습니다.

.position(), .width(), .height()

단어만 봐도 어떠한 역할을 하는지 알 수 있는 녀석들 입니다.

우선 position()에 대해 살펴보면 단어의 뜻 그대로 선택된 개체의 위치값을 가지고 있는 개체를 반환합니다. 반환되는 개체는 top, left라는 속성값을 가지고 있으며, 다음과 같이 사용됩니다.

var p = $(“div”).position();
var pTop = p.top;
var pLeft = p.left;

var p = $(“div”).position();

var pTop = p.top;

var pLeft = p.left;

width() 그리고 height()

선택된 개체의 가로와 세로길이를 반환하거나 설정하는 메서드입니다. 아무런 파라미터가 없을 경우 해당 값을 반환하며, 파라미터를 넣을 경우 각각의 값이 파라미터의 값으로 대체됩니다.

개체의 가로,세로 길이를 구할 때
var width = $(“div”).width();
var height = $(“div”).height();

개체의 가로, 세로 길이를 지정 할 때
$(“div”).width(100);
$(“div”).height(100);

개체의 가로,세로 길이를 구할 때

var width = $(“div”).width();

var height = $(“div”).height();

개체의 가로, 세로 길이를 지정 할 때

$(“div”).width(100);

$(“div”).height(100);

from. http://www.sqler.com/387865

[jQuery강좌] 13. jQuery Core

ezBuilder — Fri, 8 Mar 2013 11:29:09 +0900

웹 프런티어와 함께 하는 jQuery 기초강좌

13th - jQuery Core

jQuery Core ?

지금까지 jQuery의 셀렉터나 API를 통한 jQuery 사용법을 알아 보았습니다.

jQuery의 기본은 selector라고 말씀을 드렸지만, 이번 강좌는 제목 부터가 “CORE” 입니다. 기본 중에 기본이라고 해야 할까요?

강좌를 시작하면서 언급했던 내용으로 jQuery의 약자로 “$”를 사용한다고 말씀 드렸습니다.
jQuery 소스를 확인 해 보시면 jQuery 문자 대신에 “$”를 사용할 수 있도록 설정하는 부분을 어렵지 않게 찾을 수 있습니다. (소스코드 마지막에 위치합니다.)

첫 번째로 jQuery(=$)를 사용하여, jQuery object를 생성하는 방법에 대해 알아 보도록 하겠습니다.
셀렉터 강좌 처음에 셀렉터를 통해 가져온 값은 jQuery object(개체)라는 말은 언급 했었습니다. jQuery 개체는 셀렉터를 통해서 가져오거나, 개발자가 () 안에 특별한 인자 값을 넣는 것으로도 개체를 만들 수 있습니다.

$(html)
$(“<span>span tag 입니다.</span>”)
$(“<span/>”)
위와 같은 형태로 사용자의 마음대로 jQuery 개체를 만들 수 있습니다.

$()는 ()안에 들어가는 표현 식에 따라 서로 전혀 다른 기능을 하고 있습니다.

셀렉터 문법을 사용하면 $는 셀렉터가 되며, 표현 식에 함수가 들어갈 경우 document.onload와 대응이 되는 역할을 하게 되며, 많은 예제에서 사용했던 $(document).ready(function() { }); 의 함축적인 표현으로 $(function() { });를 사용 합니다.

jQuery 개체는 Javascript의 개체와는 전혀 다르며, 사용법 또한 많은 부분에서 차이가 납니다.

간단한 예로 $(“#id”)와 document.getElementById(“id”)를 통해 가져온 개체를 alert() 메서드를 통해 알아보면 $(“#id”)의 경우 object 형식으로, 후자의 경우 HTML Element로 나타나는 걸 확인 할 수 있습니다.

jQuery.noConflict()
예약어로 사용되는 “$”문자를 다른 라이브러리와 충돌이 나지 않게 하는 역할을 합니다.
대표적으로 Prototype이라는 라이브러리가 “$”를 사용하고 있으며, Prototype에서 jQuery로 옮겨가고 있는 사이트나, 개발 시 꼭 Prototype과 혼용해서 사용하는 경우가 있다면 noConflict() 메서드를 통해 jQuery의 “$”를 무력화 시키거나 다른 약어로 변경 할 수 있습니다.

우선 jQuery의 noConflict 메서드의 내부를 보면 “$”를 _$ 또는 _jQuery로 변경하는 것을 확인 할 수 있습니다.

noConflict: function( deep ) {
    window.$ = _$;
    if ( deep ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
},

“$” “X”로 변경하기
var X = jQuery.noConflict();
단순히 변수를 하나 지정하고, noConflict() 메서드를 실행 하기만 됩니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        var X = jQuery.noConflict();
        X(document).ready(function () {
            X("td").not(function (index) {
                return index % 3 == 0;
            }).css("background", "red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

[$ => X로 변경 후 전과 다름없이 동작에는 전혀 문제가 발생하지 않았습니다.]

지금까지 jQuery Core에 대해 알아 보았으며, 다음 시간에는 CSS(Style)에 대해 알아보는 시간을 갖도록 하겠습니다.

from. http://www.sqler.com/387795

[jQuery강좌] 12. jQuery Traverse - Tree Traversal

ezBuilder — Fri, 8 Mar 2013 11:25:03 +0900

웹 프런티어와 함께 하는 jQuery 기초강좌

12th - jQuery Traverse(탐색)

세 번째 이야기 - Tree Traversal

탐색(Traverse) 메서드의 마지막 시간으로 이번에는 Tree 와 관련된 메서드에 대해 알아 보도록 하겠습니다.

Tree Traversal

Tree하면 생각나는 그 강좌가 있지 않으시나요 ?
Hierarchy Selector진행 시 HTML DOM에 대한 내용 기억하시나요 ? 이번 시간도 DOM을 이용하는 부분이니, 혹시라도 기억이 나지 않으시면 미리 한번 확인을 해 보시고 이번 강좌를 보시면 도움이 많이 되지 않을까 합니다.

이전에 작성했던 강좌와 동일하게 우선 jQuery에서 지원하고 있는 메서드의 목록을 알아 보도록 하겠습니다.

아래에 나열된 목록과 설명은 jQuery에서 제공하는 메서드의 일부이며, 더 자세한 내용은 http://docs.jquery.com/Traversing에서 확인 하시기 바랍니다.

메서드	메서드 설명
.children([selector])	선택된 개체의 자식 중 Selector 와 동일한 요소를 가져옵니다.
.closest([selector])	선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져옵니다.
.find([selector])	선택된 개체에서 selector와 일치하는 요소를 가져옵니다.
.next([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다. 일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾습니다.
.parent([selector])	선택된 개체에서 selector와 일치하는 부모의 요소를 가져옵니다.
.prev([selector])	선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져옵니다.
.siblings([selector])	선택된 개체에서 selector와 일치하는 형제 요소를 가져옵니다. 자신은 제외합니다.
표 1. [jQuery Tree 메서드 종류]

selector는 일종의 옵션으로 존재를 하며, selector의 사용여부는 일종의 필터링과 관계가 있으며 앞으로 설명 드릴 메서드는 모두 동일한 형태를 취하고 있습니다. Selector가 있을 경우 selector와 일치하는 요소를 탐색하고, 없을 경우 가장 가까운 요소를 가져옵니다.

설명을 보시면 앞서 설명을 드렸다시피 HTML DOM에 대한 이해만 되어 있으시면 너무나도 쉽게 이해가 되리라 생각이 됩니다.

API명이 너무나 명확해서 해당 명칭만 번역해 보셔도 메서드의 역할은 대부분 유추가 가능합니다.

그래서, 이번 강좌는 여기서 간단히 마치도록 하겠습니다.

그렇지만…..

그래도 정말 자주 사용하는 find() 메서드와 개인적으로 너무나 좋아하는 .siblings() 메서드에 알아 보로록 하겠습니다.
나머지 메서드에 대해서는 천천히 차근차근 하나하나 업데이트를 진행할 예정이니 꾸준한 관심을 부탁 드리며, 첫 번째 주자 .find() 메서드에 대해 알아 보도록 하겠습니다.

.find()
이 메서드는 앞에 예제에서 알게 모르게 등장을 했었습니다. 예제를 앞서 간단히 설명을 붙이자면, $(“div”).find(“a”)라고 했을 경우 div 요소를 우선 탐색하여 가져온 개체에서 “a” 태그가 존재하는 요소를 가져옵니다.

다른 자료를 찾아보니, filter() 메서드와 find() 메서드의 차이점에 대해 언급한 부분이 있어 저도 살짝 이야기를 하고 넘어가도록 하겠습니다.

$(“div”).filter(“a”) : filter() 메서드를 사용할 경우는 div요소의 집합에서 “a”를 찾습니다.
$(“div”).find(“a”) : find() 메서드를 사용할 경우 div 요소의 집합 내용에서 “a”의 요소를 가져옵니다.
두 메서드의 차이점이 이해가 되시나요 ?

다음 예제를 통해 차이점과 기본적인 사용방법에 대해 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").find("p").css("border", "1px solid red");
            //$("div").filter("p").css("border", "1px solid red");
            //$("div").filter(".myClass").css("border", "1px solid red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <p>this is 1st p</p>
    </div>
    <div>
        <p>this is 2nd p</p>
    </div>
    <div class="myClass">
        <p>this is 3rd p</p>
    </div>
</body>
</html>

예제 소스를 보시면 아래의 모습처럼 세 가지의 스크립트가 존재 합니다.
$("div").find("p").css("border", "1px solid red");
$("div").filter("p").css("border", "1px solid red");
$("div").filter(".myClass").css("border", "1px solid red");

[$("div").find("p").css("border", "1px solid red");]

[$("div").filter("p").css("border", "1px solid red");]

[$("div").filter(".myClass").css("border", "1px solid red");]

화면과 같이 나열된 세 가지 메서드가 모두 다르게 동작하는 걸 알 수 있습니다.
find()의 경우 이미 탐색된 개체의 내부 요소에서 selector와 동일한 요소를 가져오며, filter()의 경우는 처음 탐색 시에 selector에 해당되는 값으로 탐색을 도와주는(?) 역할을 한다고 보시면 됩니다.

.siblings()
개인적으로 상당히 많은 도움을 받은 메서드이며, 주로 목록에서 마우스로 클릭한 요소만 강조할 경우 매우 쉽게 프로그래밍을 가능하도록 해준 메서드입니다. 도움을 받았던 부분을 정리해 예제를 만들어 보았습니다.
.siblings() 메서드를 통해 목록에서 사용자가 선택(클릭)한 부분을 어떻게 처리하는지 알아 보겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { background:red }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").each(function () {
                $(this).click(function () {
                    $(this).addClass("selected");
                    $(this).siblings().removeClass("selected");
                });
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>            
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>
</body>
</html>

each() 메서드를 통해 “li”에 click 이벤트를 할당하고, 이벤트 발생시 이벤트가 발생된 요소의 class를 추가 시키며, 자신을 제외한 나머지 요소에 대해서는 강조 클래스 셋팅을 제거 합니다.

[선택한 아이템만 붉은색으로 강조 되는걸 확인 할 수 있습니다.]

이번 강좌를 끝으로 Traverse에 대한 내용을 마치도록 하겠습니다.
앞으로도 많은 부분이 남았으니, 계속되는 업데이트를 기대 부탁드립니다.

from. http://www.sqler.com/387736

[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing

ezBuilder — Fri, 8 Mar 2013 11:23:57 +0900

웹 프런티어와 함께 하는 jQuery 기초강좌

11th - jQuery Traverse(탐색)

두 번째 이야기 - Miscellaneous

탐색 메서드 두 번째 시간으로 이번에는 Miscellaneous 메서드에 대해 알아 보도록 하겠습니다.

우선 Miscellaneous 메서드의 종류를 정리하면 다음과 같습니다.

메서드	메서드 설명
.add()	일치하는 요소의 집합에 요소를 추가합니다.
.andSelf()	현재 설정 스택에 요소의 이전 설정을 추가합니다.
.contents()	텍스트 및 주석 노드를 포함 일치하는 요소 집합의 자식 집합을 반환합니다.
.end()	이전 상태로 일치하는 집합을 반환합니다.
표 1. [jQuery Miscellaneous 메서드 종류]

Miscellaneous의 뜻을 사전에서 찾아 보면 ‘여러 가지 종류의, 이것저것 다양한’ 이란 뜻을 가지고 있습니다. 아마도 해당 메서드의 성격이 너무나도 달라서 카테고리의 이름을 이렇게 잡은 듯 합니다.

add()

이름에서도 쉽게 알 수 있듯이 뭔가를 더하는 역할을 하는 메서드로 다음과 같이 사용을 합니다.

.add(selector)

.add(elements)

.add(html)

셀렉터를 통해 선택한 개체에 ()안에 값을 더하는 메서드로 selector를 통해 가져온 개체, span과 같은 요소, <span>testSpan</span>과 같은 html 요소가 올 수 있습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("li").add("div > p").css("border", "1px solid red");            
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
        </ul>
        <p>this is P</p>
    </div>
</body>
</html>

.andSelf()

사용빈도가 상당히 낮을 것으로 추측을 하는 메서드로 저 또한 이번 강좌를 준비하면서 알게 된 메서드입니다. 앞서 설명한 부분을 다시 보면 “현재 설정 스택에 요소의 이전 설정을 추가합니다.” 말이 좀 어렵습니다.

우선 jQuery 문서에 있는 예제를 살펴 보기로 하겠습니다.

<!DOCTYPE html>
<html>
    <head>
    <style>
        p, div { margin:5px; padding:5px; }
        .border { border: 2px solid red; }
        .background { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div>
            <p>First Paragraph</p>
            <p>Second Paragraph</p>
        </div>
    <script>
    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");
    </script>
</body>
</html>

다음 그림을 보면 좀더 이해가 쉽습니다.

.contents()

셀렉터를 통해 선택된 개체 안에 있는 모든 요소를 반환합니다.

단어의 뜻대로 선택된 개체 안에 있는 요소의 집합을 반환하며, 이 메서드의 경우 filter 메서드와 조합을 통해 많이 사용을 하고 있습니다.

다음 예제를 통해 간단한 사용법을 살펴 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("ul").find("li").contents().remove("ul");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2
                <ul>
                    <li>sub item 1</li>
                    <li>sub item 2</li>
                </ul>
            </li>                
            <li>list item 3</li>
            <li>list item 4</li>
        </ul>
    </div>
</body>
</html>

[메서드 적용전의 모습]

[메서드 적용 후의 모습]

remove(selector) 메서드는 "selector"와 일치하는 내용을 삭제합니다.
예제를 간단히 설명하면, 셀렉터를 통해 ul 요소를 찾은 후 find()를 통해 "li" 요소를 찾습니다. 마지막으로 contents() 메서드를 통해 li 요소에 담겨있는 모든 요소를 찾은 후 remove() 메서드를 통해 "ul"이 제거가 되었습니다.

.end()

이 메서드는 정말 중요하고 많은 곳에서 사용이 되며, 실제로 복잡한 스크립트를 작성할 때 마법과 같은 역할을 해 주는 메서드입니다.

.end() 메서드를 간단히 설명 드리자면 .end() 메서드가 호출 후 바로 이전의 상태로 돌아가는 것을 의미합니다.

역시나 설명이 어렵우시나요 ?

$(div).find(p).end().addClass(“myClass”);와 같은 구문이 있다고 한다면 myClass라는 class 속성이 div에 적용이 됩니다.

.end() 메서드가 없다면 “div” 요소 안에 있는 “p” 요소에 class 속성이 적용이 되지만 .end() 메서드의 호출로 인해 “p” 요소 이전의 개체인 $(“div”) 개체가 다시 호출이 되고 호출된 $(“div)에 class 속성이 적용이 되는 것입니다.

그림으로 다시 설명을 드리자면 아래와 같이 동작을 한다고 보시면 됩니다.

.end() 메서드의 경우 앞에 강좌에서 설명한 jQuery의 특징 중에 플러그인과 메서드체인을 이용한 스크립트 작성에 빠질 수 없는 요소로 정확히 이해를 하신다면 간결하고 클라이언트에 부담 확~ 줄일 수 있는 프로그래밍이 가능하므로 해당 메서드에 대해 정확히 이해를 하시기 바랍니다.

from. http://www.sqler.com/387677

[jQuery강좌] 10. jQuery Traverse - Filtering

ezBuilder — Fri, 8 Mar 2013 11:22:45 +0900

웹 프런티어와 함께하는 jQuery 기초강좌

10th - jQuery Traverse(탐색)

첫 번째 이야기 필터링

jQuery의 탐색(Traverse) 메서드를 이용하여 셀렉터에 날개를 달자

“Traverse”는 위에 보시는 바와 같이 가로지르다, 횡단이란 뜻을 가지고 있으며, jQuery에서 지원하는 Traverse 메서드 또한 HTML을 가로지르거나, 횡단하는 것 처럼 탐색하는 역할을 합니다. 해당 메서드를 간략히 설명하면 셀렉터를 통해 선택한 개체에서 다시 한번 개체를 찾고, 필터링하고, 추가하는 작업을 쉽게 구현 할 수 있도록 도와주는 메서드라고 생각 하시면 됩니다.

물론 기존의 셀렉터를 통해서도 충분히 원한는 개체를 탐색하거나, 선택 하는데 큰 지장이 없습니다만, Traverse 메서드를 이용하면 셀렉터를 통해 가져온 개체를 즉 1차 결과물에 추가적인 작업을 통해 2차, 3차 등의 결과를 쉽게 얻을 수 있다는 큰 장점이 있습니다.

이러한 Traverse 메서드는 크게 Filtering, Miscellaneous Traverse, Tree Traverse 3가지로 구분을 하고 있으며, 이번 시간을 통해 자세히 알아 보도록 하겠습니다.

Filtering

첫 번째로 알아볼 필터링 관련 메서드 입니다.

우선 필터링 메서드의 종류에 대해서 알아 보기로 하겠습니다.

메서드 종류(형식)	메서드 설명
.eq(index)	선택한 요소들 중에서 인덱스와 일치하는 단일 요소를 선택 반환합니다.
.filter(expr)	선택한 요소에서 표현식(expr)과 일치하는 요소의 집합을 선택 반환합니다. 표현식에는 selector, function, element, jQuery object가 올 수 있습니다.
.first()	선택한 요소에서 첫 번째 단일 요소를 선택 반환합니다.
.has(selector)	선택한 요소에서 selector항목을 가지고 있는 요소의 집합을 선택 반환합니다.
.is(expr)	표현식과 일치하는 조건이 있으면 true를 반환합니다. 표현식에는 selector, function, element, jQuery object가 올 수 있습니다.
.last()	.first() 와 반대되는 메서드로 마지막 단일 요소를 선택 반환합니다.
.map(callback)	jQuery 개체에 있는 요소의 집합을 다른 집합으로 변경해서 이동 시킵니다.
.not(expr)	표현식과 일치하지 않는 요소의 집합을 선택 반환합니다.
.slice(start,[end]	선택한 요소에서 start, end번 째에 해당하는 집합을 선택 반환합니다.
표 1. [jQuery 탐색 필터 메서드 종류]

생각보다 많은 메서드를 제공하고 있으나, 이중에 몇 개는 기존에 설명 드렸던 셀렉터의 필터와 겹치는 내용이 있습니다.

대표적으로 first(), last(), eq(), not() 메서드를 들 수있습니다.

이전 필터와 살짝 비교를 하면 다음과 같습니다.

$(“td:eq(0)”) == $(“td”).eq(0)

$(“td:first”) == $(“td”).first()

$(“td:last”) == $(“td”).last()

$(“td:not(‘.myClass’)”) == $(“td”).not(“.myClass”)

양쪽다 모두 동일한 결과를 보입니다.

그런데, 결과적으로 동일한 역할을 하는데 왜 여러 개를 만들어 놓았을까요 ? 단순히 개발자의 맘일까요 ? 이번강의 앞 부분에 언급한 1차 결과물에 추가적인 작업과 이후에 설명을 드릴 miscellaneous항목에 존재하는 .end() 라는 메서드를 보시면 좀더 쉽게 이해가 되실꺼라 생각합니다.

이제부터는 앞서 비교한 메서드를 제외한 나머지 메서드에 대해 간단히 알아 보도록 하겠습니다.

.filter(expr)

1차적으로 셀렉터를 통해 선택한 요소들의 집합에서 또 한번의 필터링을 통해 원하는 개체를 선택하는 메서드입니다.

표현식 부분에는 Selector, function, element, jQuery object가 위치할 수 있습니다.

이 메서드 또한 앞의 필터와 중복되는 부분이 존재합니다. 간단한 예를 들면 다음과 같습니다.

$(“td:even”) == $(“td”).filter(“:even”)

동일한 결과를 나타냅니다. 하지만 필터 메서드의 강점은 function을 이용하여 마치 필터를 확장해서 쓰는것과 같은 효과를 얻을 수 있는 점입니다.

다음은 셀렉터를 통해 선택한 개체의 집합을 필터 메서드를 통해 3의 배수에 해당하는 요소를 선택하는 예제이며, function(index) index는 $(“li”)를 통해 가져온 개체 집합의 번호입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").filter(function (index) {
                return index % 3 == 0;
            }).css("background", "red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>
    </table>
    </div>
</body>
</html>

[필터 메서드를 사용하여 3의 배수에 해당하는 요소에 스타일을 적용]

물론 위 예제는 자식필터(child filter)를 이용하여 구현이 가능합니만 여기서 눈 여겨 볼 내용은 이렇게 자신이 원하는 기능을 추가로 하여 개체를 선택 할 수 있다는 것입니다.

.not()

필터 메서드와는 반대로 동작하는 메서드입니다. 필터 메서드는 표현식과 일치하는 요소를 선택하는 반면에 이(.not()) 메서드는 표현식과 일치하지 않는 요소를 선택 반환합니다.

앞의 예제에서 스크립트만 변경을 해 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").not(function (index) {
                return index % 3 == 0;
            }).css("background", "red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

[앞의 결과와는 다르게 3의 배수가 아닌 요소를 표시합니다.]

.has(selector)

기본 셀렉터를 통해 가져온 개체의 집합에서 selector에 해당하는 요소를 가진 개체만을 선택 반환합니다.

다음 예제를 통해 간단히 알아보고 넘어 가도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("li").has("ul").css("background", "red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2
                <ul>
                    <li>list item 2-a</li>
                    <li>list item 2-b</li>
                </ul>
            </li>
            <li>list item 3</li>
            <li>list item 4</li>
        </ul>
    </div>
</body>
</html>

셀렉터를 통해 가져온 li개체에서 has() 함수를 통해 “ul” 요소를 가지고 있는 개체만을 선택 하는걸 확인 할 수 있습니다.

.is(expr)

기본 셀렉터에서 가져온 개체의 집합에서 표현 식과 일치하는 부분이 있는지에 대한 여부를 반환합니다.

집합에서 단 하나라도 일치하는 항목이 존재한다면 “true”를 반환합니다. 물론 일치하는 항목이 존재하지 않다면 “false”를 반환하게 됩니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("*").each(function () {
                if ($(this).is("li")) {
                    $(this).css("border", "1px solid red");   
                }
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2
                <ul>
                    <li>list item 2-a</li>
                    <li>list item 2-b</li>
                </ul>
            </li>
            <li>list item 3</li>
            <li>list item 4</li>
        </ul>
    </div>
</body>
</html>

모든 요소를 선택하고 “each()”라는 메서드를 통해서 개체의 집합에 접근 후 “li”와 동일한 요소일 경우 지정한 스타일이 적용된 걸 확인 할 수 있습니다. “each()” 라는 메서드는 이후에 설명을 다시 드리겠지만, jQuery를 통해 가져온 개체의 집합을 foreach와 같이 순환하는 기능을 제공합니다. 자세한 설명은 이후에 다시 드리도록 하겠습니다.

.map(callback)

셀렉터를 통해 가져온 개체의 집합을 jQuery개체의 배열 형식으로 반환합니다.

설명을 쓰고보니, 그냥 셀렉터와의 큰 차이점이 없어 보입니다, 하지만 다행이도 아직 callback이라는 녀석이 남아 있습니다.

Callback 함수를 이용하면 셀렉터를 이용해 가져온 개체의 집합에서 원하는 작업을 진행하고 해당 작업의 결과를 jQuery의 배열 형식으로 반환 할 수 있습니다. 설명을 하면 할 수록 말이 점점 어려워 지고 있는 느낌은 저 뿐인가요 ? 다음 예제를 보시면 쉽게 이해가 되실겁니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var liText = $("li").map(function (index) {
                return "[(" + index + ")" + $(this).text() + "]";
            }).get().join(',');
            $("#result").text(liText);
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li>list item 1</li>
            <li>list item 2
                <ul>
                    <li>list item 2-a</li>
                    <li>list item 2-b</li>
                </ul>
            </li>
            <li>list item 3</li>
            <li>list item 4</li>
        </ul>
    </div>
    <div>
        Result : <span id="result"></span>
    </div>
</body>
</html>

이번에는 get(), join(), text() 라는 새로운 메서드가 보입니다.

예제의 설명을 위해 간단히 말씀을 드리면, get(), join() 메서드는 집합(배열) 형식의 개체에 접근하는 방법과 join() 메서드의 인자 값으로 연결된 문자를 반환하게 됩니다. text()메서드는 셀렉터를 통해 가져온 개체의 text를 가져오는 역할을 합니다. Value 값에 접근 하기 위해서는 val()이라는 메서드를 사용합니다.

위 예제는 “li” 요소를 선택 후 해당 개체의 text값을 map() 메서드를 통해 반환하고 있습니다. 지금까지 설명 드린 기본 셀렉터, 필터에서도 위와 동일한 기능을 제공하고 있으나 이번 경우에도 개발자가 원하는 작업을 정의, 확장하여 사용할 수 있다는 큰 장점이 있습니다.

처음 이 메서드의 설명을 어떻게 해야 할지 막막했습니다. 이게 뭔지 어떠한 건지는 알겠는데.. 설명은 어려운.. 아직은 내공이 많이 부족한거 같습니다. 특정 패턴의 집합을 만들기에 차~암 좋은데 어떻게 설명할 방법이...

.slice(start, [end])

선택한 요소에서 start 번째에서 시작하고 end번째에서 끝나는 개체의 집합을 반환합니다.

기본 셀렉터에서 선택된 요소는 0부터 시작을 합니다. start는 포함을 하나, end 번째 요소는 포함을 하지 않으니, 이점 유의 하시기 바랍니다. 간단한 두 개의 예시를 통해 알아보면 다음과 같습니다.

총 8개의 요소를 선택했다고 가정합니다.

각 요소의 집합에 번호를 주면, 해당 인덱스는 0부터 시작이므로 0, 1, 2, 3, 4, 5, 6, 7이 됩니다.

1) .slice(2) 경우 : 2, 3, 4, 5, 6, 7에 해당하는 개체의 집합을 반환합니다.

2) .slice(2,4) 경우 : 2, 3 에 해당하는 개체의 집합을 반환합니다.

1)의 경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 제거 합니다.

2)의 경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2개의 집합을 동일하게 제거 후 4번째를 포함한 집합을 한번 더 제거 후 반환하게 됩니다.

두 경우의 차이가 이해가 되시나요 ?

jQuery 사이트에서 제공하는 .slice() 메서드 설명에 있는 예제를 통해 살펴 본다면 아마도 쉽게 이해가 되리라 생각합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:40px; height:40px; margin:10px; float:left;
        border:2px solid blue; }
  span { color:red; font-weight:bold; }
  button { margin:5px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><button>Turn slice yellow</button>
  <span>Click the button!</span></p>
  <div></div>
  <div></div>

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

  <div></div>
  <div></div>
<script>

    function colorEm() {
      var $div = $("div");
      var start = Math.floor(Math.random() *
                             $div.length);
      var end = Math.floor(Math.random() *
                           ($div.length - start)) +
                           start + 1;
      if (end == $div.length) end = undefined;
      $div.css("background", "");
      if (end) 
        $div.slice(start, end).css("background", "yellow");   
       else
        $div.slice(start).css("background", "yellow");
      
      $("span").text('$("div").slice(' + start +
                     (end ? ', ' + end : '') +
                     ').css("background", "yellow");');
    }
    $("button").click(colorEm);

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

해당 소스는 버튼을 클릭할 때 마다 랜덤 한 숫자를 slice() 메서드에 대입 후 결과를 보여주는 코드이며, 아직 설명하지 않은 부분이 있어 자세한 설명은 생략을 하도록 하겠습니다.

실행 화면은 다음과 같습니다.

버튼을 누를 때마다 어떠한 .slice() 메서드에 어떠한 인자가 들어갔으며, 인자 값에 따른 결과를 보여주고 있습니다. 아직 이해가 안 되신다면 http://api.jquery.com/slice/ 페이지에서 예제를 실행해 보시기 바랍니다.

from. http://www.sqler.com/387660

[Timer] 페이지 출력시간 확인하기

ezBuilder — Fri, 8 Mar 2013 10:10:46 +0900

<% @language="VBScript" CodePage=65001 %>

<% Dim StartTime : StartTime = Timer() %>

이곳에는 내용이 들어가겠죠?

<%
'--# 처리 시간
Dim EndTime
EndTime = Timer()

Response.Write ""
%>

소스보기를 하면 맨 하단에 시작,종료,출력시간이 표시된다.