๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_2์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ

๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_2์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ
๐Ÿ’ปํŒจ์ŠคํŠธ์บ ํผ์ŠคX์•ผ๋†€์ž ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ถ€ํŠธ์บ ํ”„_2์ฐจ๊ณผ์ œ ํšŒ๊ณ ์ž‘์„ฑ
Contents
๐Ÿ’ป HTML&CSS ํด๋ก  ์ฝ”๋”ฉ ๊ณผ์ œ ํšŒ๊ณ  ๋‚จ๊ธฐ๊ธฐ !

๐Ÿ’ป HTML&CSS ํด๋ก  ์ฝ”๋”ฉ ๊ณผ์ œ ํšŒ๊ณ  ๋‚จ๊ธฐ๊ธฐ !


์‚ฌ์šฉ ์Šคํƒ
๊ฐœ๋ฐœ ๊ธฐ๊ฐ„
๋ฌด์Šจ ๊ณผ์ œ?
HTML, CSS, Netlify, Firebase, FireStore,
2023-08/08~2023/08/18ๆ—ฅ
์ง์› ์‚ฌ์ง„ ๊ด€๋ฆฌ ์„œ๋น„์Šค with Friebase || AWS S3

My Site

  • ์ œ๊ฐ€ ๊ฐœ๋ฐœํ•œ LCK ์„ ์ˆ˜ ํ”„๋กœํ•„ ๊ด€๋ฆฌ ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค.
    • ์ตœ๋Œ€ํ•œ ๊น”๋”ํ•˜๊ณ , ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐ์— ์žˆ์–ด ๋ฌธ์ œ๊ฐ€ ์—†๊ฒŒ๋” ๋งŒ๋“ค๊ณ  ์‹ถ์—ˆ๋‹ค.

++ ๊ธฐ๋Šฅ

  • Firebase๋ฅผ ์ด์šฉํ•œ LCK ์„ ์ˆ˜ ํ”„๋กœํ•„ ๋“ฑ๋ก ๋ฐ ์‚ญ์ œ ์ˆ˜์ • ๊ธฐ๋Šฅ
  • ์•ฝ๊ฐ„์˜ Animation
ย 

์šฐ์„ , ํ”ผ๋“œ๋ฐฑ ๋ฐ›์€ ๋ถ€๋ถ„์„ ๊ฒ€ํ† ํ•ด๋ณด์ž !

๐Ÿ’ก
๊ฐ€๋…์„ฑ์ด ์กฐ๊ธˆ ๋–จ์–ด์ง€๋Š” ์ƒ‰์ƒ์˜ ๋ฐฐ๊ฒฝ๊ณผ ํฐํŠธ ์ƒ‰์ƒ์ธ ๊ฒƒ ๊ฐ™๋‹ค.
  • ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•œ ์ธ์‚ฌ์ดํŠธ๋Š” ์šฐ์„ , LCK๋ผ๋Š” ๊ตญ๋‚ด ๋Œ€ํšŒ๋ฆฌ๊ทธ์˜ ๋Œ€ํ‘œ์ƒ‰์„ ๊ทธ๋Œ€๋กœ ์ฐจ์šฉํ•ด์™”๋‹ค. (์กฐ๊ธˆ์ด๋‚˜๋งˆ ์›๋ณธ์˜ ๋Š๋‚Œ์„ ๋‚ด๊ธฐ ์œ„ํ•ด์„œ)
    • ๋˜ํ•œ ๋‹ค์–‘ํ•œ ์ƒ‰ ๋ฐฐํ•ฉ ๋“ฑ์„ ์ฐพ์•„๋ดค๋Š”๋ฐ, ์ € ๋ฐฐ๊ฒฝ์ƒ‰์„ ์“ฐ๋ฉด์„œ, ๊ฐ€๋…์„ฑ์ด ๋‚˜๋Š” ํฐํŠธ ์ƒ‰์ƒ์„ ์‚ฌ์‹ค ์ฐพ๊ธฐ ์กฐ๊ธˆ ์–ด๋ ค์› ๋‹ค.
      • ๊ทธ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ๋งˆ๋•…ํžˆ ์ฐพ์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ, ์กฐ๊ธˆ์ด๋‚˜๋งˆ ๊ฐ€๋…์„ฑ์ด ์ข‹์€ CSS๋กœ ๋ฐ”๊พธ์–ด๋ณด์•˜๋‹ค.
ย 

