JavaScript를 이용한 타이핑 효과내기!!

안녕하세요~
오늘은 javascript로 재밌는 효과를 내는 실습을 해보았어요!
포트폴리오 사이트들을 구경하다 타이핑 치는 효과가 있길래 재밌어보여서 코딩해 보았어요~

Javascript 코드

구현 과정

1. dynamic 이라는 클래스에 가상 요소를 통해 키보드 커서 모양을 만들어주고 setInterval 함수와 .toggle() 함수를 통해 일정 시간마다 나타났다 사라졌다하는 깜빡이는 효과를 넣어주었습니다.
2. 배열의 요소를 불러와 split("") 이라는 함수를 통해 한글자씩 쪼개어 다시 배열로 담았습니다.
3. 쪼갠 글자를 .shift() 함수를 이용해 한글자씩 화면에 뿌려줍니다. 이 때, 화면에 텍스트가 계속 교체되는게 아닌 타이핑 효과처럼 먼저 뿌려진 글자 뒤에 계속 붙여나가는 형식이므로 += 을 사용하였습니다.
   .shift() 함수를 사용하면 글자 한개만 뿌리게 되므로 setTimeout 함수를 통해 자기 자신을 다시 불러들여 배열의 요소가 안남아 있을 때까지 계속 뿌리는 재귀함수 개념을 사용했습니다.
4. 여기서부터 애를 먹었는데 첫 번째 요소가 다 뿌려진 뒤 배열의 다음 요소로 넘어가는 걸 구현해야 하는데 저는 처음에 for문 두개를 이용하여 구현하려 했는데 뿌려지는 순서가 이상하여 배열의 인덱스를 손으로 일일히 바꿔 보다가 아이디어가 떠올라 인덱스에 줄 값을 변수로 만들어 1씩 증가시켜 순서대로 나오게 구현했습니다.

이번 코딩은 이 방법 외에 다른 방법도 많을 듯 하여 다른 방식으로 구현해봐야 겠다고 느꼈고 여기에 응용 버전으로 배열의 요소 중에 랜덤하게 뿌려지는 코딩도 해봐야겠습니다!