정규표현식은 패턴을 형성하는 문자들의 집합으로 문자열 내에서 검색, 대체, 추출 등을 할 때 사용한다. 대부분의 프로그래밍 언어와 같이 자바스크립트도 정규표현식을 지원한다. RegExp 객체를 사용하면 정규표현식을 명시적으로 생성할 수 있다. 다음은 명시적 사용의 예다.

var searchPattern = new RegExp(’+s’);

RegExp 문자열 리터럴의 사용 방법은 다음과 같다.

var searchPattern = /+s/;

두 가지 경우 모두에서 덧셈 기호(+)는 문자열 내에서 한 개 이상의 s 문자와 일치함을 의미한다. 그리고 슬래시(/)로 감싸면(/+s/) 그 안의 식이 정규표현식이라는 뜻이다.

RegExp 메소드 : test 와 exec

RegExp 객체에는 test 와 exec 의 두 가지 메소드가 있다. test 메소드는 입력된 문자열이 정규표현식에 부합하는지를 판단한다.

var re = /JavaScript rules/;
var str = “javaScript rules”;
if(re.test(str)) document.writeln(“true”);
else document.writeln(“false”);

매 칭은 대소문자를 구분한다. 위 예에서 매칭 패턴이 ’/Javascript rules/’ 라면 false 라는 결과를 얻을 것이다. 패턴 매칭 함수가 대소문자를 구분하지 않게 하려면 다음과 같이 오른쪽의 / 옆에 i 를 추가로 표시한다.

var re = /Javascript rules/i;

이런 것들을 플래그라고 한다. g 는 전역 매칭, m 은 여러 줄 매칭 플래그다. RegExp 를 사용해서 정규표현식을 생성하는 경우엔 플래그를 두 번째 인자로 넘겨준다.

var searchPattern = new RegExp(’+s’, ‘g’);

다음 코드에서 RegExp 메소드인 exec 는 ’/JS*/’ 라는 패턴을 찾는다. 그런데 플래그를 보면 g 와 i 가 설정되어 있으므로 문자열 전체에 대하여 대소문자를 구분하지 않고 찾는다.

