[JS] 글자 한글자씩 출력하기

구글링이란 것도 뭘 그래도 좀 알아야하고 다른사람이 친 코드를 해석할 줄 알아야 따라할 수 있다. 나는 아직 그정도 급은 아닌가보다 ㅎㅎ

자바스크립트로 타이핑 효과를 구현해 보고 싶어서 구글링을 시작했다.
한 글자씩 출력하는 것 이외에 지웠다가 다시 출력할 수도, 텍스트 커서가 계속 깜빡이는 효과 등 더 발전시켜서 구현한 사람들도 있었다.

나도 이 모든걸 구현해내고 싶었다.

하지만,
막상 VS Code를 켜고 혼자 코딩을 하려니 정말 막막했다.
나 이래서 뭐 하나 제대로 만들수나 있겠나도 싶었다.
짧은 시간에 좌절을 몇번이나 한지😥

다시 마음을 다잡고 내가 할 수 있는 것으로 짧게라도 해보자 다짐했다.

HTML

<div class="home__title"></div>

일단 div 박스 하나 만들고 class로 home__title을 주었다.

JS

const homeText = document.querySelector('.home__title');

const content = '저는\n____한\n사람입니다.';
let count = 0;

function typing() {
  homeText.innerText += content[count++];
  if (count > content.length) {
    homeText.innerText = '';
    count = 0;
  }
}

setInterval(typing, 300);

1. class를 home__title로 지정한 div태그를 homeText라는 변수에 담았다.
2. content라는 변수에 타이핑효과를 내고 싶은 문장을 적었다.
3. 변수 content의 문자열을 배열의 형태로 인덱스를 주면서 하나씩 꺼내올 예정이다.
4. count라는 변수로 하나씩 카운팅하면서 innerText로 homeText에 한 글짜식 추가해주면 끝이다.
5. 단 작업이 끝날 때마다 count를 1씩 증가시킨다.
6. 만약 count의 숫자가 content의 배열의 길이보다 커지면 count를 초기화 시켜 주어 반복 재생될 수 있도록 만들어준다.
7. 이 과정을 typing이라는 함수를 만들어 넣어준다.
8. 마지막으로 setInterval 함수를 통해 300ms 마다 반복시켜준다

innerText를 쓴 이유

• TextContent는 단순히 문자열을 추가하기에 좋다.
• 하지만 문자열 안에 html 코드나 이스케이프 문자를 넣으면 화면에 그대로 출력이 되는 특징을 가지고 있다.
• 나는 한 문장이 아닌 3줄로 화면에 보여주고 싶어서 \n 이스케이프 문자를 쓸 수 밖에 없었다.

setTimeout vs setInterval

• setTimeout : 일정 시간이 지난 후에 1번만 실행된다
• setInterval : 일정 시간 간격을 두고 계속 실행된다