Scientia Conditorium

[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 6주차 본문

서평/IT-책

[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 6주차

크썸 2024. 2. 9. 14:13

[기본 미션] p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡하기

 

 

[선택 미션] p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기

 

 

<body>
    <h1>할 일 목록</h1>
    <input id="todo">
    <button id="add-button">추가하기</button>
    <div id="todo-list">
    
    </div>
</body>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const input = document.querySelector('#todo')
        const todoList = document.querySelector('#todo-list')
        const addButton = document.querySelector('#add-button')

        let keyCount = 0
        const addTodo = () => {
            if (input.value.trim() === '') {
                alert('할 일을 입력해주세요.')
                return
            }

            const item = document.createElement('div')
            const checkbox = document.createElement('input')
            const text = document.createElement('span')
            const button = document.createElement('button')

            const key = keyCount
            keyCount += 1

            item.setAttribute('data-key', key)
            item.appendChild(checkbox)
            item.appendChild(text)
            item.appendChild(button)
            todoList.appendChild(item)

            checkbox.type = 'checkbox'
            checkbox.addEventListener('change', (event) => {
                item.style.textDecoration
                    = event.target.checked ? 'line-through' : ''
            })

            text.textContent = input.value

            button.textContent = '제거하기'
            button.addEventListener('click', () => {
                removeTodo(key)
            })

            input.value = ''
        }

        const removeTodo = (key) => {
            const item = document.querySelector(`[data-key="${key}"]`)
            todoList.removeChild(item)
        }

        addButton.addEventListener('click', addTodo)
        input.addEventListener('keyup', (event) => {
            const ENTER = 13
            if (event.keyCode === ENTER) {
                addTodo()
            }
        })
    })
</script>

 

 

6주차 간략 소감

이번 혼공단 11기 무난히 끝냈다. 자바스크립트를 사용해보면서 느낀 점은 화면에 보이는 기능들을 빠르게 구현할 수 있다 정도다. 아쉬운 점은 디버깅하기 너무 어렵다. 사람의 실수를 빠르게 잡아내기 어렵다. 예를 들어 이번 6주차 선택 미션에서도 체크박스 부분에서 실수가 있었다. 'event.target.checkd' 인데 'event.target.checkbox' 라고 적어서 취소선이 동작하지 않은 문제가 있었다. 자바스크립트 자동완성 기능에서는 checkbox가 나와서 자연스럽게 선택했던게 화근이였다. C++의 경우 이런 부분은 컴파일 단계에서 걸러주기 때문에 사람의 실수를 최대한 막아줄 수 있다. 내가 자바스크립트를 이번에 처음 배우는 것이기 때문에 제대로 활용하지 못하는 것일테지만, 실행하기 전까지 알 수 없다는 것이 불편했다.

 

혼공단도 끝났으니 이제 한빛미디어에 참여하는 이벤트로는 프리뷰어스 하나뿐이다. 지난 5년간 열심히 참여했던 '나는 리뷰어다2024'에 선발되지 못해 굉장히 아쉽다. 중도 포기자가 나오면 따로 연락줄 수도 있다고는 하지만 과연 그런 분들이 나올가 의심스럽다. '나는 리뷰어다2025'에는 선발되어 보기를 기도해본다.

저작자표시

'서평 > IT-책' 카테고리의 다른 글

[책리뷰] 초자동화 시대가 온다  (0) 2024.04.14
[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 5주차  (1) 2024.01.31
[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 4주차  (1) 2024.01.27
[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 3주차  (0) 2024.01.17
[혼공단] 혼자 공부하는 자바스크립트 / 혼공단 11기 - 2주차  (1) 2024.01.08
'서평/IT-책' Related Articles more