var re = /JS*/ig;
var str = “cfdsJS *(&YJSjs 888JSSS”;
var resultArray = re.exec(str);
while (resuleArray) {
    document.writeln(resultArray[0]);
    resultArray = re.exec(str);
}    // 결과 : JS JS js JSSS

위 정규표현식은 J 자로 시작하고, 그 뒤에 0개 이상의 S가 들어가는 패턴을 의미한다. 그리고 i 플래그를 사용했기 때문에 대소문자를 구분하지 않고 매칭한다. 즉, js 도 매칭된다. 또한 g 플래그를 사용했기 때문에, 마지막으로 매칭된 위치를 기억하고 있다가 다음번에 exec 를 호출하면 그 위치의 다음부터 매칭되는 것을 찾는다. 결국, 네 개의 아이템을 찾아서 출력한다. 그리고 더 이상 매칭되는 것을 찾을 수 없으면 null 값이 반환되어 동작을 멈춘다.

응용 프로그램에서 정규표현식과 RegExp 객체에 RegExp 메소드를 사용하기도 하지만, 그보다는 String 객체의 regex 메소드인 replace(대체), match(메치), search(검색) 등을 주로 사용한다.

정규표현식의 실제 사용 예

첫 번째 문자는 역슬래시()로, 흔히 확장 문자라고도 한다. 왜냐하면, 그 뒤에 오는 모든 문자를 평소의 의미와 다른 의미로 해석하게 하기 때문이다. 자바스크립트 정규표현식에서는 두 가지로 쓰인다. 첫 번째로 역슬래시() 기호 다음에 일반 문자가 오면 특수 문자로 취급한다. 예를 들어 s 는 문자 s 가 아닌 공백 문자(스페이스, 탭, 폼 피드, 라인피드 등)를 의미한다. 두 번째로 역슬래시() 기호 다음의 특수 문자는 그 문자 자체를 의미한다. 즉, + 와 같이 표기한 경우 덧셈 기호(+) 자체를 의미한다.

다음 예제는 스페이스 문자 다음에 별표(*)가 오는 경우를 찾아서 대시 기호(-)로 대체한다. 일반적으로 별표는 0개 이상의 문자를 뜻하는 특수 문자이지만, 이 경우엔 역슬래시와 함께 사용했으므로(*) 별표 자체를 의미한다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset=EUC-KR”>
    </head>
    <body>
       
            var regExp = /s*/g;
            var str = “this *is *a *test *string”;
            var result = str.replace(regExp, ’-’);
            document.writeln(result);
       
    </body>
</html>
결과 : this-is-a-test-string

정규표현식에는 문자열 매칭에 편리하도록 사용하는 네 가지의 특수 문자가 있다.

* : 0회 이상 반복
+ : 1회 이상 반복
? : 0 또는 1개의 문자 매칭
. : 정확히 1개의 문자 매칭

흥 미로운 매칭의 예로 욕심쟁이 매칭(.*)과 게으름뱅이 별 매칭(.*?) 을 들 수 있다. 욕심쟁이 매칭(.*) 의 경우, 점(.)은 하나의 문자를 지칭하고 별표는 그 매칭의 마지막까지의 반복을 뜻한다. 따라서 따옴표로 묶인 문자열 안에 있는 문자들을 빼내고 싶다면 /“.*”/ 를 사용한다. 예를 들어 다음 문자열이 있다고 가정 해보자.

test = “one” or this is also a “test”

첫 따옴표에서 매칭되기 시작해 마지막까지 계속되므로 결과는 다음과 같다.

“one” or this is also a “test”

게으름뱅이 별 매칭의 경우(/“.*?”/) 는 약간 다르게 마지막 매칭이 아닌 첫 번째 매칭을 결과로 내놓게 되므로, 그 결과는 다음과 같다.

“one”

다음은 월, 일, 년의 사이를 스페이스로 구분한 문자열(예를 들어, March 12 2005) 을 매칭하는 String 검색 메소드의 예다. 단, 날짜를 나타내는 문자열은 콜론(:) 다음에 나온다고 가정하였다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset="EUC-KR”>
    </head>
    <body>
       
            var regExp = /:D*sd+sd+/;
            var str = “This is a date : March 12 2005”;
            var result = str.match(regExp);
            document.writeln(“Date ” + result);
       
    </body>
</html>
결과 : Date : March 12 2005

정 규표현식을 조금 더 자세히 살펴보면, 첫 번째 문자는 콜론(:)이고 그 다음은 D 이다. D 는 ‘숫자가 아닌 문자’를 의미한다. 따라서 D* 는 숫자가 아닌 문자의 0회 이상의 매칭을 의미한다. s 는 공백 문자를 뜻한다. d 는 숫자를 뜻한다. 따라서 d+ 는 1회 이상의 숫자 매칭을 의미한다.

위 예에서 D 는 ‘숫자가 아닌 문자’ 를 의미했다. 또 다른 방법으로 ’~을 제외한’ 이란 뜻의 캐럿 기호(^)를 사용해서 다음과 같이 사용할 수도 있다.

[^0-9]

이와 같이, D와 [^0-9] 는 동일한 패턴을 의미한다.

만약 숫자만을 뜻하고 싶다면, 캐럿 기호(^) 를 제외하고 다음과 같이 표기한다.

[0-9]

여러 문자를 매칭하고싶다면, 문자의 [] 안에 문자 범위를 나열한다. 다음은 알파벳 대소문자 전체를 매칭하는 예다.

[A-Za-z]

지금까지 익힌 방법을 사용해서 위 예제의 정규표현식을 다음과 같이 바꾸어 쓸 수 있다.

var regExp = /:[^0-9]*s[0-9]+s[0-9]+/;

캐럿 기호와 달러 기호는 한 줄의 시작과 끝에 위치한 패턴을 찾는데도 사용된다. 한 줄의 시작을 지칭하는 경우는 캐럿 기호(^)를 사용하고, 끝을 지칭하는 경우는 달러 기호($)를 사용한다.

다음 코드에서는 찾고자 하는 문자열이 시작 부분에 위치한 것이 아니기 때문에 실패한다.

var regExp = /^The/i;
var str = “This is the JavaScript example”;

하지만, 다음은 매칭에 성공한다.

var regExp = /^The/i;
var str = “The Example”;

여러 줄을 의미하는 플래그인 m 을 사용하면, 한 줄이 끝난 다음의 문자열에도 매칭된다.

var regExp = /^The/im;
var str = “This isnthe end”;

그리고 한 줄의 끝을 의미하는 달러 기호($)를 사용하면 당므은 실패한다.

var regExp = /end$/;
var str = “The end is near”;

하지만 다음 경우는 패턴 매칭에 성공한다.

var regExp = /end$/;
var str = “The end”;

m 플래그를 사용한 경우엔, 한 줄이 끝나기 직전의 문자열에 매칭된다.

var regExp = /The$/im;
var str = “This is really thenend”;

정규표현식을 사용한 패턴 매칭에 있어 괄호는 중요한 의미를 지닌다. 괄호로 묶은 패턴은 매칭된 다음, 그 부분을 기억한다. 여기서 기억한 값은 결과가 저장되는 배열에 같이 저장된다.

var rgExp = /(^D*[0-9])/
var str = “This is fun 01 stuff”;
var resultArray = str.match(rgExp);
document.writeln(resultArray);

위 예를 실행한 결과는 다음과 같다.

This is fun 0,This is fun 0

쉼 표 전까지의 문자열은 매칭된 문자열이고, 그 뒤의 문자열은 괄호로 묶어서 저장된 문자열이다. 패턴 전체를 괄호로 묶는 대신에 일부분만을 묶게 되면, 묶은 부분만 저장된다. 예를 들어, /(^D*)[0-9]/ 로 매칭시킨 결과는 다음과 같다.

This is fun 0,This is fun

즉, 쉼표 뒤의 문자열에서 알 수 있듯이 괄호로 묶은 부분만 저장된 것이다.

괄 호는 또한 문자열의 특정 부분을 변경하는 데도 사용한다. RegExp 에는 $1, $2, … $9 와 같은 특수 문자가 있다. 괄호를 사용해서 캡처한 부분 문자열이 이 특수 문자에 저장된다. 다음은 한 개 이상의 대시 기호(-)로 구분되는 문자열을 찾아서 바꿔치기 하는 예다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset=EUC-KR”>
    </head>
    <body>
       
            var rgExp = /(w*)-*(w*)/;
            var str = “Java–Script”;
            var result = str.replace(rgExp,“$2-$1”);
            document.writeln(result);
              
    </body>
</html>
결과 : Script-Java

대 시 기호(-)가 하나로 줄어들었다는 것에 주목하자. 그리고 위 예에서는 아주 널리 쓰이는 패턴 매칭 문자인 w 를 볼 수 있다. 이는 알파벳, 숫자로 된 문자, 밑줄 기호(_)를 의미한다. 즉, [A-Za-z0-9_]와 같다. 그리고 W는 이와 반대의 문자([A-Za-z0-9_]가 아닌 것)를 뜻한다.

마지막으로 살펴볼 정규표현식의 문자는 수직바 기호(|)와 중괄호({})다. | 는 ’~ 또는 ~’를 뜻한다. 예를 들어, 다음은 a 또는 b 를 뜻한다.

a|b

여기에 여러 개의 | 를 조합해, 다음과 같이 ‘a 또는 b 또는 c 중 하나’를 의미할 수도 있다.

a|b|c

중괄호는 그 앞 문자의 반복 횟수를 지정할 때 사용한다. 예를 들어, 다음은 s의 두 번 반복(ss)을 뜻한다.

s{2}

정규표현식은 폼 내용의 검사에 아주 유용하다.

정규표현식은 패턴을 형성하는 문자들의 집합으로 문자열 내에서 검색, 대체, 추출 등을 할 때 사용한다. 대부분의 프로그래밍 언어와 같이 자바스크립트도 정규표현식을 지원한다. RegExp 객체를 사용하면 정규표현식을 명시적으로 생성할 수 있다. 다음은 명시적 사용의 예다.

var searchPattern = new RegExp(’+s’);

RegExp 문자열 리터럴의 사용 방법은 다음과 같다.

var searchPattern = /+s/;

두 가지 경우 모두에서 덧셈 기호(+)는 문자열 내에서 한 개 이상의 s 문자와 일치함을 의미한다. 그리고 슬래시(/)로 감싸면(/+s/) 그 안의 식이 정규표현식이라는 뜻이다.

RegExp 메소드 : test 와 exec

RegExp 객체에는 test 와 exec 의 두 가지 메소드가 있다. test 메소드는 입력된 문자열이 정규표현식에 부합하는지를 판단한다.

var re = /JavaScript rules/;
var str = “javaScript rules”;
if(re.test(str)) document.writeln(“true”);
else document.writeln(“false”);

매 칭은 대소문자를 구분한다. 위 예에서 매칭 패턴이 ’/Javascript rules/’ 라면 false 라는 결과를 얻을 것이다. 패턴 매칭 함수가 대소문자를 구분하지 않게 하려면 다음과 같이 오른쪽의 / 옆에 i 를 추가로 표시한다.

var re = /Javascript rules/i;

이런 것들을 플래그라고 한다. g 는 전역 매칭, m 은 여러 줄 매칭 플래그다. RegExp 를 사용해서 정규표현식을 생성하는 경우엔 플래그를 두 번째 인자로 넘겨준다.

var searchPattern = new RegExp(’+s’, ‘g’);

다음 코드에서 RegExp 메소드인 exec 는 ’/JS*/’ 라는 패턴을 찾는다. 그런데 플래그를 보면 g 와 i 가 설정되어 있으므로 문자열 전체에 대하여 대소문자를 구분하지 않고 찾는다.

var re = /JS*/ig;
var str = “cfdsJS *(&YJSjs 888JSSS”;
var resultArray = re.exec(str);
while (resuleArray) {
    document.writeln(resultArray[0]);
    resultArray = re.exec(str);
}    // 결과 : JS JS js JSSS

위 정규표현식은 J 자로 시작하고, 그 뒤에 0개 이상의 S가 들어가는 패턴을 의미한다. 그리고 i 플래그를 사용했기 때문에 대소문자를 구분하지 않고 매칭한다. 즉, js 도 매칭된다. 또한 g 플래그를 사용했기 때문에, 마지막으로 매칭된 위치를 기억하고 있다가 다음번에 exec 를 호출하면 그 위치의 다음부터 매칭되는 것을 찾는다. 결국, 네 개의 아이템을 찾아서 출력한다. 그리고 더 이상 매칭되는 것을 찾을 수 없으면 null 값이 반환되어 동작을 멈춘다.

응용 프로그램에서 정규표현식과 RegExp 객체에 RegExp 메소드를 사용하기도 하지만, 그보다는 String 객체의 regex 메소드인 replace(대체), match(메치), search(검색) 등을 주로 사용한다.

정규표현식의 실제 사용 예

첫 번째 문자는 역슬래시()로, 흔히 확장 문자라고도 한다. 왜냐하면, 그 뒤에 오는 모든 문자를 평소의 의미와 다른 의미로 해석하게 하기 때문이다. 자바스크립트 정규표현식에서는 두 가지로 쓰인다. 첫 번째로 역슬래시() 기호 다음에 일반 문자가 오면 특수 문자로 취급한다. 예를 들어 s 는 문자 s 가 아닌 공백 문자(스페이스, 탭, 폼 피드, 라인피드 등)를 의미한다. 두 번째로 역슬래시() 기호 다음의 특수 문자는 그 문자 자체를 의미한다. 즉, + 와 같이 표기한 경우 덧셈 기호(+) 자체를 의미한다.

다음 예제는 스페이스 문자 다음에 별표(*)가 오는 경우를 찾아서 대시 기호(-)로 대체한다. 일반적으로 별표는 0개 이상의 문자를 뜻하는 특수 문자이지만, 이 경우엔 역슬래시와 함께 사용했으므로(*) 별표 자체를 의미한다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset=EUC-KR”>
    </head>
    <body>
       
            var regExp = /s*/g;
            var str = “this *is *a *test *string”;
            var result = str.replace(regExp, ’-’);
            document.writeln(result);
       
    </body>
</html>
결과 : this-is-a-test-string

정규표현식에는 문자열 매칭에 편리하도록 사용하는 네 가지의 특수 문자가 있다.

* : 0회 이상 반복
+ : 1회 이상 반복
? : 0 또는 1개의 문자 매칭
. : 정확히 1개의 문자 매칭

흥 미로운 매칭의 예로 욕심쟁이 매칭(.*)과 게으름뱅이 별 매칭(.*?) 을 들 수 있다. 욕심쟁이 매칭(.*) 의 경우, 점(.)은 하나의 문자를 지칭하고 별표는 그 매칭의 마지막까지의 반복을 뜻한다. 따라서 따옴표로 묶인 문자열 안에 있는 문자들을 빼내고 싶다면 /“.*”/ 를 사용한다. 예를 들어 다음 문자열이 있다고 가정 해보자.

test = “one” or this is also a “test”

첫 따옴표에서 매칭되기 시작해 마지막까지 계속되므로 결과는 다음과 같다.

“one” or this is also a “test”

게으름뱅이 별 매칭의 경우(/“.*?”/) 는 약간 다르게 마지막 매칭이 아닌 첫 번째 매칭을 결과로 내놓게 되므로, 그 결과는 다음과 같다.

“one”

다음은 월, 일, 년의 사이를 스페이스로 구분한 문자열(예를 들어, March 12 2005) 을 매칭하는 String 검색 메소드의 예다. 단, 날짜를 나타내는 문자열은 콜론(:) 다음에 나온다고 가정하였다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset="EUC-KR”>
    </head>
    <body>
       
            var regExp = /:D*sd+sd+/;
            var str = “This is a date : March 12 2005”;
            var result = str.match(regExp);
            document.writeln(“Date ” + result);
       
    </body>
</html>
결과 : Date : March 12 2005

정 규표현식을 조금 더 자세히 살펴보면, 첫 번째 문자는 콜론(:)이고 그 다음은 D 이다. D 는 ‘숫자가 아닌 문자’를 의미한다. 따라서 D* 는 숫자가 아닌 문자의 0회 이상의 매칭을 의미한다. s 는 공백 문자를 뜻한다. d 는 숫자를 뜻한다. 따라서 d+ 는 1회 이상의 숫자 매칭을 의미한다.

위 예에서 D 는 ‘숫자가 아닌 문자’ 를 의미했다. 또 다른 방법으로 ’~을 제외한’ 이란 뜻의 캐럿 기호(^)를 사용해서 다음과 같이 사용할 수도 있다.

[^0-9]

이와 같이, D와 [^0-9] 는 동일한 패턴을 의미한다.

만약 숫자만을 뜻하고 싶다면, 캐럿 기호(^) 를 제외하고 다음과 같이 표기한다.

[0-9]

여러 문자를 매칭하고싶다면, 문자의 [] 안에 문자 범위를 나열한다. 다음은 알파벳 대소문자 전체를 매칭하는 예다.

[A-Za-z]

지금까지 익힌 방법을 사용해서 위 예제의 정규표현식을 다음과 같이 바꾸어 쓸 수 있다.

var regExp = /:[^0-9]*s[0-9]+s[0-9]+/;

캐럿 기호와 달러 기호는 한 줄의 시작과 끝에 위치한 패턴을 찾는데도 사용된다. 한 줄의 시작을 지칭하는 경우는 캐럿 기호(^)를 사용하고, 끝을 지칭하는 경우는 달러 기호($)를 사용한다.

다음 코드에서는 찾고자 하는 문자열이 시작 부분에 위치한 것이 아니기 때문에 실패한다.

var regExp = /^The/i;
var str = “This is the JavaScript example”;

하지만, 다음은 매칭에 성공한다.

var regExp = /^The/i;
var str = “The Example”;

여러 줄을 의미하는 플래그인 m 을 사용하면, 한 줄이 끝난 다음의 문자열에도 매칭된다.

var regExp = /^The/im;
var str = “This isnthe end”;

그리고 한 줄의 끝을 의미하는 달러 기호($)를 사용하면 당므은 실패한다.

var regExp = /end$/;
var str = “The end is near”;

하지만 다음 경우는 패턴 매칭에 성공한다.

var regExp = /end$/;
var str = “The end”;

m 플래그를 사용한 경우엔, 한 줄이 끝나기 직전의 문자열에 매칭된다.

var regExp = /The$/im;
var str = “This is really thenend”;

정규표현식을 사용한 패턴 매칭에 있어 괄호는 중요한 의미를 지닌다. 괄호로 묶은 패턴은 매칭된 다음, 그 부분을 기억한다. 여기서 기억한 값은 결과가 저장되는 배열에 같이 저장된다.

var rgExp = /(^D*[0-9])/
var str = “This is fun 01 stuff”;
var resultArray = str.match(rgExp);
document.writeln(resultArray);

위 예를 실행한 결과는 다음과 같다.

This is fun 0,This is fun 0

쉼 표 전까지의 문자열은 매칭된 문자열이고, 그 뒤의 문자열은 괄호로 묶어서 저장된 문자열이다. 패턴 전체를 괄호로 묶는 대신에 일부분만을 묶게 되면, 묶은 부분만 저장된다. 예를 들어, /(^D*)[0-9]/ 로 매칭시킨 결과는 다음과 같다.

This is fun 0,This is fun

즉, 쉼표 뒤의 문자열에서 알 수 있듯이 괄호로 묶은 부분만 저장된 것이다.

괄 호는 또한 문자열의 특정 부분을 변경하는 데도 사용한다. RegExp 에는 $1, $2, … $9 와 같은 특수 문자가 있다. 괄호를 사용해서 캡처한 부분 문자열이 이 특수 문자에 저장된다. 다음은 한 개 이상의 대시 기호(-)로 구분되는 문자열을 찾아서 바꿔치기 하는 예다.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html;charset=EUC-KR”>
    </head>
    <body>
       
            var rgExp = /(w*)-*(w*)/;
            var str = “Java–Script”;
            var result = str.replace(rgExp,“$2-$1”);
            document.writeln(result);
              
    </body>
</html>
결과 : Script-Java

대 시 기호(-)가 하나로 줄어들었다는 것에 주목하자. 그리고 위 예에서는 아주 널리 쓰이는 패턴 매칭 문자인 w 를 볼 수 있다. 이는 알파벳, 숫자로 된 문자, 밑줄 기호(_)를 의미한다. 즉, [A-Za-z0-9_]와 같다. 그리고 W는 이와 반대의 문자([A-Za-z0-9_]가 아닌 것)를 뜻한다.

마지막으로 살펴볼 정규표현식의 문자는 수직바 기호(|)와 중괄호({})다. | 는 ’~ 또는 ~’를 뜻한다. 예를 들어, 다음은 a 또는 b 를 뜻한다.

a|b

여기에 여러 개의 | 를 조합해, 다음과 같이 ‘a 또는 b 또는 c 중 하나’를 의미할 수도 있다.

a|b|c

중괄호는 그 앞 문자의 반복 횟수를 지정할 때 사용한다. 예를 들어, 다음은 s의 두 번 반복(ss)을 뜻한다.

s{2}

정규표현식은 폼 내용의 검사에 아주 유용하다.

이름공간이 뭐야? 질문 소리가 들리는 듯합니다. 음, 이름공간은 약간 설명하기가 어렵습니다. 특별히 복잡해서가 아니라 언어마다 다르게 설명하기 때문입니다. 그 개념은 들리는 그대로입니다. 이름공간은 공간이나 지역입니다. 프로그램 안에 있으며, 그 안에서만 이름이 (변수, 클래스 등등이) 유효합니다. 실제로 이 아이디어를 일상적으로 사용합니다. 큰 회사에서 일하고 있고 삼수라는 동료가 있다고 가정해 봅시다. 회계 부서에 또다른 삼수가 있습니다. 자주는 아니지만 가끔 그를 봅니다. 그 경우 그 동료를 “삼수"라고 부르고 다른 삼수는 "회계 부서의 삼수"라고 부릅니다. 여옥이라는 동료가 있고 엔지니어링 부서에도 긴밀하게 함께 일하는 여옥이라는 동료가 있다고 생각해 봅시다. 그런 경우 각각 "우리 여옥” 그리고 “엔지니어링 부서의 여옥"이라고 지칭합니다. 부서 이름으로 수식하고 있습니다. 보이십니까? 그것이 바로 프로그램에서 이름공간이 하는 일입니다. 이름공간은 프로그래머와 번역자에게 여러 동일한 이름 중에서 어떤 이름을 가리키고 있는지 알려줍니다.

이름공간은 (BASIC 같은) 초기 프로그래밍 언어에서 전역 변수만 있었기 때문에 도입되었습니다. 즉, 프로그램 어느 곳에서도 볼 수 있는 변수만 있었습니다 – 심지어 함수 안에 있아도 볼 수 있었습니다. 이 때문에 거대한 프로그램은 관리하기가 어려웠는데 한 곳에서 변수를 바꾸어도 다른 곳에서는 인지하지 못했기 때문입니다 – 이를 부작용(side-effect) 이라고 불렀습니다. 이를 해결하기 위하여 (현대적인 BASIC들을 포함하여) 나중에 나온 언어에서는 이름공간이라는 개념을 도입하였습니다. (C++은 이를 극단적으로 취해서 프로그래머는 프로그램 어느곳이든 자신만의 이름공간을 만들 수 있습니다. 이는 라이브러리를 만드는 이들에게 유용합니다. 이들은 다른 사람들이 공급한 라이브러리와 섞일 때 자신이 만든 함수 이름들이 유일하게 유지되기를 바랍니다)

이름공간을 기술하는데 사용되는 또다른 용어는 영역(scope)입니다. 이름의 영역은 프로그램에서 그 이름이 애매모호하지 않게 사용될 수 있는 곳까지 미칩니다. 예를 들어 함수나 모듈 안이 영역입니다. 이름의 공간은 정확하게 그의 영역과 같습니다. 두 용어 사이에 아주 미묘한 차이가 몇 가지 있지만 사이비 컴퓨터 과학자나 되어야 논쟁을 벌일까 우리의 목적이라면 이름공간과 영역은 동일합니다.

이름공간이 뭐야? 질문 소리가 들리는 듯합니다. 음, 이름공간은 약간 설명하기가 어렵습니다. 특별히 복잡해서가 아니라 언어마다 다르게 설명하기 때문입니다. 그 개념은 들리는 그대로입니다. 이름공간은 공간이나 지역입니다. 프로그램 안에 있으며, 그 안에서만 이름이 (변수, 클래스 등등이) 유효합니다. 실제로 이 아이디어를 일상적으로 사용합니다. 큰 회사에서 일하고 있고 삼수라는 동료가 있다고 가정해 봅시다. 회계 부서에 또다른 삼수가 있습니다. 자주는 아니지만 가끔 그를 봅니다. 그 경우 그 동료를 “삼수"라고 부르고 다른 삼수는 "회계 부서의 삼수"라고 부릅니다. 여옥이라는 동료가 있고 엔지니어링 부서에도 긴밀하게 함께 일하는 여옥이라는 동료가 있다고 생각해 봅시다. 그런 경우 각각 "우리 여옥” 그리고 “엔지니어링 부서의 여옥"이라고 지칭합니다. 부서 이름으로 수식하고 있습니다. 보이십니까? 그것이 바로 프로그램에서 이름공간이 하는 일입니다. 이름공간은 프로그래머와 번역자에게 여러 동일한 이름 중에서 어떤 이름을 가리키고 있는지 알려줍니다.

이름공간은 (BASIC 같은) 초기 프로그래밍 언어에서 전역 변수만 있었기 때문에 도입되었습니다. 즉, 프로그램 어느 곳에서도 볼 수 있는 변수만 있었습니다 – 심지어 함수 안에 있아도 볼 수 있었습니다. 이 때문에 거대한 프로그램은 관리하기가 어려웠는데 한 곳에서 변수를 바꾸어도 다른 곳에서는 인지하지 못했기 때문입니다 – 이를 부작용(side-effect) 이라고 불렀습니다. 이를 해결하기 위하여 (현대적인 BASIC들을 포함하여) 나중에 나온 언어에서는 이름공간이라는 개념을 도입하였습니다. (C++은 이를 극단적으로 취해서 프로그래머는 프로그램 어느곳이든 자신만의 이름공간을 만들 수 있습니다. 이는 라이브러리를 만드는 이들에게 유용합니다. 이들은 다른 사람들이 공급한 라이브러리와 섞일 때 자신이 만든 함수 이름들이 유일하게 유지되기를 바랍니다)

이름공간을 기술하는데 사용되는 또다른 용어는 영역(scope)입니다. 이름의 영역은 프로그램에서 그 이름이 애매모호하지 않게 사용될 수 있는 곳까지 미칩니다. 예를 들어 함수나 모듈 안이 영역입니다. 이름의 공간은 정확하게 그의 영역과 같습니다. 두 용어 사이에 아주 미묘한 차이가 몇 가지 있지만 사이비 컴퓨터 과학자나 되어야 논쟁을 벌일까 우리의 목적이라면 이름공간과 영역은 동일합니다.

모바일 웹 개발의 특징과 공부내 용

모바일웹교육 | 2012.12.

모바일 웹 개발을 하기 위해서 공부를 시작 하시는 분들이 있으실 것입니다. 그러면 모 바일 웹 개발을 하기 위해서는 모바일웹이 어떠한 특지이 있는지 그리고 공부를 하게 된다면 어떤 내용으로 공부를 해야 모바일 웹 개발 을 할 수가 있는지를 알수가 있으실 것입니 다.

모바일웹은 일반 컴퓨터 브라우저에서 실행 되는 웹 애플리케이션을 모바일 스크린 크기 로 줄인 것으로 흔히 모바일 웹사이트, 또는 모바일 홈페이지라고 부릅니다. HTML, CSS , JavaScript, JSP, PHP, ASP, ASP.NET 등 일 반적인 웹 기술이 사용되며 모바일 브라우저 에서 실행이 됩니다. 모바일 웹은 풀 브라우징(Full Browsing)방 식으로 페이지를 이동하는데 풀 브라우징 방 식은 next 화면 전체 내용을 서버에서 새로 받아 현 모바일 웹은 풀 브라우징 동작방식 으로 인해 속도가 느릴뿐만 아니라 모바일 기기의 특성상 이동 중에 서버 접속 장애가 발생하기때문에 불안정한 앱으로 모바일 브 라우저에서 볼수 있는 대부분의 앱이 모바 일 웹입니다. 장점으로는 위에 언급한데로 웹사이트 개발방식과 거의 동일하여 별도의 개발방식이 필요하지 않고 인터넷에 접속이 가능하며 모바일 플랫폼으 로도 접근이 가능합니다.
단점으로는 모바일 플랫폼에서 작동되는 API를 통하여 특호된 다양한 기능들의 사용이 불가능하다 는 것으로 이를 어느 정도 해결하기 위해 Sencha Touch(센차 터치)나 jQuery Mobile( 제이쿼리 모바일)등의 프레임워크를 사용해 서 많이 극복을 할 수가 있습니다.

그러면 모바일 웹 개발을 하기 위해서는 어 떤 내용으로 공부를 하느냐가 관건일 것입니 다. 모바일 웹 개발에서 필요한 것은 대체적으로 HTML일 것입니다. 왜 html이 중요한 이유 에는 웹을 구성하는 기본언어라는 것도 있지 만 모든 웹 브라우저상에서 동일한 표현이 가능 한 웹표준의 기반 언어라는 것입니다. 그래서 html로 구성을 하면 그에 필요한 부 분도 있기 마련입니다. 그래서 jQuery와 자 바스크립트, CSS를 공부를 하는 이유가 바로 모바일웹 개발의 표현을 높이기 위한 것이고 또한 모바일 프레임워크를 이용을 해서 개발 을 하면 더욱 더 개발기간을 단축하면서 더 많은 성능을 구현을 할 수가 있기때문에 jQuery Mobile과 Sencha Touch등을 배우고 있는 이유가 되는 것입니다.

모바일 웹 개발의 특징과 공부내 용

모바일웹교육 | 2012.12.

모바일 웹 개발을 하기 위해서 공부를 시작 하시는 분들이 있으실 것입니다. 그러면 모 바일 웹 개발을 하기 위해서는 모바일웹이 어떠한 특지이 있는지 그리고 공부를 하게 된다면 어떤 내용으로 공부를 해야 모바일 웹 개발 을 할 수가 있는지를 알수가 있으실 것입니 다.

모바일웹은 일반 컴퓨터 브라우저에서 실행 되는 웹 애플리케이션을 모바일 스크린 크기 로 줄인 것으로 흔히 모바일 웹사이트, 또는 모바일 홈페이지라고 부릅니다. HTML, CSS , JavaScript, JSP, PHP, ASP, ASP.NET 등 일 반적인 웹 기술이 사용되며 모바일 브라우저 에서 실행이 됩니다. 모바일 웹은 풀 브라우징(Full Browsing)방 식으로 페이지를 이동하는데 풀 브라우징 방 식은 next 화면 전체 내용을 서버에서 새로 받아 현 모바일 웹은 풀 브라우징 동작방식 으로 인해 속도가 느릴뿐만 아니라 모바일 기기의 특성상 이동 중에 서버 접속 장애가 발생하기때문에 불안정한 앱으로 모바일 브 라우저에서 볼수 있는 대부분의 앱이 모바 일 웹입니다. 장점으로는 위에 언급한데로 웹사이트 개발방식과 거의 동일하여 별도의 개발방식이 필요하지 않고 인터넷에 접속이 가능하며 모바일 플랫폼으 로도 접근이 가능합니다.
단점으로는 모바일 플랫폼에서 작동되는 API를 통하여 특호된 다양한 기능들의 사용이 불가능하다 는 것으로 이를 어느 정도 해결하기 위해 Sencha Touch(센차 터치)나 jQuery Mobile( 제이쿼리 모바일)등의 프레임워크를 사용해 서 많이 극복을 할 수가 있습니다.

그러면 모바일 웹 개발을 하기 위해서는 어 떤 내용으로 공부를 하느냐가 관건일 것입니 다. 모바일 웹 개발에서 필요한 것은 대체적으로 HTML일 것입니다. 왜 html이 중요한 이유 에는 웹을 구성하는 기본언어라는 것도 있지 만 모든 웹 브라우저상에서 동일한 표현이 가능 한 웹표준의 기반 언어라는 것입니다. 그래서 html로 구성을 하면 그에 필요한 부 분도 있기 마련입니다. 그래서 jQuery와 자 바스크립트, CSS를 공부를 하는 이유가 바로 모바일웹 개발의 표현을 높이기 위한 것이고 또한 모바일 프레임워크를 이용을 해서 개발 을 하면 더욱 더 개발기간을 단축하면서 더 많은 성능을 구현을 할 수가 있기때문에 jQuery Mobile과 Sencha Touch등을 배우고 있는 이유가 되는 것입니다.

AJAX 공부 1. Overview AJAX는 Asynchronous JavaScript and XML 의 약자이다. AJAX라는 것은 새로운 Programming 언어 나 기술이 아니고, 기존의 기술들 (JavaScript, HTML, XML, CSS)을 잘 조합하 여 동적인 Web Application을 개발하는 방 법론을 지칭한다. AJAX의 가장 큰 특징은 서버와의 통신 방법 이다. 기존의 방식은 Browser에서 Web Server에 요청을 보내면, Web Page(HTML 문서) 전체가 Browser로 전송되었다. 따라 서 매번 요청할 때마다 화면 전체가 갱신되 어야 하는 불편이 있었다. AJAX에서는 전체 Web Page(HTML 문서)가 아닌 필요한 정보 만 XML 형식으로 Server에서 받아오고, 그 것을 바탕으로 현재 Web Page에서 필요한 부분만 갱신한다. 결과적으로 사용자는 빠 르고, Interactive한 Web 화면을 접하게 되 는 것이다. 이러한 동적인 특성은 javaScript에 통해 수행된다. HTML 문서에 포함된 JavaScript 코드를 이용하여 Server 와의 통신, XML 데이터의 해석, 현재 Web Page의 갱신을 제어하는 것이다. AJAX의 핵심인 JavaScript는 Browser에서 수행되기 때문에, AJAX는 Browser Technology로 분류된다. AJAX는 Open Standard에 기반하고 있다. JavaScript, XML, HTML, CSS는 모두 Open Standard이다. 따라서 이러한 표준을 지원 하는 Web Server/Browser라면 어떤 것이 든 AJAX 코드를 수행할 수 있다.