🦁_21.12.15 TIL

21년 12월 15일

* { box-sizing : border-box};

*선택자 사용을 줄여야한다고 알고 있는데, 수강 중인 유데미 강의에서 항상 * { box-sizing : border-box};형태로 사용하는 것에 대해 궁금했었다.

• 존님에게 질문한 결과
  • next app 셋팅하면 기본 CSS이다.
  • vw, vh를 많이 쓰다보니 많이 사용하는 방법이다.
  • *는 한 번 썼으니 자제한거다^^
    => 저는 사용 자체를 하면 안된다고 이해해버렸네요.
  • box-sizing의 경우 오히려 일부 요소에만 쓰이면 더 헷갈릴 수 있어서 전체로 넣는 것이 더 낫다는 평이 많다.
  • 애플리케이션이 MFA (Micro Frontend Architecture)이라면 저렇게 하면 안될 수도 있다.

=> 실은 제가 * { box-sizing : border-box};을 좋아하는데요. 마침 존님 코드에 보여서 질문을 해보았습니다. 개운-
* MFA (Micro Frontend Architecture) 내용 찾아보기

📝 자료구조 및 알고리즘

📎 연결리스트(Linked list)_2

class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    let init = new Node("init");
    this.head = init;
    this.tail = init;

    this.현재노드 = undefined;
    this.데이터수 = 0;
  }
  // 하단에 작성했던 내용 
  // constructor 아래로 이동
  get fullData() {
    let 순회용현재노드 = this.head;
    순회용현재노드 = 순회용현재노드.next;

    let s = "";
    for (let i = 0; i < this.데이터수; i++) {
      s += `${순회용현재노드.data},`;
      순회용현재노드 = 순회용현재노드.next;
    }
    // JSON.parse : 문자열을 배열로 바꿔준다
    return JSON.parse(`[${s.slice(0, -1)}]`);
  }

  length() {
    return this.데이터수;
  }

  append(data) {
    let 새로운노드 = new Node(data);
    // 마지막 값이 null에서 새로운 노드가 됨
    this.tail.next = 새로운노드;
    // 마지막 노드는 새로운 노드가 됨
    this.tail = 새로운노드;
    this.데이터수 += 1;
  }

  toString() {
    let 순회용현재노드 = this.head;
    순회용현재노드 = 순회용현재노드.next;

    let s = "";
    for (let i = 0; i < this.데이터수; i++) {
      s += `${순회용현재노드.data},`;
      순회용현재노드 = 순회용현재노드.next;
    }
    // 맨 마지막에 콤마와 띄어쓰기가 있으므로 -1 작성
    return s.slice(0, -1);
  }

  insert(index, data) {
    let 순회용현재노드 = this.head;
    순회용현재노드 = 순회용현재노드.next;

    for (let i = 0; i < index - 1; i++) {
      순회용현재노드 = 순회용현재노드.next;
    }
    let 새로운노드 = new Node(data);
    // 마지막 데이터 지워짐
    새로운노드.next = 순회용현재노드.next;
    순회용현재노드.next = 새로운노드;
    // 내가 놓쳤던 부분
    // 데이터수 추가하면 마지막 데이터가 지워지지 않고 데이터 추가
    this.데이터수 += 1;
  }
}

// console
l = new LinkedList();
l.append(1);
l.append(2);
l.append(3);
l.append(10);
l.append(20);
l.append(30);
l.length();
l.insert(3, 100);
l.length();
// fullData 뒤에 괄호없이 실행
l.fullData; // (7) [1, 2, 3, 100, 10, 20, 30]

📎 정렬 알고리즘

• 원소들을 번호순이나 사전 순서와 같이 일정한 순서대로 열거하는 알고리즘
• 효율적인 정렬은 탐색이나 병합 알고리즘처럼(정렬된 리스트에서 바르게 동작하는) 다른 알고리즘을 최적화하는데 중요하다.
• 출처 : https://ko.wikipedia.org/wiki/정렬_알고리즘

📎 정렬 - 선택정렬(selection sort)

• 선택정렬 = 제자리 비교 정렬
  => 최솟값을 찾고 값을 최초 위치와 바꿔친 다음 리스트의 나머지 부분에 대해 이 과정을 반복
  => 교환 과정은 n개를 넘지 않으므로 교환 비용이 많이 드는 상황에서 유용
• 복잡도 : O(n^2)
  => 큰 리스트에는 비효율적, 삽입정렬보다 성능이 떨어지는 것이 일반적
• 선택정렬은 단순함이 특징이며 특정한 상황에서는 더 복잡한 알고리즘보다 성능상 우위에 있다.
• 출처 : https://ko.wikipedia.org/wiki/선택_정렬

