TIL023_210415

keepcalmยท2021๋…„ 4์›” 15์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
23/33
post-thumbnail

๐ŸŠ ๊ฐ์ƒ

๐Ÿ“™ ์—ดํ’ˆํƒ€ ์ฝ”๋”ฉ ์‹œ๊ฐ„ 9hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (332/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (9/30, 4.15 ์™„๋ฃŒ)
  • ~~๋“œ๋ฆผ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ ์™„๊ฐ• (์™„๋ฃŒ)~~

๐Ÿ“ฃ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜: 14-23

async & await

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);

javascript function

ํ•จ์ˆ˜ ์„ ์–ธ๊ณผ ํ˜ธ์ถœ

์–ด๋–ค ๊ฐ’์„ ์ „๋‹ฌ๋ฐ›์•„ ์˜ฌ ๊ฑด์ง€ ์ „๋‹ฌ๋ฐ›๋Š” ์ธ์ž ์ •์˜ ๋ถ€๋ถ„ + ํ•จ์ˆ˜ ์•ˆ์— ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ ์ž‘์„ฑํ•˜๋Š” ๋ถ€๋ถ„

function doSomething() {
  console.log('hello');; //์„ ์–ธ๋งŒ ํ•œ ๊ฒƒ
}
doSomething(); //ํ˜ธ์ถœ

ํ•จ์ˆ˜์˜ ๋‘ ๊ฐ€์ง€ ํƒ€์ž…

๊ฐ’์„ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜

๊ณ„์‚ฐ ํ›„ ํŠน์ •๊ฐ’ ์ „๋‹ฌ, ๋ฆฌํ„ด

//ํ•จ์ˆ˜ ์„ ์–ธ
function add(a,b) {
  const sum = a+ b;
  return sum;
}
//a์™€ b๋ผ๋Š” ํŠน์ •ํ•œ ์ธ์ž๊ฐ’์„ ๋ฐ›์•„์™€์„œ const sum์ด๋ผ๋Š” ๋ณ€์ˆ˜์— a,b ์ €์žฅ
//a,b ๊ฐ’ ๋”ํ•œ๋’ค sum์ด๋ผ๋Š” ๋ณ€์ˆ˜์— ํ• ๋‹น 
//a,b์— ๊ฐ’ ์ „๋‹ฌํ•ด์„œ a,b๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ๊ฐ๊ฐ์˜ ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค
//์ฝ”๋“œ๋ธ”๋ก ์ˆ˜ํ–‰ ๋’ค return์ด๋ผ๋Š” ํ‚ค์›Œ๋“œ ์ด์šฉํ•ด์„œ ๊ณ„์‚ฐํ•œ ๊ฐ’ ์ „๋‹ฌ

//ํ•จ์ˆ˜ ํ˜ธ์ถœ
const result = add(1,2); //์ •์˜ํ•จ๊ณผ ๋™์‹œ์— ๊ฐ’ ํ• ๋‹น, ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ฒƒ
console.log(result);

ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ์ „๋‹ฌ

function doSomething(add) {
  console.log(add);; //์„ ์–ธ๋งŒ ํ•œ ๊ฒƒ
}

doSomething(add); //ํ•จ์ˆ˜ ํ˜ธ์ถœํ•˜๋ฉด์„œ ์ธ์ž๋กœ ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ ์ „๋‹ฌ //f add(a,b) {...}
doSomething(add()); //์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ•จ์ˆ˜๊ฐ€ ๋ฐ”๋กœ ์‹คํ–‰๋ผ๋ฒ„๋ฆฐ๋‹ค //sum
//add ํ˜ธ์ถœ๋œ ๋’ค์— ๋‚˜์˜จ ๋งˆ์ง€๋ง‰์œผ๋กœ ์ „๋‹ฌ๋œ ๊ฐ’์ด ์ „๋‹ฌ๋จ, ๋”ฐ๋ผ์„œ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹˜

//ํ•จ์ˆ˜ ์„ ์–ธ
function add(a,b) {
  const sum = a+ b;
  return sum;
}
function doSomething(add) {
  console.log(add);; 
  const result = add(2,3);
  console.log(result);
}
//ํ•จ์ˆ˜ ํ˜ธ์ถœ
doSomething(add);

ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹น

