'map' ํฌํผ ํจ์๋ก JavaScript ์ดํฐ๋ ์ดํฐ์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ํ์ฉํ์ธ์. ๋ฐ์ดํฐ ์คํธ๋ฆผ์ ํจ์ํ์ผ๋ก ํจ์จ์ ์ด๊ฒ ๋ณํํ์ฌ ์ฝ๋ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์.
JavaScript ์ดํฐ๋ ์ดํฐ ํฌํผ: ํจ์ํ ์ดํฐ๋ ์ดํฐ ๋ณํ์ ์ํ Map
ํ๋ JavaScript ์ธ๊ณ์์ ์ดํฐ๋ ์ดํฐ(iterator)์ ์ดํฐ๋ฌ๋ธ(iterable)์ ๋ฐ์ดํฐ ์ปฌ๋ ์
์ ๋ค๋ฃจ๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์
๋๋ค. map ํฌํผ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ดํฐ๋ ์ดํฐ๊ฐ ์์ฑํ๋ ๊ฐ์ ํจ์ํ์ผ๋ก ๋ณํํ์ฌ ๊ฐ๋ ฅํ๊ณ ํจ์จ์ ์ธ ๋ฐ์ดํฐ ์กฐ์์ ํ ์ ์์ต๋๋ค.
์ดํฐ๋ ์ดํฐ์ ์ดํฐ๋ฌ๋ธ ์ดํดํ๊ธฐ
map ํฌํผ์ ๋ํด ์์๋ณด๊ธฐ ์ ์, JavaScript์ ์ดํฐ๋ ์ดํฐ์ ์ดํฐ๋ฌ๋ธ์ ํต์ฌ ๊ฐ๋
์ ๊ฐ๋จํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
- ์ดํฐ๋ฌ๋ธ(Iterable):
for...of๊ตฌ๋ฌธ์์ ์ด๋ค ๊ฐ์ ์ํํ ์ง ๋ฑ ๋ฐ๋ณต ๋์์ ์ ์ํ๋ ๊ฐ์ฒด์ ๋๋ค. ์ดํฐ๋ฌ๋ธ์ ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ฐํํ๋ ์ธ์๊ฐ ์๋ ํจ์์ธ@@iterator๋ฉ์๋๋ฅผ ๊ตฌํํด์ผ ํฉ๋๋ค. - ์ดํฐ๋ ์ดํฐ(Iterator): ์ํ์ค๋ฅผ ์ ์ํ๊ณ ์ข
๋ฃ ์ ๋ฐํ ๊ฐ์ ๊ฐ์ง ์ ์๋ ๊ฐ์ฒด์
๋๋ค. ์ดํฐ๋ ์ดํฐ๋
next()๋ฉ์๋๋ฅผ ๊ตฌํํ๋ฉฐ, ์ด ๋ฉ์๋๋value(์ํ์ค์ ๋ค์ ๊ฐ)์done(์ํ์ค ์ข ๋ฃ ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ ๋ถ๋ฆฌ์ธ)์ด๋ผ๋ ๋ ๊ฐ์ง ์์ฑ์ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค.
JavaScript์์ ํํ ๋ณผ ์ ์๋ ์ดํฐ๋ฌ๋ธ์ ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋ฐฐ์ด (
[]) - ๋ฌธ์์ด (
"hello") - ๋งต (
Map) - ์
(
Set) - Arguments ๊ฐ์ฒด (ํจ์ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅ)
- TypedArrays (
Int8Array,Uint8Array๋ฑ) - ์ฌ์ฉ์ ์ ์ ์ดํฐ๋ฌ๋ธ (
@@iterator๋ฉ์๋๋ฅผ ๊ตฌํํ ๊ฐ์ฒด)
ํจ์ํ ๋ณํ์ ํ
ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ๋ถ๋ณ์ฑ(immutability)๊ณผ ์์ ํจ์(pure functions)๋ฅผ ๊ฐ์กฐํฉ๋๋ค. ์ด๋ ๋ ์์ธก ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ก ์ด์ด์ง๋๋ค. map ์ดํฐ๋ ์ดํฐ ํฌํผ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ณธ ๋ฐ์ดํฐ ์์ค๋ฅผ ์์ ํ์ง *์๊ณ * ์ดํฐ๋ ์ดํฐ๊ฐ ์์ฑํ๋ ๊ฐ ๊ฐ์ ๋ณํ ํจ์๋ฅผ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๊ฒ์ด ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ํต์ฌ ์์น์
๋๋ค.
map ์ดํฐ๋ ์ดํฐ ํฌํผ ์๊ฐ
map ์ดํฐ๋ ์ดํฐ ํฌํผ๋ ์ดํฐ๋ ์ดํฐ์ ํจ๊ป ์๋ํ๋๋ก ํน๋ณํ ์ค๊ณ๋์์ต๋๋ค. ์ดํฐ๋ ์ดํฐ์ ๋ณํ ํจ์๋ฅผ ์
๋ ฅ์ผ๋ก ๋ฐ์, ๋ณํ๋ ๊ฐ์ ์์ฑํ๋ *์๋ก์ด* ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ฐํํฉ๋๋ค. ์๋ณธ ์ดํฐ๋ ์ดํฐ๋ ๋ณ๊ฒฝ๋์ง ์์ต๋๋ค.
JavaScript์ ๋ชจ๋ ์ดํฐ๋ ์ดํฐ ๊ฐ์ฒด์ map ๋ฉ์๋๊ฐ ๋ด์ฅ๋์ด ์์ง๋ ์์ง๋ง, Lodash, Underscore.js, IxJS์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ดํฐ๋ ์ดํฐ ๋งคํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๋ํ, ์์ ๋ง์ map ํฌํผ ํจ์๋ฅผ ์ฝ๊ฒ ๊ตฌํํ ์๋ ์์ต๋๋ค.
์ฌ์ฉ์ ์ ์ map ํฌํผ ๊ตฌํํ๊ธฐ
๋ค์์ JavaScript๋ก map ํฌํผ ํจ์๋ฅผ ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์์
๋๋ค:
function map(iterator, transform) {
return {
next() {
const result = iterator.next();
if (result.done) {
return { value: undefined, done: true };
}
return { value: transform(result.value), done: false };
},
[Symbol.iterator]() {
return this;
}
};
}
์ค๋ช :
mapํจ์๋iterator์transformํจ์๋ฅผ ์ธ์๋ก ๋ฐ์ต๋๋ค.- ์๋ก์ด ์ดํฐ๋ ์ดํฐ ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค.
- ์ ์ดํฐ๋ ์ดํฐ์
next()๋ฉ์๋๋ ์๋ณธ ์ดํฐ๋ ์ดํฐ์next()๋ฉ์๋๋ฅผ ํธ์ถํฉ๋๋ค. - ์๋ณธ ์ดํฐ๋ ์ดํฐ๊ฐ ์๋ฃ๋๋ฉด, ์ ์ดํฐ๋ ์ดํฐ๋
{ value: undefined, done: true }๋ฅผ ๋ฐํํฉ๋๋ค. - ๊ทธ๋ ์ง ์์ผ๋ฉด, ์๋ณธ ์ดํฐ๋ ์ดํฐ์ ๊ฐ์
transformํจ์๋ฅผ ์ ์ฉํ๊ณ , ๋ณํ๋ ๊ฐ์ ์ ์ดํฐ๋ ์ดํฐ์์ ๋ฐํํฉ๋๋ค. [Symbol.iterator]()๋ฉ์๋๋ ๋ฐํ๋ ๊ฐ์ฒด ์์ฒด๋ฅผ ์ดํฐ๋ฌ๋ธํ๊ฒ ๋ง๋ญ๋๋ค.
map ์ฌ์ฉ์ ์ค์ ์์
map ์ดํฐ๋ ์ดํฐ ํฌํผ๋ฅผ ์ฌ์ฉํ๋ ๋ช ๊ฐ์ง ์ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ๋ฐฐ์ด์ ์ซ์ ์ ๊ณฑํ๊ธฐ
const numbers = [1, 2, 3, 4, 5];
const numberIterator = numbers[Symbol.iterator]();
const squaredNumbersIterator = map(numberIterator, (x) => x * x);
// ์ดํฐ๋ ์ดํฐ๋ฅผ ์๋นํ๊ณ ์ ๊ณฑ๋ ์ซ์๋ฅผ ๊ธฐ๋กํฉ๋๋ค
let result = squaredNumbersIterator.next();
while (!result.done) {
console.log(result.value); // ์ถ๋ ฅ: 1, 4, 9, 16, 25
result = squaredNumbersIterator.next();
}
์ด ์์ ์์๋ ์ซ์ ๋ฐฐ์ด๋ก ์์ํฉ๋๋ค. numbers[Symbol.iterator]()๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด์์ ์ดํฐ๋ ์ดํฐ๋ฅผ ์ป์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ map ํฌํผ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์ซ์์ ์ ๊ณฑ์ ์์ฑํ๋ ์ ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ง๋ญ๋๋ค. ๋ง์ง๋ง์ผ๋ก, ์ ์ดํฐ๋ ์ดํฐ๋ฅผ ์ํํ๋ฉฐ ์ ๊ณฑ๋ ์ซ์๋ฅผ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค.
์์ 2: ๋ฌธ์์ด์ ๋๋ฌธ์๋ก ๋ณํํ๊ธฐ
const names = ["alice", "bob", "charlie"];
const namesIterator = names[Symbol.iterator]();
const uppercaseNamesIterator = map(namesIterator, (name) => name.toUpperCase());
// ์ดํฐ๋ ์ดํฐ๋ฅผ ์๋นํ๊ณ ๋๋ฌธ์ ์ด๋ฆ์ ๊ธฐ๋กํฉ๋๋ค
let nameResult = uppercaseNamesIterator.next();
while (!nameResult.done) {
console.log(nameResult.value); // ์ถ๋ ฅ: ALICE, BOB, CHARLIE
nameResult = uppercaseNamesIterator.next();
}
์ด ์์ ๋ map์ ์ฌ์ฉํ์ฌ ๋ฌธ์์ด ์ดํฐ๋ ์ดํฐ๋ฅผ ๋๋ฌธ์ ๋ฌธ์์ด ์ดํฐ๋ ์ดํฐ๋ก ๋ณํํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
์์ 3: ์ ๋๋ ์ดํฐ(Generator)์ ํจ๊ป ์ฌ์ฉํ๊ธฐ
์ ๋๋ ์ดํฐ๋ JavaScript์์ ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ง๋๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
function* generateNumbers(start, end) {
for (let i = start; i <= end; i++) {
yield i;
}
}
const numberGenerator = generateNumbers(10, 15);
const incrementedNumbersIterator = map(numberGenerator, (x) => x + 1);
// ์ดํฐ๋ ์ดํฐ๋ฅผ ์๋นํ๊ณ ์ฆ๊ฐ๋ ์ซ์๋ฅผ ๊ธฐ๋กํฉ๋๋ค
let incrementedResult = incrementedNumbersIterator.next();
while (!incrementedResult.done) {
console.log(incrementedResult.value); // ์ถ๋ ฅ: 11, 12, 13, 14, 15, 16
incrementedResult = incrementedNumbersIterator.next();
}
์ฌ๊ธฐ์๋ ์ซ์ ์ํ์ค๋ฅผ ์์ฑํ๋ ์ ๋๋ ์ดํฐ ํจ์ generateNumbers๋ฅผ ์ ์ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ map์ ์ฌ์ฉํ์ฌ ๊ฐ ์ซ์๊ฐ 1์ฉ ์ฆ๊ฐ๋ ๊ฐ์ ์์ฑํ๋ ์ ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ง๋ญ๋๋ค.
์์ 4: API ๋ฐ์ดํฐ ์ฒ๋ฆฌ (์๋ฎฌ๋ ์ด์ )
API์์ firstName๊ณผ lastName ๊ฐ์ ํ๋๋ฅผ ๊ฐ์ง ์ฌ์ฉ์ ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ค๊ณ ์์ํด ๋ณด์ธ์. ์ ์ฒด ์ด๋ฆ์ ์์ฑํ๋ ์๋ก์ด ์ดํฐ๋ ์ดํฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ์ ์์ต๋๋ค.
// ์๋ฎฌ๋ ์ด์
๋ API ๋ฐ์ดํฐ (์ค์ API ํธ์ถ๋ก ๋์ฒด)
const users = [
{ id: 1, firstName: "Giovanni", lastName: "Rossi" },
{ id: 2, firstName: "Sakura", lastName: "Yamamoto" },
{ id: 3, firstName: "Kenzo", lastName: "Okonkwo" },
];
function* userGenerator(users) {
for (const user of users) {
yield user;
}
}
const userIterator = userGenerator(users);
const fullNamesIterator = map(userIterator, (user) => `${user.firstName} ${user.lastName}`);
// ์ดํฐ๋ ์ดํฐ๋ฅผ ์๋นํ๊ณ ์ ์ฒด ์ด๋ฆ์ ๊ธฐ๋กํฉ๋๋ค
let fullNameResult = fullNamesIterator.next();
while (!fullNameResult.done) {
console.log(fullNameResult.value); // ์ถ๋ ฅ: Giovanni Rossi, Sakura Yamamoto, Kenzo Okonkwo
fullNameResult = fullNamesIterator.next();
}
์ด ์์ ๋ ์ธ๋ถ ์์ค์์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ map์ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์๋์ง ๋ณด์ฌ์ค๋๋ค. ์ฌ๊ธฐ์๋ ๊ฐ๋จํ๊ฒ API ์๋ต์ ๋ชจ์(mock)ํ์ง๋ง, ์ด ์์น์ ์ค์ API ์ํธ ์์ฉ์๋ ์ ์ฉ๋ฉ๋๋ค. ์ด ์์ ๋ ์๋์ ์ผ๋ก ์ ์ธ๊ณ์ ์ธ ์ฌ์ฉ์ ๋ฐ์ํ๋ ๋ค์ํ ์ด๋ฆ์ ์ฌ์ฉํ์ต๋๋ค.
map ์ดํฐ๋ ์ดํฐ ํฌํผ ์ฌ์ฉ์ ์ด์
- ์ฝ๋ ๊ฐ๋
์ฑ ํฅ์:
map์ ๋ ์ ์ธ์ ์ธ ํ๋ก๊ทธ๋๋ฐ ์คํ์ผ์ ์ฅ๋ คํ์ฌ ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ถ๋ก ํ ์ ์๋๋ก ๋ง๋ญ๋๋ค. - ์ฝ๋ ์ ์ง๋ณด์์ฑ ํฅ์:
map์ ์ฌ์ฉํ ํจ์ํ ๋ณํ์ ๋ ๋ชจ๋ํ๋๊ณ ํ ์คํธํ๊ธฐ ์ฌ์ด ์ฝ๋๋ก ์ด์ด์ง๋๋ค. ๋ณํ ๋ก์ง์ ๋ณ๊ฒฝ์ ๊ฒฉ๋ฆฌ๋๋ฉฐ ์๋ณธ ๋ฐ์ดํฐ ์์ค์ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค. - ํจ์จ์ฑ ์ฆ๋: ์ดํฐ๋ ์ดํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ์ดํฐ๋ฅผ ์ง์ฐ(lazy) ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์ฆ, ๊ฐ์ด ํ์ํ ๋๋ง ๊ณ์ฐ๋ฉ๋๋ค. ์ด๋ ๋์ฉ๋ ๋ฐ์ดํฐ์ ์ ๋ค๋ฃฐ ๋ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์:
map์ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ์์น๊ณผ ์ผ์นํ๋ฉฐ, ๋ถ๋ณ์ฑ๊ณผ ์์ ํจ์๋ฅผ ์ฅ๋ คํฉ๋๋ค.
๊ณ ๋ ค์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
- ์ค๋ฅ ์ฒ๋ฆฌ: ์๊ธฐ์น ์์ ์
๋ ฅ ๊ฐ์ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด
transformํจ์์ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. - ์ฑ๋ฅ: ์ดํฐ๋ ์ดํฐ๋ ์ง์ฐ ํ๊ฐ๋ฅผ ์ ๊ณตํ์ง๋ง, ๋ณต์กํ ๋ณํ ํจ์์ ์ฑ๋ฅ ์ํฅ์ ์ผ๋์ ๋์ด์ผ ํฉ๋๋ค. ์ ์ฌ์ ์ธ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ธฐ ์ํด ์ฝ๋๋ฅผ ํ๋กํ์ผ๋งํ์ญ์์ค.
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋์: ๋ ์ ๊ตํ ๋งคํ ๊ธฐ๋ฅ์ ํฌํจํ์ฌ ์ฌ์ ๊ตฌ์ถ๋ ์ดํฐ๋ ์ดํฐ ์ ํธ๋ฆฌํฐ๋ฅผ ์ํด Lodash, Underscore.js, IxJS์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ํด ๋ณด์ญ์์ค.
- ์ฒด์ด๋(Chaining): ๋ ๋ณต์กํ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ํ์ดํ๋ผ์ธ์ ๊ฒฝ์ฐ, ์ฌ๋ฌ ์ดํฐ๋ ์ดํฐ ํฌํผ๋ฅผ ํจ๊ป ์ฐ๊ฒฐํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค (์:
filter๋ค์์map).
๋ฐ์ดํฐ ๋ณํ์ ๋ํ ์ ์ธ๊ณ์ ๊ณ ๋ ค์ฌํญ
๋ค์ํ ์์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋๋ ์ ์ธ๊ณ์ ์ธ ๊ด์ ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ๋ ์ง ๋ฐ ์๊ฐ ํ์: ๋ณํ ๋ก์ง์ด ์ ์ธ๊ณ์์ ์ฌ์ฉ๋๋ ๋ค์ํ ๋ ์ง ๋ฐ ์๊ฐ ํ์์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋์ง ํ์ธํ์ญ์์ค. ๊ฐ๋ ฅํ ๋ ์ง ๋ฐ ์๊ฐ ์กฐ์์ ์ํด Moment.js๋ Luxon๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
- ํตํ ๋ณํ: ๋ฐ์ดํฐ์ ํตํ ๊ฐ์ด ํฌํจ๋ ๊ฒฝ์ฐ, ์ ๋ขฐํ ์ ์๋ ํตํ ๋ณํ API๋ฅผ ์ฌ์ฉํ์ฌ ์ ํํ ๋ณํ์ ๋ณด์ฅํ์ญ์์ค.
- ์ธ์ด ๋ฐ ํ์งํ: ํ ์คํธ ๋ฐ์ดํฐ๋ฅผ ๋ณํํ๋ ๊ฒฝ์ฐ, ๋ค์ํ ์ธ์ด์ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ ์ํ์ญ์์ค. ๋ค๊ตญ์ด๋ฅผ ์ง์ํ๊ธฐ ์ํด ๊ตญ์ ํ(i18n) ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ญ์์ค.
- ์ซ์ ํ์: ์ง์ญ๋ง๋ค ์ซ์๋ฅผ ํ์ํ๋ ๊ท์น(์: ์์์ ๊ตฌ๋ถ ๊ธฐํธ ๋ฐ ์ฒ ๋จ์ ๊ตฌ๋ถ ๊ธฐํธ)์ด ๋ค๋ฆ ๋๋ค. ๋ณํ ๋ก์ง์ด ์ด๋ฌํ ์ฐจ์ด๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋์ง ํ์ธํ์ญ์์ค.
๊ฒฐ๋ก
map ์ดํฐ๋ ์ดํฐ ํฌํผ๋ JavaScript์์ ํจ์ํ ๋ฐ์ดํฐ ๋ณํ์ ์ํ ๊ฐ๋ ฅํ ๋๊ตฌ์
๋๋ค. ์ดํฐ๋ ์ดํฐ๋ฅผ ์ดํดํ๊ณ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์์น์ ๋ฐ์๋ค์์ผ๋ก์จ ๋ ์ฝ๊ธฐ ์ฝ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ ํจ์จ์ ์ธ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ๋ค์ํ ์์ค์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋๋ ์ ํํ๊ณ ๋ฌธํ์ ์ผ๋ก ๋ฏผ๊ฐํ ๋ณํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ ์ธ๊ณ์ ์ธ ๊ด์ ์ ๊ณ ๋ คํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์ ๊ณต๋ ์์ ๋ก ์คํํด๋ณด๊ณ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฌ์ฉํ ์ ์๋ ํ๋ถํ ์ดํฐ๋ ์ดํฐ ์ ํธ๋ฆฌํฐ๋ฅผ ํ์ํ์ฌ ์ดํฐ๋ ์ดํฐ ๊ธฐ๋ฐ ๋ฐ์ดํฐ ์ฒ๋ฆฌ์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ๋ฐํํด ๋ณด์ธ์.