능력부족,,,

가은·2022년 9월 1일
0

Monet 갤러리

목록 보기
9/9

한창 애를 먹었던 타이핑 효과 오늘부로 놓아주기로 했습니다... 흑흑

br 태그를 넣고 싶으면 타이핑이 안되고 타이핑이 되면 br 태그가 안먹고 자스 강의 듣다가 혹시나 해서 또 건들여 봤는데 역시나 안되서 ^^...

아예 넣으려던 글을 바꾸고 한줄 타이핑으로 만들었다...

근데 의외로 이게 더 나은거 같애 진짜 갤러리 탐방하러 온 것 같구,,, 아님 말고 ㅋㅋ

타이핑이 끝나면 반복 해서 너무 싫었는데 좋은 코드를 찾아버려서 가져왔다 ㅎㅎ

let typingBool = false;
let typingIdx = 0;

// 타이핑될 텍스트를 가져온다 
let typingTxt = $(".typing-txt").text();

typingTxt = typingTxt.split(""); // 한글자씩 자른다. 

if (typingBool == false) {
    // 타이핑이 진행되지 않았다면 
    typingBool = true;
    let tyInt = setInterval(typing, 200); // 반복동작 
}

function typing() {
    if (typingIdx < typingTxt.length) {
        // 타이핑될 텍스트 길이만큼 반복 
        $(".typing").append(typingTxt[typingIdx]);
        // 한글자씩 이어준다. 
        typingIdx++;
    } else {
        //끝나면 반복종료 
        clearInterval(tyInt);
    }
}   

setInterval 한 다음에 clearInterval 써서 멈추는거 이론으로는 알고 있었는데 내가 만져볼 땐 왜 안됐는지 그건 아직 의문이라 사용하는 방법에 대한 공부가 더 필요할 것 같다🥲

내용 조금씩 고치고 css 가독성 좋게 만드는 작업이 필요하고, 모달 연결이랑 3번째 페이지 내용 추가만 하면 html, css, js로 만드는 이번 프로젝트는 끝낼 것 같다.

사실 js를 많이 사용해보고 싶어서 시작한 거 였는데 '내가 아직 한참 모르는구나'를 다시금 느낀 프로젝트가 되었다 ㅎㅎ 더 공부해야지!

내용 추가가 끝나면 리팩토링 충분히 한 후에 js 코드 더 공부해보고 리액트로도 만들어 볼 것이다! > 다른 미술작품 또 선정해서 해야지 ㅎㅎ

TMI로 스크립트 파일 연결이 자꾸 안되서 왜 그러지 했는데 코드 상에 파일 위치가 문제였다 ㅎㅎ.. 기본부터 충실히 하자 아자아자..!

profile
일이 재밌게 진행 되겠는걸?

0개의 댓글