๐ŸŒ• F-lab ๋ฉ˜ํ† ๋ง ๊ธฐ๋ก

๋ฉ˜ํ† ๋ง ์ดํ›„ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ์ฑ„์šฐ๊ธฐ ์œ„ํ•œ ๊ธฐ๋ก

์ฐธ์กฐํ˜• ํƒ€์ž…์ด ๋ถˆ๋ณ€ํ˜•๊ณผ ๋‹ค๋ฅธ ๋ถ€๋ถ„

  • ์ฐธ์กฐํ˜•์—์„œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฐ์ดํ„ฐ ์˜์—ญ ์ž์ฒด๋Š” ๋ถˆ๋ณ€์ด์ง€๋งŒ, ๊ฐ์ฒด ๋‚ด์˜ ํ”„๋กœํผํ‹ฐ์— ํ•ด๋‹นํ•˜๋Š” ๋ณ€์ˆ˜ ์˜์—ญ์—์„œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ฃผ์†Œ๊ฐ’์ด ๋ฐ”๋€œ. ์ด๋Ÿฐ ์ ์„ ๊ฐ€๋ณ€์„ฑ์ด๋ผ๊ณ  ํ•จ.

์–•์€ ๋ณต์‚ฌ์™€ ๊นŠ์€ ๋ณต์‚ฌ์˜ ์ฐจ์ด

  • ์–•์€ ๋ณต์‚ฌ : ๊ฐ์ฒด์˜ ๋ฐ”๋กœ ์•„๋ž˜ ๋‹จ๊ณ„์˜ ๊ฐ’๋งŒ ๋ณต์‚ฌ
  • ๊นŠ์€ ๋ณต์‚ฌ : ๋‚ด๋ถ€์˜ ๋ชจ๋“  ๊ฐ’๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ฐพ์•„์„œ ์ „๋ถ€ ๋ณต์‚ฌ
var copyDeep = function (target) {
	var result = {};
	if (typeof target === 'object' && target !== null) {
		for (var prop in target) {
			result[prop] = copyDeep(target[prop];
			}
		} else {
			result = target;
		}
		return result;
	};

environmentRecord๋ž€? ํ˜ธ์ด์ŠคํŒ…๊ณผ์˜ ์—ฐ๊ด€์„ฑ?

  • environmentRecord

    • ํ˜„์žฌ ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ์˜ ์‹๋ณ„์ž ์ •๋ณด๋“ค์ด ์ €์žฅ๋จ(์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊ฐ€์ง€ ์ˆœ์„œ๋Œ€๋กœ ํ›‘์Œ)
    • ์ปจํ…์ŠคํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ํ•จ์ˆ˜์— ์ง€์ •๋œ ๋งค๊ฐœ๋ณ€์ˆ˜ ์‹๋ณ„์ž, ์„ ์–ธํ•จ ํ•จ์ˆ˜ ์ž์ฒด, var๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์˜ ์‹๋ณ„์ž
  • ํ˜ธ์ด์ŠคํŒ…

    • ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— environmentRecord์— ํ™˜๊ฒฝ์— ์†ํ•œ ์ฝ”๋“œ์˜ ๋ณ€์ˆ˜๋ช…์„ ๋ชจ๋‘ ์•Œ๊ณ  ์žˆ์Œ
    • โ€˜์ด ๋•๋ถ„์— ์‹๋ณ„์ž๋“ค์„ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค๋†“์€ ๋‹ค์Œ ์‹ค์ œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•œ๋‹คโ€™ํ•ด๋„ ๋ฌธ์ œ๊ฐ€ ์—†์Œ
    • ์ด๋Ÿฐ ์ถ”์ƒํ™” ๊ฐœ๋…์ด ํ˜ธ์ด์ŠคํŒ…(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ง„์งœ ๋Œ์–ด์˜ฌ๋ฆฌ์ง„ ์•Š์ง€๋งŒ, ๋Œ์–ด์˜ฌ๋ฆฐ ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผ)

์ด๋ฒคํŠธ ๋ฃจํ”„๋ž€?

  • ๋‹จ์ผ ์Šค๋ ˆ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„๊ณผ ๊ตฌ๋™ ํ™˜๊ฒฝ์—์„œ ์ œ๊ณตํ•˜๋Š” ์Šค๋ ˆ๋“œ๋ฅผ ์ƒํ˜ธ ์—ฐ๋™ํ•˜๊ธฐ ์œ„ํ•œ ์žฅ์น˜
  • ์ฝœ์Šคํƒ์ด ๋น„์—ˆ์„ ๋•Œ, ํ…Œ์Šคํฌ ํ์— ์žˆ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋„˜๊ฒจ์ฃผ๋Š” ์—ญํ• 

์ด๋ฒคํŠธ ๋ฃจํ”„์™€ ์‹คํ–‰์ปจํ…์ŠคํŠธ์˜ ์—ฐ๊ด€์„ฑ

  • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ(์ฝœ์Šคํ…)์ด ๋น„์–ด์žˆ์„ ๋•Œ, ํ…Œ์Šคํฌ ํ์— ์žˆ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋“ค์ด ํ˜ธ์ถœ ์Šคํƒ์— ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ์Œ

์Šค์ฝ”ํ”„๊ฐ€ ํด๋กœ์ €์—์„œ ์–ด๋–ค๊ด€๊ณ„๊ฐ€ ์žˆ๋Š”์ง€

  • ํด๋กœ์ €๋Š” ์™ธ๋ถ€ ์Šค์ฝ”ํ”„์˜ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๊ทธ ๋‚ด๋ถ€ ํ•จ์ˆ˜๋ฅผ ์™ธ๋ถ€๋กœ ์ „๋‹ฌํ•  ๋•Œ ์ƒ๊ธฐ๋Š” ํ˜„์ƒ

๋น„๋™๊ธฐ ์ œ์–ด๋ฅผ ์œ„ํ•œ ๋ฐœ์ „ ๊ณผ์ •

  • setTimeout -> promise -> async/await
function findUser(id) {
  let user;
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 100);
  return user;
}

const user = findUser(1);
console.log("user:", user); // user: undefined
-----
// 1-1. setTimeout์œผ๋กœ ๋น„๋™๊ธฐ ์ œ์–ด
function findUserAndCallBack(id, cb) {
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);
  }, 100);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});
-----
// 1-2. Promise๋กœ ๋น„๋™๊ธฐ ์ œ์–ด

findUser(1).then((user) => console.log('user:', user))
function findUser(id) {
	return new Promise((resolve, reject) => {
		setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    resolve(user)
  }, 100);
-----
// 2-1. Promise๋กœ ๋น„๋™๊ธฐ ์ œ์–ด
function fetchAuthorName(postId) {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((response) => response.json())
    .then((post) => post.userId)
    .then((userId) => {
      return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
        .then((response) => response.json())
        .then((user) => user.name);
    });
}

fetchAuthorName(1).then((name) => console.log("name:", name));
-----
// 2-2. async/await๋กœ ๋น„๋™๊ธฐ ์ œ์–ด
async function fetchAuthorName(postId) {
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  const post = await postResponse.json();
  const userId = post.userId;
  const userResponse = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );
  const user = await userResponse.json();
  return user.name;
}

fetchAuthorName(1).then((name) => console.log("name:", name));