자바스크립트의 객체가 만약 문자열인 경우를 생각해봅니다. 예를들어 input 태그에 문자열로 아래의 값이 저장된 경우를 생각해봅니다.
'{ siteName: "webisfree" }'

문자열이지만 원래는 객체임을 한 눈에 알 수 있습니다. 그렇다면 위 문자열을 다시 객체로 변환해보려고 합니다. 어떻게 하면 될까요?


! JSON.parse()를 사용할 경우
가장 먼저 생각하는 방법이 객체로 변환할 수 있는 JSON.parse()입니다. 하지만 에러가 발생합니다.
 JSON.parse('{ siteName: "webisfree" }');

// 아래와 같이 에러가 발생
Uncaught SyntaxError: Unexpected token s in JSON at position 2

왜 안될까요? 그 이유는 간단합니다. JSON 타입이 아니기 때문이죠(객체타입임). JSON은 키 값이 따옴표로 랩핑된 형태이죠. 즉 아래와 같이 되어 있어야 에러가 안나게 될 것 입니다.
 JSON.parse('{ "siteName": "webisfree" }');

// 에러 없이 객체로 정상 반환
{
  siteName: "webisfree"
}

그럼 어떻게 할까요? 아마 정규표현식을 사용하는 방법이 가장 먼저 떠오릅니다. 아래와 같은 문자열에 정규표현식을 적용한다고 생각합니다.
'{ name: "siteInfo", author: "whowho", url: { host: "https://webisfree.com", path: "/json-pretty", full: "https://webisfree.com/json-pretty", created: "2020-03-23 12:00:00" }, numbers: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], posts: [ { id: 1, title: "title1", description: "title description 1" }, { id: 2, title: "title2", description: "title description 2" }, { id: 3, title: "title3", description: "title description 3" }] }'

왠지 너무 복잡해보이네요... 좀 더 간단한 방법이 없을까요?



# 객체 문자열 객체로 변환하는 방법
우리가 아는 eval() 함수를 생각해봅니다. 이 방법을 사용하면 스트링을 리터럴하게 실행할 수 있죠. 바로 이 방법을 이용하면 가능할 것 같습니다 ~ 다만 eval()의 인자로 위 값을 그냥 넘기면 생각처럼 동작하지 않습니다.
test = '{ name: "siteInfo", author: "whowho", url: { host: "https://webisfree.com", path: "/json-pretty", full: "https://webisfree.com/json-pretty", created: "2020-03-23 12:00:00" }, numbers: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ], posts: [ { id: 1, title: "title1", description: "title description 1" }, { id: 2, title: "title2", description: "title description 2" }, { id: 3, title: "title3", description: "title description 3" }] }';

eval(test = test); // 에러가 발생함

역시 에러가 발생합니다. eval() 내부 이므로 뭔가를 실행해야 하므로 간단히 변수 선언을 실행합니다 그래서 test = test로 선언했습니다.

어쨌든 생각해보니 ... ES 6의 템플릿 리터럴 확장을 생각하면 쉽게 구현할 수 있겠죠. 이 때 반드시 `(back tick) 기호를 사용하면 될 것입니다. 아래에서 해보죠.
eval(`test = ${test}`);

test = {
  name: "siteInfo",
  author: "whowho",
  url: {host: "https://webisfree.com", path: "/json-pretty", full: "https://webisfree.com/json-pretty",
  created: "2020-03-23 12:00:00"},
  numbers: (11) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  posts: (3) [{…}, {…}, {…}]
}

예상대로 잘 동작하는 군요 ~ 객체 문자열을 객체로 변환할 수 있었습니다.



! JSON 타입으로 변환하기이제 JSON으로도 변환해봅니다. 문자열을 위의 방법을 동일하게 적용합니다. 그러면 객체를 만들었죠? 저장된 test 변수에 아래의 JSON.stringify()를 사용해 JSON 값으로 변환해봅시다.
JSON.stringify(test);


// JSON으로 변환됨
'{"name":"siteInfo","author":"whowho","url":{"host":"https://webisfree.com","path":"/json-pretty","full":"https://webisfree.com/json-pretty","created":"2020-03-23 12:00:00"},"numbers":[0,1,2,3,4,5,6,7,8,9,10],"posts":[{"id":1,"title":"title1","description":"title description 1"},{"id":2,"title":"title2","description":"title description 2"},{"id":3,"title":"title3","description":"title description 3"}]}'

위의 값을 보면 키 값들이 모두 "" 따옴표로 랩핑되어 있음을 확인 할 수 있습니다. 정상적으로 모두 JSON으로 변환되었군요. 여기까지 객체 문자열을 객체 또는 JSON으로 변환하는 방법에 대하여 알아봤습니다.



# 마치면서, 이슈 사항 및 기타 내용
위와 같은 방법으로 잘 사용하였지만 생각지 못한 문제점이 있었습니다. 바로 undefined 값을 JSON.stringify()로 변환시 나타나는 이슈입니다...

자세히 말하면 변환할 때 값이 undefined로 선언되어 있는 경우에 해당 값을 undefined로 저장하지 않고 그냥 삭제합니다. 그래서 키 값을 찾을 수 없는 문제가 생길 수 있죠. 결국 변환하기 이전에 undefined값의 여부를 찾아 어떻게 처리해야 할지 ... 다른 방법을 선택해야 할지 고민이 필요합니다.