섹션 1-3 추론 질문드립니다

1. 2.

   

1. 영상에서 설치하라는 것 다 똑같이 따라했는데 이부분 영상에서처럼 상자모양?별모양?으로 나오지 않습니다. 어떻게 해야할까요?

2. 두번째 사진에 city도 나오지 않습니다 ㅠ

   

    

3. 스크립트 전문입니다

// api url
var url = "https://jsonplaceholder.typicode.com/users/1";

// dom
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var address = document.querySelector("#address");

// user data
var user = {};

function fetchUser() {
  return axios.get(url);
}

/**
 * @typedef {object} Address
 * @property {string} street
 * @property {string} city
 */

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */
/**
 * @returns {Promise<User>}
 */

fetchUser().then(function (response) {
  response.address;
});

function startApp() {
  // axios
  //   .get(url)
  fetchUser()
    .then(function (response) {
      // console.log(response);
      user = response.data;
      // TODO: 이름, 이메일, 주소 표시하기
      console.log(user);
      username.innerText = user[0].name;
      email.innerHTML = user[0].email;
      // 그냥 문자열이 아니라 객체였음(키:밸류 값)
      address.innerHTML = user[0].address.street;
    })
    .catch(function (error) {
      console.log(error);
    });
}

startApp();
// /**
//  *@param {number} a
//  *@param {number} b
//  *
//  */

// function sum(a, b){
//   return a+b;
// }
// SubmitEvent(10,20)

fetchUser()
  .then(function (response) {
    // console.log(response);
    user = response.data;
    // TODO: 이름, 이메일, 주소 표시하기
    console.log(user);
    username.innerText = user.name;
    email.innerHTML = user.email;
    address.innerHTML = user.address.street;
  })
  .catch(function (error) {
    // 에러 처리
  });