renderMessage()

node.js에서 fetch()로 데이터를 어떤 서버에서 받아와서 그 내용을
정제해서 html로 보내줘야 할 때가 있다. 그때 사용할 수 있는 render함수다
이함수를 보면서 배운것이 2가지가 있다.
1. html로 꺽쇠기호를 포함한 내용을 보내려면 꺽쇠의 문자열화가 필요하다
2. replace메소드

1.꺽쇠기호의 문자화

노드환경과 html완경은 다르다.
만약 꺽쇠(<,>)기호를

그 책의 제목은 <유년기의 끝> 이다. // 이렇게 보내준다면
그 책의 제목은 이다. // 이렇게 결과물이 나오게 된다.

왜냐하면 html은 꺽쇠기호가 있다면 그부분을 내용이 아닌 '태그'로 인식하기 때문이다. 그래서 정상적으로 꺽쇠기호를 보여주기 위해서는
'<' 대신 <(less than)
'>' 대신 >(greater than)을 입력해야 제대로 보이게 된다.
아래 렌더메세지 함수에서도 백틱 내부에 들어오는 변수들에 있는 꺽쇠기호를
html로 제대로 보내주기 위해 $gt,lg가 .replce함수와 함께 사용된다.

renderMessage: ({ username, text, date, roomname }) => {
    const tmpl = 
    `<div class="chat">
    <div class="username">
     ${(username.replace(/</g, "&lt;")
       .replace(/>/g), "&gt;")}
	</div>

    <div>
    ${text.replace(/</g, "&lt;")  
          .replace(/>/g, "&gt;")}
    </div>
    <div>${date}</div>
    <div>${roomname.replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")}</div>
    </div>`;

    document.querySelector("#chats").innerHTML =
      tmpl + document.querySelector("#chats").innerHTML;
  }

2. replace메소드

자바스크립트에서 replaceAll은 없다.
하지만 정규식을 이용해서 replaceAll과같이 모든 부분을 수정해 줄 수 있다.

//replace 기본적인 이용
str.replace("#", ""); // #을 공백으로 변경한다.
//하지만 이렇게 하면 첫번째 #만 공백으로 변경하고 나머지는 변경되지 않는다.

//정규식을 이용해서 g나 gi 로 감싸기
str.replce(/#/gi, ""); //모든 #에대해 검색한다.
// 정규표현식을 이용해 replaceAll과 같은 기능을 하게 만들었다.

// 모든 슬래쉬'/'를 정규표현식으로 변경, 제거하기
var data = "abc/def/gh";
var result = data.replace(/\//gi, '');
console.log('결과', result); // abcdefgh

정규식의 gi 설명

• g : 발생할 모든 pattern에 대한 전역 검색
• i : 대/소문자 구분 안함
• m: 여러 줄 검색 (참고)

출처 :
http://blog.naver.com/PostView.nhn?blogId=sjpotato&logNo=40150731304&redirect=Dlog&widgetTypeCall=true
http://jsbin.com/gipizenimi/edit?js,console,output