텍스트 변경해 가며 쓰기

원하는 텍스트들을 번갈아가며 화면에 썼다가 지웠다 하는 방법을 알아보도록 하겠습니다. 

 

소스 코드 먼저 살펴보도록 하겠습니다. 

(function() {
    const spanEl = document.querySelector("main h2 span");
    const txtArr = ['는 산업자동화', '는 레벨센서', '는 유량계', '는 압력계', '는 온도계', '는 최고입니다.'];
    let index = 0;
    let currentTxt = txtArr[index].split("");
    function writeTxt()
    {
      spanEl.textContent  += currentTxt.shift(); 
      if(currentTxt.length !== 0)
      { 
        setTimeout(writeTxt, Math.floor(Math.random() * 100));
      }
      else
      {
        currentTxt = spanEl.textContent.split("");
        setTimeout(deleteTxt, 1000);
      }
    }
    function deleteTxt()
    {
      currentTxt.pop();
      spanEl.textContent = currentTxt.join("");
      if(currentTxt.length !== 0)
      {
        setTimeout(deleteTxt, Math.floor(Math.random() * 100))
      }
      else
      {
        index = (index + 1) % txtArr.length;
        currentTxt = txtArr[index].split("");
        writeTxt();
      }
    }
    writeTxt();
  })();

 

필요한 개념 먼저 살펴보도록 하겠습니다. 

 

(function () {
    //...
})();

javascript에서 즉시 실행 함수(IIFE, Immediately-invoked function expression)이라는 개념이 있습니다. 이는 정의되자마자 즉시 실행되는 Javascript Function를 말합니다. 

함수를 정의하자마자 바로 호출하는 것을 즉시 실행함수라  말합니다. 

즉시 실행 함수 종류가 총 2가지 있습니다. 첫 번째로는 기명 즉시 실행 함수이고, 두 번째로는 익명 즉시 실행 함수입니다. 이름에서도 알 수 있듯이 기명은 이름이 있는 것을 의미하고 익명은 이름이 없는 것을 의미합니다. 저는 익명 즉시 실행 함수를 사용했습니다. 

 

document.querySelector(선택자);

querySelector 함수는 입력받은 선택자를 통하여 요소를 찾는 것입니다. 근데 선택자가 공백을 기준으로 여러 개가 적힌다면 자손 태그를 가리킵니다. 예를 들어서 "E1 E2 E3"와 같이 선택자에 적힌다면, E1의 자손 E2를 찾고 E2의 자손 E3를 찾게 됩니다. 이에 해당하는 요소가 여러 개가 있다면 가장 첫 번째의 요소를 리턴합니다. 

 

setTimeout(code, delay);

delay 시간만큼 기다린 후에 code를 실행하게 됩니다. 

 

const str = 'Hello world';

const chars = str.split('');
console.log(chars.shift());  //H
console.log(chars.join(""));  //ello world

split은 인자를 기준으로 split 하여 배열을 반환을 하는 것입니다. 

shift는 첫 번째 요소를 리턴하고 원래의 배열에서는 pop 하는 것입니다. 

join은 배열의 모든 요소를 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환합니다. 만약 지정된 구분 문자열이 없을 경우에는 이어서 붙입니다. 

 

이제 로직을 간단하게 설명해 드리도록 하겠습니다. 

 

맨 처음에 말씀드린 것처럼 위의 함수는 즉시 실행함수이므로 바로 실행이 됩니다. 

writeTxt와 deleteTxt 함수를 선언을 한 후에 writeTxt 함수를 실행합니다. 문자를 하나씩 저장한 currentTxt에서 shift 메서드를 사용하여 하나씩 뽑아내어 spanEl에 이어 붙입니다. 만약 currentTxt에 문자가 남아 있다면 특정 시간 후에 다시 writeTxt를 실행하고 currentTxt에 더 이상 문자가 없다면 spanEl의 textContent의 문자열을 뽑아내어 currentTxt에 문자를 하나씩 끊어 배열로 저장하고 deleteTxt를 특정 시간 후에 실행합니다. 

deleteTxt함수에서는 우선 맨 마지막 문자를 지웁니다. 그 후에 join을 통하여서 배열로 되어있던 것을 특정 구분자를 통해(여기서는 구분자를 정의하지 않으므로 바로 붙임) textContent를 만들어 냅니다. pop을 통하여 currentTxt의 크기가 0이라면 index의 크기를 조정하고 currentTxt도 적절하게 배열로 만들어 낸 후에 writeTxt를 다시 실행합니다. 반면에 그렇지 않을 경우에는 특정 시간 후에 다시 deleteTxt를 실행합니다. 

이렇게 위의 로직들을 무한히 반복하여 사용자에게 글자가 써지고 지워지는 것을 보여줄 수 있습니다. 

 

하시는 프로젝트에 조금이나마 도움이 되었으면 좋을 것 같습니다. 감사합니다.