To Do List 만들기 (localStorage 기능 이용)

브라우저에 자료를 저장할 수 있게하는 localStorage 기능을 통해

todolist를 제작해보자.

 

 

 

필요한 기술의 이해

1. 자바스크립트의 Array에 대한 이해 및 reduce, forEach 메서드에 대한 이해
2. document 객체를 이용해서 필요한 node를 선택할 수 있는지에 대한 이해.
3. localStorage.getItem 메서드와 localStorage.setItem 메서드에 대한 이해.
4. JSON.stringify(), JSON.parse()에 대한 이해.

---

만들기 전 생각해야할 사항

1. input에 '할 일'을 작성하고 Add 버튼을 눌렀을 때, 기록한 것들이 화면에 출력되어야 함.
2. 각 '할 일' 을 클릭할 경우, 클릭한 '할 일'이 삭제되고, 수정된 부분이 화면에 출력되어야 함.
3. 화면에 출력되고, 입력되는 모든 파일들은 배열로써 Local Storage에 저장되어야 함.

화면에 출력되어야 하는 부분이 2곳 이므로, 화면에 출력하는 함수를 별도로 분리할 필요성 인지.

---

단계별 제작 (divide and conquer)

일단 input에 '할 일'을 입력하고 버튼을 누르면 화면에 출력이 되는 것만 생각한다.

 

1차 작성

• input에 '할 일'을 작성하고 Add 버튼을 누르면 input에 입력된 값이 화면에 출력되는 정도로만 구성함.
• 0번부터 4번 주석 순으로 흐름을 가져감. (내 코드가 어떤 구조로 돌아갈 지 컴퓨터적으로 흐름따라 생각)

<h1>TODO LIST</h1>
<input class="inputElement" type="text">
<button class="buttonElement">Add</button>
<div class="display"></div>
<script>
    const input = document.querySelector('.inputElement')
    const button = document.querySelector('.buttonElement')
    const display = document.querySelector('.display')
    const dataArray = []
    // 0. input에 입력된 데이터를 저장할 수 있는 어레이를 만듦.

    // 4. 화면에 출력되게 하는 함수인 render를 작성.
    const render = () => {
        display.innerHTML = dataArray.reduce((acc, e) => {
            return acc + `<h2>${e}</h2>`
        }, '')
    }


    // 1. 버튼을 누르면 어떤 동작이 일어날 지 설계
    button.onclick = () => {
        //2. dataArray 배열에 input에 입력된 것이 들어갈 수 있도록 만듦.
        dataArray.unshift(input.value)
        //3. 화면에 출력되게 하는 함수를 넣어야 함
        render()
    }
</script>

---

 

2차 작성

• 화면에 출력된 각 '할 일'을 클릭하면 그 '할 일'이 사라지고, 다시 재정렬되어 화면에 출력될 수 있도록 함.
• 필요기술 : 화면에 출력된 선택해야할 노드(DOM)들을 모두 선택하여 어레이화 할 수 있는 document.querySelectorAll
• 어레이의 모든 element를 순회하며, 오리지날 어레이를 수정하는 메서드인 forEach()
• 배열을 잘라내고 재정리할 수 있는 메서드인 splice()

<h1>TODO LIST</h1>
<input class="inputElement" type="text">
<button class="buttonElement">Add</button>
<div class="display"></div>
<script>
    const input = document.querySelector('.inputElement')
    const button = document.querySelector('.buttonElement')
    const display = document.querySelector('.display')
    const dataArray = []

    const render = () => {
        display.innerHTML = dataArray.reduce((acc, e) => {
            // 5. dataArray의 엘리먼트가 reduce를 통해 <h2> 태그를 달고 화면에 출력됨
            return acc + `<h2>${e}</h2>`
        }, '')
        const todos = document.querySelectorAll('h2')
        // 6. h2 태그를 단 모든 dom 요소들은 querySelectorAll에 의해 배열화된 노드리스트가 됨
        todos.forEach((e, i)=>{
            // 7. 배열화된 각 노드들에게 forEach를 통해 이벤트를 부여함. 
            return e.onclick = () => {
                // 7-1. 노드를 클릭할 경우
                dataArray.splice(i, 1)
                // 7-2. splice를 이용해 dataArray의 해당 인덱스 부분을 하나 자르고 재정리함.
                render()
                // 수정된 dataArray를 다시 렌더링함.
            }
        })
    }

    button.onclick = () => {
        dataArray.unshift(input.value)
        render()
    }
