<JavaScript> 자바스크립트 글자 타이핑 효과

HTML과 CSS로 만든 나의 자기소개 웹페이지에JavaScript를 이용해
글자가 타이핑되는 효과를 넣어보려고한다.

출처 - https://dev.to/dhintz89/typewriter-effect-3jj

위 gif이미지의 내용과 같은 타이핑효과로 내 자기소개 메인페이지에 있는 LOWN KIM이라는 글자가 한 글자씩 타이핑되도록 코드를 짜 볼 것이다.

🐸HTML

<p id="dynamic" class="lg-text"></p>
// 우선 html 파일 속 타이핑 효과를 줄 글자 부분을 p태그로 감싼다.
id는 `dynamic`이라고 정해두고 class는 `lg-text`라고 부여했다.
처음부터 끝까지 글자가 타이핑 되는 작업은 js파일에서 할 것이기 때문에
타이핑 효과 줄 글자를 HTML에 적어놓을 필요는 없다.

🐸JavaScript

let target = document.querySelector("#dynamic");
// dynamic이라는 id를 가진 문서 객체를 선택해!
// 이렇게하면 target이라는 변수에 html에서 작성한 p태그로 감싼 부분이 할당된다.

function randomString(){
//randomString이라는 함수를 만들어주고,
    let stringArr = ["LOWN KIM"]
    // stringArr이라는 변수에 배열을 만들어 LOWN KIM이라는 문자를 넣어뒀다.
let selectString = stringArr[0];
// srtingArr 배열 속 문자 중 0번째 문자를 선택하고,
let selectStringArr = selectString.split("");
// 해당 문자열을 ""를 기준으로 두고 배열로 분리시키렴!
// 이렇게해서 단어를 한 글자씩 낱개로 분리할 수 있다.

return selectStringArr;
// 최종값 반환해주기!
}

//이하 텍스트를 한 글자씩 페이지에 출력하는 함수-------------------------
function dynamic(randomArr){
// 배열화된 값이 매개변수로 전달된다.
    if(randomArr.length > 0){
    // 만약 randomArr속 문자열의 갯수가 0보다 크면
        target.textContent += randomArr.shift();
        // randomArr속 쪼개진 문자를 맨 앞부터 하나씩 출력해!
        // shift라는 메소드가 배열의 맨 앞 값부터 빼내 출력하는 역할을 한다.
        
        setTimeout(function(){
            dynamic(randomArr);
        }, 100);
        // 아직도 randomArr속 문자열의 갯수가 0보다 크면 계속 글자를 빼내렴. 단 0.1초의 간격으로!
        // 이렇게 하면 randomArr이 0보다 크다는 전제 하에 함수가 계~속 반복된다. 

    }else{
        setTimeout(resetTyping, 3000);
        // 만약에 randomArr이 0보다 크지 않으면(하나씩 다 빼서 남아있는게 하나도 없으면)
        // 3초뒤에 resetTyping함수를 호출해라.
    }
}
dynamic(randomString());
// randomString함수 호출!


// 이하 타이핑 후 리셋시키기------------------------------------------
function resetTyping(){
    target.textContent = "";
    // 타이핑이 끝나고 3초 뒤 다시 아무것도 없는 상태여야만
    // 새로운 타이핑을 시작할 수 있으니, 아무것도 없는 빈 문자열을 만들어 넣어준다.
    dynamic(randomString());
    // randomString함수 또 호출!
}

🐸결과물

언제나 그렇듯 간단해보이는 효과지만 BTS는..글쎄^^;;;;;;;;;;;;;;
뒤엔 아주 뼈를 깎는 고통이 수반되는 과정이 있다
큽
이 세상에서 자바스크립트가 제일 어려운것같다
강의 보면서 연습하는데 0.5초단위로 궁금한점이 생긴다
왜 처음부터 차례차례 코드를 짜지 않는거지? 왜 갑자기 중간으로 끼어들어가지? 저건 중요한것같은데 왜 설명을 안해주지? 저건 왜 저렇게하지? 이건 왜 이렇게하지? 뭐지?
근데 아무도 대답해줄사람이 없다ㅋㅋ
내가 뭔가를 처음 배울 땐 스승을 통해 아주 사소한것 하나하나 물어보고 논하고 답습하는 과정에서 실력을 쌓기때문에
지금 이런 식의 공부는 효과가 너무 없고 스트레스만 받는다
이런 극강의 환경 속에서 내가 얼마나 버틸 수 있을까 조금 궁금하긴 하다
'잘 하고 싶은데 해도 해도 안되는'상황 정말 싫다
근데 매년 매월 매일 겪는다 이런 상황을

인간으로 사는 삶 정말 쉽지 않다

코딩에 아주 조금이라도 익숙해지는 날이 과연 올까?
지금은 말만 들어도 계속 불편하고 긴장되고 무서운데
일년 후 쯤엔 코딩과 나의 관계가 어떤 모습일지 매우 궁금하다

휴 오늘 드디어 이모지를 첨부해서 글을 써보았다
매우 마음에 드는 개구리
아 그런데 벨로그에 대해서 아직 잘 모르겠다
여긴 IT관련 글이 아닌 다른 장르의 글을 작성 해도 되는 곳인가?
메인페이지의 글을 보면 전부 프로그래밍 관련 글이라 갸우뚱한다

앗 또 두시다
휴.................................................................