Promise는 자바스크립트에서 브라우저에서 제공하는 비동기 함수인 Web APIs를 실행할 때 실행한 코드가 완료 될때까지 대기하지 않고 바로 다음 코드를 실행할 수 있도록 해주고, 비동기 함수의 실행이 완료되면 then()함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해줍니다.

• Promise는 new 생성자 함수를 사용해서 생성합니다.

    const promise = new Promise((resolve, reject) => {
     if(/*처리 성공 */) {
        resolve("결과 데이터");
     } else {
        reject(new Error("에러"));
     }
    });

• 요청에 대한 응답이 성공적으로 오면, resolve() 함수에 결과 전달

• 실패하면 reject()함수에 에러 전달.

• Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?

- resolve : 주어진 값으로 이행하는 새로운 프라미스 객체를 반환. 주어진 값이 then 메서드를 가지는 값인 경우 then메서드를 따라가서 최종상태를 결정.
- reject : 주어진 이유로 거절하는 새로운 프라미스 객체를 반환.

• resolve, reject함수에는 인자를 넘길 수 있습니다. 이때 넘기는 인자는 어떻게 사용할 수 있나요?\

  • then(), catch(), finally()등 후속 처리 메서드를 통해 사용.

• new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?

  인스턴스 메서드

• Promise.prototype.then 메서드는 무엇을 리턴하나요?

  • Promise를 리턴, Promise성공, 실패 경우 각각의 콜백함수를 인자로 받는다.

• Promise.prototype.catch 메서드는 무엇을 리턴하나요?

  returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)  and deals with rejected cases only

  (in fact, calling obj.catch(onRejected)  internally calls obj.then(undefined, onRejected)

• Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?

  • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태
  • Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

• await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?

  async  함수는 항상 promise를 반환합니다. 만약 async  함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸집니다.

  예를 들어

    async function foo() {
        return 1
    }

  위 코드는 아래와 같습니다.

    function foo() {
        return Promise.resolve(1)
    }

• await 키워드를 사용할 경우, 어떤 값이 리턴되나요?

  Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값

————————————————————————————————— 🔑

에러를 만나면 오히려 좋아 . 로그 찍어 두고 해결하는 과정을 즐기고 기록. 매일매일 문제를 스스로 정의하고 해결 방법을 찾아서 시도하는 과정을 연습한다

Achievement Goals

• 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
  • 변수에 할당(assignment)할 수 있다.
  • 다른 함수의 인자(argument)로 전달될 수 있다.
  • 다른 함수의 결과로 리턴될 수 있다.
• 고차 함수(higher-order function)에 대해 설명할 수 있다.
  • 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수.
  • 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(caller function)
• 고차 함수를 자바스크립트로 작성할 수 있다.
  • forEach, find, filter, map, reduce, sort, some, every

Achievement Goals

• 배열 내장 고차 함수 filter에 대해서 이해할 수 있다.
• filter에 대한 이해를 기반으로, 나머지 고차 함수를 스스로 학습할 수 있다.
• 추상화(abstraction)에 대해 설명할 수 있다.
  • 추상화(abstraction)는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다.
• 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다. 함수 = 값을 전달받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화

고차 함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어올립니다.

• 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
• 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준
• 고차 함수를 활용하여 프로그램을 작성할 수 있다.

🔑 오늘 한마디 요약: 학습 몰입 시간을 체크하자.

세로 길이 2, 가로 길이 n인 2 x n 보드가 있습니다. 2 x 1 크기의 타일을 가지고 이 보드를 채우는 모든 경우의 수를 리턴해야 합니다.

입력

인자 1 : n

• number 타입의 1 이상의 자연수

출력

• number 타입을 리턴해야 합니다.

주의사항

• 타일을 가로, 세로 어느 방향으로 놓아도 상관없습니다. (입출력 예시 참고)

입출력 예시

let output = tiling(2);
console.log(output); // --> 2

output = tiling(4);
console.log(output); // --> 5
/*
2 x 4 보드에 타일을 놓는 방법은 5가지
각 타일을 a, b, c, d로 구분

2 | a b c d
1 | a b c d
------------

2 | a a c c
1 | b b d d
------------

2 | a b c c
1 | a b d d
------------

2 | a a c d
1 | b b c d
------------

2 | a b b d
1 | a c c d
------------
*/

Advanced

• 타일링 문제를 해결하는 효율적인 알고리즘(O(N))이 존재합니다. 반드시 직접 문제를 해결하시면서 입력의 크기에 따라 어떻게 달라지는지 혹은 어떻게 반복되는지 관찰하시기 바랍니다.

접근 방법

2 x 4 보드에 타일을 놓는 방법은 5가지다. 각 타일을 a, b, c, d로 구분한다. 아직 타일이 놓이지 않는 부분은 -로 표기한다. 타일을 놓는 방법은 가장 왼쪽부터 세로로 놓거나 가로로 놓는 것으로 시작한다.

1) 세로로 놓는 법 2 | a - - - 1 | a - - -

2) 가로로 놓는 법 타일을 가로로 놓게 되면, 그 바로 아래에는 가로로 놓을 수 밖에 없다. 2 | a a - - 1 | b b - -

이때, 타일이 아직 놓이지 않은 부분은 사실 크기만 다를뿐 같은 종류의 문제라는 것을 알 수 있다. 즉, 2 x 4 보드에 타일을 놓는 방법은 아래 두 가지 방법을 더한 결과와 같다.

1) 2 x 3 보드에 타일을 놓는 방법 2) 2 x 2 보드에 타일을 놓는 방법 따라서 2 x n 타일 문제는 아래와 같이 재귀적으로 정의할 수 있다. 주의: 재귀적 정의에는 항상 기초(base), 즉 더 이상 재귀적으로 정의할 수 없는(쪼갤 수 없는) 문제를 별도로 정의해야 한다

 let tiling = function (n) {
   if (n <= 2) return n;
   return tiling(n - 1) + tiling(n - 2);
 };

구현한 코드

• dynamic with tabulation: O(N)
  • tabulation은 데이터를 테이블에 정리하면서 bottom-up 방식으로 해결하는 기법을 말합니다.

 let tiling = function (n) {
   const memo = [0, 1, 2];/   if (n <= 2) return memo[n];
  for (let size = 3; size <= n; size++) {
     memo[size] = memo[size - 1] + memo[size - 2];
   }
   return memo[n];
 };

다른 방법

// dynamic with memoization: O(N)
let tiling = function (n) {
  // 인덱스를 직관적으로 관리하기 위해
  // 앞 부분을 의미없는 데이터(dummy)로 채운다.
  const memo = [0, 1, 2];

  // 재귀를 위한 보조 함수(auxiliary function)을 선언)
  const aux = (size) => {
    // 이미 해결한 문제는 풀지 않는다.
    if (memo[size] !== undefined) return memo[size];
    if (size <= 2) return memo[n];
    memo[size] = aux(size - 1) + aux(size - 2);
    return memo[size];
  };
  return aux(n);
};

