jQuery load 메소드, JSON 반복문, Vue 디렉티브 바인딩 완전 정복
jQuery load() 메소드, head 태그에 사용할 수 있을까?
jQuery의 load() 메소드는 주로 <div>나 <p> 같은 body 요소에 외부 HTML을 삽입할 때 사용된다. <head> 태그에 사용하는 것은 일반적인 사용법이 아니며, 브라우저에서 예상치 못한 동작을 유발할 수 있다.
만약 CSS나 JS를 동적으로 <head>에 추가하고 싶다면 load()가 아닌 바닐라 JS나 jQuery의 DOM 조작 기능을 사용하는 것이 바람직하다.
// 예: 스타일시트를 head에 동적으로 삽입
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "styles.css";
document.head.appendChild(link);
바닐라 JavaScript에서 JSON 객체 반복하는 방법
JSON 객체의 key와 value를 반복하기 위해 for...in 문을 사용하는 것이 일반적이다. 또한 Object.keys(), Object.entries() 같은 ES6 기능을 활용하면 더 깔끔하고 직관적인 반복이 가능하다.
const jsonObject = {
key1: "value1",
key2: "value2",
key3: "value3"
};
// 방법 1: for...in
for (const key in jsonObject) {
if (jsonObject.hasOwnProperty(key)) {
console.log(`Key: ${key}, Value: ${jsonObject[key]}`);
}
}
// 방법 2: Object.entries()
Object.entries(jsonObject).forEach(([key, value]) => {
console.log(`Key: ${key}, Value: ${value}`);
});
Vue.js에서 JSON.value 형식 바인딩하기
Vue.js에서는 디렉티브 안에서 json.value 형태로 바인딩할 수 있다. 주로 v-bind 또는 줄임표현 :를 사용하여 템플릿에서 JSON 객체의 속성 값을 연결한다.
<template>
<div>
<p :title="jsonData.value">Hover me!</p>
</div>
</template>
<script>
export default {
data() {
return {
jsonData: {
value: '툴팁에 표시될 값'
}
}
}
}
</script>
이처럼 Vue에서는 객체 내부의 값에 접근하여 속성에 바인딩할 수 있으며, 동적으로 값이 변해도 화면에 자동으로 반영된다.
🔗 참고 링크
