신문과 프로그래머.

정규표현식 사용하기

정규 표현식은 주어진 패턴에 일치하는 문자열을 찾기 위해 하용하는 검색 패턴이다.

RegExp도 리터럴과 객체를 모두 가지고 있다.

정규표현식 패턴은 여는 슬리시와 닫는 슬래시 사이에 기술합니다.

주의할점은 이패턴은 문자열이 아니라는 것이다. 패턴에 작은따옴표나 큰따옴표를 사용하면 안된다.

물론 패턴에 따옴표가 포함되는 경우 예외이다.

정규표현식 특수 문자

2.1 검색하는 문자열이 존재하는 확인하기

Q. 어떤 문자열이 검색하고자 하는 문자열을 포함하고 잇는지 확인하고 싶다.

A.자바스크립트 정규표현식을 사용해서 검색패턴을 정의하고 regExp객체의 test 메서를 사용하면 된다.

var pattern = /Cook.*Book/;

alert(pattern.test("Sam's Cookbook"));

2.2 대소문자를 구분하지 않고 문자열 검색하기

Q. 어떤 문자열에 대소문자를 구분하지 않고 검색하고 싶다.

A. 정규표현식에 대소문자 무시 i 를 사용하면 된다.

var pattern = /Cook.*Book/i;

alert(pattern.test("Sam's Cookbook"));

정규표현식의 플래그

2.3 전화번호 유효성 검사하기

추후 추가예정

2.4 패턴과 일치하는 모든 부분을 찾고 강조하기

Q. 어떤 문자열안에서 패턴과 일치하는 부분을 모두 찾고 싶다.

A. RegExp.exec 메서드를 전역 플래그 g와 함께 사용하면 패턴에 일치하는 모든 부분을 찾을수 있다.

var searchString  = "Now is the time and this is the time and that is the time";

var pattern = /t\w*e/g;

var matchArray;

var str = " ";

while((matchArray = pattren.exec(searchString)) != null){

  str += "at "+matchArray.index + "we found " + matchArray[0] + "<br/>";

}

alert(str);

RegExp 객체의 exec 메서드는 정규표현식을 실행하여 일치하는 부분이 없으면 null을 반환하고, 일치하는 부분이 있은 배열을 반환한다. 반환된 배열에는 실제로 일치하는 값, 인덱스, 일치하는 괄호 부분 문자열, 원래의 문자열이 포함되어 있다.

index : 일치하는 부분 인덱스
• input : 원래 입력한 문자열
• [0]또는 배열에 직접 접근 : 일치하는 값
• [1]...[n] : 일치하는 괄호 부분 문자열

2.5 패턴을 새로운 문자열로 치환하기

Q. 패턴에서 일치하는 부분 문자열을 다른 문자열로 치환하고 싶다.

A. String 객체의 replace 메서드를 정규표현식과 함께 사용하면 된다.

var searchString  = "Now is the time and this is the time and that is the time";

var pattern = /t\w{2}e/g;

var replacement = searchString.replace(re,"place");

alert(replacement); // Now is the place, this is the place

전역 플래그 g가 설정된 정규표현식을 String 객체의 replace 메서드와 함께 사용하면 검색된 문자열을 모두 다른 문자열로 치환할 수 있다.

2.6 캡처 괄호를 사용하여 문자열 안의 단어 교환하기

Q. 이름과 성의순서로 입력된 문자열에서 성이 앞에 나오도록 수정하고 싶다.

A. 캡처 괄호와 정규표현식을 사용하여 문자열 안에서 두 개의 이름을 찾아서 기억한 후 그들의 위치를 서로 교환하면된다.

var name = "Abe Lincoln";

var re = /^(\w+)\s(\w+)$/;

var newname = name.replace(re,"$2, $1");

캡처 괄호를 사용하면 문자열 안에서 특정 패턴을 찾을수 있을 뿐만아니라 이우에 찾은 부분 문자열을 참조 할수 있다. 검색된 문자열은 왼쪽부터 오른쪽으로 번호가 매겨지고 참조되어 String 객체의 replace 메서드에서 '$1' 과 '$2'로 사용할 수 있다.

정규 표현식은 공백으로 구분된 두단어를 검색한다. 캡처 괄호는 두단어에 사용되었으므로 이름은 $1을 ,성은 $2 를 사용해서 접근 할 수 있다.

캡처 괄호는 String 객체의 replace 메서드에서만 사용할 수 있는 특수 문자가 아니다. 정규표현식과 replace 메서드에 사용할 수 있다.

특수 문자표

2.7 정규표현식을 사용해서 양끝 공백 제거하기

Q. Ajax를 호출해서 문자열을 서버로 전송하기 전에 문자열 시작과 끝 부분의 공백을 제거 하고 싶다.