• dynamic with slicing window: O(N)

 slicing window은 필요한 최소한의 데이터만을 활용하는 것을 말합니다.
 크기 n의 문제에 대한 해결을 위해 필요한 데이터는 오직 2개뿐이라는 사실을 이용합니다.

 let tiling = function (n) {
   let fst = 1,
     snd = 2;
   if (n <= 2) return n;
   for (let size = 3; size <= n; size++) {
      // 앞의 두 수를 더해 다음 수를 구할 수 있다.
     const next = fst + snd;
     // 다음 문제로 넘어가기 위해 필요한 2개의 데이터의 순서를 정리한다.
     fst = snd;
     snd = next;
   }
   return snd;
 };

• 이진 트리와 BST 이외에 어떠한 트리가 있을까요?

• 균형 이진 탐색 트리란 무엇일까요?

• (Advanced) 힙이란 무엇일까요?

  힙은 트리가 완전한 이진 트리인 특수한 트리 기반 데이터 구조입니다. 일반적으로 힙에는 두 가지 유형이 있습니다.

  1. Max-Heap

     : Max-Heap에서 루트 노드에 있는 키는 모든 자식에 있는 키 중에서 가장 커야 합니다. 이진 트리의 모든 하위 트리에 대해 동일한 속성이 재귀적으로 true여야 합니다.

  2. Min-Heap

     : Min-Heap에서 루트 노드에 있는 키는 모든 자식에 있는 키 중에서 최소여야 합니다. 이진 트리의 모든 하위 트리에 대해 동일한 속성이 재귀적으로 true여야 합니다.

![https://media.geeksforgeeks.org/wp-content/cdn-uploads/MinHeapAndMaxHeap.png](https://media.geeksforgeeks.org/wp-content/cdn-uploads/MinHeapAndMaxHeap.png)

• DFS와 BFS의 장단점은 또 무엇이 있을까요?

  Breadth First Search

  BFS stands for Breadth First Search is a vertex based technique for finding a shortest path in graph. It uses a Queue data structure which follows first in first out. In BFS, one vertex is selected at a time when it is visited and marked then its adjacent are visited and stored in the queue. It is slower than DFS. Ex- 

            A
           / \
          B   C
         /   / \
        D   E   F

  Output is: 

    A, B, C, D, E, F

  Depth First Search

  DFS stands for Depth First Search is a edge based technique. It uses the Stack data structure, performs two stages, first visited vertices are pushed into stack and second if there is no vertices then visited vertices are popped. Ex- 

            A
           / \
          B   C
         /   / \
        D   E   F

  Output is: 

    A, B, D, C, E, F

  BFS vs DFS

  

• 그래프가 굉장히 크다면 어떤 탐색 기법을 고려해야 할까요?

  DFS : Stack,재귀로 구현

• 반대로, 그래프의 규모가 작고, depth가 얕다면 어떤 탐색 기법을 고려해야 할까요?

  BFS : Queue로 구현

레퍼런스

• 반대로, 그래프의 규모가 작고, depth가 얕다면 어떤 탐색 기법을 고려해야 할까요?

  BFS : Queue로 구현

Big O

알고리즘 스피드는 “완료까지 걸리는 절차의 수"로 결정 된다.

Big O를 이해한다면?

• 시간 복잡도를 쉽게 설명 할 수 있다.
• 알고리즘 분석을 빠르게 하고 언제 무엇을 쓸지 결정.
• 자신의 코드를 평가 할 수 있다.

0(1)

let arr = [1,2,3,.....100];
    function printFirst(arr) {
    console.log(arr[0]);
}

printFirst 함수의 시간복잡도를 BigO로 표현하면?

인풋이 몇개가 되든 printFirst 함수는 첫번째 요소를 한번 출력하므로 시간 복잡도는 상수 시간(constant time)이다. ⇒ O(1)

let arr = [1,2,3,.....100];
    function printThreeTimes(arr) {
        console.log(arr[0]);
        console.log(arr[0]);
        console.log(arr[0]);
}

그렇다면 위 함수인 경우엔 O(3)일까?

BigO는 함수의 디테일에 관계없이 인풋 사이즈에 따라서 함수가 어떻게 작동하는지를 표현할 뿐이다.

3은 상수이고 빅오에서 상수는 무시한다.

인풋이 몇개든 관계없이 스텝이 정해진 알고리즘이므로 빅오는 ⇒ O(1)

만약 선형 검색(Linear Search)에서 input size 가 = N 이라면 N 스텝이 요구 된다.

⇒ 한번에 표현 : 선형검색의 시간 복잡도 = 0(N)

0(N)

function print_all(arr) {
    for (let item of arr) {
        console.log(item) 
    };
    for (let item of arr) {
        console.log(item) 
    };
}
BigO => 0(N)

배열 사이즈가 10이면 10번 출력한다. 배열이 커지면, 필요 스텝도 커진다.

배열의 각각 item을 위해 작업해야 하고 이것은 선형 탐색과 비슷하다.

0(n**2)

2차 시간(Quadratic Time)

ex) 중첩 반복 (Nested Loops)

function print_twice(arr) {
    for (let item of arr) {
        for (let el of arr) {
                            console.log(item, el);
    }
 }
}

인풋이 10개라면 100번의 스텝이 필요.

선형 시간복잡도가 더 효율적

O(log n)

로그 시간(Logarithmic Time) : 이진 검색 알고리즘

• 인풋이 10개에서 20개가 되어도 스텝은 + 1 이다. 절반으로 나눠서 진행하기 때문에!
• 로그(logarithm)는 지수(exponent)의 정반대.
• 정렬되지 않은 배열엔 사용 할 수 없다.

참조

시간복잡도 선호 순위

0(1) → 0(log n) → 0(n) → O(n^2)

🌲 학습 시작 전 10분 질문 답변 리스트 계획) 오전 질문 📌 오늘 나의 학습 목표는 무엇인가요? 👉 코플릿 자료구조 문제 마무리. 비동기 예습(기본서)

🪵 학습 이후 30분 질문 답변 리스트 점검) 데일리 회고 #1/5 📌 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요? 👉 DFS vs BFS, BigO

점검) 데일리 회고 #2/5 📌 오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요? 1: 매우 어려움 2: 어려움 3: 보통 4: 가능함 5: 매우 가능함 👉 3

평가) 데일리 회고 #3/5 📌 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요? 👉 DFS, BFS 코플릿

오류 수정 전략) 데일리 회고 #4/5 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요? 👉 매일 매일 조금씩 이해도를 올린다

