마이페이지 JS

 

#api.js

export async function getUserInfo(user_id) {
    const response = await fetch(`${BACK_BASE_URL}/api/users/${user_id}/`)

    return response
}

 

#mypage.js

// onlaod -> 순서를 마지막으로 보내줌 (* import가 있는 경우 중복 검증 때문에 하나만 있는게 좋음)
window.onload = async () => {
  const payload = localStorage.getItem("payload");
  const payload_parse = JSON.parse(payload)

  const urlParams = new URLSearchParams(window.location.search);
  let searchID = urlParams.get('user_id');
  console.log(searchID)
  searchID = searchID == null ? payload_parse.user_id : searchID
  const response = await getUserInfo(searchID)

  const response_json = await response.json()
  console.log(response_json)

      // 성공했을때만 값을 변경함
  if (response.status == 200) { 
      // htmil의 id값을 가져아서 변수에 저장
      const email = document.getElementById("user-email")
      const username = document.getElementById("user-name") 
      const profile_image = document.getElementById("user-image")
      const bio = document.getElementById("user-bio")
        
        // 변수 안에 들어갈 텍스트를 응답값으로 변경
      email.innerText = response_json.email
      username.innerText = response_json.username
      bio.innerText = response_json.bio
      console.log(response_json.bio)
      console.log(response_json.username)
      console.log(response_json.email)
      
      // 이미지 값 변경이 있을때만 수정
      if (response_json.profile_image != null) {
        profile_image.setAttribute("src", `${BACK_BASE_URL}${response_json.profile_image}`)
      }
        } else if (response.status == 404) {
              console.log("찾는 계정이 없습니다 ")
       } 
// api.js(통신) 에서 응답값으로 데이터를 받아서  통신을 api.js로 옮겨야함 
// fetch 로 백앤드와 통신하는 과정을 api.js로 옮기고
// api.js 받아온 응답값을 다시  mypage.js로 가져와서
// status코드값에 따라 데이터를 적절히 html에 넣어준다

        console.log(response_json.profile_image)
        }