const addFun = add;
console.log(add);
addFun(1,2);

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณ€์ˆ˜

primitive ํƒ€์ž…๊ณผ object

๋ณ€์ˆ˜

์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๊ณ  ์žˆ์Œ
๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋‹ค
๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ primitive data type์ด๋ผ๊ณ  ํ•œ๋‹ค
๋ณ€์ˆ˜์˜ ์ด๋ฆ„์€ ๋กœ์ง๊ณผ ์—ฐ๊ด€๋œ ์˜๋ฏธ์žˆ๋Š” ์ด๋ฆ„์œผ๋กœ ์ง“๊ธฐ

number, string, boolean, null, undefined, symbol

let number = 2; //์ˆซ์ž๊ฐ€ ๋ณ€์ˆ˜์— ํ• ๋‹น 
let number2 = number;
//number๋ผ๋Š” ๋ฐ์ดํ„ฐ์— ๋“ค์–ด์žˆ๋Š” 2๋ฅผ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•ด์„œ ํ• ๋‹นํ•œ๋‹ค 

number2 = 3; //3์„ ์—…๋ฐ์ดํŠธ, number์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค

๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์˜ number๋ผ๋Š” ๋ณ€์ˆ˜ ์•ˆ์— 2๋ผ๋Š” ๊ฐ’, ์ˆซ์ž ๋ฐ์ดํ„ฐ๊ฐ€ ์ ์žฌ๋œ๋‹ค
๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋ฉด ๋ฉ”๋ชจ๋ฆฌ์— ๊ทธ ๋ณ€์ˆ˜๋ฅผ ์œ„ํ•œ ๊ณต๊ฐ„์ด ์ƒ๊ธด๋‹ค -> ๋ฉ”๋ชจ๋ฆฌ์— ๋ฐ”์ดํŠธ ์‚ฌ์ด์ฆˆ์˜ ๊ณต๊ฐ„์ด ํ™•๋ณด๋œ๋‹ค

object

primitive type์„ ์ œ์™ธํ•˜๋ฉด ๋ชจ๋‘ object
์˜ค๋ธŒ์ ํŠธ: ์ตœ์†Œํ•œ ํ•œ ๋‘๊ฐ€์ง€ ์ด์ƒ์˜ ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ ๊ตฐ๋ฐ์— ๋ฌถ์–ด๋†“์€ ๊ฒƒ
(e.g. ๋ฐฐ์—ด, ํ•จ์ˆ˜ ๋“ฑ)

let obj = {
  name: 'eillie',
  age: 5
};

let obj2 = obj 
console.log(obj2.name);

obj.name = 'james';
//obj2์˜ ๊ฐ’๋„ ๋ฐ”๋€๋‹ค

์˜ค๋ธŒ์ ํŠธ์— ์žˆ๋Š” ํ‚ค๋„ ๊ฐ๊ฐ ํ‚ค๋งˆ๋‹ค ๋ฉ”๋ชจ๋ฆฌ์— ํ• ๋‹น์ด ๋œ๋‹ค
๋ณ€์ˆ˜ ํ• ๋‹นํ•˜๋ฉด ์•ˆ์˜ ๊ฐ’์ด ๋ณต์‚ฌ๋ผ์„œ ๋“ค์–ด์˜จ๋‹ค
primitive ํƒ€์ž…์€ ๋ฐ์ดํ„ฐ ์ž์ฒด๊ฐ€ ๋ณ€์ˆ˜์— ๋‹ด๊ฒจ์žˆ์–ด์„œ ๋ฐ์ดํ„ฐ ์ž์ฒด๊ฐ€ ๋ณต์‚ฌ
์˜ค๋ธŒ์ ํŠธ๋Š” ์ฃผ์†Œ๋งŒ ๋ณต์‚ฌ๋ผ์„œ ๋“ค์–ด์˜จ๋‹ค
primitiveํƒ€์ž…์€ ๋ฉ”๋ชจ๋ฆฌ์— ๋ฐ”๋กœ ํ• ๋‹น๋  ์ˆ˜ ์žˆ๋‹ค

