[TIL] 2023년 9월 12일 화요일

목표 순공 시간 : 6h
나의 순공 시간 : 6h 이상. 
JS 에러를 2개 해결하면서, 배운것이 많은 ...

 

1. 자바스크립트 공부

1-1. 로그인 했을 시에만, 작동되는 window.onload 전체코드에 대한 이해 

window.onload = () => {
    // 페이로드를 로컬스토리지에 저장하고, 페이로드에 있는 사용자 정보를 가져옴
    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}님 안녕하세요!`
    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)
    let loginButton = document.getElementById("login-button")
    loginButton.style.display = "none";
}

위 코드는, 페이지를 로드하는 모든 과정에 대해서 window.onload()를 하는 JS 코드이다. 

https://ksw4060.tistory.com/164

어제 작성했던 글과 같이, 페이지를 로드하는 모든 과정에 대해서 
위 코드가 실행이 되는데 

왜 로그인을 했을 때에만, 위 코드가 실행되는지 궁금해서 

여러 동기들과, 캠프때 JS 강의를 해주셨던 권기현 튜터님에게 여쭤보았고 

깨달음을 얻게 되었다.. 결론 : JS 는 동기적인 언어이기 때문. 

 

 

JS Promise 에 대한 이해와 코드개선 경험

위에서 보았던 전체 코드를 window.onload 가 아닌, if else 문으로 개선하고 싶었다.

window.onload = () => {
    // 페이로드를 로컬스토리지에 저장하고, 페이로드에 있는 사용자 정보를 가져옴
    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}님 안녕하세요!`
    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)
    let loginButton = document.getElementById("login-button")
    loginButton.style.display = "none";
}

이 코드는, 안타깝게도 로그인을 하지않은 모든 페이지를 로드하는 과정에서

TypeError 를 console 창에 띄워주었다. 

[개선 이유1]
그렇게 되면, 나중에 회사에 들어가 팀원들과 함께
코드를 유지 & 보수하는 과정에서 
어려움이 있을 수도 있고 

[개선 이유2]
지금은 한창 공부하는 과정이기 때문에 

[개선 이유3]
JS 는 앞으로 비동기 처리를 할 일이 많고, 
동시에 여러가지 비동기 함수들이 실행되면, 거의 90% 이상 
비동기처리에 대한 안좋은 프로세스나 처리과정이 생길 것이기 때문에 

코드를 개선해보았다. 

[공부 했던 내용들]
1. JS 에서 if else 문을 작성하는 방법과
2. 동기/ 비동기 처리 및 콜백함수, 프로미스에 대한 이해가 필요했다. 

아래는 완성된 코드이다. 

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


fetch("./navbar.html").then(response => {
    return response.text()
})
    .then(data => {
        document.querySelector("header").innerHTML = data;
		// 1. header 라는 속성에 innerHTML 에 먼저 navbar.html 코드(데이터)를 담아주고 
        buttonBlockAndHide();
		// 2. 아래의 buttonBlockAndHide 함수를 순차적으로 실행한다. 
    })


const buttonBlockAndHide = () => {
    // 페이로드를 로컬스토리지에 저장하고, 페이로드에 있는 사용자 정보를 가져옴

    const payload = localStorage.getItem("payload");
    const payload_parse = JSON.parse(payload);
    const intro = document.getElementById("intro")
    if (payload) {
        intro.innerText = `${payload_parse.username}님 안녕하세요!`
        // 1. 로그인 성공 시, 로그인 버튼을 숨기고
        // 2. 로그아웃 버튼을 생성한다.
        // 3.

        console.log("로그인 버튼 Hide")
        let loginButton = document.getElementById("login-button")
        loginButton.style.display = "none";
        // 로그아웃 버튼을 ul 안에 li 로 생성
        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.setAttribute("id", "logout-button")
        logOutBtn.innerText = "로그아웃"
        logOutBtn.setAttribute("onclick", "handleLogout()")

        newLi.appendChild(logOutBtn)
        navberULRight.appendChild(newLi)

        // let logoutButton = document.getElementById("")
    } else {
        console.log("로그인 버튼 Block")

    }
}

코드를 이렇게 작성하기 전에, 타입 에러가 나오게 되었는데

그이유는, Promise 객체에 대한 비동기 처리를 제대로 하지 않아서 였다 .

 

window.onload 를 통해서, 로그인 버튼과 로그아웃 버튼을 숨기고 나타내는 것과

fetch, then 을 통해서, navbar를 모든 html 파일에 불러오는 것의 비동기처리때문인데

 

현재 코드에서는, 먼저 모든 html 파일에 navbar.html 을 상단에 불러오고

불러온 navbar.html 코드를 토대로

로그인을 했을 때에는, 로그인 버튼을 삭제하고 로그아웃 버튼이 나오도록 해야하는 

순차적인 처리를 해야하는 것이다. 

 

그런데, window.onload 와 fetch 함수는 순차적으로 처리되지 않고, 동시에 실행되기 때문에
navbar.html 을 제대로 읽어오지 못하고 null 에 대한 타입에러가 발생되었던 것이다. 

그래서 노션에 적어가며, 동기/비동기 콜백처리에 대한 개념과
Promise 에 대한 개념을 공부해보았다. 

https://www.notion.so/d64a4eeb40b14ba69e8d12313ca2ffe5?pvs=4 

비동기 처리와 콜백 함수

https://www.notion.so/JS-Promise-abb52b3c0437467d99011bbcc7986649?pvs=4 

JS Promise 이해하기

아직 Promise를 제대로 이해한 것이 아닌 것 같아서, 앞으로
질 좋은 코드를 작성하다보면 Promise 와 비동기처리에 대한 내용이
숙련이 될 것이라 생각한다. 

 

 

2. 컴퓨터구조와 운영체제에 대한 CS 지식 공부

공부하는 내용들을 노션에 기록할 것인데, 추후 자주 읽어보면서 
CS 개념들에 대해 가까워지기 위해서이다. 

좀더 개념들에 대해 가까워지고, 이해도가 높아지면 
알아서 깊이가 있어질 것이다 믿는다. 

여기서 가장 기본적이고, 먼저 알아야 할 것들을 공부하고
다시 앞으로 돌아가서 우선순위 순으로 공부하는 식으로 할 것이다.