지인의 헬로우월드

- 정규 표현식이란? (Regular Expressions)

• 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴이다.
• 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어, 문자열의 검색과 치환을 위한 용도로 사용된다.

- 생성

-  정규 표현식 리터럴을 이용한 생성

• 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다.

- RegExp 객체를 이용한 생성

- 예제

var regStr = /a+bc/;             // 정규 표현식 리터럴을 이용한 생성
var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성
regStr;                          // /a+bc/
regObj;                          // /a+bc/

- 검색(search)

var string = "Please visit Tistory!"
var position = string.search("Tistory"); // 13

• 변수 string에는 (검색 대상이 될) 전체 문자열이 들어있다.
• 찾으려는 문자열은 "Tistory"이며, search()를 이용하여 그 위치를 찾는다.
• 검색에 성공하면, 해당 단어(Tistory)의 위치값이 변수 position에 저장된다. 해당 단어가 없으면, 변수 position에 저장되는 숫자는 -1이다.
• search()의 위치값은, 제로(0)에서부터 계산해 나간다. 이 위치값에는, 띄어쓰기한 빈칸(공백)도 포함된다.

- 플래그(flags)

• 정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다.
• 이렇게 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.

- 예제

var targetStr = "bcabcAB";
var strReg = /AB/;              // 검색 패턴 비교 시 기본 설정으로 대소문자를 구분함.
var strUsingFlag = /AB/i;       // new RegExp("AB", "i")와 동일함.
targetStr.search(strReg);       // 5
targetStr.search(strUsingFlag); // 2 -> 대소문자를 구분하지 않고 검색함.

- 특수 문자(special characters)

• 문자열을 찾을 때, 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.

- 예제(\d)

var targetStr = "ab1bc2cd3de";
var reg1 = /\d/;    // 2 -> 0부터 9까지의 숫자를 검색함.
var reg2 = /[3-9]/; // 8 -> 3부터 9까지의 숫자를 검색함.

- 예제( \s, \w)

var targetStr = "abc 123";
// 공백 문자를 사이에 두는 언더스코어(_)를 포함한 영문자 및 숫자로 이루어진 문자열을 검색함.
var reg = /\w\s\w/; // c 1

- 양화사(quantifier)

• 정규 표현식에서는 특수 문자로 수량을 나타내는 다양한 양화사를 사용할 수 있다.

- 예제

var targetStr = "Hello World!";
var zeroReg = /lo*/;          // 문자 'l' 다음에 문자 'o'가 0번 이상 나타나는 경우를 검색함.
var oneReg = /lo+/;           // 문자 'l' 다음에 문자 'o'가 1번 이상 나타나는 경우를 검색함.
var zeroOneReg = /lo?/;       // 문자 'l' 다음에 문자 'o'가 0 또는 1번만 나타나는 경우를 검색함.
 
targetStr.search(zeroReg);    // 2
targetStr.search(oneReg);     // 3
targetStr.search(zeroOneReg); // 2

• 또한, 물음표(?) 기호가 정규 표현식의 양화사(*, +, ?, {}) 바로 다음에 위치하게 되면, 가능한 많은 문자를 가지도록 패턴을 찾는 기본 설정과는 달리 해당 양화사가 가능한 적은 수의 문자만을 가지는 패턴을 찾도록 변경시킨다.

- 예제

var targetStr = "123abc";
var oneReg = /\d+/;           // 숫자를 검색함. /[0-9]/와 같음.
var anotherReg = /\d+?/;      // 숫자를 검색하지만, 가능한 적은 수의 문자를 가지는 패턴을 검색함.


targetStr.search(oneReg);     // 123
targetStr.search(anotherReg); // 1

- 괄호(bracket)

• \b는 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색하는 특수 문자이고, [\b]는 백스페이스 문자를 검색하는 정규표현식이다. 이 둘을 혼동해서는 안 된다.

- 예제

var targetStr = "abc 123 abc 123";
var oneReg = /(\w+) (\d+)/;
var anotherReg = /(\w+) (\d+) \1 \2/;

targetStr.match(oneReg);     // abc 123, abc, 123
targetStr.match(anotherReg); // abc 123 abc 123, abc, 123

- 위치 문자

• 정규 표현식에서는 패턴을 검색할 단어의 위치를 지정할 수 있다.

- 예제

var firstStr = "Php";
var secondStr = "phP";
var strReg = /^p/;       // 'p'로 시작하는 단어의 'p'만을 검색함.
firstStr.match(strReg);  // null
secondStr.match(strReg); // p

Reference

http://www.tcpschool.com/javascript/js_regularExpression_concept

- BroadcastChannel이란?

• Broadcast Channel API는 브라우징 컨텍스트 간의 통신을 보다 쉽게 ​​해주는 간단한 API이다.
• 즉, 창/탭, iframe, 웹 작업자 및 서비스 작업자 간의 통신이며, 지정된 채널에 게시된 메시지는 해당 채널의 모든 청취자에게 전달된다. 
• BroadcastChannel생성자는 채널 이름이라는 단일 매개변수를 사용한다 . 이름은 채널을 식별하고 브라우징 컨텍스트 전반에 존재한다.

- 사용방법

• 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다.
• 아래처럼 채널을 생성할 수 있다. 만약 처음이면 생성되고, 이미 생성된 채널이면 구독하게 된다.

// my_bus 라는 채널에 연결한다.
const channel = new BroadcastChannel('my_bus');

• 메세지를 보낼 때는 postMessage라는 메서드를 사용한다. 메세지의 형식은 정해져 있지 않고 structed clone algorithm을 사용해서 시리얼라이즈되므로 웬만한 데이터 타입은 다 쓸 수 있다.
• 메세지가 포스팅되면 브로드캐스트 채널로 메세지 이벤트가 실행된다. 메세지 이벤트가 발생했을 때 실행할 콜백은 아래처럼 달아두면 된다.

// my_bus에 메시지를 보낸다.
channel.postMessage('This is a test message.'); 

// my_bus에서 메시지를 수신한다.
channel.onmessage = function(e) {
    console.log('Received', e.data);
};

// 완료되면 채널을 닫는다.
channel.close();

- 주의점

• 단, 자신이 포스팅한 메세지는 자신이 받아볼 수 없다. 즉 포스팅을 한 페이지한테는 message이벤트가 실행되지 않는다.
• 창 중 하나가 시크릿 모드이거나 여러 브라우저에서 (예: Firefox에서 Chrome으로)브로드캐스트 채널이 작동하지 않는다.
• Broadcast Channel API는 아래처럼 호스트가 다르면 작동하지 않는다.
  https://www.abc.com/
  https://abc.com/

- 다른 기능과의 차이점

• Channel Messaging API와 차이점은 기본적으로 broadcastchannel은 one-to-many를 위한 것이고 messagechannel는 one-to-one을 위한 것이라는 점이다.
• window.postMessage 와의 차이점은, broadcastchannel은 same origin만 지원하지만 window.postMessage는 그렇지 않다는 점이다. 그리고 window.postMessage는 타켓 윈도우의 참조도 알고 있어야 하는 반면 broadcastchannel은 채널 이름으로 구독하고 양방향 소통이 가능해서 사용이 훨씬 쉽다.

Reference

https://developer-alle.tistory.com/m/433
https://developer.chrome.com/blog/broadcastchannel/

https://hjcode.tistory.com/100