전체) 데일리 회고 #5/5 📌 나의 오늘 학습 만족도는 몇점인가요? 1: 매우 아쉬움 2: 아쉬움 3: 보통 4: 뛰어남 5: 매우 뛰어남 👉 3

문제

정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다.

버블 정렬 알고리즘은 아래와 같습니다.

1. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap)
2. 두 번째 요소와 세 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap)
3. 1, 2를 마지막까지 반복합니다. (마지막에서 두 번째 요소와 마지막 요소를 비교)
4. 1~3의 과정을 한 번 거치게 되면, 가장 큰 요소가 배열의 마지막으로 밀려납니다.
5. 1~3의 과정을 첫 요소부터 다시 반복합니다.
6. 5를 통해 두 번째로 큰 요소가 배열의 마지막 바로 두 번째로 밀려납니다.
7. 1~3의 과정을 총 n번(배열의 크기) 반복합니다.

이 모습이 마치 '거품이 밀려 올라가는 것과 같은 모습'과 같아서 bubble sort라고 부릅니다.

입력

인자 1 : arr

• number 타입을 요소로 갖는 배열
• arr[i]는 정수
• arr[i]의 길이는 1,000 이하

출력

• number 타입을 요소로 갖는 배열을 리턴해야 합니다.
• 배열의 요소는 오름차순으로 정렬되어야 합니다.
• arr[i] <= arr[j] (i < j)

주의사항

• 위에서 설명한 알고리즘을 구현해야 합니다.
• arr.sort 사용은 금지됩니다.
• 입력으로 주어진 배열은 중첩되지 않은 1차원 배열입니다.

입출력 예시

let output = bubbleSort([2, 1, 3]);
console.log(output); // --> [1, 2, 3]

Advanced

• 아래의 힌트를 바탕으로 (최선의 경우) 수행 시간을 단축할 수 있도록 코드를 수정해보세요.
• 위에서 설명된 알고리즘 1~3의 과정 중 어떤 요소도 위치가 바뀌지 않은 경우, 배열이 정렬된 상태라는 것을 알 수 있습니다.

구현한 코드

const bubbleSort = function (arr) {
  let isSorted = false;
  while(!isSorted) {
    isSorted = true;
    for (let i = 1; i < arr.length; i++) {
      if (arr[i - 1] > arr[i]) {
        isSorted = false;
        let tempFile  = arr[i - 1];
        arr[i - 1] = arr[i];
        arr[i] = tempFile; 
      }
    }
  }
  return arr;
};

레퍼런스

const swap = function (idx1, idx2, arr) {
  // 두 변수를 바꾸는 방법

  // 1) 임시 변수를 활용한 방법
   let temp = arr[idx1];
   arr[idx1] = arr[idx2];
   arr[idx2] = temp;

  // 2) Destructuring assignment를 활용한 방법
  // arr이 reference type이라 가능
  [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];

  // 3) XOR 연산을 활용한 방법
   // arr이 reference type이라 가능
   arr[idx1] ^= arr[idx2];
   arr[idx2] ^= arr[idx1];
   arr[idx1] ^= arr[idx2];
};

// naive solution
// let bubbleSort = function (arr) {
//   let N = arr.length;

//   for (let i = 0; i < N - 1; i++) {
//     // 매 반복(iteration)마다 i번째로 큰 수가 마지막에서 i번째 위치하게 된다.
//     // 이미 정렬된 요소는 고려할 필요가 없으므로, 'j < N - 1 - i'만 비교하면 된다.
//     for (let j = 0; j < N - 1 - i; j++) {
//       if (arr[j] > arr[j + 1]) {
//         swap(j, j + 1, arr);
//       }
//     }
//   }

//   return arr;
// };

// optimized solution
let bubbleSort = function (arr) {
  let N = arr.length;

  for (let i = 0; i < N; i++) {
    // swap 횟수를 기록한다.
    // 어떤 요소도 swap되지 않은 경우, 배열은 정렬된 상태이다.
    let swaps = 0;
    // 매 반복(iteration)마다 i번째로 큰 수가 마지막에서 i번째 위치하게 된다.
    // 이미 정렬된 요소는 고려할 필요가 없으므로, 'j < N - 1 - i'만 비교하면 된다.
    for (let j = 0; j < N - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        swaps++;
        swap(j, j + 1, arr);
      }
    }

    if (swaps === 0) {
      break;
    }
  }

  return arr;
};

🔑 두 변수 바꾸는 방법 3가지, 배열이 레퍼런스 타입이라 가능한 경우를 기억. 이중 반복문을 써서 전체 반복문의 탈출 조건을 만들고 그 조건에 만족할 때까지 두번째 반복문을 돌면서 계속 바꿀 요소가 있는지 확인해주는 식으로 코드를 짠 모습.

-  Array.slice(),
- 전개구문 [...arr],
- Array.from()**

  모든 요소의 '깊은 복사', 즉 중첩 배열과 객체 요소 또한 동일한 형태로 복사하는 방법

으로는 JSON.parse(JSON.stringify(arr)) 가 있다.

• 생성자 함수, 클래스의 개념을 내용을 본 후 프로트타입에 대해 더 깊은 이해를 하려고 시도하다보니 보게 될 내용이 더 많아 지는 듯 효율성과 중요도를 생각하면서 학습을 계획한대로 잘 해내야 겠다는 생각...
• 8시-10시 그룹 스터디원들과 회고 및 각자 정리한 내용을 설명하는 시간을 가졌다. (스택 , 큐 , 트리, 그래프)

주어진 일정동안 주어진 것 이상으로 깊게 이해하도록 노력하자. 알고리즘 문제를 풀 때 연관지어 해결해보려고 애쓰자.

어제, 오늘 학습하려고 소요한 시간은 12 시간 정도 하지만 몰입해서 학습한 시간은 7-8시간 정도 뿐인듯.. 어떻게 개선할지 항상 고민하자. 당장 내일부터 주당 100 시간 이상을 공부시간으로 잡았다. 몰입하는 시간을 어떻게 늘릴지 효율적인 방법을 시도하고 찾아내자.

느낌 5주전에 그래도 한번 스쳐간 내용이었다. 당시에 너무 어렵게 느껴져서 흐지부지 넘어 갔었고 블로깅을 하지 않았기에 어려운건 매한가지였다.

발견점 첫번째 볼때는 어려움에 압도 당했다. 여전히 어렵지만 한편으론 생소해서 어려울 뿐이란걸 발견. 매일 학습하면 점차 익숙해지고 할 만 해질 거라 믿는다.

다음주를 위한 행동 우선 주말 남은 하루는 총 복습을 진행