// 직접 해보기
let 전 = [199, 22, 33, 12, 32, 64, 72, 222, 233];
let 후 = [];

let 전 = [199, 22, 33, 32, 64, 72, 222, 233]; // 순회하며 최솟값(12)를 찾아 후에 넣어줌
let 후 = [12]; // 순회 안함

let 전 = [199, 33, 32, 64, 72, 222, 233];
let 후 = [12, 22];

let 전 = [199, 33, 64, 72, 222, 233];
let 후 = [12, 22, 32];

// 코드 시작
let 입력값 = [199, 22, 33, 12, 32, 64, 72, 222, 233];
let 정렬된배열 = [];

let 길이 = 입력값.length;

// 주의사항 : pop을 하면 length가 줄어든다
// for (let i; i < 입력값.length; i++) {
//   console.log(입력값.pop());
//   console.log(i);
// }

for (let i = 0; i < 길이; i++) {
  let 최솟값 = Math.min(...입력값);
  정렬된배열.push(최솟값);
  입력값.splice(입력값.indexOf(최솟값), 1);
}

// 위의 for문과 같은 동작
// !! = 부정의 부정
// while (!!입력값.toString()) {
//   let 최솟값 = Math.min(...입력값);
//   정렬된배열.push(최솟값);
//   입력값.splice(입력값.indexOf(최솟값), 1);
// }

console.log(정렬된배열); // (9) [12, 22, 32, 33, 64, 72, 199, 222, 233]

// 선택정렬 - 메서드 최소화
// 제대로 하려면 자리 바꾸는 것까지
const arr = [199, 22, 33, 12, 32, 64, 72, 222, 233];

function selectionSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    let min_index = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[min_index] > arr[j]) {
        min_index = j;
      }
    }

    // 자리바꿈
    let temp = arr[min_index];
    arr[min_index] = arr[i];
    arr[i] = temp;
  }

  return arr;
}

console.log(selectionSort(arr)); // (9) [12, 22, 32, 33, 64, 72, 199, 222, 233]

📎 정렬 - 삽입정렬(insertion sort)

• 삽입정렬은 작은 리스트와 대부분 정렬된 리스트에 상대적으로 효율적인 단순한 정렬 알고리즘
  => 더 복잡한 알고리즘의 일부분으로 사용되기도 함
• 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘
• 복잡도 : O(n^2)
• 출처 : https://ko.wikipedia.org/wiki/%EC%82%BD%EC%9E%85_%EC%A0%95%EB%A0%AC

// 직접 해보기
let 전 = [199, 22, 33, 12, 32, 64, 72, 222, 233];
let 후 = [];

let 전 = [22, 33, 12, 32, 64, 72, 222, 233]; // 순회를 하지 않고 첫 번째 요소를 먼저 삽입
let 후 = [199]; // 순회함

let 전 = [33, 12, 32, 64, 72, 222, 233];
let 후 = [22, 199];

// 코드 시작
let 입력값 = [199, 22, 33, 12, 32, 64, 72, 222, 233];
let 정렬된배열 = [];
let 배열의길이 = 입력값.length;

function 삽입값이들어갈인덱스(정렬된배열, 삽입값) {
  for (const i in 정렬된배열) {
    if (삽입값 < 정렬된배열[i]) {
      return 1;
    }
  }
  return 정렬된배열.length;
}

for (let i = 0; i < 배열의길이; i++) {
  let 삽입값 = 입력값.shift();
  let 인덱스 = 삽입값이들어갈인덱스(정렬된배열, 삽입값);
  정렬된배열.splice(인덱스, 0, 삽입값);
  console.log(
    `인덱스: ${인덱스}\n삽입값: ${삽입값}\n정렬된배열: ${정렬된배열}`
  );
}

📎 정렬 - 병합정렬(merge sort)

• 비교 기반 정렬 알고리즘
  => 리스트의 길이가 1 이하이면 이미 정렬된 것으로 본다.
  => 그렇지 않은 경우,
  • 분할(divide) : 정렬되지 않은 리스트를 절반으로 잘라 비슷한 크기위 두 부분 리스트로 나눔
  • 정복(conquer) : 각 부분 리스트를 재귀적으로 병합정렬을 이용해 정렬
  • 결합(combine) : 두 부분 리스트를 다시 하나의 정렬된 리스트로 합병. 이때 정렬 결과가 임시 배열에 저장된다.
  • 복사(copy) : 임시 배열에 저장된 결과를 원래 배열에 복사한다.
