✔️ 시작
클론코딩 내용(수코딩 - 타이핑효과 랜딩페이지) : https://youtu.be/e56H5n1SvEs
수코딩님이 유튜브에 업로드 하신 Javascript를 이용한
타이핑효과 클론 코딩을 연습했다.
Javascript에 대해 어느 정도 배웠다 생각하기도 했고
이론만 공부하기 보다 이렇게 실습을 하면서 알게된 점과 그 코드를
블로그에 정리해 두고 나중에 다시 확인하면 좋겠다 싶었다.
📍뼈대, 디자인하기 (HTML, CSS)
💻 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrap">
<h1>
<span class="material-icons">language</span>
</h1>
<p id="dynamic" class="lg-text">
</p>
<p class="sm-text">JIEUNCODING | 100 Subscribe</p>
</div>
<script src="./app.js"></script>
</body>
</html><head>태그 내부에 CSS 파일<link>연결하기<body>태그 하단에 JS 파일<script>연결하기<span class="material-icons">language</span>은 구글 아이콘 이용해서 표시하기
-<head>태그 내부에 구글 아이콘 사용할 수 있는 링크 연결하기
- 이후 원하는 아이콘 태그 삽입하기<p id="dynamic" class="lg-text"></p>
- 해당 영역은 JS를 이용해 타이핑 효과로 나타내야하기 때문에 빈 공간으로 냅두기
- 고유의 값id로 지정하기
💻 CSS
/*reset*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #483db4;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
}
.material-icons {
font-size: 10rem;
}
.lg-text {
font-size: 2rem;
font-weight: bold;
margin-bottom: 5px;
}
.sm-text {
font-size: 1.5rem;
}
#dynamic {
position: relative;
display: inline-block;
}
/*커서를 만들어 준다.*/
#dynamic::after {
content: ''; /*after, before 사용시 넣어줘야한다.*/
display: block;
position: absolute;
top: 0;
right: -10px;
width: 4px;
height: 100%;
background-color: #fff;
}
/*js에서 깜빡임 효과를 낼 수 있도록 미리 세팅하기*/
#dynamic.active::after {
display: none;
}#dynamic::after을 이용해 커서를 만들어 준다.
- 깜박임 효과는 JS로 진행한다.
-#dynamic.active::afteractive클래스를 생성해 JS로 있다가 없어지는 행동을 반복해 준기 위해 미리 세팅한다.
💻 Javascript
let target = document.querySelector("#dynamic");- 먼저 타이핑할 영역을
querySelector를 이용해 선언해 준다.
- querySelector : css selector 형식으로 작성해 준다.
- 커서 깜박임 효과
// 커서 깜빡임 효과
function blink(){
target.classList.toggle("active");
}
setInterval(blink, 500); // 5초간 반복한다.classList.toggle을 이용해activecss에 미리 만들어둔 클래스가 있을 때 삭제, 없을 때 생성하게 해준다.setInterval(blink, 500);setInterval을 이용해blink함수를 선언해 주고 5초간 반복할 수 있도록500를 넣어준다. (ms 단위로 추가해야한다.)
- 타이핑할 문장 배열에 추가하고 랜덤으로 나오게 하기
function randomStr(){
let strArr = ["Learn to HTML", "Learn to CSS", "Learn to JAVASCRIPT"];
let selectStr = strArr[Math.floor(Math.random() * strArr.length)];
let selectArr = selectStr.split("");
return selectArr;
}strArr: 타이핑할 문장을[ , ]에 추가해 배열로 넣고 할당하기selectStr:Math.random()을 이용해 타이핑 문장 배열을 할당한strArr의 길이 만큼(strArr.length) 랜덤한 숫자 보이게 한다.
-Math.random()만 사용할 경우 소수점까지 나타내기 때문에
Math.floor()로 감싸줘 소숫점을 버린다.selectArr:split("")를 이용해 랜덤 표현되도록 작업한 내용을 할당한selectStr을 단어 하나 하나 쪼개 준다.
- 타이핑 되는 효과를 반복하게 나타내기
function resetTyping(){
target.textContent = "";
dynamic(randomStr());
}
// 하나씩 출력하게 하기
function dynamic(randomArr){
if(randomArr.length > 0){
/*
* randomArr가 0보다 클 경우
* shift() 이용해 randomArr의 앞에 부터 순차적으로 target으로 보내기
* setTimeout()을 이용해 randomArr의 길이가 0이 될 때 까지 반복하기
*/
target.textContent = target.textContent + randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
}, 80);
}else{
setTimeout(resetTyping, 3000);
}
}
// dynamic 함수에 randomStr() 전달 인자 넣어주기
dynamic(randomStr());- 함수를 선언하고 매개 변수
randomArr를 만들어 준다. dynamic(randomStr());로 해 두었기 때문에randomStr함수에 리턴된selectArr이 전달인자로 들어가게 된다. (콜백함수)randomArr의 길이가 0보다 클 경우target에shift()를 이용해 앞에서 부터 하나씩target으로 보내 준다.setTimeout()을 이용해 타이핑 효과를 나타낼 수 있도록 조건문이 맞을 때 마다 8초 동안dynamic(randomArr);함수가 반복 실행하게 한다.- 이후 하나의 문장이 끝 났을 때 리셋 되고 다른 문장이 나오게 하기 위해
resetTyping()함수를 생성해주고target.textContent = "";target내부 글자를 초기화해준다. 그리고 다시dynamic(randomStr());를 넣어준다.
-dynamic함수에 조건문으로setTimeout(resetTyping, 3000);을 넣어둬 만약에 해당 문장 길이를 순차적으로 보여줬을 경우 3초 후resetTyping함수가 실행되도록 하게 만든다.
📍핵심 기술
- split()
str.split(separator, limit);- ‘saparator’로 잘라 'limit'크기 이하의 배열에 잘라진 string을 저장해 리턴
- separator : 문자열을 잘라 줄 구분자 (입력 값이 없을 경우 문자열 전체를 배열에 담는다.)
- limit : 최대 분할 갯수
// 띄어쓰기 없이 설정할 경우 띄어쓰기를 포함한 하나 하나 배열로 분할하기
let str = "Hello World";
str.split(""); //['H','e','l','l','o',' ','W','o','r','l','d']
// 띄어쓰기를 기준으로 분할하기
let str = "Hello World";
str.split(" "); //['Hello','World'] - setTimeout()
setTImeout(호출 function, 초 ms단위);- 호출 function : 실행하고자 하는 function을 작성
- ms : 호출되는 function을 몇 초(ms 단위)이후 실행할지 결정
function showStr(){
console.log("Hello World");
}
setTimeout(showStr, 5000); // 5초 이후 showStr 을 한 번만 실행한다.- setInterval()
setInterval(호출 function, 초 ms단위);- 호출 function : 실행하고자 하는 function을 작성
- ms : 호출되는 function 간격을 몇 초(ms)마다 실행 할지 작성
function showStr(){
console.log("Hello World");
}
setIntercal(showStr, 5000); // showStr을 5초 간격으로 반복 실행한다.- Math.random()
- 숫자를 랜덤하게 표시해 준다.
Math.random() * 10; //9.05458- 10을 곱하면 0 부터 10사이의 숫자들을 랜덤으로 확인할 수 있다.
- 소수점까지 표시해 준다.
- Math.floor()
- 내림해서 표시
Math.floor(1.9); // 1
Math.floor(2.5); // 2
Math.floor(3.4); // 3- Math.random(), Math.floor() 응용하기
let strArr = ["Learn to HTML", "Learn to CSS", "Learn to JAVASCRIPT"];
let randomStr = strArr[Math.floor(Math.random() * strArr.length)];strArr을Math.random()으로strArr길이 만큼 랜덤으로 표시한다.- 소수점은
Math.floor()을 이용해 없애 준다.
- textContent
<scirpt>,<style>요소를 포함한 모든 요소의 콘텐츠를 가져온다.- 노드의 모든 요소를 반환한다.
- xss 공격의 위험이 적다.
출처 : 여러 MDN정보
📍 결과물
✏️ 마치며
공부 후 다시 진행한 클론코딩으로 제대로 공부하지 전에는 이걸 왜 이렇게 사용하고 이 기법이 뭐지? 했는데
지금은 클로저, 콜백함수, 매개변수, 전달인자 등의 개념을 이해하고 진행하니
훨씬 더 유익한 공부가 되는 시간이였다.
해당 글이 문제가 되는 부분이 있을 경우 말씀해 주세요.
💻 프론트엔드를 목표로 성장 중! (알아봤던 내용 등을 정리하기)