1. 다음 주는 약 30분 Vanila JS 공부로 자신감 👆
2. 7:30 ~ 10시 토이 및 알고리즘 문제 & 강의 학습 , 깃헙 관리
3. 일정대로 공부.
4. 블로깅(이해한 내용과 이해하지 못한 내용 모두)
5. 개인 공부(Vanila JS 프로젝트), 리액트 🔥 16주 남았다. 후회없이 매주 100시간 이상 수료때까지 대깨1600시간 코딩각

정의: 특정 목적을 위해 트리의 모든 노드를 한 번씩 방문하는 것.

전위 순회 (preorder traverse)

root, left, right

중위 순회 (inorder traverse)

left , root, right

후위 순회 (postorder traverse)

left , root, right

다음의 질문에 대한 답을 고민해 보세요.

질문

• 이진 트리와 BST 이외에 어떠한 트리가 있을까요?
  • 레드블랙트리, AVL, RV
• 균형 이진 탐색 트리란 무엇일까요?
  • BST(self-balancing binary search tree)는 컴퓨터 과학에서 임의의 항목 삽입 및 삭제에도 불구하고 자동으로 높이를 작게 유지하는 노드 기반 이진 검색 트리이다.
• (Advanced) 힙이란 무엇일까요?
  • 트리가 완전한 이진 트리인 특수 트리 기반 데이터 구조

#### 학습한 내용