let์€ ๊ฐ’ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ, const๋Š” ๊ฐ’ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅ
๊ทผ๋ฐ ์™œ ์˜ค๋ธŒ์ ํŠธ๋Š” const๋กœ ํ–ˆ๋Š”๋ฐ ์™œ ๋ณ€๊ฒฝ๋˜๋‚˜?
์˜ค๋ธŒ์ ํŠธ๊ฐ€ ํ• ๋‹น๋œ ๋ ˆํผ๋Ÿฐ์Šค์˜ ๊ฐ’์€ ์ž ๊ฒจ์žˆ๋‹ค ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅ
๋Œ€์‹  obj๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ์ด๋ฆ„์„ ๋ฐ”๊พธ๋Š” ๊ฑด ๊ฐ€๋Šฅ
reference๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•จ์ˆ˜

๋ฐ˜๋ณต์ ์œผ๋กœ ์ˆ˜ํ–‰๋˜๋Š” ๋กœ์ง์„ ์“ธ ๋•Œ
์ฝ”๋“œ๋ธ”๋ก ์•ˆ์˜ ํ•จ์ˆ˜, ๊ธฐ๋Šฅ์— add๋ผ๋Š” ์ด๋ฆ„์„ ์ง€์ •ํ•ด ์ค€ ๊ฒƒ - ์ด๊ฑด ์ด์ œ ํ•จ์ˆ˜๋ผ๊ณ  keword๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์— ์•Œ๋ฆผ
ํ•จ์ˆ˜ ์ด๋ฆ„๋„ ๊ฐ„๊ฒฐํ•˜๊ณ  ๋ช…ํ™•ํ•˜๊ฒŒ ์“ฐ๊ธฐ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ํƒ€์ž…์ด ์—†๋‹ค

function add(a,b) {
  return a+b;
}

function surprise(operator) {
  const result = operator(2,3); //add(2,3)
  console.log(result);
}

surprise(add);

๋ฐ›์•„์˜ค๋Š” ์ธ์ž์˜ ์ด๋ฆ„๋ฅผ ํ†ตํ•ด ๋ธ”๋Ÿญ ์•ˆ์—์„œ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค
์–ด๋–ค ๋ฐ์ดํ„ฐ๊ฐ€ ์˜ฌ์ง€๋Š” ๋ชจ๋ฅด์ง€๋งŒ ๊ทธ ๋ฐ์ดํ„ฐ์˜ ์ด๋ฆ„์„ ํ†ตํ•ด ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ
ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“œ๋Š” ์‹œ์ ์—๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋“ค์–ด์žˆ์ง€ ์•Š์€ ๊ฒƒ
ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์‹ค์ œ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค

ํ•จ์ˆ˜๋„ ์˜ค๋ธŒ์ ํŠธ ์ค‘์˜ ํ•˜๋‚˜ ํ•จ์ˆ˜๊ฐ€ ๋“ค์–ด์žˆ๋Š” ๋ ˆํผ๋Ÿฐ์Šค๊ฐ€ ๋ฐ์ดํ„ฐ์— ๋‹ด๊น€

ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ๋ณ€์ˆ˜์— ํ•จ์ˆ˜์˜ ๋ ˆํผ๋Ÿฐ์Šค๊ฐ€ ํ• ๋‹น๋˜๋Š” ๊ฒƒ
ํ•จ์ˆ˜์˜ ์ด๋ฆ„์€ ํ•จ์ˆ˜๊ฐ€ ์ •์˜๋œ ๊ณณ์„ ๊ฐ€๋ฆฌํ‚ค๊ณ  ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ํ•จ์ˆ˜๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ์ฃผ์†Œ๊ฐ€ ๋ณ€์ˆ˜์— ํ• ๋‹น, ๊ฒฐ๊ตญ ๊ฐ™์€ ํ•จ์ˆ˜ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ์–ด์„œ ๊ฐ™์€ ํ•จ์ˆ˜๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค

์•„๋ฌด๋Ÿฐ ์ธ์ž๋ฅผ ๋ฐ›์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋Š” ์ธํ’‹์„ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค
์ธ์ž๋„ ์˜๋ฏธ์žˆ๋Š” ์ด๋ฆ„์“ฐ๊ธฐ, ์šฐ๋ฆฌ๊ฐ€ ์ •์˜ํ•œ ์•„์ด์ž„
์ธ์ž๋ฅผ ํ•จ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋ฉด, ํ•จ์ˆ˜๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•˜๋‹ค

์—ฐ์‚ฐ์ž

if๊ฐ€ true๋ฉด ์‹คํ–‰, false๋ฉด ์‹คํ–‰ ์•ˆ ํ•จ
false: 0, -0, '', null, undefined (๋น„์–ด์žˆ๋Š” ๊ฐ’๋“ค)
true: -1, 'false', []
๋ฐฐ์—ด์€ ์˜ค๋ธŒ์ ํŠธ์ด๊ธฐ์— ํŠธ๋ฃจ

let num;
num && console.log(num); //false์ด๋ฏ€๋กœ ์‹คํ–‰๋˜์ง€ ์•Š์Œ 
let num2 =9;
num2 && console.log(num2); //์‹คํ–‰
let obj;
console.log(obj.name); //์—๋Ÿฌ, ์—†๋Š” ๊ฒƒ์— ์ ‘๊ทผํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ ์ž์ฒด๊ฐ€ ์ฃฝ์–ด๋ฒ„๋ฆฐ๋‹ค
obj && console.log(obj.name); //obj๊ฐ€ ์žˆ๋‹ค๋ฉด ์ ‘๊ทผํ•˜๋ผ๋Š” ๋ง, ๋”ฐ๋ผ์„œ ์‹คํ–‰ ์•ˆ ๋จ 

ํด๋ž˜์Šค

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
}

Counter๋ผ๋Š” ํด๋ž˜์Šค์—๋Š” counter๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ณ€์ˆ˜๋Š” ํด๋ž˜์Šค ์ด์šฉํ•ด์„œ ์˜ค๋ธŒ์ ํŠธ ๋งŒ๋“œ๋Š” ์ˆœ๊ฐ„ 0์œผ๋กœ ์ดˆ๊ธฐํ™”๋œ๋‹ค
ํด๋ž˜์Šค์—์„œ ํ•จ์ˆ˜ ์„ ์–ธํ•  ๋•Œ๋Š” function ์•ˆ ์ ์–ด๋„ ๋จ
ํด๋ž˜์Šค๋Š” ๋‹ค์–‘ํ•œ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ฒญ์‚ฌ์ง„
๋ ˆ๊ณ ์ฒ˜๋Ÿผ ์“ธ ์ˆ˜ ์žˆ๋„๋ก ์žฌ์‚ฌ์šฉ์„ฑ ๋†’์ด๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•ต์‹ฌ ์ตœ์‹  ๋ฌธ๋ฒ•

(ES6, ES11) , ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ ์‹คํ–‰ ์•ˆ ๋˜๋ฏ€๋กœ ๋ฐ”๋ฒจ ์‚ฌ์šฉํ•˜๊ธฐ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ: ๋ฆฌ์•กํŠธ, ์•ต๊ทค๋Ÿฌ, ๋ทฐ

ES6

shorthand property names

ํ‚ค์™€ ๋ฐธ๋ฅ˜์˜ ์ด๋ฆ„์ด ๋™์ผํ•˜๋‹ค๋ฉด ์ถ•์•ฝํ•ด์„œ ์ž‘์„ฑ ๊ฐ€๋Šฅ

  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };
  const name = 'Ellie';
  const age = '18';

  // ๐Ÿ’ฉ
  const ellie2 = {
    name: name,
    age: age,
  };
   // โœจ
  const ellie3 = {
    name,
    age,
  };

Destruncturing assignment