ย 
๐Ÿ’ก
ํ•œ๊ธ€ ์‚ฌ์šฉ ๋ณด๋‹ค๋Š” ์˜์–ด ์‚ฌ์šฉ์ด ์ข‹๋‹ค.
}) .then((path) => { const playerData = { ํŒ€๋ช…: team.value, ------------------------------- playerRef.get().then((snapshot) => { const playerData = snapshot.data(); console.log(playerData); const currentImgURL = playerData.์‚ฌ์ง„;
  • ์ด ์ฝ”๋“œ์— ๋Œ€ํ•ด์„œ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์€ ๋ถ€๋ถ„์˜ ์ผ๋ถ€์ด๋‹ค.
    • ์‚ฌ์‹ค FireStore, Firebase db๋ฅผ ์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด์•˜๋‹ค.
      • ๋‹น์—ฐํžˆ, ์ฒ˜์Œ์—๋Š” ๋‹ค์–‘ํ•œ ์ธ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•ด๊ฐ€๋ฉฐ ์ฝ”๋“œ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ๋ณ€๋ช… ์•„๋‹Œ ๋ณ€๋ช…์œผ๋กœ
      • ์ด๋ ‡๊ฒŒ ํ•œ๊ธ€๋กœ data๋ฅผ ๋ณด๋ƒˆ์„ ๋•Œ, firestore์— query๋“ค๋กœ ํ•œ๊ธ€๋กœ ๋งŒ๋“ค์–ด์ง„ ์†์„ฑ์ด ๋“ค์–ด์™€ ์ž‘์—…ํ•˜๊ธฐ ํŽธํ–ˆ์—ˆ๊ณ , ์ฒ˜์Œ ์‹œ์ž‘์„ ํ•œ๊ธ€๋กœ ํ–ˆ๊ธฐ์—, ๊ทธ ํ›„์—๋„ ํ•œ๊ธ€์„ ๊ปด๊ฐ€๋ฉฐ ์ž‘์—…ํ•  ์ˆ˜ ๋ฐ–์— ์—†์—ˆ๋‹ค.
      • ํ•˜์ง€๋งŒ, ๋ฌผ๋ก  ํ•œ๊ธ€๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๋„ ๋ฌธ์ œ๊ฐ€ ์—†์—ˆ์ง€๋งŒ, ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ ์ข‹์ง€์•Š์€ ์Šต๊ด€์ธ ๊ฒƒ๋„ ๋งž๋‹ค!
    • ๊ทธ๋ž˜์„œ, ์ด๋ฒˆ ๋ฆฌํŒฉํ† ๋ง ์‹œ๊ฐ„ ๋•Œ ํ•œ๊ธ€๋กœ ์งœ์—ฌ์ง„ ์ฟผ๋ฆฌ๋“ค์„ ์ „๋ถ€ ์˜์–ด๋กœ ๊ณ ์ณ๋‘์—ˆ๋‹ค.

ย 
๐Ÿ’ก
๋งˆ์ง€๋ง‰ ๋ฐ›์€ ํ”ผ๋“œ๋ฐฑ์€,
forEach ์•ˆ์—์„œ innerHTML์„ ํ•˜๊ธฐ ๋ณด๋‹ค๋Š”
๋‚ด์šฉ์„ ๋ชจ์•„์„œ ํ•œ๋ฒˆ์— ๋‚ด์šฉ์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋ผ๋Š” ํ”ผ๋“œ๋ฐฑ์ด์˜€๋‹ค.

์ฝ”๋“œ๋ฅผ ๋ณด์ž!

async function displayProfile() { const listProfile = document.querySelector(".profile_container"); listProfile.innerHTML = ""; await db .collection("person") .orderBy("์ƒ์„ฑ์ผ") .get() .then((snapshot) => { console.log(snapshot); if (snapshot.size === 0) { listProfile.innerHTML = "<p>๋“ฑ๋ก๋œ ์„ ์ˆ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.</p>"; return; } snapshot.forEach((doc) => { const data = doc.data(); console.log(data); let containerBox = ` <div class ="player_profileContainer"> <img src="${data.์‚ฌ์ง„}" class="player_profilePhoto" onClick="redirectToDetail('${doc.id}')" /> <div class ="overlay"> <div class="player_text">${data.๋‹‰๋„ค์ž„}</div> <div class="player_text">์„ ์ˆ˜ ์ƒ์„ธ ๋ณด๊ธฐ</div> </div> </div>`; listProfile.innerHTML += containerBox; }); }); }
  • ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•œ ๋‚ด์šฉ์œผ๋กœ, ๋ณธ์ธ์€ forEach๋ฅผ ๋Œ๋ฆฌ๋ฉด์„œ, ๊ทธ์— ์ƒ์‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ ๊ฐ’๋“ค์„ ํ•˜๋‚˜์”ฉ innerHTML๋กœ ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค.
    • ํ•˜์ง€๋งŒ, ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ™•์‹คํžˆ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธธ ์ˆ˜๋„ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ์„ ํ•˜์˜€๊ณ ,
    • ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์€ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ~
      • forEach๋Š” ๋‹จ์ˆœํžˆ data๋“ค์„ ํ•œ๋ฐ ๋ชจ์•„์ฃผ๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๊ณ , ๊ทธ ๋ชจ์—ฌ๋“  ๋ฐ์ดํ„ฐ๋“ค์„ ํ•œ๋ฒˆ์— ์ถ”๊ฐ€ํ•˜๋Š” ์ฝ”๋“œ๋กœ ๋ฆฌํŒฉํ† ๋ง์„ ํ–ˆ๋‹ค.
      • async function displayProfile() { const listProfile = document.querySelector(".profile_container"); listProfile.innerHTML = ""; // ์ดˆ๊ธฐํ™” const profileHTML = []; // ๋‚ด์šฉ์„ ์ €์žฅํ•  ๋ฐฐ์—ด await db .collection("person") .orderBy("์ƒ์„ฑ์ผ") .get() .then((snapshot) => { console.log(snapshot); if (snapshot.size === 0) { profileHTML.push("<p>๋“ฑ๋ก๋œ ์„ ์ˆ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.</p>"); } else { snapshot.forEach((doc) => { const data = doc.data(); console.log(data); let containerBox = ` <div class ="player_profileContainer"> <img src="${data.์‚ฌ์ง„}" class="player_profilePhoto" onClick="redirectToDetail('${doc.id}')" /> <div class ="overlay"> <div class="player_text">${data.๋‹‰๋„ค์ž„}</div> <div class="player_text">์„ ์ˆ˜ ์ƒ์„ธ ๋ณด๊ธฐ</div> </div> </div>`; profileHTML.push(containerBox); }); } }); // ๋ฐฐ์—ด์— ์ €์žฅ๋œ ๋‚ด์šฉ์„ ํ•œ ๋ฒˆ์— ์„ค์ • listProfile.innerHTML = profileHTML.join(''); } ์ด๋ ‡๊ฒŒ ๋ฆฌํŒฉํ† ๋ง์„ ํ•ด๋ณด์•˜๋‹ค.
      • ์ด ์ฝ”๋“œ๋Š”, ์šฐ์„  ๋‚ด์šฉ์„ ์ €์žฅํ•  ๋ฐฐ์—ด(profileHTML)์œผ๋กœ ๋ชจ์•„๋‘๊ณ ,
      • join์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐ์—ด ์š”์†Œ๋ฅผ ํ•˜๋‚˜์˜ ๋ฌธ์ž์—ด๋กœ ๊ฒฐํ•ฉํ•˜์—ฌ ํ•œ๋ฒˆ์— innerHTMl์— ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค.
      ย 

      ์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉฐ

      ๐Ÿ’ก
      ์•„์‰ฌ์› ๋˜ ๋ถ€๋ถ„
    • ์šฐ์„  ์•„์‰ฌ์› ๋˜ ๋ถ€๋ถ„์€, firebaseConfig ์ž‘์„ฑ ํŒŒ์ผ์— secret key๋ฅผ ๊ด€๋ฆฌํ•˜์ง€ ๋ชปํ•˜๊ณ  ์ฝ”๋“œ ์ „๋ฌธ์— ์ ์–ด๋‘์—ˆ๋‹ค๋Š” ์ ์ด๋‹ค. ์‚ฌ์‹ค ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ๊ณ , ๋ฒ„์ „ ๋ฌธ์ œ๋„ ์žˆ์—ˆ๋‹ค.
      • ํ•˜์ง€๋งŒ, ์ˆ˜๊ฐ•์ƒ ๋ถ„๋“ค์˜ ์ฑ„ํŒ…์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ด๋ฒˆ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •์—์„œ ์ ์šฉ์„ ํ•ด๋ณด๊ฒŒ ๋˜์—ˆ๊ณ , ์–ด๋–ค ์‹์œผ๋กœ ์ง„ํ–‰ํ•ด์•ผ ํ•˜๋Š” ์ง€ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
      ย 
      โœ…
      ์ข‹์•˜๋˜ ๋ถ€๋ถ„
    • ์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉฐ, firebase db๋‚˜ firestore์˜ ์‚ฌ์šฉ๋ฒ•์„ ์ตํžˆ๊ฒŒ ๋œ ๊ฒƒ ๊ฐ™์•„ ์กฐ๊ธˆ ๋” ๋ฐฐ์šด ๊ฒƒ์ด ์žˆ์—ˆ๊ณ , ๋งŽ์€ ์ž๋ฃŒ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด์„œ ์–ป์€ ์ง€์‹๋“ค๋„ ์ข‹์•˜๋‹ค.
      • ๋˜ํ•œ ๋‹ค์–‘ํ•œ ๋ถ„๋“ค์˜ ์ฝ”๋“œ๋ฅผ ๋ฆฌ๋ทฐํ•˜๊ณ  ์ฐธ๊ณ ํ•˜๋ฉด์„œ ๋” ๋งŽ์ด ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์ด ์ข‹์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
      ย 

      ๋‚˜์•„๊ฐ€์•ผํ•  ๋ฐฉํ–ฅ

    • ํ™•์‹คํžˆ ์ด๋ฒˆ ๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ, ๋ถ€์กฑํ•จ์„ ์—ฌ์ „ํžˆ ๋Š๊ผˆ๊ณ , ๊พธ์ค€ํžˆ ์—ด์‹ฌํžˆ ํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋‹ค์‹œ ํ•œ๋ฒˆ ๋‹ค์งํ•˜๊ฒŒ ๋œ ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋‹ค.
ย 
ย 
ย 
Share article