๐ ์ดํํ ์ฝ๋ฉ ์๊ฐ 11hour
๐๐ผ -
๐๐ผ -
api๊ฐ ์ค๋ธ์ ํธ๋ฅผ ๋ณํ์ํค๋ ,retentionํ๋ api์ธ์ง ๋ณํํ์ง ์๋์ง ํ์ธํ๊ธฐ
? : ์ ๋ฌํด๋ ๋๊ณ ์ ๋ฌํ์ง ์์๋ ๋๋ค (optional)
์ํ๋ ๊ตฌ๋ถ์ ์ธ ์ ์์
const arr2 = [1, 2];
console.log(arr2.indexOf[0]);
// Q1. make a string out of an array
{
//๋ด ํ์ด
const fruits = ['apple', 'banana', 'orange'];
const stringFruits = fruits.toString();
console.log(stringFruits);
console.log(typeof stringFruits);
//๋ต
const result = fruits.join(',');
}
// Q2. make an array out of a string
{
//๋ด ํ์ด
//1
const fruits = '๐, ๐ฅ, ๐, ๐';
const fruitArray = new Array();
for (fruit of fruits) {
fruitArray.push(fruit);
}
//, ๊น์ง ๋ฐฐ์ด๋ก ๋ค์ด๊ฐ๋ฒ๋ฆฐ๋ค
//2
const fruits = '๐, ๐ฅ, ๐, ๐';
const fruitArray = new Array();
fruitArray.push(fruits);
//fruits.forEach ์๋ํด๋ดค์ง๋ง fruits๊ฐ ๋ฐฐ์ด์ด ์๋๊ธฐ ๋๋ฌธ์ ์ธ ์ ์๋ค
//๊ทผ๋ฐ ์ด๋ ๊ฒ ํ๋ฉด ์ ์ฒด๊ฐ ์ธ๋ฑ์ค0์ด ๋ผ๋ฒ๋ฆผ
//์๋ ํ๋์ string์ด๋ผ ๋ต์ด ๋ง๋ ๊ฒ ๊ฐ์ง๋ง ๊ณผ์ผ ๋ค ๊ฐ์ ์คํธ๋ง์ผ๋ก๋ง ๋ ์ด๋ ์ด ๋ง๋ค์ด๋ณด๊ธฐ๋ก ํจ
//3
const fruits = '๐, ๐ฅ, ๐, ๐';
const fruitArray = new Array();
for (fruit of fruits) {
fruitArray.push(fruit);
}
for (i = 0; i < fruitArray.length; i++) {
if (fruitArray[i] === ',' || ' ') {
fruitArray.splice(i, 1);
}
}
//์... ์ด๋ ๊ฒ ํ๋ฉด index๊ฐ ๊ณ์ ๋ณํ๋ฉด์ ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ์ ๋์ด/ ๋ฐ์ดํฐ๊ฐ ์ด๋ํจ
//4
//stackoverflow์ ๊ฒ์ - string์ผ ๋ ์์ ๋ณด๊ธฐ๋ก ํจ
const fruits = '๐, ๐ฅ, ๐, ๐';
const fruitArray = new Array();
const newFruits = fruits.replace(/, /gi, '');
//ig๋ i: ๋์๋ฌธ์ ๊ตฌ๋ถ์์ด g: ๋ฐ์ํ ๋ชจ๋ ํจํด์ ๋ํด ์ ์ญ ๊ฒ์์ด๋ ๋ป
console.log(newFruits);
for (fruit of newFruits) {
fruitArray.push(fruit);
}
console.log(fruitArray);
//5
//stackoverflow - ๋ฐฐ์ด์ผ ๋ ๊ฐ์ ๋ฐ๋ผ ์์ ๋ณธ๋ค๋ฉด?
const fruits = '๐, ๐ฅ, ๐, ๐';
const fruitArray = new Array();
for (fruit of fruits) {
fruitArray.push(fruit);
}
//๋ฐฐ์ด ๋ง๋ค๊ณ , ,์ ๋ฐ์ดํฐ๋ก ํฌํจ๋ ์ํ
function removeAllItem(arr, val) {
let i = 0;
while (i < arr.length) {
if (arr[i] === val) {
arr.splice(i, 1);
} else {
++i;
}
}
return arr;
}
removeAllItem(fruitArray, ' ');
removeAllItem(fruitArray, ',');
console.log(fruitArray);
//๋ต
const result = fruits.split(',');
}
// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
//๋ด ํ์ด
const array = [1, 2, 3, 4, 5];
array.reverse();
//ํต๊ณผ
}
๋ฐฐ์ด ์์ฒด๋ฅผ ๋ณํ์ํจ๋ค. return ๊ฐ๋ ๋ณํ๊ณ ์๋ ๋ฐฐ์ด๋ ๋ณํ๊ณ
// Q4. make new array without the first two elements
{
//๋ด ํ์ด
const array = [1, 2, 3, 4, 5];
array.splice(0, 2);
console.log(array);
//๋ต
const result = array.splice(2, 5);
console.log(array);
console.log(result);
}
splice๋ ๋ฐฐ์ด ์์ฒด์์ ์ญ์ ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค
๋ง์ง๋ง์ ๋ฐฐ์ ๋จ
slice๋ ๋ฐฐ์ด์์ ์ํ๋ ๋ถ๋ถ๋ง ๋ฆฌํดํ๊ณ ์ถ์ ๋
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 88),
];
// Q5. find a student with the score 90
{
//๋ด ํ์ด
const goodStudent = students.filter((a) => a.score === 90);
console.log(goodStudent);
//๋ต
const result = students.find((student) => student.score === 90);
console.log(result);
}
์ฒซ๋ฒ์งธ๋ก ์ฌ๋ผ์ง ์์๋ฅผ ๋ฆฌํด ์ฝ๋ฐฑํจ์๊ฐ ํธ๋ฃจ ๋ฆฌํดํ๋ฉด ๋ฐ๋ก ์์ ๋ฆฌํด
๋ฐฐ์ด์ ๋ค์ด์๋ ์์ดํ
๋ง๋ค ํ๋์ฉ ์์ฐจ์ ์ผ๋ก ํธ์ถ
์ฝ๋ฐฑํจ์๊ฐ ๋ฆฌํด์ ํธ๋ฃจ๋ก ํ๊ฒ ๋๋ฉด ํจ์๊ฐ ๋ฉ์ถ๊ฒ ๋๊ณ ํธ๋ฃจ๊ฐ ๋ ์์๋ฅผ ๋ฆฌํด
// Q6. make an array of enrolled students
{
//๋ด ํ์ด
const enrollStudent = students.filter((a) => a.enrolled === true);
console.log(enrollStudent);
//๋ต
const enrollStudent = students.filter((a) => a.enrolled);
}
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
//๋ด ํ์ด
const studentsScore = students.map((a) => a.score);
console.log(studentsScore);
//๋ต
const studentsScore = students.map((student) => student.score);
}
๋ฐฐ์ด ์์ ๋ค์ด์๋ ์์ ํ ๊ฐ์ง ํ ๊ฐ์ง๋ฅผ ๋ค๋ฅธ ๊ฒ์ผ๋ก ๋ณํํด์ค๋ค.
์ง์ ๋ ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๋ฉด์ ๊ฐ๊ฐ์ ์์๋ฅผ ํจ์๋ฅผ ๊ฑฐ์ณ์ ์๋ก์ด ๊ฐ์ผ๋ก ๋ณํ
๋ค๋ฅธ ๋ฐฉ์์ ๋ฐ์ดํฐ ๋ง๋ค๊ณ ์ถ์ ๋
์ฝ๋ฐฑ ํจ์ ์ธ์ ์๋ฏธ์์ด ์ง์ ํ์ง ๋ง!
// Q8. check if there is a student with the score lower than 50
{
//๋ด ํ์ด
const studentsScore = students.map((a) => a.score);
const lower50 = (e) => e < 50;
console.log(studentsScore.some(lower50));
//๋ต
const result = studnets.some((student) => student.score < 50);
}
์ฝ๋ฐฑํจ์ ๋ฆฌํด์ด ํธ๋ฃจ๊ฐ ๋๋ ์ ๊ฐ ์๋? ํ ๋ช ์ด๋ผ๋ ์์ผ๋ฉด ํธ๋ฃจ ๋ฆฌํด
every๋ ๋ชจ๋ ์์๋ค์ด ์กฐ๊ฑด์ ์ถฉ์กฑํด์ผ ํธ๋ฃจ ๋ฆฌํด
// Q9. compute students' average score
{
//๋ด ํ์ด
const studentsScore = students.map((a) => a.score);
const reducer = (acc, cur) => acc + cur;
const sum = studentsScore.reduce(reducer);
const result = sum / studentsScore.length;
console.log(result);
//๋ต
const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result / students.length);
}
//forEach ์ฌ์ฉ
students.forEach((num) => {
result += num;
});
๋์ ๋ ๊ฐ ์ ๋ฌ. ๋ฐฐ์ด ํ๋์ฉ ์์ฐจ์ ์ผ๋ก curr์ ์ ๋ฌ
๋ฆฌํดํ๋ ๊ฐ์ด ์์ฐจ์ ์ผ๋ก previous๋ก ์ ๋ฌ
initial value 0์ผ๋ก ์ค์ ํ ์ ์์
์ํ๋ ์์์ ๋ถํฐ ๋ชจ๋ ๋ฐฐ์ด ๋๋ฉด์ ๊ฐ ๋์ ,
reduceRight์ ๋ฐฐ์ด์ ๋ค์์๋ถํฐ ์์
//์ฑ์ธ๋ง ์ ๋ฌํ๊ธฐ
let result = userList.reduce((prev, cur) => {
if (cur.age > 19) {
prev.push(cur.name);
}
return prev;
}, []);
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
//๋ด ํ์ด
const studentsScore = students.map((a) => a.score);
studentsScore.toString();
//๋ต
const result = students
.map((student) => student.score)
.filter((score) => score>= 50)
.join();
}
map ๊ฐ์ api๋ ๋ฐฐ์ด ์์ฒด๋ฅผ ๋ฆฌํดํ๊ธฐ์ ๋ค์ ์ด์ด์ ์ธ ์ ์์
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
//๋ด ํ์ด
scoreGrade = new Array();
const studentsScore = students.map((a) => a.score);
const reducer = (acc, cur, i) => {
if (acc > cur) {
scoreGrade.splice(i, 1).push(cur);
} else {
scoreGrade.splice(i, 1).push(acc);
}
};
studentsScore.reduce(reducer);
console.log(scoreGrade.toString());
//๋ชปํ๊ฒ ์ด์ฌ,,
//๋ต
const result = students
.map((student) => student.score)
.sort((a, b) => a-b)
.join();
}
_.sortBy(arr);
ํตํด ์ฝ๊ฒ ํ ์ ์์์๋ฒ ํต์ ์ ์์
hypertext transfer protocol
client -> server : request (์์ฒญ)
client <- server : response (์๋ต)
hypertext: ์ฌ์ฉ๋๋ ๋ฌธ์ ์ด๋ฏธ์ง ํ์ผ ๋ชจ๋ ํฌํจํด์ ๋งํ๋ ๊ฒ
asynchronous javascript and xml
์นํ์ด์ง์์ ๋์ ์ผ๋ก ์๋ฒ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ ๊ธฐ์
xhr : xmlhttprequest - ์ค๋ธ์ ํธ(๋ธ๋ผ์ฐ์ api ์ค ํ๋๋ก ์ด api๋ฅผ ์ด์ฉํ๋ฉด ๊ฐ๋จํ๊ฒ ์๋ฒ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ๋ฐ์์ฌ ์ ์๋ค)
fetch() API - ์ต๊ทผ ๋ธ๋ผ์ฐ์ ์ ์ถ๊ฐ๋ api (์ต์คํ๋ก๋ฌ์์ ์ ๋จ๐)
xml: html๊ฐ์ ๋งํฌ์
์ธ์ด ์ค ํ๋ -> ๊ฐ๋
์ฑ ๋ถํธ, ํ์ผ ์ฌ์ด์ฆ ๋น๋ํด์ ๋ง์ด ์ฌ์ฉ ์ ํจ
์๋ฒ์ ๋ฐ์ดํฐ ์ฃผ๊ณ ๋ฐ์ ๋ ๊ต์ฅํ ๋ค์ํ ํ์ผ ํฌ๋งท ์ ๋ฌ๋ฐ์ ์ ์์ -> xml๋ง ์ธ ์ ์๋ ๊ฒ ์๋, xhr ์ ํ๋ค๋ฆฌ์ง ์์๋ ๋จ, ์ธ๋ถ๋ก ๊ฐ๋ api ๋ง๋ค ๋ ์ด๋ฆ ๋ช
๋ฃํ๊ฒ ์ง๊ธฐ
json: javascript object notation
data format / ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ์ฒ๋ผ ํค์ ๋ฐธ๋ฅ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค
๋ชจ๋ฐ์ผ์์๋ ๊ฐ๋ฅ,
object -> json(string) : serialize ์ง๋ ฌํ
object <- json(string) : deserialize
stringfy(obj)
let json = JSON.stringfy(true);
console.log(json);
json = JSON.stringfy(['api','banana']);
console.log(json);
const rabbit = {
name: 'tori',
color : 'white',
size: null,
birthDate : new Date(),
symbol: Symbol("id"),
jump: function () {
console.log(`${this.name} can jump`);
},
};
json = JSON.stringfy(rabbit);
console.log(json);
//์ ํ๋ผ๋ ํจ์๋ json์ ํฌํจ๋์ง ์๋๋ค, ์ค๋ธ์ ํธ์ ์๋ ๋ฐ์ดํฐ๊ฐ ์๋๊ธฐ ๋๋ฌธ์
//symbol ๋ํ ํฌํจ๋์ง ์๋๋ค
json = JSON.stringfy(rabbit, ['name']);
console.log(json);
//์ด๋ฆ๋ง ์ ๋ฌํ ์ ์๋ค - ์ํ๋ ํ๋กํผํฐ๋ง ๊ณจ๋ผ์ ์ ๋ฌ
json = JSON.stringfy(rabbit, (key, value) =>{
console.log(`key:${key}, value: ${value}`);
return key === 'name' ? 'ellie': value;
});
console.log(json);
//์ฝ๋ฐฑ ํจ์ ์ด์ฉํด์ ์ธ๋ฐํ๊ฒ ํต์
parse(json)
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump();
//parse ๋ obj ์๋ jump functioin ์๋ค - deserialize ๋๊ธฐ ๋๋ฌธ
obj.jump() //error
console.log(rabbit.birthDate.getDate()); //์๋ ๋๋๋ฐ date๋ผ๋ ์ค๋ธ์ ํธ ์์ฒด๋ผ์
console.log(obj.birthDate.getDate()); //์๋ ์๋ฌ string ํํ์ด๊ธฐ ๋๋ฌธ์
const obj = JSON.parse(json, (key, value) => {
console.log(`key:${key}, value: ${value}`);
return key === 'birthDate' ? Date(value) : value;
});
console.log(obj.birthDate.getDate()); //์ด๋ ๊ฒ ํ๋ฉด ๋ผ์ ^^
MDN
JavaScript.info
JavaScript.info ํ๊ตญ์ด
์ ์ฉํ ์ฌ์ดํธ:
JSON Diff checker
JSON Beautifier/editor
JSON Parser
JSON Validator
๋น๋๊ธฐ ํ๋ก๊ทธ๋๋ฐ - callback ์ง์ฅ๊ณผ ๋น๋๊ธฐ ์ฒ๋ฆฌ
javascript is synchronous
execute the code block by order after hoisting
hoisting: var, function declaration
๋ธ๋ผ์ฐ์ api๋ ๋ธ๋ผ์ฐ์ ์ ์์ฒญํ ๋ค ์๋ต์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค์ ๋ผ์ธ ์คํ
์ง๊ธ ์ง์ ํ ํจ์๋ฅผ ๋์ค์ ๋ค์ ๋ถ๋ฌ๋ฌ๋ผ - callback function
์ฝ๋ฐฑ์๋ ๋น๋๊ธฐ์ ์ผ๋ก ์คํํ๋ ๋ฐฉ๋ฒ๊ณผ ๋น๋๊ธฐ์ ์ผ๋ก ์คํํ๋ ๋ฐฉ๋ฒ์ด ์๋ค
//sychronous callback
//asynchronous callback
//์ฝ๋ฐฑ ์ง์ฅ ์ฒดํํ๊ธฐ
class UserStorage {
//UserStorage์๋ ๋ ๊ฐ์ง api๊ฐ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์
loginUser(id, password, onSuccess, onError) {
setTimeout(() => {
if (
(id === 'ellie' && password === 'dream') ||
(id === 'coder' && password === 'academy')
) {
onSuccess(id);
} else {
onError(new Error('not found'));
}
}, 2000);
}
//์๋๋ ๋ก๊ทธ์ธํ๋ ์ฌ์ฉ์์ ์ ๋ณด๋ฅผ ํ๋ฒ์ ๋ฐฑ์๋์์ ๋ฐ์์ค์ง๋ง ์ด๋ฒ๋ง ์ด๋ ๊ฒ ๊ฐ์
getRoles(user, onSuccess, onError) {
setTimeout(() => {
if (user === 'ellie') {
onSuccess({ name: 'ellie', role: 'admin' });
} else {
onError(new Error('no access'));
}
}, 1000);
}
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage.loginUser(
id,
password,
user => {
userStorage.getRoles(
user,
userWithRole => {
alert(
`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
);
},
error => {
console.log(error);
}
);
},
error => {
console.log(error);
}
);
๋น๋๊ธฐ ๊ฐํธ ์ฒ๋ฆฌ ๋์์ฃผ๋ ์ค๋ธ์ ํธ
์ ์์ ์ผ๋ก ๊ธฐ๋ฅ ์ํํ๋ฉด ๊ฒฐ๊ณผ๊ฐ ์ ๋ฌ, ์๋๋ผ๋ฉด ์๋ฌ ์ ๋ฌ
promise is a javascript object for asynchronous operation
1) state : ํ๋ก์ธ์ค๊ฐ ์ฒ๋ฆฌ ์ค์ธ์ง, ์ฑ๊ณต์ธ์ง, ์คํจ์ธ์ง ์ดํดํ๊ธฐ
2) producer ์ consumer : ๋์ ์ฐจ์ด์ ์๊ธฐ ์ํ๋ ๋ฐ์ดํฐ ์ ๊ณต/ ์ ๊ณต๋ ๋ฐ์ดํฐ ์ฐ๋ ์ฌ๋
state : pending(์คํผ๋ ์ด์ ์ํ์ค) -> fulfilled or rejected
Promise๋ class, ์์ฑ์์ด๊ธฐ ๋๋ฌธ์ new๋ผ๋ ํค์๋๋ฅผ ์ด์ฉํด์ ์ค๋ธ์ ํธ๋ฅผ ์์ฑํ ์ ์๋ค.
Promise ์์ฑ์์ executor๋ผ๋ ์ฝ๋ฐฑํจ์๋ฅผ ์ ๋ฌํด์ค์ผ ํ๋ค.
์ด executor ์ฝ๋ฐฑ ํจ์์ ๋ ๋ ๊ฐ์ง ์ฝ๋ฐฑํจ์๋ฅผ ์ ๋ฌ ๋ฐ๋๋ค.
๋ฐ๋ก resolve, reject
promise๋ฅผ ๋ง๋๋ ์๊ฐ ์ฐ๋ฆฌ๊ฐ ์ ๋ฌํ executor๋ผ๋ ์ฝ๋ฐฑ ํจ์๊ฐ ๋ฐ๋ก ์คํ๋๋ค
๋ฐ๋ผ์ ๋คํธ์ํฌ ์์ฒญ์ ์ฌ์ฉ์๊ฐ ์๊ตฌํ์ ๋๋ง ํด์ผํ๋ ๊ฒฝ์ฐ๋ผ๋ฉด ์ด ์ฌ์ค์ ๊ฐ๊ณผํ๋ฉด ๋ถํ์ํ ๋คํธ์ํฌ ํต์ ์ ํ๊ฒ ๋๋ค.
when new Promise is created, the executor runs automatically.
//2์ด ์ ๋ ์ผํ๋ค๊ฐ ์ฑ๊ณต์ ์ผ๋ก ๋ง๋ฌด๋ฆฌ๋๋ฉด ellie๋ผ๋ ๊ฐ์ resolve callback ํจ์์ ์ ๋ฌํ๋ค
const promise = new Promise((resolve, reject) => {
//doing some heavy work (network, read files)
console.log('doing something...');
setTimeout(() => {
resolve('ellie');
//reject(new Error('no network'))
//reject๋ Error๋ผ๋ ์ค๋ธ์ ํธ๋ฅผ ํตํด์ ๊ฐ์ ์ ๋ฌํ๋ค
//Error๋ผ๋ ํด๋์ค๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ ๊ณตํ๋ ์ค๋ธ์ ํธ ์ค์ ํ๋์ด๋ค
//then์ผ๋ก ์ฑ๊ณต์ ์ธ ์ผ์ด์ค๋ง ๋ค๋ฃจ๋ฉด uncaugth ์๋ฌ๊ฐ ๋ฐ์ํ๋ค
}, 2000);
});
then, catch, finally
promise ๊ฐ ์ ๋๋ฉด then, ๊ฐ์ ๋ฐ์์์ ์ํ๋ ์ฝ๋ฐฑํจ์์ ์ ๋ฌํ๋ค
์ฌ๊ธฐ์ value๋ผ๋ ํ๋ผ๋ฏธํฐ๋, ํ๋ก๋ฏธ์ค๊ฐ ์ ์์ ์ผ๋ก ์ํ๋ผ์ resolve ์ฝ๋ฐฑํจ์์์ ์ ๋ฌ๋ 'ellie'๋ผ๋ ๊ฐ
์ฒด์ด๋: ๋ฆฌํด๋ ์ด๋ ์ด์ ํจ์ ํธ์ถ - ๋ฆฌํด - ํธ์ถ
then ํธ์ถํ๋ฉด promise ๊ฐ ๋ฆฌํด์ด ๋๊ณ , ๋ฆฌํด๋ ํ๋ก๋ฏธ์ค์ ์บ์น๋ฅผ ๋ฑ๋กํ๋ ๊ฒ
promise //
.then((value) => {
console.log(value);
})
.catch(error => {
console.log(error); //Error: no network
})
.finally(() => { //์ฑ๊ณต ์คํจ์ ์๊ด์์ด ๋ฌด์กฐ๊ฑด ๋ง์ง๋ง์ ํธ์ถ๋๋ค
console.log('finally');
});
const fetchNumber = Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
//๋ค๋ฅธ ์๋ฒ์์ ๋ณด๋ด์ ๋ค๋ฅธ ์ซ์๋ก ๋ณํ๋ ๊ฐ ๋ฐ์์ค๊ธฐ
//then์์๋ ๊ฐ์ ์ ๋ฌํด๋ ๋๊ณ ๋ ๋ค๋ฅธ ๋น๋๊ธฐ์ธ promise๋ฅผ ์ ๋ฌํด๋ ๋๋ค
return new Promise((resolve, reject) => {
setTimeout(() => resolve(num -1), 1000);
});
})
.then(num => console.log(num)); //5
const getHen = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('๐'),1000);
});
const getEgg = hen =>
new Promise((resolve, reject) => {
//setTimeout(() => resolve(`${hen} => ๐ฅ`),1000);
setTimeout(() => reject(new Error(`error! ${hen} => ๐ฅ`)),1000);
});
const cook = egg =>
new Promise((resolve, reject) => {
setTimeout(() => resolve(`${egg} => ๐ณ`),1000);
});
//1
getHen()
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => console.log(meal));
//๋ ๊ฐ๊ฒฐํ๊ฒ ์ฐ๊ธฐ - ์ฝ๋ฐฑํจ์ ์ ๋ฌํ ๋ ๋ฐ์์ค๋ ๋ฐธ๋ฅ๋ฅผ ๋ค๋ฅธ ํจ์๋ก ๋ฐ๋ก ํ๋๋ฅผ ํธ์ถํ ๋ ์๋ต ๊ฐ๋ฅ
getHen() //
.then(getEgg)
.catch(error => {
return '๐ฅจ';
})
//๋ฌ๊ฑ ๋ฐ์์ฌ ๋ ์๋ฌ ์๊ธฐ๋ฉด ๋นต์ ๋์ ๋ฆฌํดํ๋ ๊ฒ์ผ๋ก ์๋ฌ ํธ๋ค๋ง
//์ฒ๋ฆฌํ๊ณ ์ถ์ ์๋ฌ ๋ค์ ๋ฐ๋ก catch ์์ฑํ๋ฉด ๋จ
//๐ฅจ => ๐ณ
.then(cook)
.then(console.log);
.catch(console.log);
//catch ์์ฑํจ์ผ๋ก์จ ์๋ฌ ํธ๋ค๋งํ ์ ์์
//์ฝ๋ฐฑ ์ง์ฅ ์ฒดํํ๊ธฐ
class UserStorage {
//UserStorage์๋ ๋ ๊ฐ์ง api๊ฐ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์
loginUser(id, password) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (
(id === 'ellie' && password === 'dream') ||
(id === 'coder' && password === 'academy')
) {
resolve(id);
} else {
reject(new Error('not found'));
}
}, 2000);
}
getRoles(user) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (user === 'ellie') {
resolve({ name: 'ellie', role: 'admin' });
} else {
reject(new Error('no access'));
}
}, 1000);
}
}
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
.loginUser(id,password)
.then(userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`);
.catch(console.log);
promise๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ณ ๊ฐํธํ๊ณ ๋๊ธฐ์ ์ผ๋ก ์คํ๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ํด์ค๋ค
ํ๋ก๋ฏธ์ค ์ฒด์ด๋์ ๊ณ์ ํ๊ฒ ๋๋ฉด ์ฝ๋ ๋์กํด์ง๋๋ฐ ๊ทธ๊ฑธ ๋๊ธฐ์์ผ๋ก ์คํํ๋ ๊ฒ์ฒ๋ผ ์์ฑํ ์ ์์
๊ธฐ์กด์ ์กด์ฌํ๋ ํ๋ก๋ฏธ์ค์ ๊ฐํธํ๊ฒ ์์ฑํ ์ ์๊ฒ ๋์์ฃผ๋, ๊ฐํธํ api๋ฅผ ์ ๊ณตํ๋ ๊ฒ
-> syntactic sugar
-> ์๋ก ํด๋์ค๊ฐ ์์, ์คํฌ๋ฆฝํธ์์ ํด๋์ค๋ ์๋ก์ด ๊ฒ์ด ์๋๋ผ ํ๋กํ ํ์
์ ๋ฒ ์ด์ค๋ก ํ ์์ ์ด์ง ๋ง ๋ถ์ฌ์ง ๊ทธ๋ด์ธํ syntactic sugar
clear style of using promise ;) // ๊ทธ๋ ๋ค๊ณ ๋ฌด์กฐ๊ฑด ํ๋ก๋ฏธ์ค ๋์ ๊ฒ ์๋๋ผ ์๋ก ๋ง๋ ๊ฒ ์์
//promise
function fetchUser() {
reurn new Promise ((resolve, reject) => {
//do network request in 10 secs
resolve('ellie');
});
}
//async ์๋์ ์ผ๋ก ํจ์ ์์ ์๋ ๋ธ๋ก๋ค์ด promise๋ก ๋ณํ์ด ๋๋ค
async function fetchUser() {
//do network request in 10 secs
return 'ellie';
}
await๋ async ์์์๋ง ์ธ ์ ์์
await๋ ๋๋ ์ด๊ฐ ๋๋ ๋๊น์ง ๊ธฐ๋ค๋ ค์ค๋ค
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple() {
await delay(2000);
return '๐';
}
async function getBanana() {
await delay(1000);
return '๐';
}
//promise ์ฐ๋ฉด, ์ค์ฒฉ์ ์ฒด์ด๋ํ๋ฉด ์ฝ๋ฐฑ ์ง์ฅ๊ณผ ๋น์ทํ ๋ฌธ์ ๋ฐ์
function pickFruits() {
return getApple()
.then(apple => {
return getBanana()
.then(banana => `${apple} + ${banana}`)
})
}
pickFruits().then(console.log);
//๋ค์์ async๋ฅผ ์ด ๊ฒ
async function pickFruits() {
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`;
}
//try cath๋ก ์๋ฌ ํธ๋ค๋ง ๊ฐ๋ฅ
pickFruits().then(console.log);
//๊ทผ๋ฐ ์ด๋ ๊ฒ ํ๋ฉด ์ฌ๊ณผ 1์ด ๋ฐ๋๋ 1์ด ๊ธฐ๋ค๋ ค์ผ ํ์์,,,
//promise ๋ง๋ค๋ฉด ๋ฐ๋ก ์คํํ๊ฒ ๋๋ ๊ฒ ํ์ฉํ์
//๋ณ๋ ฌ์ ์คํ๊ฐ๋ฅ
async function pickFruits() {
const applePromise = getApple();
const bananaPromise = getBanana();
const apple = await applePromise;
const banana = await bananaPromise;
return `${apple} + ${banana}`;
}
//๊ทผ๋ฐ ์ด๋ ๊ฒ ์๋ก ์๊ด์
์ด์ ๋ณ๋ ฌ์ ์คํ ๊ฐ๋ฅํ ๋ ๋ ๊นจ๋ํ๊ฒ ์ฝ๋ ์์ฑํ๋ promise api๊ฐ ์๋ค?
//๋ณ๋ ฌ์ ์ผ๋ก ๋ค ๋ฐ์ ๋๊น์ง ๋ชจ์์ค๋ค.
function pickAllFruits() {
return Promise.all([getApple(), getBanana()]).then(fruits =>
fruits.join(' + ')
);
}
pickAllFruits().then(console.log);
//๋๋ ๊ฐ์ฅ ๋จผ์ ๋ฐ์ง๋ ํ๋๋ง ๊ฐ๊ณ ์ถ์ด ํ ๋๋
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);
Homework
//๊ทธ๋ผ ์ด ๋ถ๋ถ ์ด๋ป๊ฒ await ํ์ฉํด์ ์ธ ์ ์์๊น?
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
.loginUser(id,password)
.then(userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`);
.catch(console.log);