์˜ค๋ธŒ์ ํŠธ ํ‚ค์™€ ๋ฐธ๋ฅ˜์— ์ ‘๊ทผํ•  ๋•Œ ํ‚ค์˜ ์ด๋ฆ„์„ ๊ด„ํ˜ธ ์•ˆ์— ์ •์˜, ํ‚ค์™€ ๋ฐธ๋ฅ˜๊ฐ€ ๊ฐ๊ฐ ๋„ค์ž„๊ณผ ๋ ˆ๋ฒจ์— ๋งž๊ฒŒ ํ• ๋‹น

  const student = {
    name: 'Anna',
    level: 1,
  };

  // ๐Ÿ’ฉ
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  // โœจ
    const { name, level } = student;
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);
    
    
  // array
  const animals = ['๐Ÿถ', '๐Ÿ˜ฝ'];
  // ๐Ÿ’ฉ
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  // โœจ
    const [first, second] = animals;
    console.log(first, second);

Spread syntax

์ฃผ์†Œ์˜ ์ฐธ์กฐ๊ฐ’์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์ด๊ธฐ์— ๊ฐ’ ๋ฐ”๊พธ๋ฉด ์›๋ž˜์— ์ ์šฉ๋จ

  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation
  const fruits1 = ['๐Ÿ‘', '๐Ÿ“'];
  const fruits2 = ['๐ŸŒ', '๐Ÿฅ'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge //๋™์ผํ•œ key ๋ฉด ๊ฐ’ ๋ฎ์–ด์”Œ์šฐ๋ฏ€๋กœ ์ฃผ์˜
  const dog1 = { dog: '๐Ÿ•' };
  const dog2 = { dog: '๐Ÿถ' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();

default parameters

  // ๐Ÿ’ฉ
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }
    printMessage('hello');
    printMessage();
  // โœจ
    function printMessage(message = 'default message') {
      console.log(message);
    }
    printMessage('hello');
    printMessage();

ternary operator

  // ๐Ÿ’ฉ
    let component;
    if (isCat) {
      component = '๐Ÿ˜ธ';
    } else {
      component = '๐Ÿถ';
    }
    console.log(component);
  // โœจ
    const component = isCat ? '๐Ÿ˜ธ' : '๐Ÿถ';
    console.log(component);
    console.log(isCat ? '๐Ÿ˜ธ' : '๐Ÿถ');

template literals

  const weather = '๐ŸŒค';
  const temparature = '16ยฐC';

  // ๐Ÿ’ฉ
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  );
  // โœจ
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

ES11

optional chaining

  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // ๐Ÿ’ฉ๐Ÿ’ฉ๐Ÿ’ฉ๐Ÿ’ฉ๐Ÿ’ฉ๐Ÿ’ฉ
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1);
    // printManager(person2);

  // ๐Ÿ’ฉ๐Ÿ’ฉ๐Ÿ’ฉ
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);

  // ๐Ÿ’ฉ
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);

  // โœจ
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);

nullish coalescing operator

    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);

    const name = null;
    const userName = name || 'Guest';
    console.log(userName);

  // ๐Ÿ’ฉ
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);

  // โœจ
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined';
    console.log(message);

๐Ÿ’ก ํŒ

T์ž ๊ณต๋ถ€๋ฒ•

๊ฐœ๋ฐœ์ž ๊ณต๋ถ€๋ฐฉ๋ฒ•๊ณผ ๊ฒฝ๋ ฅ๊ด€๋ฆฌ๋ฒ•

๋„“๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ์ „๋ฌธ์„ฑ ํ•˜๋‚˜ ๊ด€๋ฆฌ + ํ† ์–‘ ์œ„์—

ํ”„๋ก ํŠธ์—”๋“œ

-- ๊นŠ์ด

  1. ๊ธฐ๋ณธ: html, css, javascript
  2. ํ”„๋ ˆ์ž„์›Œํฌ: ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ๋ทฐ, ๋ฆฌ์•กํŠธ
  3. ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฒˆ๋“ค๋ง๋˜๋Š” ์‚ฌ์ด์ฆˆ ์ค„์ด๊ธฐ ๊ณ ๋ ค
  4. ๋ ˆ์ด์ง€๋กœ๋”ฉ, ๋ฒˆ๋“ค๋ง ์Šคํ”Œ๋ฆฌํŒ…ํ•ด์„œ ์ „๋‹ฌํ•˜๊ธฐ, ํผํฌ๋จผ์Šค ๋ถ„์„, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ ˆ์ดํŠธ ์ค„์ด๊ณ  ์˜ตํ‹ฐ๋งˆ์ด์ œ์ด์…˜ ํ•˜๊ธฐ
  5. ๋””์ž์ธ์Šคํ‚ฌ, ๋ฐฑ์—”๋“œ ํ†ต์‹  ๋ฐฉ๋ฒ•, ๋ฐฑ์—”๋“œ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ณ  ๋” ์ตœ์ ํ™”๋œ ์„œ๋น„์Šค ๋ ˆ์ด์–ด ๋งŒ๋“œ๋Š” ๋ฒ•

