Uncaught TypeError: Cannot read properties of null(reading: 'push')

예전에 만들었던 Todo List를 로컬스토리지로 변경하고 싶어서 변경하던 중 초반부터 난관에 봉착해벌임..
할일입력하는 칸에 입력하고 추가 버튼을 누르는순간 나타나는 귀여운 에러!!
대충 새로운 todo를 만들어서 todoList에 추가를 하다가 에러가난것같다.

에러난 부분의 코드는 아래와 같다.

기존코드1

let todoList = [];
let key = 0;

function addTodo()
{
    let text = $("#todo").val(); //input에 입력된 값 저장
    let currentDate = new Date(); //현재 날짜 생성

    //새로운 투두 생성
    let newTodo = {
        index: key,
        text: text,
        checked: false,
        date: writeDate
    }
    
    todoList.push(newTodo);
    key++;
}

그래서 뭐가 문제인가하고 슬쩍봤는데..
음..? 도대체 어디서 에러가 난건지 감이 안잡힌다 ㅠㅠ
중간중간에 console.log를 찍어보았는데, 어느순간 todoList가 null로 바뀌어있더라..?

그래서 이 부분이 문제가 아닌듯하여 다른 코드를 살펴보기 시작했다.

기존코드2

// 이전에 작성한 투두리스트를 불러오는 함수
function loadTodoList()
{
    let checking = window.localStorage.getItem("todoList"); //로컬스토리지의 todoList를 가져옴
    let changeData = JSON.parse(checking); //가져온 todoList를 object형태로 변경;
    todoList = changeData; //todoList를 changeData로 변경 <-얘가 문제

    //로컬스토리지에 데이터 있으면 추가
    if(checking)
    {
        //html에 todoList추가
        for(let i = 0; i < todoList.length; i++)
        {
            $("#todoList").append(appendTodoList(todoList[i].index, todoList[i].text, todoList[i].checked));
        }
    }
}

투두 리스트 페이지가 열리면 loadTodoList()가 실행되게 해놨는데,
초기에는 로컬스토리지에 데이터가 없으니 todoList에 null값이 저장되는것이였다.
단순 실수!

수정코드

function loadTodoList()
{
    let checking = window.localStorage.getItem("todoList"); //로컬스토리지의 todoList를 가져옴
    let changeData = JSON.parse(checking); //가져온 todoList를 object형태로 변경;

    //로컬스토리지에 데이터 있으면 추가
    if(checking)
    {
        todoList = changeData; //todoList를 changeData로 변경
        //html에 todoList추가
        for(let i = 0; i < todoList.length; i++)
        {
            $("#todoList").append(appendTodoList(todoList[i].index, todoList[i].text, todoList[i].checked));
        }
    }
}

요렇게 todoList = changeData위치를 if(checking)안으로 바꿔줬더니 오류가 해결됐다.

사실 이렇게 수정하고나니 별거아닌것같은데..
오류가 나고 수정까지의 시간은 고통의 시간이었다 ㅠ