TIL 23.05.23

문제점

https://passionfruit6.tistory.com/106

[웹개발 종합반] 2주차 fetch

전에 작성했던 글 중에서 제이쿼리가 아닌, 자바스크립트로 식을 작성하면 id 값에 (-)이 들어간 속성에 바로 접근할 수 없는 문제가 있었다.

 

시도해본것들

1. id 값에 접근하기위해 카멜케이스로도 해보았지만 당연히 접근이 안 됨.

2. 그래서 임의로 id 이름을 변경하여 작성하니 접근은 되지만, 매번 id 값을 바꿔서 접근할수는 없음.

      function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            rows.forEach((a) => {
              let gu_name = a["MSRSTE_NM"];
              let gu_mise = a["IDEX_MVL"];

              const first = document.createElement("li");
              first.textContent = `${gu_name} : ${gu_mise}`;
              namesq1.append(first);
            }); 
          });
      }

 

해결

속성에 접근하는 방식으로 namesQ1 에 할당하니, 작동이 잘 되었음. 만약에 id 값에 하이픈이 없으면 변수에 할당하지 않고도 사용이 가능했다. 튜터님께 이 문제에 대해 말씀드리니 할당 후에, 그 변수를 다룰 것을 권하였음.

const namesQ1 = document.querySelector("#names-q1");
          
namesQ1.append(first);

 

알게된 점

기존에 공부했었던 지식을 이렇게 활용하게 되어 의미가 있었던 것 같다. 하이픈이 들어간 속성값은 할당 후 변수를 다루는 것이 안정적인 방법임.