오늘 한 일

• facebookClone_Node 프로젝트 작성 중 재활용을 위해 pug 파일 내에서 다른 pug 파일을 include했는데 변수 중복 선언 에러가 발생했었다.

  Uncaught SyntaxError: Identifier 'profileBtns' has already been declared
  

  원인은 호출되는 pug 파일 내부에서 block append로 css, js 파일을 추가 했던 것이었다. 때문에 각 css, js파일이 이중으로 선언되어 문제가 생겼던 것이었다. 호출되는 pug 파일에는 html 코드만을 작성하고 파일 추가는 호출 pug 파일에 작성해주자 문제는 해결되었다.

• 서버가 가진 값을 pug 내부의 script 영역에서 사용할 필요가 있었다. socket 통신 파트였는데 데이터 자체로 변수에 할당해 사용하려는 시도에서 약간의 시행착오가 있었다. 결론부터 말하자면 string으로 변환한 값을 unescaped string interpolation을 사용해서 삽입하면 rendering 후 정상적으로 작동했다.

• [Pug] Interpolation
  pug에서는 rendering시에 작성될 html의 코드를 서버에서 제공하는 값으로 채워넣을 수 있다. 이를 interpolation이라 하는데, escaped string interpolation(#{})과 unescaped string interpolation(!{})이 있다.

  • #{ 와 } 내부의 코드는 evaluated, escaped 되고, 그 결과가 렌더링되는 템플릿의 출력에 채워진다.
  • 반면 !{ 와 } 내부의 코드는 evaluated, but unescaped 된다. 따라서 서버에서 제공한 data가 pug 내부의 script 태그에서 필요한 경우

    const data = !{JSON.stringify(data)};
    

    형태의 코드로 data에 할당해 사용할 수 있다.

• JSON.stringify() [Mozilla Web docs 참고]
  JSON은 JavaScript의 표준 내장 객체이다. JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함한다.

  JSON.stringify(value[, replacer[, space]])

  • 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.
  • Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.
  • undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다(배열 안에 있을 경우).
  • 심볼을 키로 가지는 속성들은 replacer 함수를 사용하더라도 완전히 무시된다.
  • 열거 불가능한 속성들은 무시된다.

  JSON.stringify({});                   // '{}'
  JSON.stringify(1);                    // '1'
  JSON.stringify(true);                 // 'true'
  JSON.stringify('foo');                // '"foo"'
  JSON.stringify([1, 'false', false]);  // '[1,"false",false]'
  JSON.stringify({ x: 5 });             // '{"x":5}'
  
  JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) 
  // '"2006-01-02T15:04:05.000Z"'
  
  JSON.stringify({ x: 5, y: 6 });
  // '{"x":5,"y":6}' or '{"y":6,"x":5}'
  

  replacer 매개변수는 함수 또는 배열이 될 수 있다. 함수일 때는 문자열화 될 key 와 value, 2개의 매개변수를 받는다. key 가 발견된 객체는 리플레이서의 this 매개변수로 제공된다. 맨 처음에는 문자열화될 그 객체를 나타내는 비어 있는 key와 함께 호출되고, 그 다음에는 문자열화될 그 객체나 배열의 각 속성에 대해 호출된다. 이것은 JSON 문자열에 추가되어야 하는 값을 반환해야한다:

  • Number, String, Boolean인 value를 반환하면, JSON 문자열에 추가될 때 value를 나타내는 문자열이 그 속성의 값으로 사용된다.
  • 다른 객체를 반환하면, 그 객체는 replacer 함수를 각각의 속성에 대해 호출하며 순환적으로 JSON 문자열로 문자열화된다. 그 객체가 함수인 경우에는 JSON 문자열에 아무것도 추가되지 않는다.
  • undefined 를 반환하면, 그 속성은 JSON 문자열 결과에 포함되지 않는다.

  function replacer(key, value) {
    if (typeof value === "string") {
      return undefined;
    }
    return value;
  }
  
  const foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
  let jsonString = JSON.stringify(foo, replacer);
  // {"week":45,"month":7}
  
  jsonString = JSON.stringify(foo, ['week', 'transport']); // "week", "transport" 속성만 포함.
  // '{"week":45,"transport":"car"}'