자바스크립트 타이핑 효과

자기소개 페이지 첫 부분에
내이름을 소개하는 부분을 타이핑 효과로 구현하고 싶었다.

const content = "안녕하세요 김보윤입니다";
const typing = document.querySelector(".type");
let i = 0;

function typingMyName () {
    let txt = content[i++];
    typing.innerHTML += txt;
    if (i > content.length) {
        typing.innerHTML = "";
        i = 0;
    }
}

setInterval(typingMyName, 400);

타이핑 효과를 입힐 문장을 content에 정의한다.
html에서 문장을 입력할 태그를 typing으로 JS에 가지고 온다.

txt에 i가 0부터 1씩 커지면서 글자 한개씩 저장하고, html에 입력한다.

만약, i가 content 길이보다 커지면
html에 저장된것을 비우고, i도 다시 0이 된다.

이런 과정으로 무한 루프로 돌게 된다.

function typingMyName () {
    let txt = content[i];
    typing.innerHTML += txt;
    i++;
    if (i > content.length) {
        typing.innerHTML = "";
        i = 0;
    } 
}

직관적으로 쓰면 이런 코드일 것이다.
0번째 글자를 typing.innerHTML에 넣고 i가 1이 커지고
다시 1번째 글자를 넣고 i가 2가 되고
반복하다보면
i가 content길이만큼 커지면 if문을 따르게 되는것..!!

엄청 복잡한줄 알았는데 생각보다 간단했다!! 왕 신나:)