๐๏ธ
๋ฉํ ๋ง 2๋ฒ์งธ
August 16, 2022
๐ 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));
-
- ์ฐธ์กฐํ ํ์ ์ด ๋ถ๋ณํ๊ณผ ๋ค๋ฅธ ๋ถ๋ถ
- ์์ ๋ณต์ฌ์ ๊น์ ๋ณต์ฌ์ ์ฐจ์ด
- environmentRecord๋? ํธ์ด์คํ ๊ณผ์ ์ฐ๊ด์ฑ?
- ์ด๋ฒคํธ ๋ฃจํ๋?
- ์ด๋ฒคํธ ๋ฃจํ์ ์คํ์ปจํ ์คํธ์ ์ฐ๊ด์ฑ
- ์ค์ฝํ๊ฐ ํด๋ก์ ์์ ์ด๋ค๊ด๊ณ๊ฐ ์๋์ง
- ๋น๋๊ธฐ ์ ์ด๋ฅผ ์ํ ๋ฐ์ ๊ณผ์