Chat input + delay typing

채팅창처럼 내가 쓴 대화 내용이 저장되면서,

적은 타이핑은 200ms씩 딜레이되며 출력되는 구조의 html 문서를 만드는 연습이다.

start를 누르면 input에 입력된 글자들이 200ms마다 하나씩 출력된다.

---

본인 풀이 전 생각)

 

풀기 전에 html의 구조를 먼저 짜고, 필요한 클래스와 추가적인 구조를 생각한다.

1) h1과 div가 각각 하나씩 있어야 이 전 기록들을 저장하면서 하나씩 뒤로 밀 수 있다고 생각했다.

2) 반복적인 기능은 input에 문자열을 넣고 Start를 누르면 글자가 하나씩 출력되는 기능이다.

 - 이에 따른 함수를 만들어야 한다.

3) 모든 기능은 Start 버튼을 눌렀을 때 시작된다.

 

 

풀이)

<input class="input" type="text">
<button class="button">Start</button>
<h1 class="display"></h1>
<div class="div"></div>
<script>
    const input = document.querySelector('.input')
    const button = document.querySelector('.button')
    const display = document.querySelector('.display')
    const div = document.querySelector('.div')

    const delayStr = (str, i = 0, result = "") => {
        setTimeout(() => {
            if (str.length === i) return
            result = result + str[i]
            display.innerText = result
            return delayStr(str, i + 1, result)
        }, 200);
    }

    button.onclick = () => {
        const str = input.value
        const displayValue = display.innerText
        input.value = ""
        display.innerText = ""
        div.innerHTML = `<h1>${displayValue}</h1>` + div.innerHTML
        delayStr(str)
    }

</script>

제대로 동작한다.

 

동작 순서)

1. html의 각 요소를 querySelector로 표기해준다.
2. button을 누르면 동작이 시작된다.
3. input의 값이 str에 저장되고, h1의 값은 displayValue에 저장된다.
4. input과 display를 비워준다.
5. div.innerHTML에 displayValue와 div.innerHTML을 합쳐주어 기록이 계속 저장되게 한다.
6. delayStr 함수에 (str)을 인수로 넣어준다.
7. delayStr 함수는 문자열을 인수로 받으면 200ms마다 한번씩 str[i]을 늘려가며 출력한다.

 

---

리팩토링 및 답지 확인)

<input class="strInput">
<button class="start">Start</button>
<h1 class="display"></h1>
<div class="container"></div>
<script>
    const strInput = document.querySelector('.strInput')
    const startbutton = document.querySelector('.start')
    const display = document.querySelector('.display')
    const container = document.querySelector('.container')

    const displayStr = (str, i = 0, result = "") => {
        if (i === str.length) {
            display.innerText = ""
            container.innerHTML = `<h1>${str}</h1>${container.innerHTML}`
            return
        }
        setTimeout(() => {
            const newResult = `${result}${str[i]}`
            display.innerText = newResult
            displayStr(str, i+1, newResult)
        }, 200);
    }

    startbutton.onclick = () => {
        displayStr(strInput.value)
        strInput.value = ""
    }
</script>

 

---

 

답지를 보고 내것을 보니

내 답은 살짝 틀렸다는 것을 알았다.

 

내 정답은 버튼을 눌렀을 때, 연산이 끝까지 가지 않는다.

즉, 눌러야만 onclick은 onclick으로만 남아있어야 한다.

그게 아니라면 최소한의 기능만 남아있어야 한다.

 

배운 점

문제를 해결하기 전에, 요구사항이 뭔지 좀 더 면밀하게 파악해야 한다.

기능의 시작점(여기서는 onclick)은 최소한의 기능만 가질 수 있도록 한다.