[TIL] 240620 캠프 67일차: HTML파일에서 script로 API 사용하기, 객체에서 속성의 값에 접근하는 2가지 방식: [ ] 와 .

오늘 배운 내용                                     

HTML파일에서 script로 API 사용하기

tower_defense 게임을 웹소켓으로 제작하는 이번 팀 프로젝트에서 랭킹 페이지에 접속하면 해당 top 10 리스트를 html페이지로 출력하고 싶었다. 하지만, 매번 API에 대한 데이터는 Insomia와 같은 프로그램으로 받았었기 때문에 html페이지에 출력하는 방법은 낯설었다. 그러다 팀원의 코드를 참고하여 HTML파일에서 script로 API를 받아오는 방법을 알게되었다. 내가 짠 해당 코드는 다음과 같다.

<script type="module">
      async function loadRankingData() {
        const $tableBody = document.getElementById("ranking-table-body");

        try {
          // 서버로부터 랭킹 데이터를 가져옴
          const res = await fetch('http://localhost:3000/api/ranking', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include'
          });

          console.log(res); // 응답 객체를 확인하기 위한 로그

          if (!res.ok) {
            alert('랭킹 데이터 조회 실패');
            return;
          }

          const { filterdRanking: rankingList } = await res.json();
          console.log(rankingList); // 랭킹 데이터를 확인하기 위한 로그

          // 랭킹 데이터를 테이블에 추가
          rankingList.forEach((rank, index) => {
            const row = document.createElement("tr");
            row.innerHTML = `
                      <td>${index + 1}</td>
                      <td>${rank.id}</td>
                      <td>${rank.score}</td>
                  `;
            $tableBody.appendChild(row);
          });
        } catch (error) {
          console.error("Error fetching ranking data:", error);
          alert('랭킹 데이터를 불러오는 중 오류가 발생했습니다.');
        }
      }

      // 페이지 로드 시 랭킹 데이터를 가져오도록 호출
      loadRankingData();
    </script>

 

fetch를 통해 API에 있는 데이터를 가져올 수 있었다. fetch는 비동기 함수이기 때문에 await를 사용하였고, 그렇게 가져온 데이터를 다시 한 번 await를 사용해 데이터를 가져왔다.(두번째 await는 꼭 필요한 내용인 지는 확인해봐야한다) 제대로 데이터를 불러온 후로는 쉽기 때문에 그대로 테이블 형식으로 랭킹 데이터를 테이블에 추가하였다. 결과는 다음과 같이 정상적으로 나왔다.

 

자바스크립트 객체에서 속성의 값에 접근하는 2가지 방식: [ ] 와  .

자바스크립트에서 객체의 속성의 값은 [ ]로 얻을 수 있고, .으로도 얻을 수 있다. 하지만, 얻는 방식이 조금 다르다.

점('.')을 사용하는 방식은 해당 속성의 이름으로 접근하는 방식으로, obj1.a과 같이, 해당 객체(obj1)에 해당 속성(a)의 값을 접근하면 된다. 

하지만, 대괄호('[ ]')를 사용하는 방식은 속성의 이름을 그대로 넣을 수 없으며, 항상 문자열로 접근해야한다. 이 둘의 차이는 다음과 같다. 

 

예시 1

const obj1 = {a: 1};

console.log(obj1.a);	// 1
console.log(obj1[a]);	// ReferenceError: a is not defined

 

예시 2

const obj1 = {data: 1};

const prop = "data";

console.log(obj1.data);		// 1
console.log(obj1["data"]);	// 1
console.log(obj1[prop]);	// 1

 

 

오늘 한 일                                       

• tower_defense 팀프로젝트 마무리 작업
  • ✨ update 내용 유저의 현재 점수를 서버에서 저장 및 관리하는 코드 추가 및 적용
  • ✨ update. 게임 골드 동기화, 🐛 bugfix. 몬스터 기지 충돌 시 오류
  • ✨ update. 점수 랭킹 페이지 제작(적용은 따로 안함)