javascript 문법 : 백틱

백틱으로 변수 호출하기

let name = '내 이름';
let text = `${name}님의 스프링 5주 완주를 축하합니다!`;
// 변수를 호출할 부분을 백틱으로 감싸준 다음 ${변수} 호출

백틱으로 자바스크립트에서 html 사용하기

function addHTML(id, username, contents, modifiedAt) {
    let tempHtml = `<div class="card">
        <!-- date/username 영역 -->
        <div class="metadata">
            <div class="date">
                ${modifiedAt}
            </div>
            <div id="${id}-username" class="username">
                ${username}
            </div>
        </div>
        <!-- contents 조회/수정 영역-->
        <div class="contents">
            <div id="${id}-contents" class="text">
                ${contents}
            </div>
            <div id="${id}-editarea" class="edit">
                <textarea id="${id}-textarea" class="te-edit" name="" id="" cols="30" rows="5"></textarea>
            </div>
        </div>
        <!-- 버튼 영역-->
        <div class="footer">
            <img id="${id}-edit" class="icon-start-edit" src="images/edit.png" alt="" onclick="editPost('${id}')">
            <img id="${id}-delete" class="icon-delete" src="images/delete.png" alt="" onclick="deleteOne('${id}')">
            <img id="${id}-submit" class="icon-end-edit" src="images/done.png" alt="" onclick="submitEdit('${id}')">
        </div>
    </div>`;
    $('#cards-box').append(tempHtml);
}