javascript template engine 사용해 중첩된 객체 데이터 수정하기

Squirrelly 사용법

var Sqrl = require("squirrelly")
//import * as Sqrl from "squirrelly"; 

var greeting = Sqrl.render("Hi {{it.user}}", {user: "Ada Lovelace"})

console.log(greeting); //"Hi Ada Lovelace"

문법

Sqrl.render(string, obj)

• string
  : 타입은 문자열.
  : obj의 key 값을 {{it.key}}으로 작성하면 key와 쌍을 이루는 value 값으로 데이터가 수정됨.

• obj
  : 데이터를 정의하거나 수정할 {key : value} 형태의 객체.
  : 동일한 key가 존재하면 마지막에 위치한 key의 value값으로 데이터 수정됨.

🤔 첫번째 파라미터를 문자열로 받는데, 객체를 어떻게 수정하지?

JSON 내장 객체 사용하기

• parse(): JSON 문자열을 매개변수로서 수용하고, 일치하는 자바스크립트 객체로서 변환합니다.
• stringify(): 객체를 매개변수로서 수용하고, JSON 문자열 형태로 변환합니다.

js에는 기본적으로 객체를 문자로, 문자를 객체로 바꾸는 내장 객체가 존재.

Squirrelly 이용해 객체 데이터 수정하기

var Sqrl = require("squirrelly")

const obj = {
  admin: "superAdmin",
  apiToken: "tokenToken",
};

const notString = {
  Services: [
    {
      ServiceID: "1",
      ServiceName: "인증 여부 확인",
      ReqURL: "/auth/current",
      ReqMethod: "get",
      ReqHeaderTmps: {
        apiToken: "{{it.apiToken}}",
      },
    },
    {
      ServiceID: "2",
      ServiceName: "유저 정보 확인",
      ReqURL: "/admin/{{it.admin}}",
      ReqMethod: "get",
      ReqHeaderTmps: {
        apiToken: "{{it.apiToken}}",
      },
    },
    {
      ServiceID: "3",
      ServiceName: "인증 로그아웃",
      ReqURL: "/auth/current",
      ReqMethod: "delete",
      ReqHeaderTmps: {
        apiToken: "{{it.apiToken}}",
      },
    },
  ],
};

// JSON.stringify 메서드를 사용해 객체를 문자열로 변환 후 데이터를 수정한다.
// 수정된 데이터를 JSON.parse 메서드를 사용해 다시 객체화.
const templateEngine = (objectIsOk, obj) => {
  return JSON.parse(Sqrl.render(JSON.stringify(objectIsOk), obj));
};

templateEngine(notString, obj);

장점

• '객체 안의 객체'나 '배열 내 객체'와 같이 복잡한 자료구조에서도 깊이 상관없이 데이터 수정이 가능.
• 객체 내 동일한 데이터를 중복적으로 수정해야 하는 경우 편함.

단점

• obj에 해당하는 key값이 없는 경우 undefined로 값이 수정됨.
  - it.으로 키워드가 고정되어 있어, 여러번 사용 불가.
  • (custom keyword 가능한지 검색했지만, 관련 자료는 찾지 못함)

---

• 참고자료
  SquirrellyJS 공식문서
  Squirrelly Layouts by Ben Gubler
  [MDN] JSON으로 작업하기
  -객체와 문자 사이의 변환