트리 구조에 대해 조금 더 공부하고 스택, 큐 , 그래프 문제들을 다시 살펴봤다.

 바닐라코딩에서 제공해주는 [스타터킷](https://book.vanillacoding.co/starter-kit/)으로  Vanila JS능력을 기르려고 노력중이다.

정말 정말 양질의 자료라고 생각하는데 오픈소스라는 사실에 정말 감사함을 느끼며 매일 초심을 찾으려고 하고 있다.

🔑  매일 새벽 늦게 자는게 습관이 된 요즘 (새벽까지 쭈욱 공부하느라 늦게 잤느냐 솔직히 그건 아니... 정규일정 없는 토요일인 오늘은 2시쯤 부터야 학습을 시작했던거 같다. 주말에도 평일 못지 않게 학습시간 확보 할 수 있도록 할 것!. 오늘은 일찍 자도록 노력하고 늦게 자더라도 내일은 일찍 일어나서 학습을 시작할듯 하다. 이 과정을 즐기고 더 몰입하자. 200% 300% 로 하자.

두 개의 배열(base, sample)을 입력받아 sample이 base의 부분집합인지 여부를 리턴해야 합니다.

입력

인자 1 : base

• number 타입을 요소로 갖는 임의의 배열
• base.length는 100 이하

인자 2 : sample

• number 타입을 요소로 갖는 임의의 배열
• sample.length는 100 이하

출력

• boolean 타입을 리턴해야 합니다.

주의사항

• base, sample 내에 중복되는 요소는 없다고 가정합니다.

입출력 예시

let base = [1, 2, 3, 4, 5];
let sample = [1, 3];
let output = isSubsetOf(base, sample);
console.log(output); // --> true

sample = [6, 7];
output = isSubsetOf(base, sample);
console.log(output); // --> false

base = [10, 99, 123, 7];
sample = [11, 100, 99, 123];
output = isSubsetOf(base, sample);
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

console.log(output); // --> false

Advanced

• 시간 복잡도를 개선하여, Advanced 테스트 케이스(base, sample의 길이가 70,000 이상)를 통과해 보세요.

구현한 코드

const isSubsetOf = function (base, sample) {

  base.sort((a, b) => a - b);
  sample.sort((a, b) => a - b);

  for (let i = 0; i < base.length; i++) {
    if (base[i] === sample[0]) {
      sample.shift()
    }
    if (sample.length === 0) return true;
  }
  return false;

};

레퍼런스

```js const isSubsetOf = function (base, sample) { // naive solution: O(M * N) // return sample.every((item) => base.includes(item));

// 각 배열을 정렬: O(N * logN), O(M * logM) // N >= M 이므로, O(N * logN) base.sort((a, b) => a - b); sample.sort((a, b) => a - b);

const findItemInSortedArr = (item, arr, from) => { for (let i = from; i < arr.length; i++) { if (item === arr[i]) return i; else if (item < arr[i]) return -1; } return -1; };

let baseIdx = 0; for (let i = 0; i < sample.length; i++) { baseIdx = findItemInSortedArr(sample[i], base, baseIdx); if (baseIdx === -1) return false; } return true; };

N,M?, BigO? 시간 복잡도 개념에 대한 학습이 필요함!

• 자료구조가 무엇인지 설명할 수 있다.

  • 자료구조란 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것
  • 대규모 데이터들을 관리 및 활용에 용이하게 한다.
  • 데이터베이스에서 원하는 데이터를 찾을 수 있게 한다.
  • 사용자가 원하는 또는 프로그램이 필요한 맞춤 알고리즘을 설계 할 수 있다.
  • 사용자들의 여러 요청을 한번에 처리 할 수 있다.
  • 데이터 처리 과정을 단순화하면서 처리 속도를 향상 할 수 있다.

• Stack, Queue, Tree, Graph 자료구조에 대해 이해할 수 있다.

  ⇒ 사실 스택과 큐는 사실 상상속에서만 존재한다...?

  결국 배열 위에 규칙을 적용한 것. 이러한 애들을 추상적 자료구조(Abstract Data Type).ADT라 한다.

  • Stack은 “Last in, Frist Out” (뒤로, 앞으로가기 , Undo, 팬케이크, 스택오버플로우)

  • 큐는 “First in, First out” (이메일, 푸쉬알림, 선착순 , 콜센터)

  • 그래프

  • 그래프 용어*

  • 정점 (vertex): 노드(node)라고도 하며 데이터가 저장되는 그래프의 기본 원소입니다.

  • 간선 (edge): 정점 간의 관계를 나타냅니다. (정점을 이어주는 선)

  • 인접 정점 (adjacent vertex): 하나의 정점에서 간선에 의해 직접 연결되어 있는 정점을 뜻합니다.

  • 가중치 그래프 (weighted Graph): 연결의 강도(추가적인 정보, 위의 예시에서는 서울-부산으로 가는 거리 등)가 얼마나 되는지 적혀져 있는 그래프를 뜻합니다.

  • 비가중치 그래프 (unweighted Graph): 연결의 강도가 적혀져 있지 않는 그래프를 뜻합니다.

  • 무(방)향 그래프 (undirected graph): 서울에서 부산으로 갈 수 있듯, 반대로 부산에서 서울로 가는 것도 가능합니다. 하지만 단방향(directed) 그래프로 구현된다면 서울에서 부산을 갈 수 있지만, 부산에서 서울로 가는 것은 불가능합니다(혹은 그 반대). 만약 두 지점이 일방통행 도로로 이어져 있다면 단방향인 간선으로 표현할 수 있습니다.

  • 진입차수 (in-degree) / 진출차수 (out-degree): 한 정점에 진입(들어오는 간선)하고 진출(나가는 간선)하는 간선이 몇 개인지를 나타냅니다.

  • 인접 (adjacency): 두 정점 간에 간선이 직접 이어져 있다면 이 두 정점은 인접한 정점입니다.

  • 자기 루프 (self loop): 정점에서 진출하는 간선이 곧바로 자기 자신에게 진입하는 경우 자기 루프를 가졌다 라고 표현합니다. 다른 정점을 거치지 않는다는 것이 특징입니다.

  • 사이클 (cycle): 한 정점에서 출발하여 다시 해당 정점으로 돌아갈 수 있다면 사이클이 있다고 표현합니다

  • 트리는 가계도와 같은 계층척인 구조를 표현할 때 사용, 비선형 구조(순차적이지 않고 하나의 데이터 아래에 여러개의 데이터가 존재), 사이클이 없다. .

  • 알고리즘 문제에서 Stack, Queue 자료구조를 배열로 대체하여 흉내 낼 수 있다.

  • 각 자료구조의 개념과 구조를 파악하고 목적을 이해할 수 있다.

  • 알고리즘 문제의 각 상황에 맞는 자료구조를 떠올릴 수 있다.

• 트리 및 그래프의 탐색 기법에 대해 이해할 수 있다.

  • Binary Search Tree를 이해할 수 있다.
    • 먼저, 이진 트리(Binary tree)는 자식 노드가 최대 두 개인 노드들로 구성된 트리
    • 이진 탐색 트리(Binary Search Tree) 는 모든 왼쪽 자식의 값이 루트나 부모보다 작고, 모든 오른쪽 자식의 값이 루트나 부모보다 큰 값을 가지는 특징이 있다.
  • BFS와 DFS의 개념을 이해하고 알고리즘 문제에서 사용할 수 있다.

• 자료구조를 활용하여 알고리즘 문제에 접근할 수 있다.

🌲 학습 시작 전 10분 질문 답변 리스트 계획) 오전 질문 #1/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 Stack, Queue, Tree, Graph 자료구조, 재귀 스프린트 복습

계획) 오전 질문 #2/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 스택, 큐의 개념 정도

🪵 학습 이후 30분 질문 답변 리스트 점검) 데일리 회고 #1/5 📌 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요? 👉 자료구조 그래프, 이진 트리, 추상자료형 , 큐, 스택 클래스로 만들기, 코플릿 문제들

점검) 데일리 회고 #2/5 📌 오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요? 1: 매우 어려움 2: 어려움 3: 보통 4: 가능함 5: 매우 가능함 👉 4

평가) 데일리 회고 #3/5 📌 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요? 👉 그래프, 트리 부분 , this의 개념 적용

오류 수정 전략) 데일리 회고 #4/5 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요? 👉 자바스크립트 문법 다지기

전체) 데일리 회고 #5/5 📌 나의 오늘 학습 만족도는 몇점인가요? 1: 매우 아쉬움 2: 아쉬움 3: 보통 4: 뛰어남 5: 매우 뛰어남 👉 3

• JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)
  • JSON.stringify 와 JSON.parse 가 serialize, deserialize라는 것을 이해할 수 있다.
  • JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나들 수 있다.
  • JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

- 재귀 함수와 메모리 사용량 간의 관계 (javascript recursion memory leak)

• 꼬리 재귀 (tail recursion in js)
• 하노이의 탑 재귀 (js tower of hanoi in recursion)
• 조합 재귀 함수 (js combination in recursion)

🌲 학습 시작 전 10분 질문 답변 리스트 계획) 오전 질문 📌 오늘 나의 학습 목표는 무엇인가요? 👉 토이, 자료구조 JSON, Tree 구조 이해하기, 멘토링 참여

🪵 학습 이후 30분 질문 답변 리스트 점검) 데일리 회고 #1/5 📌 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요? 👉 재귀함수와 메모리의 관계, 꼬리 재귀

점검) 데일리 회고 #2/5 📌 오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요? 1: 매우 어려움 2: 어려움 3: 보통 4: 가능함 5: 매우 가능함 👉 4

평가) 데일리 회고 #3/5 📌 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요? 👉 하노이의 탑 재귀 (js tower of hanoi in recursion) 조합 재귀 함수 (js combination in recursion)

오류 수정 전략) 데일리 회고 #4/5 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요? 👉 자료들 참고하며 나만의 언어로 정리

전체) 데일리 회고 #5/5 📌 나의 오늘 학습 만족도는 몇점인가요? 1: 매우 아쉬움 2: 아쉬움 3: 보통 4: 뛰어남 5: 매우 뛰어남 👉 4

🔑 천천히 코드를 파악하고 또 디버깅 해보면서 그림으로만 그렸던 큐가 어떻게 흘러가는지 이해할 수 있었다

// fib(3) = fib(2) + fib(1) = 1 + 1 = 2 // fib(4) = fib(3) + fib(2) = 2 + 1 = 3 // fib(5) = fib(4) + fib(3) = 3 + fib(3)

기존코드

기존 코드로 구현시 디버깅 해보면 알겠지만 위의 예시에서는 fib(3)이 총 2번 호출 된다. 콜스택상에서 fib(3)의 메모리가 사라져서 다시 호출해야 되기 때문이다. 입력값 n 이 커질수록 무수히 많은 콜스택이 반복되어 져야 하기 때문에 다른 접근 방법이 필요했다.

function fib(n) {
  if (n < 3) return 1;
  return fib(n - 2) + fib(n - 1);
}

** naive solution: O(2^N)**

 let fibonacci = function (n) {
 if (n <= 1) return n;
 return fibonacci(n - 1) + fibonacci(n - 2);
 };

fibo(10) = fibo(9) + fibo(8) = fibo(8) + fibo(7) + fibo(7) + fibo(6) 여기까지만 보아도 동일한 문제가 중복으로 계산되는 것을 알 수 있다.

새로 구현한 코드

function fibonacci(n) {
  // n = 5
  if (n === 0) return 0;
  if (n < 3) return 1;
  let prev = 1;
  let curr = 1;

  for (let i = 2; i < n; i++) {
    // i = 2 i = 3 i = 4
    const next = prev + curr; // next = 2 next = 3 next = 5
    prev = curr; // prev = 1 prev = 2 prev = 3
    curr = next; // curr = 2 curr = 3 curr = 5
  }
  return curr; // 5
}

아래는 레퍼런스 코드 dynamic with meoization: O(N) 이미 해결한 문제의 정답을 따로 기록해두고, 다시 해결하지 않는 기법

let fibonacci = function (n) {
const memo = [0, 1];
const aux = (n) => {
   이미 해결한 적이 있으면, 메모해둔 정답을 리턴한다.
  if (memo[n] !== undefined) return memo[n];
   새롭게 풀어야하는 경우, 문제를 풀고 메모해둔다.
  memo[n] = aux(n - 1) + aux(n - 2);
  return memo[n];
};
return aux(n);
};

🔑 콜스택에 대한 이해와 같은 함수를 호출하지 않기 위해 데이터를 저장해두는 방식 . 기억하자!
차근차근 자료구조 공부를 해나가면서 열심히 정리할 것!

말썽꾸러기 짱구는 오늘도 장난을 치다가 조별 발표 순서가 담긴 통을 쏟고 말았습니다.

선생님께서는 미리 모든 발표 순서의 경우의 수를 저장해 놓았지만 짱구녀석의 버릇을 고치기 위해 문제를 내겠다고 말씀하셨습니다. 짱구는 모든 조별 발표 순서에 대한 경우의 수를 차례대로 구한 뒤 발표 순서를 말하면 이 발표 순서가 몇 번째 경우의 수인지를 대답해야 합니다.

총 조의 수 N과 선생님이 말씀하시는 발표 순서 k가 주어질 때, 짱구가 정답을 말 할 수 있게 올바른 리턴 값을 구하세요. 실패 시 짱구 부모님이 호출 됩니다.

모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정합니다. ex) N = 3일경우, [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]

입력

인자 1: N

• Number 타입의 1 <= N <= 12인 조의 개수

인자 2: K

• Number타입의 Array (0 <= index)

ex) n이 3이고 k가 [2, 3, 1]일 경우

모든 경우의 수를 2차원 배열에 담는다면 [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]이 되고,

반환하는 값은 3이 됩니다.

주의사항

• k내에 중복되는 요소는 없다고 가정합니다.

입출력 예시

let output = orderOfPresentation(3, [2, 3, 1]);
console.log(output); // 3

output = orderOfPresentation(5, [1, 3, 2, 4, 5])
console.log(output); // 6

접근 방법

모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정!

일단 먼저 손으로 풀어 보았다.

N = 4, K = [4,3,2,1] 인 경우

[1,x,x,x] 일때 경우의 수 ⇒ 3!

[2,x, x, x] ⇒ 3!

[3, x, x, x] ⇒ 3!

⇒ 3 * 3! = 18

[4,1,x,x] 일때 경우의 수 ⇒ 2!

[4,2,xx] ⇒ 2!

⇒ 2 * 2! = 4

[4,3,1,2]일 때 경우의 수 ⇒ 1

⇒ 1

결과는 23

반복해서 팩토리얼을 구해야 하므로 팩토리얼 함수를 활용 해야 할 것.

1 .경우의 수를 계산할 함수 factorial을 선언한다.

 function factorial(n){
    if(n <= 1)return 1
    return n * factorial(n-1)
  }

2. 리턴값인 발표 순서를 할당할 변수 order 선언

isChecked 배열은 N=3일 때 [false,false,false,false]가 되고,

이어서 나올 코드에서 지나온 조를 true로 바꿔주어 지나오지 않은 조의 개수를 셀 때 false의 개수를 세는 방식을 사용하기 위해 선언해주었다.

(같은 조가 여러번 발표를 하지 않기 때문에 for문 바깥에 선언한다.)

0번째 인덱스는 계산을 편하게 하기 위한 더미데이터이다. (조는 1조부터 시작하기때문에)

let order = 0;

let isChecked = new Array(N+1).fill(false)

3.  반복문을 통해 각 인덱스마다 지나온 경우의 수를 계산하고 order에 더해준다.

예를 들자면

1. N=4, K=[4,3,2,1] 일 때, K[0]에서는 [1,x,x,x], [2,x,x,x], [3,x,x,x] 의 모든 경우의 수를 지나왔기 때문에, order에 (3x3!)를 할당해둔다.

• 3은 isChecked.slice(1,num)=[false,false,false, true]에서 false만 필터링한 [false,false,false].length = 3이다.
• 3!은 각 인덱스에서 구할 수 있는 모든 경우의 수이다.

2. K[1]에서는 [4,1,x,x], [4,2,x,x] 의 모든 경우의 수를 더해서 order에 누적시킨다. 2 *(2!)를 order에 더해준다.

3. K[2]에서는 [4,3,1,x]의 모든 경우의 수를 더해서 order에 누적시킨다. 1!를 order에 더해준다.

4. order = 18 + 4 + 1 = 23이다.

for (let i = 0; i < K.length; i++) {
    // K의 i번째 조를 변수에 담습니다.
    const num = K[i];
    // 사용했는지 판별하기 위해 isUsed에 체크합니다. (중복이 아니기 때문에)
    isUsed[num] = true;
    // num보다 앞에 올 수 있는 수들의 배열을 복제해서,
    const candidates = isUsed.slice(1, num);
    // 이 중에서 아직 사용되지 않은 수의 개수를 구합니다.
    const validCnt = candidates.filter((el) => el === false).length;
    // 아직 사용되지 않은 수, 그 전까지의 모든 경우의 수를 카운트합니다.
    const formerCnt = validCnt * factorial(N - i - 1);
    // order에 추가합니다.
    order = order + formerCnt;
  }

🔑 

어렵게 느껴졌지만, 앞으로는 토이문제에 오전에 하루 2시간 씩 꼬박꼬박 투자하면 나아질 거라고 믿는다.

이 문제가 기억에서 사라질 때쯤 처음부터 내 힘으로 풀어 보자!

선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아 조건에 맞는 선물이 있는지 여부를 리턴해야 합니다.

입력

인자 1 : giftBox

• 문자열, 배열을 요소로 갖는 재귀적으로 정의된 배열 (입출력 예시 참고)
• 문자열은 선물 상자에 들어있는 각 선물의 이름을 의미합니다.
• 배열은 더 작은 선물 상자를 의미합니다.

인자 2 : wish

• string 타입의 문자열

출력

• boolean 타입을 리턴해야 합니다.

주의 사항

• 함수 unpackGiftbox는 재귀함수의 형태로 작성합니다.
• 반복문(for, while) 사용이 가능합니다.
• 입력받은 배열은 함수의 호출 뒤에도 처음 상태를 유지해야 합니다(immutability).
• 빈 배열 또는 빈 문자열을 입력받은 경우, false를 리턴해야 합니다.

입출력 예시

const giftBox = ['macbook', 'mugcup', ['eyephone', 'postcard'], 'money'];

let output = unpackGiftbox(giftBox, 'iphone');
console.log(output); // --> false

output = unpackGiftbox(giftBox, 'postcard');
console.log(output); // --> true

function unpackGiftbox(giftBox, wish) {
  // recursive case
  for (let i = 0; i < giftBox.length; i++) {
    if (giftBox[i] === wish) {
      return true;
    } else if (Array.isArray(giftBox[i])) {
      const result = unpackGiftbox(giftBox[i], wish); 
     //그냥 return result를 작성하면 중첩된 배열로 계속 파고들어서 빠져나오지 못한채 false를 리턴한다. 다음번 배열 혹은 요소를 순회하지 못한다.
      if (result){ 
        return true; 
          }  // 이렇게 wish를 찾는다면 바로 true를 리턴하고 함수가 종료된다.
    }
  }  // 반복문 스코프 끝나는 지점
  // base case
  return false;
}

🔑  재귀함수를 개념을 이해하는데 중요하면서도 쉬운 문제라고 여겨진다.

 다른 풀이 방법 1
 function unpackGiftbox(giftBox, wish) {
   // recursive case
   let anotherBoxes = [];
   for (let i = 0; i < giftBox.length; i++) {
     if (giftBox[i] === wish) {
       return true;
     } else if (Array.isArray(giftBox[i])) {
       anotherBoxes = anotherBoxes.concat(giftBox[i]);
     }
   }
   if (anotherBoxes.length > 0) {
     return unpackGiftbox(anotherBoxes, wish);
   }
   // base case
   return false;
// }

🔑 위 코드를 보면 따로 box를 만들어서 작은 선물상자들을 모두 모은 뒤에

그 박스가 빈 박스가 되기 전까지 재귀 호출을 통해 반복하는 모습을 볼 수 있다.

//  다른 풀이 방법 2 reduce활용
 function unpackGiftbox(giftBox, wish) {
   const result = giftBox.reduce((acc, curr) => {
     if (curr === wish) {
       return true;
     } else if (Array.isArray(curr)) {
       return unpackGiftbox(curr, wish) || acc; // 선물 찾으면 return true;
     } else {
       return acc;  // return false;
     }
   }, false); // initialValue를 false로 제공

   return result;
 }

Reduce사용시 콜백함수의 최초 호출 때 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue 는 배열의 첫 번째 값과 같습니다.

🔑  리듀스 함수 좀 더 다양하게 공부 할 필요 있음. + 맵과 필터도

Lesson - 재귀 함수

• 재귀의 의미에 대해서 이해하고, 자바스크립트에서 재귀 호출을 할 수 있다.
  • 재귀: 어떤 함수가 스스로를 호출 하는것.
• 재귀를 언제 사용해야 하는지 알고 있다.
  1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
  2. 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우
• 재귀적 사고 연습을 통해 재귀 함수를 base case와 recursive case로 나눠서 작성할 수 있다.
  1. 재귀 함수의 입력값과 출력값 정의
  2. 문제를 쪼개고 경우의 수를 나누기
  3. 단순한 문제 해결하기 base case
  4. 복잡한 문제 해결하기 recursive case
  5. 코드 구현하기
  • base case는 함수가 반복을 중지해야 하는 조건
  • recursive case(재귀 호출) 기본 케이스를 향해 작동하는 약간 다른 인자를 전달하는 동안 자체에 대한 함수 호출

🌲 학습 시작 전 10분 질문 답변 리스트 계획) 오전 질문 #1/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 토이 1 이해하기 ,재귀함수 Achievement Goals 단답형으로 설명(트리 구조 전까지), 브라우저 101 강의 진도 나가고 개별 블로깅

계획) 오전 질문 #2/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 없음

🪵 학습 이후 30분 질문 답변 리스트 점검) 데일리 회고 #1/5 📌 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요? 👉 재귀적 사고하기, base case, recursive case 의 의미, 코플릿 문제 (재귀함수 이용해서 푸는 법)

점검) 데일리 회고 #2/5 📌 오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요? 1: 매우 어려움 2: 어려움 3: 보통 4: 가능함 5: 매우 가능함 👉 3

평가) 데일리 회고 #3/5 📌 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요? 👉 토이 1 문제

오류 수정 전략) 데일리 회고 #4/5 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요? 👉 10시 ~ 새벽 1시 전까지 학습

전체) 데일리 회고 #5/5 📌 나의 오늘 학습 만족도는 몇점인가요? 1: 매우 아쉬움 2: 아쉬움 3: 보통 4: 뛰어남 5: 매우 뛰어남 👉 3

• 클래스와 인스턴스라는 용어를 이해할 수 있다.
  • new 키워드의 사용법을 이해할 수 있다.
  • class 키워드의 사용법을 이해할 수 있다.
  • 현실 세계의 모델을 바탕으로 클래스의 메서드와 속성을 디자인할 수 있다.
• 객체 지향 프로그래밍 특징을 이해할 수 있다.
  • 캡슐화

        1. 데이터와 기능을 하나의 단위로 묶는 것

    2. 은닉(hiding): 구현은 숨기고, 동작은 노출시킴
    3. 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음

캡슐화는 데이터(속성)와 기능(메소드)을 하나의 객체 안에 넣어서 묶는 것입니다. 데이터(속성)과 기능(메소드)들이 느슨하게 결합되는 것이죠.

느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미합니다. 마우스 구동을 위한 코드 작성을 예로 들겠습니다. 스위치가 눌리고, 전기 신호가 생겨서, 전선을 타고 흐르고.. 와 같은 전 과정을 이곳저곳에 나누어 작성하는 것이 아니라, 마우스의 상태를 속성(property)로 정하고 클릭, 이동을 메소드(method)로 정해서 코드만 보고도 인스턴스 객체의 기능을 상상할 수 있게 작성하는 것이 느슨한 결합을 추구하는 코드 작성법입니다.

캡슐화라는 개념은 "은닉화"의 특징도 포함하고 있는데, 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것입니다. 따라서, 디테일한 구현이나 데이터는 숨기고, 객체 외부에서 필요한 동작(메소드)만 노출시켜야 합니다. 은닉화의 특징을 살려서 코드를 작성하면 객체 내 메소드의 구현만 수정하고, 노출된 메소드를 사용하는 코드 흐름은 바뀌지 않도록 만들 수 있습니다. 반면 절차적 코드의 경우 데이터의 형태가 바뀔 때에 코드의 흐름에 큰 영향을 미치게 되어 유지보수가 어렵습니다. 그래서 더 엄격한 클래스는 속성의 직접적인 접근을 막고, 설정하는 함수(setter), 불러오는 함수(getter)를 철저하게 나누기도 합니다.

• 상속

  상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것입니다. 자세하게 설명하는 용어는 "기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다"로 표현하는 것이 적합합니다.

• 추상화

    추상화는 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념입니다.

• 다형성

• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다 자바스크립트의 객체는 명세서에서 명명한 [[Prototype]]이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가되는데, 다른 객체를 참조하는 경우 참조 대상을 '프로토타입(prototype)'이라 부릅니다.

• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.

  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.

  • 클래스 상속의 원리를 이해할 수 있다.

  • Prototype chain을 이해하고 설명할 수 있다. (__proto__)

    🌲 학습 시작 전 10분 질문 답변 리스트 계획) 오전 질문 #1/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 객체 지향 자바스크립트 설명 가능할 정도로 숙지

계획) 오전 질문 #2/2 📌 오늘 나의 학습 목표는 무엇인가요? 👉 없다고 생각함.

🪵 학습 이후 30분 질문 답변 리스트 점검) 데일리 회고 #1/5 📌 오늘 학습 내용 중 새롭게 배운 내용은 무엇인가요? 👉 객체지향프로그래밍, 프로토타입, this, 클래스, 객체

점검) 데일리 회고 #2/5 📌 오늘 새롭게 학습한 내용을 다른 사람에게 설명할 수 있나요? 1: 매우 어려움 2: 어려움 3: 보통 4: 가능함 5: 매우 가능함 👉 4

평가) 데일리 회고 #3/5 📌 오늘 학습한 내용 중 아직 이해되지 않은 불확실한 내용은 무엇인가요? 👉 prototype, this

오류 수정 전략) 데일리 회고 #4/5 이해되지 않은, 불확실한 내용을 보완하기 위해서 나는 무엇을 할 수 있을까요? 👉 최우선적으로는 현재 이해한 것을 꾸준히 복습해준다. 앞으로는 조금씩 개인 공부를 해나가면서 또 다음 진도를 공부를 하면서 실제로 코드를 사용하면서 자연스럽게 이해도를 올려간다.

전체) 데일리 회고 #5/5 📌 나의 오늘 학습 만족도는 몇점인가요? 1: 매우 아쉬움 2: 아쉬움 3: 보통 4: 뛰어남 5: 매우 뛰어남 👉 4 79h9ly33xpxomzc

<원시형, 참조형>

name: 'James',
age: 25;
};
obj.name = 'Sam'
console.log(obj.name);      // 'Sam'

const 키워드로 할당했으면 데이터 못 바꾸는 거 아닌가요?

=> 원시값, 참조값 데이터의 차이점!

obj이름을 가진 메모리에는 레퍼런스가 들어있고 해당 메모리의 내용은 변경이 불가능하지만 레퍼런스의 데이터는 heap이라는 특별한 공간에 저장되어 있으므로 결국 const obj의 데이터는 변경 가능

<Boolean, ||, && >

데이터가 없고 비어있으면 false falsy: A falsy value is a value that is considered false when encountered in a Boolean context. false 0, -0, undefined, null, "", '', `` NaN

||, && 차이점에 대해 설명가능하고 잘 활용해서 코드를 줄일 수 있음

let obj = {
  name: "woo",
};

// if (obj) {
//   console.log(obj.name);
// }

obj && console.log(obj.name);

<클래스와 콜백함수>

• this는 Counter클래스로 만들어낸 인스턴스 객체를 의미함.
• 인스턴스가 생성됨 그리고 생성자 함수가 실행되서 속성을 초기화
• 하나의 클래스로 다양한 오브젝트 인스턴스를 만들어서 서로 다양한 기능을 하게 함.
• 아래 코드의 흐름과 이유를 설명 가능.

class Counter {
  constructor(runEveryFiveTimes) {
    this.counter = 0;
    this.callback = runEveryFiveTimes;
  }

  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback && this.callback(this.counter);
    }
  }
}

function printNum(num) {
  console.log(`Wow ${num}`);
}

function alertNum(num) {
  alert(`alert! ${num}`);
}

const printCounter = new Counter(printNum);
const alertCounter = new Counter(alertNum);

printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();

alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();

• 클래스와 인스턴스라는 용어를 이해할 수 있다.

  • new 키워드의 사용법을 이해할 수 있다.

      let avante = new Car('hyudndai', 'avante', 'black');

  • class 키워드의 사용법을 이해할 수 있다.

      Class Car {
          constructor(brand, name, color) {
              // 인스턴스가 만들어 질 때 실행되는 코드
          }
      }

  • 현실 세계의 모델을 바탕으로 클래스의 메서드와 속성을 디자인할 수 있다.

      Class Student {
          constructor(name, age, height, weight) {
              this.name = name;
              this.age = age;
              this.height = height;
              this.weight = weight;
          }
      }
    
      let student1 = new Student('woo', '30', '174', '75')

• 객체 지향 프로그래밍 특징을 이해할 수 있다.

  • 캡슐화
    • 데이터와 기능을 하나의 단위로 묶는 것
    • 은닉: 구현은 숨기고, 동작은 노출시킴
    • 느슨한 결합에 유리: 언제든 구현을 수정할 수 있음
  • 상속
    • 기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다(부모/자식)
  • 추상화
    • 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념
  • 다형성
    • 같은 이름의 메소드 상속받더라도 각각 다르게 작동 할 수 있다.

  Must know concepts

• 추상화와 캡슐화는 어떻게 다른가요?

    - 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는         클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있습니다.
   - 인터페이스(Interface)란 무엇일까요?
           - 클래스의 구현하는 작동을 사람이 이해하기 쉽게 추상화 한 것.
   - JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?
       - 캡슐화 되어서 가능 하다.

  • JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다
    • prototype 은 유전자다!
  • 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
    • 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype 이라는 속성에 정의
  • Prototype chain을 이해하고 설명할 수 있다. (__proto__

    Must know concepts

    - 추상화와 캡슐화는 어떻게 다른가요?
        - 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않                은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있습니다.
    - 인터페이스(Interface)란 무엇일까요?
        - 클래스의 구현하는 작동을 사람이 이해하기 쉽게 추상화 한 것.
    - JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?
        - 캡슐화 되어서 가능 하다.

• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다
    • prototype 은 유전자다!
• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
    • 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype 이라는 속성에 정의
  • Prototype chain을 이해하고 설명할 수 있다. (__proto__

Sprint Review

• 클래스, 객체, 인스턴스의 차이

  • 클래스: 일종의 설계도로써 예(붕어빵틀), 연관되어있는 메소드와 변수의 집합

  • 객체 : 소프트웨어 세계 안에서 구현해야 할 대상, 아직 어떠한 메모리도 차지 하지 않음

  • 인스턴스: 클래스를 통해 구현해야할 객체가 실제로 구현된 구체적인 실체, 메모리로 할당

    ⇒ 인스턴스는 객체와 같거나 객체에 포함된다고 생각 가능.

• 생성자(constructor)가 하는 일

  • 객체를 생성할 때 항상 실행되는 것으로, 객체를 초기화해주기 위해 맨 처음 실행되는 메소드이다.

• prototype의 의미

  • JS 개체가 서로 기능을 상속하는 매커니즘.

• prototype에 어떤 것들이 포함?

• new 키워드 사용 시의 this의 의미

  • new 키워드로 인스턴스를 생성하면 그 인스턴스가 this값