230427 - fake API

๋ฐฑ์Šน์—ฐยท2023๋…„ 4์›” 27์ผ
1

๐Ÿšฉ javascript

fake API

๐Ÿ“ ๋‚ด์šฉ

  • JSON Placeholder๋ฅผ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉ


โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์ž…๋ ฅ


index.html

css

@charset"UTF-8";

a { color: #5398ff; }
body { font-family: Verdana, Geneva, Tahoma, sans-serif; display: flex; justify-content: center; background: #eee; }
.container { width: 550px; padding: 3rem 2rem; }
.feed { display: flex; flex-direction: column; row-gap: 2rem; }
h1 { text-align: center; padding-bottom: 2rem; }
h2 { white-space: nowrap; }
.post,.profile { background: #fff; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; row-gap: 1.5rem; }
.user { font-size: 1.1rem; }
.profile { align-items: center; }
.name { font-size: 1.5rem; padding-bottom: 2rem; }

html

<div class="container">
  <div class="feed">

  </div>
</div>

js

const feed = document.querySelector(".feed");

// 4. json์—์„œ id๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๋Š” ํ•จ์ˆ˜
function getUserById(id) {
  const url = `https://jsonplaceholder.typicode.com/users/${id}`;
  // ๋น„๋™๊ธฐ
  // ๊ฐ id์— ํ•ด๋‹นํ•˜๋Š” ์•„์ดํ…œ๋“ค์„ ๋ถˆ๋Ÿฌ์˜ด
  return fetch(url)
    .then((response) => response.json()) // ์‘๋‹ต(๊ฒฐ๊ณผ๋ฌผ)์„ json์œผ๋กœ ๋ฆฌํ„ด
    .then((data) => data); // ๊ฒฐ๊ณผ๊ฐ’๋งŒ ๋ฆฌํ„ด
}

// 2. ๊ฐ๊ฐ์˜ ๊ฒŒ์‹œ๋ฌผ(.post)์„ ๋งŒ๋“œ๋Š” ํ•จ์ˆ˜ ์ •์˜
// 5. async
createPost = async(post) => {
  const wrap = document.createElement("div");
  const user = document.createElement("a");
  const msg = document.createElement("div");

  wrap.className = "post";
  user.className = "user";
  msg.className = "msg";

  wrap.id = post.id;
  user.href = "./user.html";
  // user.innerText = "@user"; // ์šฐ์„  ๊ณ ์ •์œผ๋กœ

  // 4. 
  // 5. await
  const userInfo = await getUserById(post.userId)
  console.log(userInfo);
  user.innerText = `@${userInfo.username}`; // @ undefined
  msg.innerText = post.body;

  // 3. user์ด๋ฆ„ ํด๋ฆญํ•  ๋•Œ ์ด๋ฒคํŠธ ๋ฐœ์ƒ
  user.addEventListener("click", () => {
    localStorage.setItem("userId", post.userId); // key, value
    console.log("์œ ์ €์•„์ด๋”” ์ €์žฅ", post.userId);
  })

  wrap.append(user, msg); // ๋’ค์ชฝ์œผ๋กœ ์ง‘์–ด๋„ฃ์Œ
  feed.append(wrap); // userํŽ˜์ด์ง€์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์˜ค๋ฅ˜ ๋ฐœ์ƒ
}

// userํŽ˜์ด์ง€์—์„œ๋Š” ํ•„์š” ์—†๋Š” ํ•จ์ˆ˜
// 1. post.jsonํŒŒ์ผ์„ ๋ฐ›์•„์˜ค๋Š” ํ•จ์ˆ˜ ์ •์˜
function getAllPost() {
  const url = "https://jsonplaceholder.typicode.com/posts";
  // ๋น„๋™๊ธฐ

  fetch(url)
    .then((response) => response.json()) // ์‘๋‹ต(๊ฒฐ๊ณผ๋ฌผ)์„ json์œผ๋กœ ๋ฆฌํ„ด
    .then((data) => {
      // data - arrayํ˜•ํƒœ
      data.forEach((post) => {
        // 2. ๊ฐ๊ฐ์˜ ๊ฒŒ์‹œ๋ฌผ์„ ๋งŒ๋“œ๋Š” ํ•จ์ˆ˜ ์‹คํ–‰
        createPost(post);
      });
    });
}

// 6. feed๊ฐ€ ์—†๋Š” userํŽ˜์ด์ง€์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š๊ฒŒ ์กฐ๊ฑด๋ฌธ ์ •์˜
// 1. jsonํŒŒ์ผ์„ ๋ฐ›์•„์˜ค๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ
if (feed) {
  getAllPost();
}

user.js

css

@charset"UTF-8";

a { color: #5398ff; }
body { font-family: Verdana, Geneva, Tahoma, sans-serif; display: flex; justify-content: center; background: #eee; }
.container { width: 550px; padding: 3rem 2rem; }
.feed { display: flex; flex-direction: column; row-gap: 2rem; }
h1 { text-align: center; padding-bottom: 2rem; }
h2 { white-space: nowrap; }
.post,.profile { background: #fff; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; row-gap: 1.5rem; }
.user { font-size: 1.1rem; }
.profile { align-items: center; }
.name { font-size: 1.5rem; padding-bottom: 2rem; }

html

<div class="container">
  <h1>User Profile</h1>
  <div class="profile">
    <h2 class="name">User Name (@username)</h2> <!-- ๋ฐ”๋€Œ๋Š” ๋ถ€๋ถ„ -->
    <div>
      <span>E-mail : </span>
      <a class="email">์ด๋ฉ”์ผ์ฃผ์†Œ</a>
    </div>
    <div>
      <span>Website : </span>
      <a class="website">์›น์‚ฌ์ดํŠธ ์ฃผ์†Œ</a>
    </div>
  </div>
</div>

js

// 2. ์œ ์ € ํ”„๋กœํ•„ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜ ์ •์˜
const updateProfile = (userData) => {
  const profile = document.querySelector(".profile");
  let user = `
    <h2 class="name">${userData.name} (@${userData.username})</h2>
    <div>
      <span>E-mail : </span>
      <a class="email" href="mailto:${userData.email}">${userData.email}</a>
    </div>
    <div>
      <span>Website : </span>
      <a class="website" href="http://${userData.website}" target="_blank">${userData.website}</a>
    </div>
  `;
  profile.innerHTML = user;
};

// 1. ์œ ์ € ํ”„๋กœํ•„์„ json ํŒŒ์ผ์—์„œ ๋ฐ›์•„์˜ค๋Š” ํ•จ์ˆ˜ ์ •์˜
const loadUserProfile = async () => {
  const userId = localStorage.getItem("userId"); // key๊ฐ’์€ ํ•ญ์ƒ ๋ฌธ์ž์—ด
  const userInfo = await getUserById(userId); // index.js์•ˆ์— ์žˆ๋Š” ํ•จ์ˆ˜(promise)
  // console.log(userInfo);

  // 2. ์œ ์ € ํ”„๋กœํ•„ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜ ์‹คํ–‰
  updateProfile(userInfo);
};

// 1. ์œ ์ € ํ”„๋กœํ•„์„ ๋ฐ›์•„์˜ค๋Š” ํ•จ์ˆ˜ ์‹คํ–‰
loadUserProfile();

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด

์‚ฌ์šฉ์ž ์ด๋ฆ„ ํด๋ฆญํ•˜๋ฉด

user์˜ ์ •๋ณด๊ฐ€ ๋‚˜์˜ด


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






profile
๊ณต๋ถ€ํ•˜๋Š” ๋ฒจ๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€