A. ECMAScript 5 이전에는 정규표현식을 사용해서 문자열 시작과 끝 부분의 공백을 제거 했습니다.

//old version

var testString = "  This  is the string ";

testString = testString.replace(/^\s+/,""); // 문자열 시작 부분의 공백 제거

testString = testString.replace(/\s+$/,""); // 문자열 끝 부분의 공백 제거

//new version

testString = testString.trim(); // 공백이 제거된 문자열

2.8 HTML 태그를 명명된 엔티티로 치환하기

Q. 마트업 예제를 웹페이제 붙여 넣되, 마크업을 이스케이프하여 콘텐츠를 해석하지 않고 꺽은 괄호(<>)를 그대로 출력해야 한다.

A. 정규표현식을 사용하여 꺽은 괄호를 명명된 엔티티 &lt; 와 &gt; 로 바꾸면된다.

var pieceOffHtml = "<p>This is a <span>paragraph</span></p>";

pieceOffHtml  = pieceOffHtml.replace(/</g,"&lt");

pieceOffHtml  = pieceOffHtml.replace(/>/g,"&lt");

2.9 특수 문자 검색하기

Q. 지금까지는 숫자와 문자 그리고 숫자나 문자가아닌 것들을 검했다. 이번에는 정규표현식 문자 그자체를 검색 한다.

A. 백슬래시를 사용하여 패턴 검색 문자를 이스케이프 하면된다.

var re = /\\d/;

var pattern = "\\d{4}";

var pattern2 = pattern.replace(re,"\\D");

숫자를 검색하는 특수 문자 \d에 대응하도록 정규표현식을 만들었습니다. 문자열 안에서 검색하기 위해 패턴을 이스케이프했다. 그후 숫자 특수 문자는 숫자가 아닌 것을 검색하는 특수 문자 \D로 치환 되었다.

출처 : http://icoon22.tistory.com/220

정규식 체크.

< Javascript >

1. 휴대폰 하이픈 넣기.

var hp = $('#od_hp').val().replace(/-/gi, "");

hp = hp.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");

2. 휴대폰 정규식 체크.

var hp_chk = /^\d{3}-\d{3,4}-\d{4}$/;

if(!hp_chk.test(hp)){

alert("잘못된 연락처입니다");

return;

}

< php >

1. 이메일 체크

preg_match("/([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/", $mb_email)

2. 휴대폰 체크(hyphen 포함)

/^\d{3}-\d{3,4}-\d{4}$/

3. 휴대폰 하이픈 넣기

preg_replace("/(0(?:2|[0-9]{2}))([0-9]+)([0-9]{4}$)/", "\\1-\\2-\\3", $hp_no);

정규식 체크.

< php >

1. 이메일 체크

preg_match("/([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/", $mb_email)

2. 휴대폰 체크(hyphen 포함)

/^\d{3}-\d{3,4}-\d{4}$/

3. 휴대폰 하이픈 넣기

preg_replace("/(0(?:2|[0-9]{2}))([0-9]+)([0-9]{4}$)/", "\\1-\\2-\\3", $hp_no);

< Javascript >

1. 휴대폰 하이픈 넣기.

var hp = $('#od_hp').val().replace(/-/gi, "");

