[Vanilla JS] ๐ฎ ๋ฐ๋ ค๋๋ฌผ ๋ฃฐ๋ ๋ฏธ๋๊ฒ์
๐ค ๊ณ๊ธฐ
์ด๋ฒ์ฃผ ์ด๋ฐ,
IT๋์๋ฆฌ ๋ฉด์ ์ ๋ณธ ํ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋๋ฐ, ๊ฐ์๊ธฐ ํํ๋ฅผ ๋ง์ ์๋ฌด๊ฒ๋ ํ๊ธฐ๊ฐ ์ซ์๋ค.
์ด๊ฑฐ ๋จ์ด์ง๋ฉด ๋ ๋ค๋ฅธ ๊ฑธ ํด์ผํ๋๋ฐ, ์์์๋ ์ธ์ ์ฐ๊ณ ๋ฉด์ ์ ์ธ์ ์ค๋นํ๊ณ .. ์๊ฐ์ด ๋ค์ด ํ ์์ผ์ ๋ฉด์ ์ ๋ณธ ๋ค๋ก ํฉ๋ถ ๊ฒฐ๊ณผ๊ฐ ๋์ฌ ๋๊น์ง ์๋ฌด๊ฒ๋ ํ์ง ์์๋ค. ^-^ (๋ฌผ๋ก ์ปค๋ฐ์ ์ฑ์ ๋ค.)
์ฌ์ง์ด ๋ค๋ฅธ IT ๋์๋ฆฌ๋ ๋น์ฅ ํ์์ผ๊น์ง ๋ง๊ฐ์ด์ฌ์ ์ด ์๊ฐ๋ ์์ด ์์์๋ถํฐ ์จ์ผํ์๋๋ฐ ๊ทธ๋ฅ ํฌ๊ธฐํ๊ณ ์๋ฌด๊ฒ๋ ํ์ง ์์๋ค.
<ํ์์ผ ๋ฎ๊น์ง ๋์ ์ํ>
๊ทธ๋ฌ๋ค๊ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์ ํ ์นํ ์ธ๋์ ํจ๊ป ์นด๊ณต์ ํ๋ฌ ๊ฐ๋ค.
์ฌ์ ํ ์ฝ๋ฉ์ ํ๊ธฐ๋ ์ซ์ด์ ๋ด์ง๋ง ํ๋ ์ค, ์ธ๋๊ฐ ๊ฐ์๊ธฐ ๋ฏธ๋ ๋จํธ ๋ฝ๊ธฐ ๊ฐ์ ์ด์ํ ๊ฑธ ๋ง๋ค์ด๋ณด๋ผ๊ณ ํ๋ค.
๋ ์ฉ?
์ด์ํ๊ธด ํ๋ฐ.. ์ ์ง ๋๋ฆฐ๋ค.
๊ฑฐ๊ธฐ์ ์๊ฐ์ ์ป์ด ๋ฐ๋ ค๋๋ฌผ์๊ฒ ๊ฐํ ๋นํ๋ ๋ฏธ๋ ๋ฃฐ๋ ์ ๋ง๋ค์ด๋ณด๊ธฐ๋ก ํ์๋ค. ์๊ฐ์ ์ค ์ธ๋์๊ฒ ๊ฐ์ฌ๋ฅผ..
๐ข ์ด๊ธฐ ์ธํ
์ฐ์ ์ฌ๋ฌ์ฅ์ ๋ฐ๋ ค๋๋ฌผ ์ฌ์ง์ด ํ์ํ๋ค.
๋ฐ๋ผ์ ๋ด ์ฃผ๋ณ ๋ฐ๋ ค์ธ๋ค์ ๋ฐ๋ ค๋๋ฌผ + ์ฐ๋ฆฌ์ง ๊ณ ์์ด๋ค ๊น์ง ํด์ ๋ง์ ์ฌ์ง๋ค์ ๋ฐ์์๋ค.
html
css
js
ํ์ผ์ ๋ง๋ค๊ณ ์ถ๊ฐ๋ก img
ํด๋๋ฅผ ์์ฑํด ์ด๊ณณ์ ๊ณณ์์ ๊ฐ์ ธ์จ ๋ฐ๋ ค๋๋ฌผ ์ฌ์ง๋ค์ ๋ฃ์๋ค.
๐ animal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="animal.css">
<script defer src="./animal.js"></script>
<title>๊ท์ผ๋ฅ์ด ๊ณ ๋ฅด๊ธฐ</title>
</head>
<body>
<header>
<div id="header-div">
<p>๋ฐ๋ ค๋๋ฌผ์ ์ ํ</p>
<button id="btn" onclick=start()>์์ํ๊ธฐ</button>
<button id="stop" onclick=stop()>๋ฉ์ถ๊ธฐ</button>
</div>
</header>
<div id="main-div">
</div>
</body>
</html>
- html ์ ํฌ๊ฒ ๊พธ๋ฏธ๋ ๊ฒ ์์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๊ตฌ์ฑํ๋ค.
๐ animal.js
const data = [
{
file : 'churo.jpg',
description : '์ถ๋ก',
},
{
file : 'ddang.jpg',
description : '๋
์ฝฉ',
},
.
.
.
js
์๋ ์ด๋ ๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ง๋ค์ด์ฃผ์๋ค.๋ฐ์ดํฐ๋ ๋๋ฌด ๋ง์์ ๋ท ๋ถ๋ถ์ ์๋๋ค.
๐ต ๊ฐ๋ฐ
1. SetInterval
: ์ฌ์ง ์ ํ
// ์์ ๊ฐ์ ธ์ค๊ธฐ
const btn = document.querySelector('#btn');
const mainDiv=document.querySelector('#main-div');
const image = document.createElement('img');
const info = document.createElement('p');
const changePic = () => {
let i = 0;
// ์ฌ์ง ๋์๊ฐํ๋ ํจ์ setInterval ์ฌ์ฉ
changePicId = setInterval(() => {
image.src =`./img/${data[i].file}`;
// ๊ฐ์ ์์ธ์ฒ๋ฆฌ
if (data[i].file === 'potato.jpg') {
info.innerHTML = `์ํ๊น๋ค์.. ๋น์ ์ ${data[i].description}์ ์ ํ์ ๋ฐ์๋ฒ๋ฆฌ๊ณ ๋ง์์ต๋๋ค..`;
} else {
info.innerHTML =`๋น์ ์ ${data[i].description}์ ์ ํ์ ๋ฐ์์ต๋๋ค !`
}
// ๋ฌดํ๋ฐ๋ณต ๋ก์ง
if (i > data.length-1 || i === data.length-1) {
i=0
} else {
i+=1;
}
}, 20)
}
์์ ์ฝ๋๋ 0.02์ด์ ํ ๋ฒ์ฉ data
์ ์ฌ์ง์ ๋์๊ฐ๋ฉด์ ์ถ๋ ฅํด์ฃผ๋ ์ฝ๋์ด๋ค.
-
์์ํ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด
changePic
ํจ์๊ฐ ์คํ๋๋ค. -
image
ํ๊ทธ์src
์ฃผ์๋ฅผi
์ ํด๋นํ๋data
์file
๊ฐ์ ๋ฃ์ด์ฃผ์๋ค. -
๊ฐ์ ์ฌ์ง์ผ ๋ ์์ธ์ฒ๋ฆฌ๋ฅผ ๋ฃ์๋ค.
-
i
์ ํด๋นํ๋description
์ ๊ฐ์ ธ์ ๊ฐ์ ์ฌ์ง์ผ ๋๋ ํํํ๋ ๋ฌธ๊ตฌ๋ฅผ, ๋ค๋ฅธ ๊ท์ฌ์ด ๋๋ฌผ๋ค์ด ๋์ค๋ฉด ์ถํํ๋ค๋ ๋ฌธ๊ตฌ๋ฅผ ๋์ฐ๊ฒ ํ๋ค. -
๋ฆฌ์คํธ๊ฐ ๋ฌดํ์ผ๋ก ๋์๊ฐ์ผํ๊ธฐ ๋๋ฌธ์,
i
๊ฐdata์ ๊ธธ์ด -1
(์ฆ, ๋ง์ง๋ง ์ธ๋ฑ์ค๊น์ง ๊ฐ ๊ฒฝ์ฐ)์ผ ๊ฒฝ์ฐ,i
๋ฅผ0
์ผ๋ก ์ด๊ธฐํ์์ผ ๋ค์ ๋ฆฌ์คํธ๋ฅผ ๋๋๋ก ํ์๋ค. -
์ด ์ธ์ ๊ฒฝ์ฐ์๋
i
๋ฅผ1
์ฉ ์ฆ๊ฐ์์ผ ๋ค์ ์ฌ์ง์ผ๋ก ๋์ด๊ฐ๊ฒ ํ๋ค.
์ฌ๊ธฐ๊น์ง ํ๋ฉด ์์ํ๊ธฐ ๋ฒํผ์ ๋๋ ์ ๋, ์ฌ์ง์ด ๋น ๋ฅธ ์๋๋ก ๋ฌดํ ๋์๊ฐ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
2. Start, Stop(clearInterval
)
// ์์ ์ด๋ฒคํธ
const start = () => {
mainDiv.style.backgroundColor = 'white';
image.setAttribute('height','400px');
image.setAttribute('width','400px');
mainDiv.appendChild(image);
mainDiv.appendChild(info);
changePic();
}
// ๋ฉ์ถ๊ธฐ ์ด๋ฒคํธ
const stop = () => {
mainDiv.style.backgroundColor = 'yellow';
clearInterval(changePicId);
};
start
๋ฒํผ์ ๋๋ ์ ๋ img ์์น๋ฅผ ์ ํด mainDiv ์ ์์์ผ๋ก ๋ค์ด๊ฐ๊ฒ ํ๋ค.stop
๋ฒํผ์ ๋๋ ์ ๋clearInterval
์ ํ์ฌ ํ๋ฉด ์ ํ์ ๋ฉ์ถ๋๋ก ํ๋ค.stop
ํ์ ๋, ๋ฐฐ๊ฒฝ์์ ๋ ธ๋์์ผ๋ก ๋ฐ๊ฟ ๊ฐ์กฐ๊ฐ ๋๋๋ก ํ๋ค.
๐ด Trouble Shooting
Stop
์ด๋ฒคํธ๊ฐ ์คํ์ด ์ ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.
์ด์ ๋, changePicId
๋ ์ง์ญ๋ณ์์ด๊ธฐ ๋๋ฌธ์ stop
ํจ์ ๋ด์์ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ด์๋ค.
๊ตฌ๊ธ๋ง์ ํด๋ณธ ๊ฒฐ๊ณผ, ์ด๋ด ๋๋ ์ด์ฉ ์ ์์ด
var
๋ฅผ ์ฌ์ฉํ์ฌ ํด๊ฒฐ์ ํ๋ ๊ฒ ๊ฐ์๋ค. ใ ใ
// ์์ ๊ฐ์ ธ์ค๊ธฐ
const btn = document.querySelector('#btn');
const mainDiv=document.querySelector('#main-div');
const image = document.createElement('img');
const info = document.createElement('p');
// ์ด์ฉ ์ ์๋ var ์ฌ์ฉ
var changePicId;
์ด๊ธฐ์ ์์๋ฅผ ์ค์ ํ ๋ var
๋ก changePicId
๋ฅผ ์ ์ธํด์ฃผ์ด์ ์ ์ญ์ผ๋ก ์ธ ์ ์๊ฒ ํด์ฃผ์๋ค.
๊ทธ๋ฆฌํ์ฌ .. 3์๊ฐ๋ง์ ๊ฐ๋ฐ์ด ๋๋ฌ๋ค.
โ ๊ฒฐ๊ณผ
์ค๊ฐ์ ์ด์ํ ๊ฒ ๋ณด์ด๋ ๊ฒ์ ๊ธฐ๋ถํ์ด๋ค.
โ ๋๋์
- ํ๋ง๋๋ ์ฝ๋ฉ์ด์๋ค.. ์ ๋ง ์๋ฌด์๊ฐ์์ด ๋ง๋ค์๊ณ ์ฆ๊ฑฐ์ ๋ค ^^
- ์ด๋ฐ ๊ฐ๋จํ ๋ฏธ๋ํ๋ก์ ํธ๋ ๋์์ด ๋ง์ด ๋๋ค๋ ๊ฒ์ ๋๊ผ๋ค.
setInterval
,clearInterval
๊ฐ์ด ๊ผญ ํ์ํ ์ด๋ฒคํธ๋ฅผ ๋ฐฐ์ธ ์ ์์ด ์๋ฏธ ์์๋ค. - ์ฌ์ด๊ฐ๋ ๋๋์ผ๋ก ๊ฐ๋จํ๊ฒ ํ๋๋ฐ ๊ฒฐ๊ณผ๊ฐ ์ ๋์จ ๊ฒ ๊ฐ์ ๋ฟ๋ฏํ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Vanilla JS] ๐ฎ ๋ฐ๋ ค๋๋ฌผ ๋ฃฐ๋ ๋ฏธ๋๊ฒ์), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@qhahd78/Vanilla-JS-๋ฐ๋ ค๋๋ฌผ-๋ฃฐ๋ -๋ฏธ๋๊ฒ์์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค