์ฟ ํก ํํธ๋์ค ๋งํฌ ๋๋ฌธ์ ๋ธ๋ก๊ทธ ์ ํ์ง? ์์ ํ๊ฒ ๋จ์ถ ์ฝ๋๋ก ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ
์ฟ ํก ํํธ๋์ค ๋งํฌ ๋๋ฌธ์ ๋ธ๋ก๊ทธ ์ ํ์ง ๊ฑฑ์ ๋๋์? ๋จ์ถ ์ฝ๋์ JSON ๊ธฐ๋ฐ ๋ฒํผ ์ฐ๊ฒฐ๋ก ์์ ํ๊ฒ ๋งํฌ ๊ด๋ฆฌํ๊ณ ๊ฒ์ ์์ง ํ์ง์ ์งํค๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๊ฐํฉ๋๋ค.
๋ธ๋ก๊ทธ ์ด์์๋ผ๋ฉด ๋๊ตฌ๋ ํ ๋ฒ์ฏค ๊ฒช๋ ๋ฌธ์ , ๋ฐ๋ก ์ฟ ํก ํํธ๋์ค ๋งํฌ๋ฅผ ๊ทธ๋๋ก ๊ฒ์ํ๋ค๊ฐ ์ ํ์ง๋ก ํ๊ฐ๋๋ ์ํฉ์ ๋๋ค. ๊ฒ์ ์์ง์ ๋จ์ํ ์ํ ๋งํฌ๋ง ์๋ ํ์ด์ง๋ฅผ ์ฝํ ์ธ ๊ฐ ๋ถ์กฑํ๋ค๊ณ ํ๋จํ๊ฑฐ๋, ์ธ๋ถ ๋งํฌ ๊ตฌ์กฐ๊ฐ ์๋ชป๋๋ฉด ์ ๋ขฐ๋๋ฅผ ๋ฎ๊ฒ ํ๊ฐํ ์ ์์ต๋๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด๋ป๊ฒ ํ๋ฉด ๊ฒ์ ํ์ง์ ์ ์งํ๋ฉด์ ์ฟ ํก ๋งํฌ๋ฅผ ์์ ํ๊ฒ ๋ธ๋ก๊ทธ์ ์ ์ฉํ ์ ์์๊น์? ์ค๋์ ๋จ์ถ ์ฝ๋์ JSON ๊ธฐ๋ฐ ๋ฒํผ ์ฐ๊ฒฐ์ ํ์ฉํ ์์ ํ ๋ฐฉ๋ฒ์ ์์ธํ ์๊ฐํฉ๋๋ค.
์ ํ์ง ๋ธ๋ก๊ทธ๊ฐ ๋๋ ์ด์
- ์ฟ ํก ๋งํฌ๋ง ๋์ด:
๋ณธ๋ฌธ์ ๋จ์ํ ์ํ ๋ณด๊ธฐ ๋งํฌ๋ง ์๋ค๋ฉด, ๊ฒ์ ์์ง ์ ์ฅ์์๋ ์ฝํ ์ธ ๊ฐ ๋ถ์กฑํ๋ค๊ณ ํ๋จํฉ๋๋ค. - ์ง์ ๋งํฌ ์ฌ์ฉ:
์ฟ ํก ์ํ URL์ ๊ทธ๋๋ก ๋ฃ์ผ๋ฉด, ๊ฒ์ ์์ง์ด ์ธ๋ถ ํ์ด์ง๋ก ์ ๋๋๋ ํ์ด์ง๋ฅผ ์ ํ์ง๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
JSON ํ์ผ์ด๋?
JSON์ JavaScript Object Notation์ ์ค์๋ง๋ก, ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ์ ๋ฌํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ๊ฒฝ๋ ๋ฐ์ดํฐ ํฌ๋งท์ ๋๋ค.
์ฝ๊ฒ ๋งํด, ๋ฐ์ดํฐ๋ฅผ ํ
์คํธ๋ก ํํํ๋ ํ์ค ํ์์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค.
์ฌ๋์ด ์ฝ๊ธฐ ์ฝ๊ณ , ์ปดํจํฐ๊ฐ ์ฒ๋ฆฌํ๊ธฐ์๋ ํธ๋ฆฌํ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์์ด ์น ๊ฐ๋ฐ์์ ๋๋ฆฌ ์ฐ์
๋๋ค.
์์(JSON ํ์ผ ๋ด์ฉ)
{
"name": "ํ๊ธธ๋",
"age": 30,
"hobby": "๋ฑ์ฐ"
}
์์ ํ๊ฒ ์ฟ ํก ๋งํฌ ๊ด๋ฆฌํ๋ ๋ฐฉ๋ฒ
1. JSON ํ์ผ + ๋จ์ถ ์ฝ๋ ํ์ฉ
- ์ฟ ํก ๋งํฌ๋ฅผ ๋ฐ๋ก HTML์ ๋ฃ์ง ์๊ณ JSON ํ์ผ๋ก ๊ด๋ฆฌํฉ๋๋ค.
- ๊ฐ ์ํ์ ๋จ์ถ ์ฝ๋๋ฅผ ์ง์ ํ๊ณ , ๋ฒํผ ํด๋ฆญ ์ JSON์์ URL์ ์ฐพ์ ์ฐ๊ฒฐํ๋๋ก ๊ตฌํํฉ๋๋ค.
์์ JSON (urls.json):
๋ธ๋ก๊ทธ์์ ์ฟ ํก ์ํ ๋งํฌ๋ฅผ ์์ ํ๊ฒ ๊ด๋ฆฌํ๋ ค๋ฉด, ๋จ์ถ ์ฝ๋์ URL์ JSON ํ์ผ์ ๋งคํํ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์๋์ ๊ฐ์ ํํ๋ก JSON ํ์ผ์ ์์ฑํ ์ ์์ต๋๋ค.
{
"abc001": "https://link.coupang.com/a/cSQgTS",
"abc002": "http://copun.com/xyz12",
"abc003": "http://copun.com/123ab"
}
์ค๋ช
๋จ์ถ ์ฝ๋(abc001 ๋ฑ) ๊ด๋ฆฌ
- "abc001"๊ณผ ๊ฐ์ ์ฝ๋๋ ๋ธ๋ก๊ทธ ์ด์์๊ฐ ์ง์ ์ ์ํ๊ณ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
- ์๋ฅผ ๋ค์ด, ์ํ ์นดํ ๊ณ ๋ฆฌ๋ณ, ํ ๋ง๋ณ๋ก ์ฝ๋๋ฅผ ์ ๋ฆฌํ๋ฉด ๊ด๋ฆฌ๊ฐ ํจ์ฌ ํธ๋ฆฌํฉ๋๋ค.
URL๊ณผ ๋จ์ถ ์ฝ๋ ์ฐ๊ฒฐ
- JSON์ ํค๋ ๋จ์ถ ์ฝ๋, ๊ฐ์ ์ค์ ์ฟ ํก ์ํ URL์ ๋๋ค.
- ์ด ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋ฉด HTML์ ์ง์ ๊ธด URL์ ์ฝ์ ํ์ง ์๊ณ , ๋ฒํผ ํด๋ฆญ ์ JSON์ ์ฐธ์กฐํด ์์ ํ๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
JSON ํ์ผ ์์น
- ์์ฑํ JSON ํ์ผ์ ํฐ์คํ ๋ฆฌ ์๋ฒ ์ ๋ก๋, GitHub, ๋๋ ์ธ๋ถ ์๋ฒ์ ์์น์์ผ ๋ถ๋ฌ์ฌ ์ ์์ต๋๋ค.
- ์น์์ ์ ๊ทผ ๊ฐ๋ฅํ๋ฉด, JavaScript๋ฅผ ํตํด ์ค์๊ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๊ณ ๋ฒํผ๊ณผ ๋งคํํ ์ ์์ต๋๋ค.
- ๊ด๋ฆฌ ํธ์์ฑ
- ์ ์ํ์ด ์ถ๊ฐ๋๊ฑฐ๋ ๋งํฌ๊ฐ ๋ณ๊ฒฝ๋๋ฉด, JSON ํ์ผ๋ง ์ ๋ฐ์ดํธํ๋ฉด ๋ธ๋ก๊ทธ ๋ด ๋ชจ๋ ๋ฒํผ์ ์๋์ผ๋ก ๋ฐ์๋ฉ๋๋ค.
- HTML ์ฝ๋๋ฅผ ์ผ์ผ์ด ์์ ํ ํ์ ์์ด, ๋ฐ์ดํฐ ์ค์ฌ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
2. HTML + JavaScript ์ฝ๋ ์์
์ฟ ํก ์ํ ๋งํฌ๋ฅผ ๋ธ๋ก๊ทธ์ ์์ ํ๊ฒ ๋
ธ์ถํ๋ ค๋ฉด, ๋จ์ถ ์ฝ๋ ๋ฒํผ๊ณผ JSON ๋ฐ์ดํฐ ๋งคํ ๋ฐฉ์์ ํ์ฉํ๋ ๊ฒ์ด ๊ฐ์ฅ ํจ๊ณผ์ ์
๋๋ค.
์๋ ์์๋ ์ํ์ด ๋
ธ์ถ๋๋ ์ฝํ
์ธ ์์ญ์ ๋ฒํผ์ ์ถ๊ฐํ๊ณ , HTML/Body ํ๋จ์ JavaScript ์ฝ๋๋ฅผ ์ ์ฉํ๋ ๋ฐฉ์์
๋๋ค.
p
button class="short-link" data-code="abc001"์ํ ๋ณด๊ธฐ/button
button class="short-link" data-code="abc002"์ํ ๋ณด๊ธฐ/button
button class="short-link" data-code="abc003"์ํ ๋ณด๊ธฐ/button
/p
script
const urlMap = {};
const jsonUrl = "https://tistory1.daumcdn.net/tistory/7331789/skin/images/urls.json";
fetch(jsonUrl)
.then(res = res.json())
.then(data = Object.assign(urlMap, data))
.catch(err = console.error("JSON ๋ก๋ ์คํจ:", err));
document.body.addEventListener('click', e = {
const btn = e.target.closest('button.short-link');
if (!btn) return;
const code = btn.dataset.code;
const url = urlMap[code];
if (url) window.open(url, '_blank');
else alert("URL์ด ์์ต๋๋ค. JSON ๋ฐ์ดํฐ๋ฅผ ํ์ธํ์ธ์.");
});
/script
- ๋ฒํผ์ data-code๋ JSON์ ํค์ ์ผ์นํด์ผ ํฉ๋๋ค.
- ์ด๋ ๊ฒ ํ๋ฉด ์ง์ ์ฟ ํก ๋งํฌ๋ฅผ ๋ ธ์ถํ์ง ์๊ณ , ๋จ์ถ ์ฝ๋๋ก ์์ ํ๊ฒ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.
์ํ ๋ณด๊ธฐ ๋ฒํผ๊ณผ ์ฐ๊ฒฐ
- data-code ์์ฑ: JSON ํ์ผ์ ์ ์๋ ๋จ์ถ ์ฝ๋์ ๋ฐ๋์ ์ผ์นํด์ผ ํฉ๋๋ค.
- ๋ฒํผ ํ ์คํธ: ํ์์ ๋ฐ๋ผ ์ํ ๋ณด๊ธฐ ๋์ ์์ธํ ๋ณด๊ธฐ ๋ฑ์ผ๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅํ์ฌ, ๋ธ๋ก๊ทธ ์คํ์ผ์ ๋ง๊ฒ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์์ต๋๋ค
button class="short-link" data-code="abc001"์ํ ๋ณด๊ธฐ/button
- ๋ฒํผ ํด๋ฆญ ์, JavaScript๊ฐ data-code="abc001"์ ์ฝ์ด JSON์์ ํด๋น URL์ ์ฐพ์ ์ ์ฐฝ์ผ๋ก ์ด์ด์ค๋๋ค.
์ด ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ์ง์ ์ฟ ํก ๋งํฌ๋ฅผ ๋ ธ์ถํ์ง ์์๋ ๋๋ฉฐ, ๊ฒ์ ์์ง์ด ์ฝํ ์ธ ๋ฅผ ์ถฉ๋ถํ ํ๊ฐํ ์ ์์ด ๋ธ๋ก๊ทธ ์ ํ์ง ์ํ๋ ๋ฎ์ถ ์ ์์ต๋๋ค.
3. ์ฅ์
- ๊ฒ์ ํ์ง ์ ์ง:
์ฟ ํก ๋งํฌ๋ฅผ ์ง์ ๋ ธ์ถํ์ง ์๊ณ , ๋ฒํผ๊ณผ JSON์ผ๋ก ๊ด๋ฆฌํ๋ฉด ๊ฒ์ ์์ง์ด ์ฝํ ์ธ ๋ฅผ ์ถฉ๋ถํ ํ๊ฐํฉ๋๋ค. - ๊ด๋ฆฌ ํธ๋ฆฌ:
JSON ํ์ผ๋ง ์ ๋ฐ์ดํธํ๋ฉด ๋ธ๋ก๊ทธ์ ์ฝ์ ๋ ๋ชจ๋ ๋ฒํผ์ด ์๋์ผ๋ก ์ต์ ๋งํฌ๋ฅผ ์ฐธ์กฐํฉ๋๋ค. - ๋ณด์์ฑ ๊ฐํ:
์ง์ URL์ด HTML์ ๋ ธ์ถ๋์ง ์์, ์ธ๋ถ ์คํธ์ด๋ ์๋ ํฌ๋กค๋ฌ๋ก๋ถํฐ ๋ณดํธ๋ฉ๋๋ค.