• 복잡도 : worst와 best 모두 O(n log n)
• 출처 : https://ko.wikipedia.org/wiki/%ED%95%A9%EB%B3%91_%EC%A0%95%EB%A0%AC

// let 입력값 = [5, 10, 66, 77, 54, 32, 11, 15];
// let 정렬된배열 = [];

// 분할(이해를 돕기 위해 8개로 조정)
[5, 10, 66, 77], [54, 32, 11, 15]
[5, 10], [66, 77], [54, 32], [11, 15]
[5], [10], [66], [77], [54], [32], [11], [15]

//정복(0번째끼리 비교!)
[5, 10], [66, 77], [32, 54], [11, 15]
[5, 10, 66, 77], [11, 15, 32, 54]
[5, 10, 11, 15, 32, 54, 66, 77]

let 입력값 = [5, 10, 66, 77, 54, 32, 11, 15];
let 정렬된배열 = [];

function 병합정렬(입력배열) {
  // 분할
  let 입력배열의길이 = 입력배열.length;
  let 결과값 = [];
  if (입력배열의길이 <= 1) {
    // 재귀함수이기 때문에 종료조건을 return으로 넣어준 것
    return 입력배열;
  }

  // 중간값 : 둘로 나누기 위해서
  let 중간값 = parseInt(입력배열의길이 / 2);
  // 둘로 나누고 또 병합정렬 => 재귀
  let 그룹하나 = 병합정렬(입력배열.slice(0, 중간값));
  let 그룹둘 = 병합정렬(입력배열.slice(중간값));

  while (그룹하나.length != 0 && 그룹둘.length != 0) {
    if (그룹하나[0] < 그룹둘[0]) {
      결과값.push(그룹하나.shift());
    } else {
      결과값.push(그룹둘.shift());
    }
  }

  // 정복
  // 넣고 남을 값들을 위해
  while (그룹하나.length != 0) {
    결과값.push(그룹하나.shift());
  }

  while (그룹둘.length != 0) {
    결과값.push(그룹둘.shift());
  }

  // 이 결과값은 다시 병합정렬로 들어간다
  return 결과값;
}

console.log(병합정렬(입력값)); // (8) [5, 10, 11, 15, 32, 54, 66, 77]

📎 정렬 - 퀵정렬(quick sort)

// 피봇값(pivot)을 기준으로 정렬(피봇값은 처음값, 중간값, 마지막 값)
// 실무에서는 worst일 경우를 피하기 위해 피봇을 랜덤하게 주는 경우나, 피봇을 2개 사용하는 경우도 있음.
let 입력값 = [66, 77, 54, 32, 10, 5, 11, 15];

//피봇값 : 66
[54, 32, 10, 5, 11, 15] + [66] + [77]

//피봇값 : 54(66과 77은 값이 한 개이기 때문에 더이상 재귀로 호출되지 않음.)
[32, 10, 5, 11, 15], [54] + [66] + [77]

//피봇값 : 32
[10, 5, 11, 15], [32] + [54] + [66] + [77]

//피봇값 : 10 
[5] + [10], [11, 15] + [32] + [54] + [66] + [77]

//피봇값 : 11
[5] + [10] + [11] + [15] + [32] + [54] + [66] + [77]

// 코드 시작
let 입력값 = [66, 77, 54, 32, 10, 5, 11, 15];

function 퀵정렬(입력배열) {
  let 입력배열의길이 = 입력배열.length;
  
  if (입력배열의길이 <= 1) {
    return 입력배열;
  }

  // 피벗값 : 기준점
  let 피벗값 = [입력배열.shift()];
  let 그룹하나 = [];
  let 그룹둘 = [];

  for(let i in 입력배열) {
    if (입력배열[i] < 피벗값) {
      그룹하나.push([입력배열[i]]);
    } else {
      그룹둘.push([입력배열[i]]);
    }
  }

  console.log(`그룹하나 : ${그룹하나}\n그룹둘 : ${그룹둘}\n피벗값 : ${피벗값}`);
  return 퀵정렬(그룹하나).concat(피벗값, 퀵정렬(그룹둘));
}

console.log(퀵정렬(입력값)); 

📝 온라인 강의 수강

📎 코드라이언 - 실검에 오르는 세렝게티 동물 테스트 만들기

---

마무리

• 내일 LINE CAREERS 클론 코딩 끝나는 날!
  => 꽤 많이 해서 뿌드읏!
  => 그렇다고 해서 완성한 것은 아닙니다만...
  => 하지만 정말 열심히 했다구요~ 호호호
• 일단 오늘은 여기까지 작성하겠습니다
  => 열심히 해서 그런지 기운이 쪽 빠지네요🤗