-- ๋„“์ด

  • ๋ฐฑ์—”๋“œ ์–ธ์–ด, ๋…ธ๋“œ.js, ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ํฌ๋กœ์Šคํ”Œ๋žซํผ

-- ํ† ์–‘
์ปดํ“จํ„ฐ ๊ณตํ•™์˜ ๊ธฐ๋ณธ ์ง€์‹(์šด์˜์ฒด์ œ, ๋„คํŠธ์›Œํฌ, ์–ด์…ˆ๋ธ”๋ฆฌ, ์ž„๋ฒ ๋””๋“œ, ์ˆ˜ํ•™(ํ–‰๋ ฌ,ํ†ต๊ณ„)
์ž๋ฃŒ๊ตฌ์กฐ(๋ฐฐ์—ด,๋ฆฌ์ŠคํŠธ,๋งต ์–ธ์ œ ์–ด๋–ป๊ฒŒ ์จ์•ผ ํšจ์œจ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ด€๋ฆฌ ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์ฐจ์ด์ )
์•Œ๊ณ ๋ฆฌ์ฆ˜(์ƒํ™ฉ๊ณผ ์ฃผ์–ด์ง„ ์ž๋ฃŒ๊ตฌ์กฐ์— ๋”ฐ๋ผ ์–ด๋–ค ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์จ์•ผ ์‹œ๊ฐ„๊ณผ ๊ณต๊ฐ„์„ ํšจ์œจ์ ์œผ๋กœ ์“ฐ๋Š”์ง€)
๊นจ๋—ํ•œ ์ฝ”๋“œ, test driven code, refactoring, code review

๊ณต๋ถ€๋ฒ•

  1. ํ† ์–‘(๊ธฐ๋ณธ)๊ณผ ์ตœ๋Œ€ํ•œ ๋„“๊ฒŒ ๋ฐฐ์šฐ๊ธฐ
  2. ํ˜„์—… ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด ๊นŠ๊ฒŒ ๊ณต๋ถ€ (์ปค๋ฎค๋‹ˆํ‹ฐ ์กฐ์ธ) -> ์ „๋ฌธ์„ฑ ๊ธฐ๋ฅด๊ธฐ
  3. ์‹œ๋‹ˆ์–ด ๋‹ค์‹œ ๋„“๊ฒŒ ๊ณต๋ถ€
  4. ๊ธฐ์ˆ ์ž vs ๋งค๋‹ˆ์ง•

๋น„์ „๊ณต์ž๋Š” ์–ธ์–ด ํ•˜๋‚˜ ๋งˆ์Šคํ„ฐํ•˜๊ณ  ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€
-> ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ผ๋‹จ ๋งˆ์Šคํ„ฐํ•˜๊ธฐ

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 27.0-

27. Async

27.1 Call stack

call stack = mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions

how js knows what function is currently being run and what function are called from within that function, etc like finger in a book

stack: basic data structure in computer science

  • LIFO : last in first out โ—€๏ธŽ
  • FIFO : first in first out

how it works

When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.

์ฝœ์Šคํƒ ๋ณด์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ

ํ˜น์€ ํฌ๋กฌ ๊ฐœ๋ฐœ ํˆด์˜ source๋ฅผ ๋ด๋„ ์•Œ ์ˆ˜ ์žˆ๋‹ค

๐Ÿ•น Project

์Œ์•… DB ์‚ฌ์ดํŠธ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘

๊ธฐํš์„œ ์ž‘์„ฑ, ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ๊ณผ ํ™”๋ฉด ๊ธฐํšํ•จ

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