🍊 감상

📙 열품타 코딩 시간 11hour
👍🏼 -
👎🏼 -

🚀 목표

• Udemy에서 Javascript 강좌 수강하기 (332/682)
• 커밋 연속 30일 달성하기 (8/30, 4.14 완료)
• 드림코딩 자바스크립트 기초 강의 완강 (12/23)
• 복습: TIL020 (완료)

📣 자바스크립트 기초 강의: 09-13

• 참고링크: 드림코딩 엘리

⭐️⭐️⭐️ Top 10 array function

join

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(',');
}

split

// 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(',');
}

reverse

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  //내 풀이
  const array = [1, 2, 3, 4, 5];
  array.reverse();
  //통과
}

배열 자체를 변화시킨다. return 값도 변하고 원래 배열도 변하고

slice

// 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),
];

find

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

첫번째로 사라진 요소를 리턴 콜백함수가 트루 리턴하면 바로 요소 리턴
배열에 들어있는 아이템마다 하나씩 순차적으로 호출
콜백함수가 리턴을 트루로 하게 되면 함수가 멈추게 되고 트루가 된 요소를 리턴

filter

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

map

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

배열 안에 들어있는 요소 한 가지 한 가지를 다른 것으로 변환해준다.
지정된 콜백함수를 호출하면서 각각의 요소를 함수를 거쳐서 새로운 값으로 변환
다른 방식의 데이터 만들고 싶을 때
콜백 함수 인자 의미없이 지정하지 마!

some

// 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는 모든 요소들이 조건을 충족해야 트루 리턴

reduce

// 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;
}, []);    

map + filter + join

// 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는 배열 자체를 리턴하기에 뒤에 이어서 쓸 수 있음

sort

// 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();
}

• 참고링크: 코딩앙마
  Lodash 라는 라이브러리 활용해서 _.sortBy(arr); 통해 쉽게 할 수 있음
  실무에서 로대시 많이 사용하므로 학습할 것

json

• 참고링크: 드림코딩

서버 통신의 시작

http

hypertext transfer protocol

client -> server : request (요청)
client <- server : response (응답)

hypertext: 사용되는 문서 이미지 파일 모두 포함해서 말하는 것

ajax, xml, xhr

asynchronous javascript and xml
웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술

xhr : xmlhttprequest - 오브젝트(브라우저 api 중 하나로 이 api를 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다)
fetch() API - 최근 브라우저에 추가된 api (익스플로러에서 안 됨😂)

xml: html같은 마크업 언어 중 하나 -> 가독성 불편, 파일 사이즈 비대해서 많이 사용 안 함
서버와 데이터 주고받을 때 굉장히 다양한 파일 포맷 전달받을 수 있음 -> xml만 쓸 수 있는 것 아님, xhr 에 흔들리지 않아도 됨, 외부로 가는 api 만들 때 이름 명료하게 짓기

json

json: javascript object notation
data format / 자바스크립트 오브젝트처럼 키와 밸류로 이루어져 있다
모바일에서도 가능,

object -> json(string) : serialize 직렬화
object <- json(string) : deserialize

object to json

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);
//콜백 함수 이용해서 세밀하게 통제

json to object

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

javascript callback

비동기 프로그래밍 - 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);
  }
);

javascript Promise

• 참고링크: 드림코딩

비동기 간편 처리 도와주는 오브젝트
정상적으로 기능 수행하면 결과값 전달, 아니라면 에러 전달

promise is a javascript object for asynchronous operation
1) state : 프로세스가 처리 중인지, 성공인지, 실패인지 이해하기
2) producer 와 consumer : 둘의 차이점 알기 원하는 데이터 제공/ 제공된 데이터 쓰는 사람

state : pending(오퍼레이션 수행중) -> fulfilled or rejected

Producer

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

Consumer

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

promise chaining

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 

error handling

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 작성함으로써 에러 핸들링할 수 있음 

callback hell promise로 처리하기

//콜백 지옥 체험하기
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);

async & await

promise를 더 간결하고 간편하고 동기적으로 실행되는 것처럼 보이게 해준다
프로미스 체이닝을 계속 하게 되면 코드 난잡해지는데 그걸 동기식으로 실행하는 것처럼 작성할 수 있음

기존에 존재하는 프로미스에 간편하게 작성할 수 있게 도와주는, 간편한 api를 제공하는 것
-> syntactic sugar
-> 예로 클래스가 있음, 스크립트에서 클래스는 새로운 것이 아니라 프로토타입을 베이스로 한 위에 살짝 덧 붙여진 그럴싸한 syntactic sugar

clear style of using promise ;) // 그렇다고 무조건 프로미스 나쁜 게 아니라 서로 맞는 게 있음

async

//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

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가 있다?
//병렬적으로 다 받을 때까지 모아준다. 

Promise.all

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);

Promise.race

//나는 가장 먼저 따지는 하나만 갖고 싶어 할 때는
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);