JS window.onload() 에서 TypeError로 로그인/로그아웃시 로그인 버튼의 유무 적용

https://www.youtube.com/watch?v=A8j1cnuEI9M 

navbar 에서 로그인/ 로그아웃의 유무에 따라 
로그인을 하지 않았을 때 -> 로그인 버튼이 보이고 
로그인을 했을 때 -> 유저네임과 로그아웃 버튼이 생기도록 하는 
js 구현이었다. 

글을 읽고, 조금만 생각해봐도 if else 구문이 있어야하는 코드인데 
코드를 보면 if else 구문이 없다. 

그런데, 로그인 유무에 따라 버튼이 사라지고/있고가 잘 작동된다. 

문제는 window.onload 를 통해서 다음의 코드를 실행하는데

console.log("index.js 가 잘 로딩 되었습니다.")

window.onload = () => {
    // 페이로드를 로컬스토리지에 저장하고, 페이로드에 있는 사용자 정보를 가져옴
    const payload = localStorage.getItem("payload");
    const payload_parse = JSON.parse(payload)

    // console.log(payload)
    // console.log(typeof payload)
    // console.log(payload_parse)
    // console.log(typeof payload_parse)
    // console.log(payload_parse.email)
    // id가 intro 인 곳에 페이로드에 있는 사용자 이름 payload_parse.username 을 innerText로 저장함.
    const intro = document.getElementById("intro")
    intro.innerText = `${payload_parse.username}님 안녕하세요!`

    let navberULRight = document.getElementById("navbar-right")
    let newLi = document.createElement("li")
    newLi.setAttribute("class", 'nav-item')
    let logOutBtn = document.createElement("button")
    logOutBtn.setAttribute("class", 'navbar-link btn')

    logOutBtn.innerText = "로그아웃"
    logOutBtn.setAttribute("onclick", "handleLogout()")

    newLi.appendChild(logOutBtn)
    navberULRight.appendChild(newLi)
    console.log("로그인 버튼에 display =none 전까지 읽힐까요 ??")
    let loginButton = document.getElementById("login-button")
    loginButton.style.display = "none";
}

이 코드가 도대체 왜 ????

WHY ???

로그인 했을 때만 읽혀지고, 
로그인 하지않을 때에는 읽혀지지 않는가에 대한 
의구심이었다. 

window.onload 는 url를 입력하는 등 
페이지를 읽어올 때 무조건 실행하는 함수인데 

왜 로그인 하지 않았을 때에는 읽어오지 못할까 ??

한 40분정도 생각해본 결과, 

index.js 코드 15번째 줄에서 TypeError를 나타내고 있고

그곳에 있는 코드를 보면 

const payload = localStorage.getItem("payload");
const payload_parse = JSON.parse(payload)

// id = intro 인 곳에 페이로드에 있는 사용자 이름 payload_parse.username 을 innerText로 저장함.
const intro = document.getElementById("intro")
intro.innerText = `${payload_parse.username}님 안녕하세요!`

백엔드에서 simple JWT를 이용한 로그인을 시도했을 때 

JWT token 의 페이로드를 

payload_parse 라는 변수에 저장하고

id='intro' 인 곳의 innerText 에 payload_parse.username를 입력하는 15번째 줄에서 

백엔드 API에서 페이로드를 프론트엔드 JS로 읽어오는데 실패했기 때문이었다. 

그래서 15번째줄에 있는 페이로드 데이터를 불러오는데 실패했기 때문에 

맨 아랫줄에 있는 

console.log("로그인 버튼에 Hideㄱ전까지 읽힐까요 ??")
let loginButton = document.getElementById("login-button")
loginButton.style.display = "none";

코드는 읽혀오지 않았고

 

그래서 로그인을 하지 않았을 때에는 TypeError를 콘솔창에 띄우며

로그인 버튼이 사라지지 않는 것이다. 

로그인에 성공하면, 띄워지는 ..