1)학습내용

텍스트 타이핑 효과

// span 요소 노드 가져오기
const spanEl = document.querySelector("main h2 span");
// 화면에 표시할 문장 배열
const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
// 배열의 인덱스 초기값
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, 3000);
    }
  }
  writeTxt();

배열의 요소를 앞에서부터 한개씩 출력해야하기때문에 이럴때 쓰는 메소드가 array객체의
shift()
shift()는 배열에서 맨 앞의 요소를 추출하고 추출한 요소를 원본 배열에서 삭제

텍스트 삭제 과정

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();
    }
  }

currentTxt 변수에는 deleteTxt() 함수를 실행하기 전에 화면에 표시된 텍스트를 가져와서 split() 메소드로 분리한 배열이 할당되어있고
array객체의 pop()메소드로 끝에서부터 한개씩삭제후 join()로 현재 배열에있는 요소를 하나의 문자열로 합침 'web publishe 라는 문자열이 span 요소로 할당되기때문에 사용자의 눈에는 한글자씩 삭제되는것처럼 보임

결과

2) 어려웠던점

1.알고리즘 생각하는것이 까다로움
2. 수식을 계산하는게 생각보다 이해가 잘안됨

3) 해결방법

강의영상을 다시보며 궁금증을 다소 해결했지만 해결되지않은 부분도 있어서 다시한번 봐야함...

4) 소감

배운것을 토대로 다시한번 만들어보았는데 저 짧은 코딩도 시간도 많이걸리고 애를 많이 먹었다..
아주 짧은 코드였지만 내가 만들었다는것에 경이감이 들었지만 개발자들에게 경외감도 많이 들었던 시간이었던거 같다...