hp = hp.replace(/(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");

2. 휴대폰 정규식 체크.

var hp_chk = /^\d{3}-\d{3,4}-\d{4}$/;

if(!hp_chk.test(hp)){

alert("잘못된 연락처입니다");

return;

}

testbl 이라는 테이블이 있다.

mysql> select * from testbl;

+-----+------+------+--------+

| sid | ssid | sort | status |

+-----+------+------+--------+

|   1 | aa   |   23 | e      |

|   2 | aa   |   11 | e      |

|   3 | aa   |   33 | e      |

|   4 | aa   |   32 | e      |

|   5 | bb   |   23 | a      |

|   6 | bb   |   67 | c      |

|   7 | bb   |   34 | a      |

|   8 | bb   |   77 | d      |

|   9 | cc   |   11 | a      |

|  10 | cc   |   22 | a      |

|  11 | cc   |   32 | d      |

|  12 | cc   |   23 | c      |

+-----+------+------+--------+

12 rows in set (0.00 sec)

이 테이블로 몇가지를 해볼 참이다.

일단, 우리가 흔히 쓰는 order by 로 나온 결과를 정렬 할때, 일정한 순서가 아닌 임의로 정한 순서대로 보여주려면 아래와 같이 하면 된다.

mysql> select * from testbl where sid in (3,4,1)  order by field (sid, 3, 4, 1);

+-----+------+------+--------+

| sid | ssid | sort | status |

+-----+------+------+--------+

|   3 | aa   |   33 | e      |

|   4 | aa   |   32 | e      |

|   1 | aa   |   23 | e      |

+-----+------+------+--------+

3 rows in set (0.00 sec)

order by field ( 컬럼명, "순서1", "순서2", .... ) 와 같은 방법으로 원하는 순서를 직접 지정 할 수 있다.

하지만, 이렇게 원하는 순서대로 뽑아내려는 때는 보통... 기존에 있던건 그대로 보여주고 원하는 결과만 위로 보여줘야 할때가 대부분일 것이다.(필자는 그랬다.)

그럴땐 union을 쓰면 된다. 

mysql> (select * from testbl where sid in (3,4,1)  order by field (sid, 3, 4, 1))

union 

(select * from testbl where sid < 9 );

+-----+------+------+--------+

| sid | ssid | sort | status |

+-----+------+------+--------+

|   1 | aa   |   23 | e      |

|   3 | aa   |   33 | e      |

|   4 | aa   |   32 | e      |

|   2 | aa   |   11 | e      |

|   5 | bb   |   23 | a      |

|   6 | bb   |   67 | c      |

|   7 | bb   |   34 | a      |

|   8 | bb   |   77 | d      |

+-----+------+------+--------+

8 rows in set (0.00 sec)

위의 쿼리문에서 union으로 조금 더 뽑아 와봤다. 그런데... 정렬이 엉망이다. 위에서 order by를 썼는데도 먹혀 있지도 않다. 그 이유는 "UNION은 레코드 집합을 순서 없이 만들게 되기 때문에 최종 결과에서 레코드들이 어떻게 나타나야 하는지 순서에 관해 아무것도 암시 하지 않는다." 라는.. 한마디로 union으로 합치면 순서는 멋대로 정해진다 라는 거다.

그래서 이럴때는 뽑아온 대상에 대해서 정렬을 해줘야 한다.

mysql> (select * from testbl where sid in (3,4,1)) 

union 

(select * from testbl where sid < 9 ) 

order by field (sid, 3, 4, 1);

+-----+------+------+--------+

| sid | ssid | sort | status |

+-----+------+------+--------+

|   5 | bb   |   23 | a      |

|   2 | aa   |   11 | e      |

|   8 | bb   |   77 | d      |

|   7 | bb   |   34 | a      |

|   6 | bb   |   67 | c      |

|   3 | aa   |   33 | e      |

|   4 | aa   |   32 | e      |

|   1 | aa   |   23 | e      |

+-----+------+------+--------+

8 rows in set (0.00 sec)

위처럼 해놓으면 3, 4, 1로 정렬 된 것이 보일 것이다. 하지만, 여전히 부족하다. 나머지 순서들이 엉망인데다가, 필자는 3, 4, 1이 맨 위에서 뽑혀지길 원했기 때문이다.

이럴때는 아래와 같이 하면 된다.

mysql> (select * from testbl where sid in (3,4,1)) 

union 

(select * from testbl where sid < 9 ) 

order by field (sid, 1, 4, 3) desc, sid;

+-----+------+------+--------+

| sid | ssid | sort | status |

+-----+------+------+--------+

|   3 | aa   |   33 | e      |

|   4 | aa   |   32 | e      |

|   1 | aa   |   23 | e      |

|   2 | aa   |   11 | e      |

|   5 | bb   |   23 | a      |

|   6 | bb   |   67 | c      |

|   7 | bb   |   34 | a      |

|   8 | bb   |   77 | d      |

+-----+------+------+--------+

8 rows in set (0.00 sec)

유의할점은 desc로 뽑아주기 때문에 기존에 3,4,1로 해놓았던 순서를 1,4,3으로 해놓아야 원하는 결과물을 얻을 수 있다는 거다.

뭐.. 공지사항 같은거 처리할때 꾀 쓸만할꺼 같다..

출처 : http://b1ix.net/93

white-space는 요소 안에 공백 처리에 대한 속성입니다.

white space란 여백이라고도 하는데 html에서는 공백 같은 것이지요.

< 속성값 >

normal : 기본값으로 공백을 여러개 넣어도 공백 1개만 표시됩니다. 글이 길어지면 텍스트가 자동 줄바꿈(wrap) 됩니다.

nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시됩니다.

pre : 공백을 코드에 있는 그대로 표시함. <pre>와 같은 기능이지요. 코드에 줄바꿈이 없다면 자동 줄바꿈 되지 않습니다.

pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈 됩니다.

pre-line : 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈 됩니다.

감사합니다.

CSS로 한줄이 넘어가는 문자를 한줄로 줄일 수 있다.

한줄 뿐만 아니라 여러 줄로 설정도 가능하다.

1. 한줄로 내용 자르기.

  간단한 방법으로 overflow: hidden; 을 통해 한줄이 넘어가는 문자를 숨길 수 있다.

  뒤에 말줄임표를 추가하기 위해서는 text-overflow: ellipsis; 를 넣어주면 된다.

2. N줄로 내용 자르기.

text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로 하여야 함.

word-wrap: break-word : 잘라버릴 글자를 단어 단위로 잘라줌.

display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환.

-webkit-line-clamp: 3 : 보여줄 줄 수.

-webkit-box-orient: vertical : 플렉스 박스의 방향 설정.

저는 개발자이지만 유용한 정보라 포스팅 하였습니다.

감사합니다.

vertical-align 안먹을 때는

div, p, span 스타일에 display:table-cell을 주는 것이 핵심!!

하하.. 잘되네.

오늘은 브라우저 종료 이벤트에 대해 알아보자.

< s cript type="text/javascript" language="javascript"> 

         var flag_end = false;

         window.onbeforeunload = function() {

             if (!flag_end) {

                alert("browser terminating!");

flag_end = true;

             }

         }

< /s cript>

자바스크립트 함수 파라미터 디폴트 처리

PHP의 경우

function test($a = "", $b = 0) {

로 디폴트 처리 가능합니다.

자바스크립트의 경우

function test(a, b) {

   a = typeof a !== 'undefined' ? a : "";

   b = typeof b !== 'undefined' ? b : 0;

유용하네요.

MySQL의 MyISAM과 InnoDB를 비교해 드립니다.

1. MyISAM

 MyISAM은 ISAM(Indexed Sequential Access Method) 의 단점을 보완하기 위해 나온 업그레이드 버젼으로, 이 엔진은 비-트랜젝션-세이프(non-transactional-safe) 테이블을 관리합니다.

MyISAM은 후에 소개하는 InnoDB에 비하여 별다른 기능이 없으므로 데이터 모델 디자인이 단순하다는 것이 장점입니다.

따라서 전체적으로 속도가 InnoDB 보다 빠릅니다. 특히 Select 작업 속도가 빠르므로 읽기 작업에 적합합니다!

Full-text 인덱싱이 가능하여 검색하고자 하는 내용에 대한 복합검색이 가능하답니다.

But! 그러나 데이터 무결성에 대한 보장이 되지 않습니다. MyISAM을 쓸 때의 무결성은 개발자나 DBA가 해야 합니다 ㅠ_ㅠ
또한 트랜잭션에 대한 지원이 없기 때문에 작업도중 문제가 생겨도 이미 작성된 내용들은 DB로 쏙 들어가버립니다.

가장 강조되는 단점으로는 Table-level Lock을 사용하기 때문에 쓰기 작업(INSERT, UPDATE) 속도가 느립니다.

변경을 많이 요하는 작업이라면 Table 단위의 Lock을 사용하는 MyISAM의 사용을 권하지 않습니다.

이렇게 기능이 없다니… 빠르기라도 해야겠네영!

따라서 MyISAM의 사용이 적합한 곳은 트랜잭션 처리가 불필요하며,

위에서 언급한 것 처럼 Select의 속도가 빠르므로 주로 조회작업이 많은 경우에 사용됩니다.

2. InnoDB

MyISAM과는 달리 InnoDB는 트랜잭션을 지원하므로 트랜잭션-세이프 스토리지 엔진에 해당됩니다.

Commit, Rollback, 장애복구, row-level locking, 외래키 등 다양한 기능을 지원합니다!

MyISAM의 부족했던 기능에 실망했던 사람들이라면 InnoDB로 갈아탔겠죠?

InnoDB의 장점을 살펴보면, 우선 데이터 무결성에 대한 보장이 됩니다.

제약조건, 외래 키의 생성이 가능하며, 동시성 제어가 가능합니다.

특히 MyISAM이 Table 단위의 Lock이었다면 InnoDB는 Row-level Lock (행 단위 Lock) 을 사용하기 때문에

변경 작업(INSERT, UPDATE, DELETE)에 대한 속도가 빠르다는 것이 큰 장점입니다.

그러나, 이렇게 여러가지 기능을 제공하다보니 InnoDB의 데이터 모델 디자인에는 많은 시간이 필요합니다.

또한 시스템 자원을 많이 사용한다는 단점 또한 가지고 있습니다. Full-text 인덱싱이 불가능하다는 것 역시 단점으로 보여집니다.

InnoDB의 경우는 트랜잭션 처리가 필요한 작업을 수행하며, 데이터 입력 및 수정과 같이 변경이 빈번한!

높은 퍼포먼스를 요구하는 대용량 사이트 등에서 효율적으로 사용될 수 있습니다.

        
이 두 종류의 DB를 함께 사용할 수 있을까요?

물론 함께 사용할 수는 있습니다. 하지만 백업 방법에 차이가 있어,

백업이 번거로워지고 Lock에 대한 Level이 다르기 때문에 사용에 문제가 생길 수 있다고 봅니다.

위의 내용을 표로 정리해봅시당

출처 : http://ojava.tistory.com/25