오류와 리팩터링

<script>
function typing_hwang() {
    const content = "필요텍스트"
    const text = document.querySelector(".text2")
    let index = 0;

    function sleep(delay) {
        const start = new Date().getTime();
        while (new Date().getTime() < start + delay) ;
    }

    function typing() {
        text.textContent += content[index++];
        if (index > content.length) {
            text.textContent = ""
            index = 0;
            sleep(1000);
        }
    }

    setInterval(typing, 200)
}
</script>

기존에 팀에서 사용하던 타이핑 애니매이션을 포함한 코드다. 이 코드를 $('documet').ready()에 넣고 사용했는데 비동기적 호출이 200ms 마다 호출되면서 다른 함수들이 우선순위가 밀려 리로딩이 계속 일어났다.(여러 페이지를 둔 것도 아니고 프레임워크를 활용한 spa도 아니고 그냥 원페이지 사이트다보니 더 그런 것 같기도 하다.) 어떻게든 함수를 살려서 사용하기 위해서 노력해봤지만 기존의 목적에 부합하지 않아서 폐기할 수밖에 없었다.

• 버튼을 누르는 등 상호작용 없이 이 코드가 반복적으로 돌아갔으면 좋겠다.
• 4명의 사람에 대한 소개이다 보니 각각 제어해야하는 class가 다르고 나와야하는 텍스트도 다르다

이 조건에 맞게 코드를 고치다가 문득 자바스크립트로 이 클래스를 꼭 제어할 필요가 있나 하는 생각이 들었다. 결국 css로 타이핑 애니매이션 코드를 만들었다.

<style>
.text1, .text2, .text3, .text {
    animation: typing 3s steps(15) infinite, blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-size: 38px;
}
</style>

코딩을 하다보면 내가 기존에 맞다고 생각했던 것들 때문에 시야가 가려지곤 하는데 그때마다 거기서 벗어나서 새로운 시야로 상황을 봐야겠구나라고 생각을 했다. 오늘 하루도 즐겁게 코딩했다.