<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="tweetjson.css">
<title>Tweet</title>
</head>
<body>
<h1>Tweet in Company</h1>
<div id="tweetlist"></div>
<script src="tweetjson.js"></script>
</body>
</html>
<div>를 추가해줘서 그 안에 추가할 내용들을 JSON으로 작업한다.
<JavaScript>
eventListeners();
function eventListeners() {
window.addEventListener('DOMContentLoaded', () => {
getTweet();
})
}
document.getElementById('getTweet').addEventListener('DOMContentLoaded', getTweet);
function getTweet() {
fetch('tweet.json')
.then(res => res.json())
.then(data => {
let html = '';
data.forEach(tweet => {
html += `
<div class="box">
<img src="${tweet.imgSrc}" alt="photo">
<h3 class="name">${tweet.name}</h3>
<span class="rank">${tweet.rank}</span>
</div>
<div class="comment">${tweet.comment}</div>
`;
});
document.getElementById('tweetlist').innerHTML = html;
})
.catch(error => console.log(error))
}DOM트리가 완성되면
getTweet함수를 실행시킨다.
fetch를 사용해 프로미스를 반환시키고,.then으로 json파일을 실행시키고, 그 안에 들어갈 내용의 공통적인 것들을 적어주고 템플릿 리터럴을 사용한다.
그리고.catch를 이용해 error를 잡아낸다.
<JSON>
[
{
"imgSrc": "https://images.unsplash.com/photo-1562788869-4ed32648eb72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGVtcGxveWVlJTVDfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"name": "Danny",
"comment": "Tell me your difficulties.",
"rank": "General Manager"
},
{
"imgSrc": "https://media.istockphoto.com/photos/shot-of-a-young-businessman-working-on-his-laptop-at-his-desk-picture-id1389465862?b=1&k=20&m=1389465862&s=170667a&w=0&h=J_npFHoiIBLGz_S7Y8TxY6aDcA5M3X2HRnAMqF13ZZY=",
"name": "Matthew",
"comment": "JavaScript is too difficult....",
"rank": "Staff"
},
{
"imgSrc": "https://media.istockphoto.com/photos/doing-business-with-a-smile-picture-id1330546092?b=1&k=20&m=1330546092&s=170667a&w=0&h=brj2RTauaIvDQbJqobBjLLw72xBZh80H9Vyr_BhoDnA=",
"name": "Sarah",
"comment": "You are same as mine, Matthew!",
"rank": "Senior Staff"
},
{
"imgSrc": "https://images.unsplash.com/photo-1543084951-1650d1468e2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8ZW1wbG95ZWUlNUN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
"name": "Henry",
"comment": "Umm... I think you should try harder.",
"rank": "Manager"
},
{
"imgSrc": "https://images.unsplash.com/photo-1549045337-967927d923c0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8ZW1wbG95ZWUlNUN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
"name": "Pasel",
"comment": "I can help you, Matthew!",
"rank": "Senior Staff"
},
{
"imgSrc": "https://media.istockphoto.com/photos/portrait-of-a-young-businesswoman-working-on-a-laptop-in-an-office-picture-id1354842602?b=1&k=20&m=1354842602&s=170667a&w=0&h=kxT0b2JFLB-mUfJ8NCZtroJvTdZhuecOGlk12jgmhGU=",
"name": "Jane",
"comment": "I'll join there, too.",
"rank": "Staff"
},
{
"imgSrc": "https://images.unsplash.com/photo-1480429370139-e0132c086e2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGVtcGxveWVlJTVDfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
"name": "David",
"comment": "Today's meeting is over!",
"rank": "Manager"
}
]