4. ์ฃผ์์ฌํญ
- JSON ํ์ผ์ ํ์์ ์ ํํ๊ฒ ์ ์งํด์ผ ํฉ๋๋ค.
- ๋ฒํผ data-code์ JSON ํค๊ฐ ์ผ์นํด์ผ ์ ์ ์๋ํฉ๋๋ค.
- ์ ๊ณตํ JSON URL์ด ๋ธ๋ผ์ฐ์ ์์ ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํด์ผ ํฉ๋๋ค.
- 100% ๋ณด์ฅ์ ํ์ง ์์ต๋๋ค.JSON์ ์ทจ์ฝ์ ๋ ์กด์ฌ
์์ฝ
- ์ฟ ํก ์ํ ๋งํฌ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด ๋ธ๋ก๊ทธ๊ฐ ์ ํ์ง๋ก ํ๊ฐ๋ ์ ์์.
- ๋จ์ถ ์ฝ๋ + JSON + ๋ฒํผ ํด๋ฆญ ๊ตฌ์กฐ๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ํ๊ฒ ๋งํฌ ๊ด๋ฆฌ ๊ฐ๋ฅ.
- ๊ฒ์ ์์ง ํ์ง ์ ์ง, ๊ด๋ฆฌ ํธ๋ฆฌ, ๋ณด์์ฑ ๊ฐํ๊น์ง ๋์์ ๋ฌ์ฑ ๊ฐ๋ฅ.
์ฟ ํก ๋งํฌ๋ฅผ ์์ ํ๊ฒ ๋ธ๋ก๊ทธ์ ์ ์ฉํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํ๋์?
๊ฐ์ฅ ์์ ํ ๋ฐฉ๋ฒ์ ๋จ์ถ ์ฝ๋์ JSON ๊ธฐ๋ฐ ๋ฒํผ ์ฐ๊ฒฐ ๋ฐฉ์์ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. ์ฟ ํก ๋งํฌ๋ฅผ ๋ฐ๋ก HTML์ ์ฝ์ ํ์ง ์๊ณ , JSON ํ์ผ์ ๋จ์ถ ์ฝ๋์ ์ค์ URL์ ๋งคํํฉ๋๋ค. HTML ๋ฒํผ์ data-code ์์ฑ์ ๋จ์ถ ์ฝ๋๋ฅผ ์ง์ ํ๊ณ , JavaScript๋ฅผ ํตํด ๋ฒํผ ํด๋ฆญ ์ JSON์์ URL์ ์ฐพ์ ์ ์ฐฝ์ผ๋ก ์ฐ๊ฒฐํ๋๋ก ๊ตฌํํ๋ฉด ๋ฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋งํฌ๋ฅผ ์ง์ ๋ ธ์ถํ์ง ์์ผ๋ฉด์๋ ๋ฐฉ๋ฌธ์๊ฐ ํด๋ฆญํ๋ฉด ์ ํํ ์ํ ํ์ด์ง๋ก ์ด๋ํ ์ ์์ต๋๋ค.
JSON ํ์ผ๊ณผ ๋จ์ถ ์ฝ๋ ๋ฐฉ์์ ์ฅ์ ์ ๋ฌด์์ธ๊ฐ์?
๋จ์ถ ์ฝ๋์ JSON ํ์ผ์ ํ์ฉํ๋ฉด ์ฌ๋ฌ ๊ฐ์ง ์ฅ์ ์ ๋๋ฆด ์ ์์ต๋๋ค. ์ฒซ์งธ, ๊ฒ์ ์์ง ํ์ง ์ ์ง์ ๋๋ค. ๊ฒ์ ์์ง์ HTML์ ์ง์ URL์ด ๋ ธ์ถ๋์ง ์๊ธฐ ๋๋ฌธ์ ํ์ด์ง ์ฝํ ์ธ ๋ฅผ ์ถฉ๋ถํ ํ๊ฐํ์ฌ ์ ํ์ง ์ํ์ ์ค์ผ ์ ์์ต๋๋ค. ๋์งธ, ๊ด๋ฆฌ ํธ๋ฆฌ์ ๋๋ค. ์ ์ํ์ด ์ถ๊ฐ๋๊ฑฐ๋ ๋งํฌ๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ JSON ํ์ผ๋ง ์ ๋ฐ์ดํธํ๋ฉด ๋ธ๋ก๊ทธ ๋ด ๋ชจ๋ ๋ฒํผ์ด ์๋์ผ๋ก ์ต์ URL์ ์ฐธ์กฐํ๊ฒ ๋ฉ๋๋ค. ์ ์งธ, ๋ณด์์ฑ ๊ฐํ์ ๋๋ค. ์ค์ ์ฟ ํก URL์ด ๋ ธ์ถ๋์ง ์์ ์ธ๋ถ ์คํธ์ด๋ ์๋ ํฌ๋กค๋ฌ๋ก๋ถํฐ ๋ณดํธํ ์ ์์ต๋๋ค.
๋ธ๋ก๊ทธ์ ์ ์ฉํ ๋ ์ฃผ์ํ ์ ์ ๋ฌด์์ธ๊ฐ์?
์ด ๋ฐฉ์์ ์ ์ฉํ ๋๋ ๋ช ๊ฐ์ง ์ฌํญ์ ์ฃผ์ํด์ผ ํฉ๋๋ค. JSON ํ์ผ์ ํ์์ด ์ ํํด์ผ ํ๋ฉฐ, HTML ๋ฒํผ์ data-code ๊ฐ์ด JSON ํค์ ์ผ์นํด์ผ ์ ์์ ์ผ๋ก ๋์ํฉ๋๋ค. ๋ํ JSON ํ์ผ์ด ๋ธ๋ผ์ฐ์ ์์ ์ ๊ทผ ๊ฐ๋ฅํด์ผ ํ๋ฉฐ, JavaScript ์ฝ๋๋ฅผ HTML/Body ํ๋จ์ ์ถ๊ฐํ์ฌ ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ์ ์์ ์ผ๋ก ์๋ํ๋๋ก ํด์ผ ํฉ๋๋ค. ์ด๋ฌํ ์ฃผ์ ์ฌํญ์ ์งํค๋ฉด ์์ ํ๊ฒ ์ฟ ํก ๋งํฌ๋ฅผ ๊ด๋ฆฌํ๋ฉด์ ๊ฒ์ ํ์ง๋ ์ ์งํ ์ ์์ต๋๋ค.
์ปดํจํฐ