3/23 TIL

f-string와 템플릿 리터럴 (template literal)

오늘 f-string를 이용해서 코드 구성하는 걸 해보려고 하다가 문득 이전에 비슷한 걸 봤다는 생각이 들었다.
바로 템플릿 리터럴. 백틱(`)과 $를 사용하여

function get_card() {
    $('#card_area').empty();
    fetch(`/card?num=${member_num}`)
        .then((res) => res.json())
        .then((data) => {
            let rows = data['card_list'];
            rows.forEach((a, index) => {
                let card_title = a['card_title'];
                let card_text = a['card_text'];
                let card_img = a['card_img'];
                let object_id = a['_id'];
                let temp_html = `<div id="card_img${index}" class="card_img open_card" name="${object_id}">
                              <a href="#">
                                  <img style="width: 302.5px; height: 302.5px; object-fit:cover;"
                                      src="${card_img}" alt=""
                                      onerror="document.getElementById('card_img${index}').style.display='none';
                                               document.getElementById('card_txt${index}').style.display='block';">
                              </a>
                           </div>
                           <div id="card_txt${index}" class="card_txt open_card" name="${object_id}">
                               <a href="#">
                                   <h3>${card_title}</h3>
                                   <p>${card_text}</p>
                               </a>
                           </div>`;
                $('#card_area').prepend(temp_html);
            });
        });

저렇게 사용하는 건데 저걸 f-string 으로 바꿔보고 싶었다.
애초에 내가 짠 코드도 아니어서 왔다갔다 하면서 바꿔보자고 차근차근 하던 중 완전 삽질 이었다는걸 깨달았다..

바로 f-string는 파이썬에서는 되지만 js에서는 템플릿 리터럴이 그 효과를 대신하고 있다는 사실..

애초에 비슷한 기능을 다른 포멧에서 다른 이름과 방식으로 정해둔 걸 바꾸겠다고 했으니 온통 에러 천지였다.

나는 내가 뭘 잘 못 했겠거니.. 하고 우선 내가 할 수 있는 최대로 코드를 수정해 본 뒤 에러가 왜 뜨는지 찾아보겠다는 생각으로 하다가 문득 불길함에 서치를 해보고 사실을 알았다...

오늘의 교훈.
삽질도 좋고 에러를 무서워 하지 않는 것도 좋은데 기본은 알고 하자..!