JavaScript- (라이브러리~ 정규표현식)

1. 라이브러리 이용 방법

- 라이브러리는 모듈과 비슷한 개념으로, 모듈이 프로그램을 구성하는 작은 부품으로써의 로직을 의미한다면,

라이브러리는 자주 사용되는 로직을 재사용하기 편하도록 잘 정리한 일련의 코드의 집합을 의미한다고 할 수 있다.

 -> 유명 라이브러리의 예로 jQuery가 있다.

ex) https://code.jquery.com 

jQuery CDN

2. UI, API의 차이점

    ex) alert("hello world"); 라는 코드를 넘겼을때 경고창이 뜬다면, 경고창은 UI, 코드는 API이다.

 

  1)UI (User Interface의 약자)

     : 사용자의 정보를 받아 애플리케이션에게 전달한다. (prompt 창)

      

  2) API (Application Programming Interface의 약자)

  : 우리가 만든 웹 애플리케이션에서 prompt 창이 실행되기 위해, 웹브라우저에게 자바스크립트 문법에 따라 전달한 코드 

 

 => prompt 창은 웹브라우저가 미리 만들어 놓고 준비한 것으로, 우리는 prompt 코드를 웹브라우저에게 실행함으로써,

  웹브라우저가 미리 만들어 놓은 창을 웹브라우저가 실행 할 수 있도록 명령한다.

  : 우리가 만든 웹애플리케이션이 웹브라우저에 무언가를 요청하는 인터페이스이므로 API라고 부른다.

 

 

3. 정규 표현식

   : 문자열에서 특정한 문자를 찾아내는 도구이다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다.

  -> 정규 표현식은 하나의 언어라고 할 수 있다.

   -> 컴파일 단계에서 패턴(대상)을 찾고, 실행 단계에서 어떤 활동을 구체적으로 하게 된다.

 

1) 찾고자 하는 패턴 만들기

var pattern =/a/ 
// (/~/ 사이에는 우리가 찾고자 하는 문자열 넣기)
var pattern = new RegExp('a');
//우리가 찾고자 하는 패턴
// (/a/ == new RegExp('a');)

 

2) 정규표현식을 컴파일해서 객체를 만들었다면, 이제 문자열에서 원하는 문자를 찾아야 한다.

: 정규 표현식은 문자열을 추출하고, 관련된 정보가 존재하는지 테스트하고,

 

ex) RegExp.exec() 

pattern.exec('abcde'); // 우리가 찾고자 하는 pattern인 a를 리턴한다.

var pattern = /a./; // (.) 이 붙으면 a 뒤에 아무나 임의적인 문자가 붙어도되는 것이다.
pattern.exec('abcde'); // ab를 리턴하게 된다.

console.log(pattern.exec('abcdef')); //["a"]를 값으로 하는 배열을 리턴한다.
console.log(pattern.exec('bcdefg')); //bcdefg에는 a가 없기 때문에 null을 리턴한다.

 

   ex2) RegExp.test()

console.log(pattern.test('abcdef')); //true
console.log(pattern.test('bcdefg;)); //false
// 인자 안에 패턴이 해당되는 문자가 있으면 true,없으면 false를 리턴한다.

 

3) 문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다.

 

ex) String.match(), String.replace()

var pattern='a';
var str='abcdef';
str.match(pattern);
//["a"]가 리턴이 된다.

str.replace(pattern,'A');
//str가 Abcdef로 대체된다.

 

4) 옵션

 : 정규표현식 패턴을 만들때 옵션을 설정 할수 있다.

 

  ex1) i 옵션

 : i를 붙이면 대소문자를 구분하지 않는다.

var xi=/a/;
console.log("Abcde".match(xi)); //null

var oi=/a/i;
console.log("Abcde".match(oi)); // return ["A"];

 

 ex2) g 옵션

  : g를 붙이면 검색된 모든 결과를 리턴한다

var xg=/a/;
console.log("abca".match(xg));
//["a"] a가 한번만 검출된다.

var og=/a/g;
console.log("abca".match(og));
// ["a","a"] a가 두번다 검출된다.

var og=/a/ig;
console.log("Aabca".match(og));
// 검출된 모든 문자를 배열로 만들어서 리턴해준다. ["A","a","a"]

 

 

 

5) 캡처

 : 괄호 안의 패턴은 마치 변수처럼 재사용할 수 있다.

캡처그룹은 한걸음 더 나아가서 매치된 부분에 속하는 일부를 다시 분리하여 돌려주는 방법이다.

 => 예를 들어 hello.ac.kr 로 되어있는 모든 이메일 주소를 bye.ac.kr 로 바꾸려고 하는 경우를 예로 들 수 있다.

: 이메일로 매치하고, 그중에 다시 한번 hello.ac.kr를 매치하려면 코드가 복잡해지게 된다.

: 패턴 안에서 일부분을 캡처 그룸으로 표시하면 매치된 문자열 중에서 캡처 그룹에 해당하는 것을 따로 뽑아 낼 수 있다. 

 

 

  (\w+)\s(\w+) => \w부분은 문자를 의미한다. (A~Z, a~z, 0~9) 까지를 의미한다.

 

var pattern= /(\w+)\s(\w+);
var str="coding everybody"
var result= str.replace(pattern,"$2,$1");
console.log(result);

//everybody, coding이라는 결과가 나온다.
//각각 (\w) 부분이 변수 처리 되었기 때문이다.
//$2,$1 각각 그룹이 치환되었다.

 

 

6) 치환

 : url에 해당하는 부분만 찾아서 패턴을 정한 후에, 링크된 html코드로 교체하는 코드이다.

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

=> 정규 표현식은 다양한 용도로 이용될 수 있다는 것을 알아두자~

 

http://www.nextree.co.kr/p4327/

정규표현식(Regular Expression)을 소개합니다.

=> 더 참고하면 좋을 것 같음.