</script>

---

 

3차 작성(완성 코드)

• 이제 보이는 기능들은 다 만들었음.
• 해당 기능들을 유지한채로, dataArray를 로컬 서버에 저장하는 방법을 구상하면 됨.
• localStorage.getItem(string) : 로컬스토리지에서 string에 해당하는 키 값을 쓰는 값들을 불러옴
• localStorage.setItem(string, data) : 로컬스토리지에 string에 해당하는 키 값을 붙여 data를 저장함
• JSON.stringify() : argument를 string화 함. (인터넷에서는 자료형이 아닌 문자열로 데이터를 주고받기 때문임)
• JSON.parse() : argument의 string을 해제함. ( 자료형으로 만듦)

<h1>TODO LIST</h1>
<input class="inputElement" type="text">
<button class="buttonElement">Add</button>
<div class="display"></div>
<script>
    const input = document.querySelector('.inputElement')
    const button = document.querySelector('.buttonElement')
    const display = document.querySelector('.display')
    // ** 로컬스토리지에 저장할 todolist의 키 이름은 todoStorage로 하기로 결정.
    // 8. 처음 접속했을 때, 로컬스토리지에 todoStorage가 있으면 그것을 불러오고, 값이 없다면(falsey),
    // 빈 어레이를 불러옴
    const storageArray = localStorage.getItem('todoStorage') || '[]'
    // 8 - 1. 서버와 데이터를 주고받는 것은 문자열인 상태로 주고받으므로 반드시 문자열화를 생각해야함.
    const dataArray = JSON.parse(storageArray)
    // 9. 받아온 storageArray를 parse하여 문자열화를 해제함(JS에서 쓸 수 있게 자료화 함)

    const render = () => {
        display.innerHTML = dataArray.reduce((acc, e) => {
            return acc + `<h2>${e}</h2>`
        }, '')
        const todos = document.querySelectorAll('h2')
        todos.forEach((e, i)=>{
            return e.onclick = () => {
                dataArray.splice(i, 1)
                // 12. 노드를 클릭해서 삭제를 하는 것은 곧 dataArray에 변경이 생기는 것이므로, 
                // 이 경우에도 setItem을 통해 로컬스토리지에 새 값을 저장하게 함.
                localStorage.setItem('todoStorage', JSON.stringify(dataArray))
                render()
            }
        })
    }

    button.onclick = () => {
        dataArray.unshift(input.value)
        // 10. 버튼을 클릭했을 경우 input에 입력된 값이 dataArray로 들어갈 수 있게 함.
        localStorage.setItem('todoStorage', JSON.stringify(dataArray))
        // 11. 동시에, 수정된 dataArray를 setItem을 통해 로컬스토리지로 보냄.
        // 11 - 1. 중복된 키값이 있을 경우, 새로운 자료를 업데이트 하는 형식으로 로컬스토리지에 저장하게 됨.
        render()
    }
</script>

---

 

배운 점

코드를 작성할 때, 문제 단위가 크다면

작은 기능단위(당장 구현할 수 있는 단위)에서 시작해서

큰 기능단위를 구성해야 함.

 

또 기능을 다 적어본 뒤 중복되는 기능이 있을 경우

그것을 함수화해서 호출할 수 있도록 구성해야 함.

 

그러므로

 

코드를 작성하기 전에

내가 구현해야 하는 것이 무엇인지

정말 세세한 단위부터 하나하나 손으로 써보고

어떻게 구성할 지 생각해보는 것이 필요.