JSON이란 무엇일까

html에서 값과 데이터를 매칭시키기 위해서 JSON을 자주 사용하곤 했었는데, JSON이란 무엇이고 정확히 어떤 방식으로 사용되는지, 요즘도 사용하는 추세인지 궁금해서 이 글을 쓰게 되었다.

 

 

 

💻 JSON이란?

JSON은 JavaScript Object Notation의 약자로, 데이터 객체를 표현하는 표준 포맷이다.

가볍고 읽기 쉬우며, JavaScript와 자연스럽게 통합되는 것이 장점인데, 특히 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 전송에 많이 사용된다.

 

 

💻 JSON의 사용현황

여전히 매우 널리 사용되는 데이터 교환 포맷이고, 서버와 클라이언트 간 데이터 전송, RESTful API, 설정 파일 등 다양한 용도로 활용되고 있다.

최근 들어 다른 포맷들이 주목받고 있기는 하지만, JSON의 간단함과 호환성 덕분에 여전히 주요한 데이터 포맷 중 하나이다.

 

 <div class="txt-bx" th:with="banner=${T(rong.ha.core.config.enums.BannerType).valueOf(item.banner).desc}, 
 	  contentType=${T(rong.ha.core.config.enums.ContentType).valueOf(item.sermonImageArrays.contentType).desc}">  
 <a href="javascript:;" 
  th:data-value='|{
  "type":"${item.type.name}",
  "banner":"${banner}",
  "title":"${item.title}",
  "name":"${item.sermonImageArrays.name}",
  "type":"${contentType}",
  "image":"${item.youtubeStandardImageUrl}"
  }|' onclick="fnTopList(this)">

 

> th:data-value 속성을 사용하여 데이터를 JSON 형식으로 포함하고 있고, 이 데이터들은 fnTopList 함수로 전달된다.

 

 

💻 JSON으로 지정해동은 데이터를 다른 영역에 적용시켜주는 예제

 

<img data-class="image" th:src="${TopList[0].youtubeStandardImageUrl}"/>
<p data-class="bible" th:text="${T(rong.ha.core.config.enums.BannerType).valueOf(TopList[0].banner).desc}></p>
<p data-class="title" th:text="${TopList[0].title}"></p>
<p data-class="name" th:text="${TopList[0].sermonImageArrays.name + ' ' + T(rong.ha.core.config.enums.PreacherType).valueOf(TopList[0].sermonImageArrays.type).desc}"></p>

 

*script

<script th:inline="javascript">

function fnTopList(obj) {
    console.log($(obj).data("value"))
    console.log($(obj).data("value").title)

    let dataValue = $(obj).data("value");

    let $_sermondetails = $("[data-class=sermon-details]");

    $_sermondetails.find("[data-class=type]").text(dataValue.type);
    $_sermondetails.find("[data-class=banner]").text(dataValue.banner);
    $_sermondetails.find("[data-class=title]").text(dataValue.title);
    $_sermondetails.find("[data-class=name]").text(dataValue.name + ' ' + dataValue.type);
    $_sermondetails.find("[data-class=image]").attr("src", dataValue.image);
}
	
	
</script>

 

이미지를 적용시키고 싶을때는 attr을 사용하여 src로 변경하여 지정해준다