haileyham

[알고리즘 JS] 기수 정렬(Radix Sort)

haileyham — Wed, 10 Jul 2024 15:35:39 +0900

기수 정렬

설명

지금까지 살펴본 것들은 비교 정렬 알고리즘
기수 정렬의 경우 비교 알고리즘이 아닌 정렬 알고리즘 유형
데이터의 특별한 속성 이용
직접 비교하지 않는다는 의미로 해당 숫자가 다른 숫자보다 작은지 큰지 비교하지 않고 다른 방식으로 데이터를 정렬

작동 원리

비교를 수행하지 않는 정렬 알고리즘
숫자로 작동
실제로 사용할 때는 이진수 사용하여 다른 데이터 정렬
하지만 정렬할 때 사용할 실제 데이터는 숫자, 십진법
숫자 크기에 대한 정보를 자릿수로 인코딩

실제 작동 방식

step 1 - 끝나는 1의 자리 숫자로 구분

step 1 - 끝나는 1의 자리 숫자로 구분

step 2 - 2로 끝나는 숫자는 버킷 2에

step 2 - 2로 끝나는 숫자는 버킷 2에

step 3 - 다시 목록 구성 (끝자리 2~9 순서)

step 3 - 다시 목록 구성 (끝자리 2~9 순서)

step 4 - 확인된 숫자 자릿수 제외하고 그다음 10의 자릿수 확인하여 버킷에 분류

step 4 - 확인된 숫자 자릿수 제외하고 그다음 10의 자릿수 확인하여 버킷에 분류

step 5 - 다시 목록을 구성

step 5 - 다시 목록을 구성

step 6 - 확인된 자릿수 제외하고 그 다음 자릿수 확인(100의 자리)

step 6 - 확인된 자릿수 제외하고 그 다음 자릿수 확인(100의 자리)

step 7 - 다시 목록을 구성

step 7 - 다시 목록을 구성

step 8 - 확인된 자릿수 제외 1000의 자릿수 확인 (이 과정을 실제로 수행해야 할 횟수는 가장 큰 수의 자릿수에 달려 있음)

step 8 - 확인된 자릿수 제외 1000의 자릿수 확인 (이 과정을 실제로 수행해야 할 횟수는 가장 큰 수의 자릿수에 달려 있음)

step 9 - 다시 목록

step 9 - 다시 목록

[1]

정렬하려고 하는 수 목록
십진수인 한 자리 수,두 자리 수, 세 자리 수, 네 자리 수
열 개의 각기 다른 버킷을 만들고, 버킷은 기수가 10인 한 자리 수로 가능한 모든 숫자를 나타냄
숫자의 어느 지점이든 0, 1, 2와 같이 9까지의 수가 될 수 있음
전체 수 목록을 살펴보고 여기 이 자릿수를 확인하여 시작
오른쪽에서 첫 번째 자릿수 6,4,6,3,8 ... 이 숫자 기준으로 버킷에 분류
가장 오른쪽에 2라는 숫자가 있는 모든 수가 2번 버킷에 있음
그룹으로 묶음
버킷 안에서는 정렬하지 않음

[2]

다시 목록을 구성
마지막 숫자가 2,3인 숫자들이 앞으로 옴
가장 마지막에는 끝 숫자가 9인 수가 옴

[3]

확인된 숫자 제외하고 그 다음 자릿수에서 과정 반복
10의 자리 숫자 살펴봐서 분류
7,4의 경우 10의 자리 숫자 없지만 07,04이기 때문에 0 버킷에 들어감(0버킷 : 408,7,4,902 등)

[4]

다시 목록을 구성
이 과정을 실제로 수행해야 할 횟수는 가장 큰 수의 자릿수에 달려있음

[끝]

숫자를 직접적으로 비교하지 않고, 숫자의 특징을 이용하여 버킷에 분류하고, 목록 구성하고, 다시 분류하여 정렬

기수정렬 : helper 메소드

[1] helper 1: 자릿수 알아내기 (getDigit)

수와 위치를 가져온 다음 그 위치의 숫자를 반환
12345 수가 있으면, 12345의 1번 위치에서 자릿수를 알아내면 이 숫자를 얻을 수 있음
0번 위치는 5 (1의 자리 숫자 위치)
4번 위치는 1

5번 위치는 0임

getDigit(12345, 0); // 5
getDigit(12345, 1); // 4
getDigit(12345, 2); // 3
getDigit(12345, 3); // 2
getDigit(12345, 4); // 1
getDigit(12345, 5); // 0

(방법1)
문자열로 변환한 다음 올바른 인덱스를 사용하여 원하는 수에 적용하고 숫자로 다시 변환
문자열 인덱스는 왼쪽부터 시작하기 때문에 0번 위치를 물어 문자열을 반환하고 0의 값을 얻으면 완전히 반대쪽에 작용
거꾸로 작동하도록, 음수 인덱스 등을 사용하여 문자열 되돌리거나 계산 가능
위 방법은 10진수로만 작동, 이진법으로는 작동하게 하지 않아도 됨

(방법2)
각 위치는 10의 거듭제곱
1의 자릿수는 10의 0 거듭제곱
10의 거듭제곱으로 나누어 약간의 계산 수행

해결법

stack over flow에서 가져옴. 자릿수 알아내기(getDigit)

function getDigit(num, i){
return Math.floor(Math.abs(num) / Math.pow(10, i)) % 10;
}

7323을 살펴본다 했을 때,
getDigit(7323,2)의 경우 0,1,2번째 이기 때문에 3(=300)을 살펴보는 것
Math.floor
Math.pow
Math.abs
Math.pow (10, i) 일경우 밑값 10, 지수 i
위에서는 밑값 10, 지수 2이기 때문에 100이 나옴
Math.num 은 7323 절댓값으로 만들기 때문에
Math.floor(7323 / 100) % 10; 계산을 하는 것으로
Math.floor(73.23) % 10;
73 % 10;
3 이 나옴

[2-1] helper 2: 자릿수가 얼마나 되는지 알아보기

두 가지 메소드
첫 번째로는 하나의 수에 대한 자릿수를 계산(digitCount)
두 번째로는 전체목록에서 자릿수가 가장 많은 수를 알아내는데 자릿수 계산(digitCount)을 사용
자릿수 계산을 호출할 최대 자릿수가 도출
자릿수 계산에 10진수를 넣으면 자릿수가 얼마나 되는지 반환
digitCount(1); // 1 digitCount(25); // 2 digitCount(314); // 3
각 길이를 찾거나 계산

해결법

function digitCount(num){
  if(num === 0) retrun 1;
  retrun Math.floor(Math.log10(Math.abs(num))) + 1;
}

Math.log10
Math.log10은 숫자의 밑이 10인 로그 반환
digitCount(423)을 넣을 경우
Math.floor(Math.log10(Math.abs(num))) + 1 차례대로 살펴보면
Math.abs(423) = 423
Math.log10(423) = 2.6262....
Math.floor(2.6262...) = 3
3 + 1 = 4해서 4가 나옴
만약 0을 넣을 경우 1자릿수가 되는데, 문제는 0에 Math.log10 수행하려고 하면 -Infinity를 얻게 됨
그래서 if 문 추가하여 0이면 return 1 하도록 함

[2-2] helper 3: 최대 자릿수(mostDigits)

수 목록을 가져와서 가장 자릿수가 많은 수가 무엇인지, 자릿수 계산을 통해 알려줌
0 자릿수 계산을 가져와 목록 내의 각 수에 실행하고, 최댓값에 대한 총계를 내서 수를 반환

반환할 때는 가장 자릿수가 많은 수 반환할 필요 없이 자릿수만 필요

mostDigits([1234,56,7]); // 4
mostDigits([1,1,11111,1]); // 5
mostDigits([12,34,56,78]); // 2

해결법

function mostDigits(nums) {
  let maxDigits = 0;
  for (let i = 0; i < nums.length; i++) {
    maxDigits = Math.max(maxDigits, digitCount(nums[i]));
  }
  return maxDigits;
}

자릿수 최댓값은 0에서 시작
nums에 반복문 수행하고 Math.max 사용
만약 0과 12를 넣을 경우 12 반환(항상 큰 수)
mostDigits([23,567,89,12234324,90])을 수행할 경우
23은 2
567은 3 이런식으로 쭉 감
12234324에서 8나옴
helper는 이렇게 3개임!_!

기수정렬 : 의사코드 및 구현

앞에서 살펴본 helper는 3개임
이제 헬퍼 메소드를 루프에 몇 번 호출하고 버킷을 만듦

과정

[1]

수 목록을 받는 함수를 정의 (기수 정렬 radix sort)
먼저 가장 큰 수가 몇 자리인지 알아내야 함
최댓 자릿수(mostDigit)을 사용하여 확인
만약 4일 경우, 루프 4번 수행
버킷에다 각각의 자릿수로 4번 정렬 필요하기 때문
네 번 수행하려면 0에서 1, 그 다음 2, 그 다음 3으로 진행
버킷은 빈 배열이며, 진행할 때마다, 각 자릿수에 버킷을 만듦
하위 배열이 10개 있는 배열 (0부터 9까지)
이 배열의 0번 인덱스는 빈 배열로 시작
루프를 수행할 때마다 각각의 수를 올바른 버킷에 넣음
kth 를 따르는데, kth 자릿수란 : 루프 k가 무엇이든 0에서 시작하며 각 수를 올바른 위치, 올바른 버킷 슬롯에 0 자리를 사용하여 분류하고 다음으로는 첫째자리, 둘쨋자리를 이용한다는 것

[2]

각 배열이 아니라 열개의 슬롯을 가진 하나의 큰 배열
10의 0번 위치에 각각 분류 getDigit 사용하여 각 해당 자릿수 위치에 넣기
그 다음 현재 위치한 순서를 사용하여 목록으로 재구성
새 배열로 합치려고 함
순서 유지하고 다음 과정 시작
[3]
루프는 두개
외곽루프는 4번 수행 0,1,2,3번 자리를 살펴봄
내부 루프는 목록의 각 수에 무언가를 실제로 수행(위치이동)
마지막에는 목록을 반환

구현

radix_sort.js

function radixSort(nums){
    let maxDigitCount = mostDigits(nums);
    for(let k = 0; k < maxDigitCount; k++){
        let digitBuckets = Array.from({length: 10}, () => []);
        for(let i = 0; i < nums.length; i++){
            let digit = getDigit(nums[i],k);
            digitBuckets[digit].push(nums[i]);
        }
        nums = [].concat(...digitBuckets);
    }
    return nums;
}

radixSort([23,345,5467,12,2345,9852])

위에는 radixSort이고
mostDigits, digitCount, getDigit의 helper method를 포함한 전체 코드는 아래에!

전체 코드

function getDigit(num, i) {
return Math.floor(Math.abs(num) / Math.pow(10, i)) % 10;
}
function digitCount(num) {
if (num === 0) return 1;
return Math.floor(Math.log10(Math.abs(num))) + 1;
}

function mostDigits(nums) {
let maxDigits = 0;
for (let i = 0; i < nums.length; i++) {
maxDigits = Math.max(maxDigits, digitCount(nums[i]));
}
return maxDigits;
}

function radixSort(nums){
let maxDigitCount = mostDigits(nums);
for(let k = 0; k < maxDigitCount; k++){
let digitBuckets = Array.from({length: 10}, () => []);
for(let i = 0; i < nums.length; i++){
let digit = getDigit(nums[i],k);
digitBuckets[digit].push(nums[i]);
}
nums = [].concat(...digitBuckets);
}
return nums;
}

radixSort([23,345,5467,12,2345,9852])

첫 째로 헬퍼메소르를 가지고 기수 정렬 radixSort 함수를 정의
수 목록 nums를 받음
다음으로 가장 큰 수에 자릿수가 얼마나 있는지 파악 (mostDigits)
for문에 k 넣고 maxDigitCount최댓값 카운트까지
digitBuckets 변수에 빈 배열 작성
for nums.lenght만큼 돌리면서 getDigit을 통해 자릿수 위치 변경하면서 버켓에 push
최대 자릿수만큼 반복
concat
마지막 nums에 배열을 합치는데 digitBuckets 합침

기수정렬 : 빅오 복잡도

일반적으로 인정되는 표기
최상, 평균, 최악 시간 복잡도 모두 O(nk)
n 은 정렬할 항목 수 or 정수의 수
k는 이러한 수의 길이
자릿수가 길다면 무시할 수 없는 상수 임. 상당한 영향을 끼침
비교정렬은 최상 및 평균이 O(n log n)
k에 log n 을 넣으면 n log n이 되기 때문에 비교 정렬에서와 같아짐
기수 정렬은 모든 비교 정렬보다 빠를 수 있음
컴퓨터 메모리에 수를 저장하는 방식에 대한 제한으로 인해 실제로는 그렇지 않을 수 있으며 비교 정렬과 마찬가지 일 수 있음
공간 복잡도는 O(n+k)

기수 정렬을 마지막으로 정렬 알고리즘 정리를 마침!_!

[알고리즘 JS] 퀵 정렬(Quick sort)과 피벗(pivot)

퀵 정렬설명퀵 정렬은 합병 정렬과 같은 가정으로 작동재귀를 통해 해결하기 가장 쉬운 방식 중 하나기본적으로 데이터를 분할하여 배열에 0개 또는 1개의 항목이 남을 때까지 분할하여 개

haileyham.tistory.com

[알고리즘 JS] 퀵 정렬(Quick sort)과 피벗(pivot)

haileyham — Wed, 10 Jul 2024 15:33:38 +0900

퀵 정렬

설명

퀵 정렬은 합병 정렬과 같은 가정으로 작동
재귀를 통해 해결하기 가장 쉬운 방식 중 하나
기본적으로 데이터를 분할하여 배열에 0개 또는 1개의 항목이 남을 때까지 분할하여 개별적으로 정렬되는 방식
항목은 하나 배열
피벗 포인트라 부르는 단일 요소를 선택하여 수행
어떤 배열에서 어떤 요소를 선택하든 사실상 문제가 되지 않음
중앙에 있는 요소 선택했을 경우, 해당 숫자보다 작은 숫자를 왼쪽으로 옮기고, 그 숫자보다 큰 숫자는 오른쪽으로 옮김
모두 정렬하려는게 아닌 한쪽으로 옮기는 것
그 숫자 하나만 올바른 위치이고, 다른 숫자들이 오른쪽이나 왼쪽에 있지만 정확한 위치는 모름
위의 과정을 왼쪽과 오른쪽에 반복

예시

[5,2,1,8,4,7,6,3] 있을 경우
5보다 작은 2,1,4,3은 왼쪽으로 옮겨짐
[2,1,4,3,'5',8,7,6] 이렇게 5는 제 위치를 찾은 것
이 과정을 계속해서 반복
재귀를 작성하고 코드를 시각화하려면 살짝 까다로울 수 있음
실제 동작할 때는 [5,2,1,4,3,8,7,6] 이렇게 한 다음에 5를 제 위치로 옮김

피봇 helper

퀵 정렬 첫 번째

파티션, 피벗 같은 의미
배열이 주어지면 요소를 피벗 포인트로 지정하여 배열 속 요소를 재배치하는 함수를 작성
피벗보다 작은 값은 모두 왼쪽으로 이동하며 피벗보다 큰 값은 모두 오른쪽으로 이동
양쪽의 순서는 중요하지 않고, 올바른 쪽에서 피벗보다 작거나 커야 함
중요한 것은 헬퍼가 제자리에서 수행해야 함
새 배열을 만들면 안 되고, 피벗 인덱스를 반환해야 함
제자리에서 모두 수행하기 때문에 새 배열을 만들지 않음
퀵 정렬의 실행 시간은 피벗 선택 위치에 따라 달라질 수 있기 때문에 피벗 선택은 중요한 것임
이상적으로 데이터 집합의 중간값이 되도록 선택해야 함
하지만 데이터가 무엇인지, 순서가 어떻게 되어 있는지 모른다면 쉽지 않음
다른 전략으로는 첫 번째 요소, 아니면 마지막 요소, 아니면 중간, 무작위 요소를 선택
우리는 첫 번째 요소만 선택해보겠음. 빅오에 영향을 미치긴 하지만..간단히 하기 위해서!

let arr = [5,2,1,8,4,7,6,3]

pivot(arr); //4

arr;

// any one of these is an acceptable mutation:
// [2,1,4,3,5,8,7,6]
// [1,4,3,1,5,7,6,8]
// [3,2,1,4,5,7,6,8]
// [4,1,2,3,5,6,8,7]
// there are other acceptable mutations too

위의 배열이 있고 피벗 함수를 호출한다면 인덱스 4를 반환
주의할 점은 배열을 반환하지 않음
하지만 arr 호출했을때 배열이 바뀐 것을 볼 수 있는데 이러한 구성 모두 타당함
첫 번재 요소를 골라서 피벗으로 선택
5를 선택하고, 5기준으로 작은 숫자 왼쪽에 배열 재배치
1,2,3,4의 순서는 상관없음 5 기준으로 왼쪽에 작은 숫자가 있으면 됨
반대로 5 오른쪽에는 순서상관없이 5보다 큰 숫자 6,7,8이 있음
가능한 모든 조합 가능. 순서 상관 없음!_!
중요한 것은 5가 최종 위치에 정렬된 위치에 있다는 것. 의사코드임

방법

피벗 또는 파티션이라 불리는 함수 작성
이 함수는 배열, 시작 인덱스, 끝 인덱스 세 개의 인수 받음
기본값으로 시작 인덱스 0, 끝 인덱스는 배열.length -1
배열 시작 부분에서 피벗 선택(중간이나 마지막, 무작위 위치로 변경 가능)
편의상 맨 첫 부분 선택, 현재의 피벗 인덱스를 변수로 저장
마지막에 피벗을 바꿀 위치를 계속 확인
시작부터 끝까지 배열에 루프를 수행
살펴보는 요소보다 피벗이 클 경우 피벗 인덱스 변수를 증가시킨 다음 현재 요소와 피벗 인덱스 요소를 교환
맨 마지막에는 시작했던 피벗과 피벗 인덱스를 바꾼 다음 피벗 인덱스 반환
```
[28,41,4,11,16,1,40,14,36,37,42,18]
```
예를들어 이렇게 있을 경우
처음에 첫 번째 요소 28를 피벗으로 선택
다른 요소에서 모든 루프를 수행. 28과 41 비교. 41이 더 크기 때문에 아무것도 하지 않음
두번째는 4임. 28이 4보다 크기 때문에 4를 28 왼쪽에 둬야함. 하지만 여기서는 옮겨두고 28왼쪽으로 옮기는건 나중에 함
그리고 피벗 인덱스라는 변수를 지정
28보다 작은 요수의 수를 계속해서 파악해서 맨 마지막에 28을 올바른 위치로 교환하게 됨
4를 옮김. 피벗 뒤로
그다음 11을 보면 28보다 작음 . 41과 값을 바꾸고 피벗 인덱스를 1만큼 증가 (= 28보다 작은 값 현재 2개)
16의 경우도 동일 (= 28보다 작은 값 현재 3개)
1,14,18도 동일 (= 28보다 작은 값 현재 6개)
피벗 인덱스도 6임. 작은 값을 찾을 때마다 +1 했기 때문
28의 경우 인덱스 6에 들어가면 되고, 작았던 값들은 그 왼쪽에 위치 시키면 됨 (인덱스 6에 들어감 / 피벗보다 작은값은 6개 존재, 즉 7번째 위치)

피봇 helper 함수 구현

pivot.js

// First Version
function pivot(arr, start=0, end=arr.length+1){
  function swap(array, i, j) {
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }

  var pivot = arr[start];
  var swapIdx = start;

  for(var i = start + 1; i < arr.length; i++){
    if(pivot > arr[i]){
      swapIdx++;
      swap(arr,swapIdx,i);
    }
  }
  swap(arr,start,swapIdx);
  return swapIdx;
}

// Version with ES2015 Syntax
function pivot(arr, start = 0, end = arr.length - 1) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };

  // We are assuming the pivot is always the first element
  let pivot = arr[start];
  let swapIdx = start;

  for (let i = start + 1; i <= end; i++) {
    if (pivot > arr[i]) {
      swapIdx++;
      swap(arr, swapIdx, i);
    }
  }

  // Swap the pivot from the start the swapPoint
  swap(arr, start, swapIdx);
  return swapIdx;
}

pivot([4,8,2,1,5,7,6,3])

pivot 에 start index 값 넣고 즉 위에서는 4임
swapIdx에는 start 0 값
for(var i = start + 1; i < arr.length; i++)는 i는 0이 아닌 start+1값이고, length 길이만큼
즉 4와 4를 비교한 다음 8로 넘어가는게 아니라 그냥 4로 지정한 뒤 바로 8로 넘어가면서 루프 시작
if(pivot > arr[i]) 피벗(4)와 arr[i] 즉 4와 8를 비교하여 더 클 경우 옮기는데, 이 경우는 그대로임. 반복문 한번 끝나고 다시 돌음
i++해서 피벗(4)와 arr[i] 즉 4와 2를 비교
2가 더 작기 때문에 if문 작동하고 swapIdx++ 해서 1됨
그리고 바꿔주면 되는데 swap 함수에 넣어서 위치 바꿔주기. 2가 현재 index 2에 위치하고 있는데, swapIdx는 1이고 i는 2이기 때문에 둘의 위치를 변경해줌
[4,8,2,1 ...] 에서 [4,2,8,1 ...]로 됨
계속해서 반복하여 [4,2,1,3...] 이렇게 위치하게 되고, 반복문 종료됨
그 다음 swap함수 한번더 동작하여서 arr의 start위치와 swapIdx 위치로 변경해줌
즉 4보다 작은 값이 3개 있기 때문에 swapIdx는 3이 되었고, start는 0이니 두개 위치를 바꾸면 [3,2,1,4...]로 변경
아래는 자세한 과정
요점은 마지막에 swapIdx를 반환하는 것임

실행하면 3을 반환함

pivot([4,8,2,1,5,7,6,3])
[4,8,2,1,5,7,6,3] // 4와 8
[4,2,8,1,5,7,6,3] // 4와 2 , 2와 8 위치 변경(swapIdx=1, i=2)
[4,2,1,8,5,7,6,3] // 4와 1 , 1과 8 위치 변경(swapIdx=2, i=3)
[4,2,1,8,5,7,6,3] // 4와 5 , 변경 없음 (i=4)
[4,2,1,8,5,7,6,3] // 4와 7 , 변경 없음 (i=5)
[4,2,1,8,5,7,6,3] // 4와 6 , 변경 없음 (i=6)
[4,2,1,3,5,7,6,8] // 4와 3 , 3과 8 위치 변경(swapIdx=3, i=7)
[3,2,1,4,5,7,6,8] // swapIdx랑 start 변경, 3과 4 위치 변경(swapIdx=3, start=0)

퀵 정렬 구현

설명

앞에서 살펴 본 것처럼 처음 4라는 피벗을 찾아 인덱스를 옮기는 과정까지 하고 나면
다음에 할 것은 퀵 정렬을 호출 하는 것
예를들어 [4,6,9,1,2,5,3]일 경우
[3,2,1,4,5,7,6,8]로 4가 이동하고 나면 [3,2,1] 즉 피벗인 4를 제외 한 앞에 것을 퀵 정렬
대략적인 로직은, 업데이트된 피벗 인덱스를 헬퍼가 반환하면 피벗 헬퍼를 재귀적으로 왼쪽과 오른쪽에 호출
중요한 것은 새로운 배열을 만들지 않고 제자리에서 발생(같은 배열에서 발생)
베이스 케이스는 단순히 배열의 아이템 길이나 배열에 하나의 항목이 있는지 확인하는 것이 아니라 하위배열에 항목 하나가 있도록 확인하는 것 [3,2,1], [2,1], [1]
이는 하위배열에 2개 미만의 요소가 있을 때 수행

구현

quicksort.js

function quickSort(arr, left = 0, right = arr.length - 1) {
  if (left < right) {
    let pivotIndex = pivot(arr, left, right) //3
    //left
    quickSort(arr, left, pivotIndex - 1);
    //right
    quickSort(arr, pivotIndex + 1, right);
  }
  return arr;
}

quickSort([100, -3, 2, 4, 6, 9, 1, 2, 5, 3, 23])

아래는 전체 코드


function pivot(arr, start = 0, end = arr.length - 1) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };

  // We are assuming the pivot is always the first element
  let pivot = arr[start];
  let swapIdx = start;

  for (let i = start + 1; i <= end; i++) {
    if (pivot > arr[i]) {
      swapIdx++;
      swap(arr, swapIdx, i);
    }
  }

  // Swap the pivot from the start the swapPoint
  swap(arr, start, swapIdx);
  return swapIdx;
}


function quickSort(arr, left = 0, right = arr.length - 1) {
  if (left < right) {
    let pivotIndex = pivot(arr, left, right) //3
    //left
    quickSort(arr, left, pivotIndex - 1);
    //right
    quickSort(arr, pivotIndex + 1, right);
  }
  return arr;
}

quickSort([100, -3, 2, 4, 6, 9, 1, 2, 5, 3, 23])




// [4,6,9,1,2,5,3]
// [3,2,1,4,6,9,5]
//        4
//  3,2,1    6,9,5
//      3      6
//  2,1      5  9
//    2
//  1

피벗이 배열, 시작, 끝을 받지만 중요한 것은 가장 처음할 때 전체 배열을 호출한 다음, 재귀 함수가 하위 배열을 다시 시작하기 때문에, 이 하위 배열은 시작 포인트, 끝 포인트가 다름
배열의 끝에 도달할 때까지 기본값이 0인 것이 아님
let pivotIndex = pivot(arr, left, right) 한다는 것은 arr배열 보내고 left에 0 즉 start값 0, end값 arr.lenght가 right값
처음에 피벗함수가 3을 반환함 let pivotIndex = pivot(arr, left, right) //3
그 다음 같은 작업을 왼쪽편에서 반복. 시작점에서 left에서 시작
quickSort(arr, left, pivotIndex - 1); 할 경우 왼쪽
피벗 반환값 3보다 1작은 2를 right(=end)값으로 보냄. 피벗 인덱스 2 / [2,1] 일때는 피벗 인덱스 1
왼쪽 호출 2번 반복
quickSort(arr, pivotIndex + 1, right); 오른쪽
피벗 값보다 1 큰 값을 left(=start) 값으로 보냄
처음 피벗 인덱스 4(=피벗값6) 6보다 작은거 앞으로
모든 부분 배열 정리되면 최종배열
[1,2,3,4,5,6,9] 나옴

퀵 정렬 : 빅오 복잡도

퀵정렬 빅

[시간 복잡도]

64개 요소가 있다면 6번 분해 o(log n)
각 분해단계마다 피벗 정할 때 O(n)번 비교 수행 필요
O(n log n)

퀵정렬 빅오 n log n 인 이유

[최악의 상황]

O(n^2)
이미 정렬되어 있는 배열. 정렬되어 있는 줄 모름
분해할 때마다 1개 남음. 전체 하위 배열 남음
이미 정렬되어 있기 때문에 첫번째 항목만 남음
각 수행 되니 O(n) 분해
각 분해할 때마다 O(n) 비교 수행, 최악 케이스로 O(n^2) 시간 초래
기본적으로 피벗 고를 때 매번 가장 작은 요소만 선택하거나 항상 가장 큰 요소만 선택할 때 문제 발생
정렬되어 있는 예시의 경우 첫 번째 배열이 아닌 무작위로 피벗 고르면 됨
반복적으로 최솟값이나 최댓값을 피벗으로 정하면 제곱 시간 됨

퀵정렬 최악의 경우

퀵 정렬을 정리해보았꼬! 다음에는 기수 정렬에 대해서 정리해볼 것이당!

[알고리즘 JS] 합병 정렬 (merge sort) 나누고 정복해!

합병 정렬[합병정렬자료](https://cs.slides.com/colt_steele/intermediate-sorting-algorithms)[sorting](https://visualgo.net/en/sorting?slide=1)[빅오](https://www.bigocheatsheet.com/) 설명기존의 버블,선택,삽입 정렬의 경우

haileyham.tistory.com

[알고리즘 JS] 합병 정렬 (merge sort) 나누고 정복해!

haileyham — Wed, 10 Jul 2024 15:32:20 +0900

합병 정렬

[합병정렬자료](https://cs.slides.com/colt_steele/intermediate-sorting-algorithms)
[sorting](https://visualgo.net/en/sorting?slide=1)
[빅오](https://www.bigocheatsheet.com/)

설명

기존의 버블,선택,삽입 정렬의 경우 작은 규모에서만 사용. 큰 규모일 경우 시간 오래 걸림 O(n^2)
합병 정렬의 경우 O(n long n)으로 향상 가능
합병 정렬은 합병 + 정렬 조합 (분할, 정렬, 합병 모두 일어남)
0개 요소, 1개 요소 배열이 이미 정렬되어 있다는 점을 활용(예로 만약 숫자 1로만 구성된 배열을 정렬해야 할 경우, 정렬되어 있다는 것을 알고 있음을 활용)
배열을 더 작은 배열로 나누는 방식
분할 정복 알고리즘 (분할하고 정복)
0이나 1 요소 배열이 될 때까지 계속

[8, 3, 5, 4, 7, 6, 1, 2] 요소 8개
반으로 분할하여 코드 시작
정렬된 배열, 0개나 1개 요소가 있는 배열이 될 때까지 분할하는 것
가장 작은 배열을 만들고서 정렬된 배열을 합칠 때 정렬 반복

과정 설명 이전

정렬된 두 배열 합병을 담당할 함수를 먼저 구현
입력 배열 두 개에 있는 모든 요소를 포함하는 것이 중요
O(n+m) 시간과 O(n+m) 공간으로 실행
n과 m은 함수 첫 번째 배열과, 두 번째 배열 크기
n이 아주 커지지만 m은 아주 커지지 않는다면 그냥 O(n+m)
O(n)이었다면 선형 시간을 사용한다는 거니까 반복하면서 각 항목을 한 번씩 방문
하지만 O(n+m)이므로 각 배열의 각 항목에 대해 한 번씩 반복하는 것

정렬된 두 배열 합병 과정

빈 배열 만듦
입력 두 개 취하는 함수 정의, 마지막 반환할 빈 배열 만듦
각 입력 배열에서 가장 작은 값부터 시작
카운터는 i, j 두 개, 0부터 시작
while 루프 사용
아직 살펴보지 않은 값이 있다면, 즉 i와 j가 각각의 배열 끝에 도달하지 않았다면, 첫 번째 배열의 값으로 첫 번째 항목을 취한 다음 두 번째 배열의 첫 번째 항목 값과 비교
첫 번째 항목이 더 작다면 결과 배열에 집어넣은 다음 첫 번째 배열의 다음 항목으로 넘어감
반대로 첫 번째 배열에 있는 항목이 더 크다면 두 번째 배열의 값을 취하여 결과로 넣은 다음 두 번째 배열의 다음 값으로 넘어감
배열 하나를 완료한 다음에는 다른 배열의 남은 값을 모두 넣음

merge([1,10,50], [2,14,99,100])

// [1,10,50]과 [2,14,99,100]
// [] 작은 것부터 넣음

두 배열을 두고 시작
[1,10,50]과 [2,14,99,100]을 뒀을 때 i, j는 각각 0부터 시작 (1,2를 말함)
1과 2를 비교하여 더 작은 것을 새 배열에 둠 [1]
그 다음 i는 1로 넘어가고 j는 2
10과 2를 비교 했을 때 2가 더 작기 때문에 새 배열에 2 넣어줌 [1,2]
계속해서 반복하여 [1,2,10,14,50,99,100]

배열 합병 구현

합병정렬의 합병 구현

mergeArrays.js

// Merges two already sorted arrays
function merge(arr1, arr2) {
  let results = [];
  let i = 0;
  let j = 0;
  while (i < arr1.length && j < arr2.length) {
    if (arr2[j] > arr1[i]) {
      results.push(arr1[i]);
      i++;
    } else {
      results.push(arr2[j])
      j++;
    }
  }
  while (i < arr1.length) {
    results.push(arr1[i])
    i++;
  }
  while (j < arr2.length) {
    results.push(arr2[j])
    j++;
  }
  return results;
}
merge([100, 200], [1, 2, 3, 5, 6])

위에서 아래 코드의 경우 arr2 배열이 더 길고 i,j 각 비교가 끝남
이럴 때 j의 경우 arr2.lenght 보다 작기 때문에
arr2 배열 그대로 넣어주기

  while (j < arr2.length) {
    results.push(arr2[j])
    j++;
  }

합병 정렬 구현

합병정렬의 정렬 구현

합병 정렬 목표는 배열을 계속해서 반으로 나누는 것
배열을 나눌때 slice 사용 0에서 중간 배열로, 중간에서 0으로
재귀하여 계속 호출
기본 케이스는 끝에 도달하여 배열 길이가 1보다 작거나 같아야 함
작은 배열 준비되면 작성해 놓은 합병 함수 사용해 다시 합침 > 전체 배열 길이 돌아갈 때 까지

mergeSort.js

// Merge function from earlier
function merge(arr1, arr2){
    let results = [];
    let i = 0;
    let j = 0;
    while(i < arr1.length && j < arr2.length){
        if(arr2[j] > arr1[i]){
            results.push(arr1[i]);
            i++;
        } else {
            results.push(arr2[j])
            j++;
        }
    }
    while(i < arr1.length) {
        results.push(arr1[i])
        i++;
    }
    while(j < arr2.length) {
        results.push(arr2[j])
        j++;
    }
    return results;
}

// Recrusive Merge Sort
function mergeSort(arr){
    if(arr.length <= 1) return arr;
    let mid = Math.floor(arr.length/2);
    let left = mergeSort(arr.slice(0,mid));
    let right = mergeSort(arr.slice(mid));
    return merge(left, right);
}

mergeSort([10,24,76,73])

배열 합병 : 빅오 복잡도

공간 복잡도만 O(n)

[시간복잡도]

시간복잡도 O(n log n)
log n : 8개 요소가 있으면 2를 3번 곱해서 8 (3번 나눔)
32개 요소 22222
n : 각 분할마다, 합병할 때 O(n)번 비교
O(log n)은 어디서? 분할하면서 몇번 나누는지
O(n) 은 어디서? 비교하고 합병할 때, 비교하는 것
빅오 그래프 살펴보면 O(n log n)도 나쁘진 않음. O(n^)에 비해

O(log n)은 어디서? 분할하면서 몇번 나누는지

O(n) 은 어디서? 비교하고 합병할 때, 비교하는 것

빅오 그래프 살펴보면 O(n log n)도 나쁘진 않음. O(n^)에 비해

[공간복잡도]

배열이 클수록 합병 정렬에서는 메모리에 더 많은 배열 저장 필요
보통은 시간 복잡도를 신경 쓰지만, 공간복잡도를 고려할 때는 버블 정렬등과 비교했을때 합병 정렬이 더 많은 공간 차지함

합병 정렬 끝! 이전 정렬에 대한 정리글은 아래 참고!

[알고리즘 JS] 버블정렬, 선택정렬, 삽입정렬 개념 및 비교!

정렬기본 내장 JavaScript 정렬sort()기본 정렬 순서는 문자열 유니코드(Unicode) 코드 포인트(code point)에 따름배열의 모든 항목이 문자열로 변환되고, 해당 문자열의 유니코드 값이 선택되고, 그

haileyham.tistory.com

[알고리즘 JS] 합병 정렬 (merge sort) 나누고 정복해!

haileyham.tistory.com

[알고리즘 JS] 버블정렬, 선택정렬, 삽입정렬 개념 및 비교!

haileyham — Wed, 10 Jul 2024 15:28:54 +0900

정렬

기본 내장 JavaScript 정렬

sort()

기본 정렬 순서는 문자열 유니코드(Unicode) 코드 포인트(code point)에 따름
배열의 모든 항목이 문자열로 변환되고, 해당 문자열의 유니코드 값이 선택되고, 그 다음에 항목이 정렬됨.
애초에 문자열로 정렬 시작하지 않는 한 원하는 결과 얻는게 힘듦

작동 방법

내장 정렬 메소드는 선택적 비교 함수(optional comparator function)를 인자로 전달 받음
이 함수를 사용해서 자바스크립트에 우리가 원하는 정렬 방식을 알릴 수 있음
기본적으로 이 함수는 A와 B라는 2개의 항목이 있는 구조로 작성
반환되는 값을 토대로 만들 정렬 순서를 자바스크립트에 알림
만약에 a와 b라는 2개의 항목이 있는 상태에서 음수를 반환하면, 자바스크립트는 두 항목을 비교할 때마다 이 함수를 호출
함수가 음수를 반환하면 자바스크립트는 a가 b 앞에 온다고 결정. 양수를 반환하면 그 반대.
a가 b 뒤에옴.그리고 0을 반환하면, 자바스크립트는 a와 b를 동일하게 취급하고 한꺼번에 정렬하는데, 아무 상관 없음

예시1(숫자 기준 정렬)

function numberCompared(num1, num2){
  return num1 - num2;
}
[6,4,15,10].sort(numberCompare);
// [4,6,10,15]

num1 - num2가 음수를 반환하면, num1이 num2 앞에 옴
num1 - num2가 양수를 반환하면 num2가 num1 앞에 옴.
이렇게 하면 이제는 숫자가 오름차순으로 제대로 정렬
유니코드 문자를 사용하거나 그 밖의 여러 가지에 대해 걱정할 필요 없음

예시2(문자열 길이 기준 정렬)

function compareByLen(str1, str2){
  return str1.length - str2.length;
}
["Steele", "Colt", "Data Structures", "Algorithms"].sort(compareByLen);

문자열의 길이를 기준으로 정렬을 하는 것도 가능. 알파벳순으로 정렬하는 게 아님
제일 짧은 문자열부터 정렬. Colt에서 시작해서 제일 긴 문자열인 Data Structures에서 끝
다만 이 함수는 이 2개의 인자를 전달받아야 함 여기에 사용되는 인자. 반환하는 값은 음수나 양수 또는 0.
str1.length - str2.length라고 작성하고, comparebyLen

버블 정렬

들어가기 전에

버블 정렬은 별로 효율적이지 않음
흔히 사용되지 않고, 유스케이스(use case) 하나 있음
빈번하게 구현하지 않지만 두각을 나타내는 분야가 있긴 함
다른 알고리즘이 버블 정렬보다 더 나은 이유를 이해하는데 도움

설명

버블 정렬의 개념은 배열을 가장 작은 숫자에서 가장 큰 숫자순으로, 그러니까 오름차순으로 정렬을 한다면 더 큰 숫자가 한 번에 하나씩 뒤로 이동.
참고 비주알고(VisuAlgo).
버블 정렬의 작동 방식은 루프를 돌면서 각 항목을 다음 항목(해당 항목의 오른쪽에 있는 항목)과 비교
숫자가 비교 대상보다 더 큰지 확인 후 교환(swap)
기본적으로 어떤 항목이 더 크면 교환을 하고, 다음 항목과 비교하고, 다음 항목보다 더 크면 또 교환을 하고, 다시 다음 항목과 비교
맨 앞에서부터 비교해서 들어감. 첫 번째로 배열을 끝까지 정렬하고, 다시 맨 앞에서부터 다시 과정 반복.
반복을 거듭함에 따라 우리가 정렬해야 하는 항목의 수가 감소(반복을 할 때마다 정렬할 항목이 줄어듦)

JS 교환 방법

// ES5
function swap(arr, idx1, idx2){
  var temp = arr[idx1];
  arr[idx1] = arr[idx2];
  arr[idx2] = temp;
}

// ES2015
const swap = (arr, idx1, idx2) => {
  [arr[idx1],arr[idx2]] = [arr[idx2], arr[idx1]];
}

▷ 버블 정렬 구현

구현 1

루프를 시작. 즉, 함수를 정의. 명칭은 bubbleSort.
배열을 인자로 전달받는데, 전부 숫자라고 가정.
i라는 변수를 가지고 배열의 맨 끝에서 루프를 시작해서 맨 앞에서 끝. 그 이유는 나중에 정확하게 설명.
우선은 정렬을 하고 있는 배열의 항목 수를 줄이는 것과 관련된다는 사실.
외부 루프 안에는 j라는 변수가 포함된 내부 루프. 내부 루프는 처음부터 i - 1까지 실행.
i는 첫 번째 루프를 참조.
첫 번째 루프에 의존하는 중첩 루프라고 생각. i -1. 그러고 나면 그냥 arr[j]를 비교.
만약에 j가 0이면 이걸 arr[J+1]과 비교. 다음 항목임.
j가 뭐든 간에, j를 그 다음 항목과 비교. j와 j+1을 비교.
arr[j]가 arr[j+1]보다 더 크면 교환을 해야 한다는 의미

bubble_unoptimized.js

// UNOPTIMIZED VERSION OF BUBBLE SORT
function bubbleSort(arr){
  for(var i = arr.length; i > 0; i--){
    for(var j = 0; j < i - 1; j++){
      console.log(arr, arr[j], arr[j+1]);
      if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;         
      }
    }
  }
  return arr;
}

// ES2015 Version
function bubbleSort(arr) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };

  for (let i = arr.length; i > 0; i--) {
    for (let j = 0; j < i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
}

bubbleSort([8,1,2,3,4,5,6,7]);

i=0; i<arr.length 가 아니라
i = arr.length; i > 0; i-- / var j = 0; j < i - 1; j++ 인 이유는 무의미한 비교를 하지 않기 위해서
맨 처음 배열 길이를 i로 시작. 만약 i가 4라면,
내부 : j가 i-1보다 작으면 j 증가 (즉 i가 4면 3번만 비교하면 됨)
외부 : 배열 길이 i에서 시작 0전까지 i 계속해서 --
내부 : j가 i-1보다 작으면이니까 i가 3됐으면, 2번만 비교

참고) 과정 설명

초기 배열: [8, 1, 3, 2]
첫 번째 패스 (i = 4):
- 비교 (8 > 1): [1, 8, 3, 2] (swap)
- 비교 (8 > 3): [1, 3, 8, 2] (swap)
- 비교 (8 > 2): [1, 3, 2, 8] (swap)
두 번째 패스 (i = 3):
- 비교 (1 > 3): [1, 3, 2, 8] (no swap)
- 비교 (3 > 2): [1, 2, 3, 8] (swap)
- noSwaps가 false이므로 계속 진행
세 번째 패스 (i = 2):
- 비교 (1 > 2): [1, 2, 3, 8] (no swap)
- noSwaps가 true이므로 정렬 완료

최종 배열

정렬된 배열: [1, 2, 3, 8]

▷ 버블 정렬 최적화

교환 항목이 없는데 계속해서 항목 정렬 실행 시도
루프가 마지막으로 실행 됐을 때 교환했는지 확인하고, 마지막에 교환을 하지 않았으면 정렬 완료된 것

optimized_bubble.js

// Optimized BubbleSort with noSwaps
function bubbleSort(arr){
  var noSwaps;
  for(var i = arr.length; i > 0; i--){
    noSwaps = true;
    for(var j = 0; j < i - 1; j++){
      if(arr[j] > arr[j+1]){
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
        noSwaps = false;         
      }
    }
    if(noSwaps) break;
  }
  return arr;
}

bubbleSort([8,1,2,3,4,5,6,7]);

noSwaps 만들어서 비교하는지 확인 후 처리
외부에 noSwaps 만들고
내부에 false 처리해서, 내부 if문 돌지 않았다면 반복문 바깥으로 나가짐. true인 상태이기 때문에 break.

▷ 버블 정렬 : 빅오 복잡도

일반적으로 n² / 중첩 루프, 대략적 비교
거의 정렬 or 이미 정렬 끝난 상태 noSwaps 변수 있으면 선형시간에 가까움
교환되지 않은 상태 확인하기 위해 다시 실행 후 루프 빠져나왔기 때문
가능한 최고의 경우 O(n)
위에서 살펴본 우리 예시는 2n, 간소화해서 O(n)

선택 정렬

설명

버블 정렬과 비슷하지만, 큰 값을 배열 끝에 위치시키는 대신
작은 값을 한 번에 하나씩 위치에 배열
처음부터 끝까지 움직이지만, 실제 정렬된 데이터는 처음부터 누적
최솟값을 찾아 마지막에 바꾸어 맨 앞에 둠.
(예시) [5,3,4,1,2]가 있을 경우 5,3 비교 최솟값 찾고 / 3,4비교 최솟값 찾고.. 반복
첫 번째의 경우 [1,3,4,5,2]로 정렬 됨.
두 번째의 경우 [1,2,3,4,5]로 정렬 끝
(예시) [44,5,38,19,47,15]의 경우 첫 번째 때, 5가 최솟값이라 44와 5 변경[5,44,38,19,47,15]
[5,44,38,19,47,15] 두번째때 5는 이미 정렬됐기 때문에 44부터 시작. 새로운 최솟값은 15라서 44와 15 변경 [5,15,44,38,19,47]
위와 같은 방식으로 계속해서 정렬
진행하면서 가장 작은 요소, 즉 최솟값을 선택하고 맨 앞으로 배치

코드를 어떻게?

처음 해야할 것은 최솟 값을 저장할 변수 만들기
처음에는 최솟값 저장 변수 첫 번째 항목과 같게 설정(유일하게 확인된 값이기 때문)
다음에는 진행하면서 다음 항목과 비교하여 최솟값으로 갱신
실제로 변수에 저장하는 것은 값이 아닌 값을 찾은 인덱스
(3번 인덱스가 최솟값일 경우) 첫 번째로 훑어본 다음 0번 인덱스를 3번 인덱스와 변경
계속해서 변경

▷ 선택 정렬 구현

selection_sort.js

// LEGACY VERSION (non ES2015 syntax)
function sselectionSort(arr){
    for(var i = 0; i < arr.length; i++){
        var lowest = i;
        for(var j = i+1; j < arr.length; j++){
            if(arr[j] < arr[lowest]){
                lowest = j;
            }
        }
        if(i !== lowest){
            //SWAP!
            var temp = arr[i];
            arr[i] = arr[lowest];
            arr[lowest] = temp;
        }
    }
    return arr;
}

// ES2015 VERSION
function selectionSort(arr) {
  const swap = (arr, idx1, idx2) =>
    ([arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]]);

  for (let i = 0; i < arr.length; i++) {
    let lowest = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[lowest] > arr[j]) {
        lowest = j;
      }
    }
    if (i !== lowest) swap(arr, i, lowest);
  }

  return arr;
}

selectionSort([0,2,34,22,10,19,17]);

for 반복문 안에 최솟값 담을 변수 만듦
for 반복분 j는 i+1 (비교해야하기 때문)
j와 최소값 비교하여 j가 더 작을 경우 최솟값 업데이트
참고로 최솟값은 value가 아니라 index
최솟값과 i 위치를 바꿔주기 위해 temp 이용
if 변수에 i !== lowest 로 무의미한 반복 피하기(예를들면 첫번째 마주한 값이 lowest일 경우 반복 x도록)
ES2015 ver에서는 swap 만들어서 temp 없이 바로 대입하도록

참고) 추가 과정 설명

초기 배열: [29, 10, 14, 37, 14]
첫 번째 패스 (i = 0):
- lowest = 0
- 비교 (29 > 10): lowest = 1
- 비교 (10 < 14): lowest = 1
- 비교 (10 < 37): lowest = 1
- 비교 (10 < 14): lowest = 1
- 10과 29 교체: [10, 29, 14, 37, 14]
두 번째 패스 (i = 1):
- lowest = 1
- 비교 (29 > 14): lowest = 2
- 비교 (14 < 37): lowest = 2
- 비교 (14 = 14): lowest = 2
- 14와 29 교체: [10, 14, 29, 37, 14]
세 번째 패스 (i = 2):
- lowest = 2
- 비교 (29 < 37): lowest = 2
- 비교 (29 > 14): lowest = 4
- 14와 29 교체: [10, 14, 14, 37, 29]
네 번째 패스 (i = 3):
- lowest = 3
- 비교 (37 > 29): lowest = 4
- 29와 37 교체: [10, 14, 14, 29, 37]

최종 배열

정렬된 배열: [10, 14, 14, 29, 37]

▷ 선택 정렬 : 빅오 복잡도

효율적이지는 않음 O(n^2)
선택 정렬이 버블 정렬보다 나은 시나리오는 단 하나, 스왑수를 최소화 하는 경우
버블 정렬의 경우 가장 큰값을 끝에 도달할 때까지 계속 바꾸면서 반복하여 비교 많이 하지만, 각 루프 끝날 때 한 번만 바꿈
어떤 이유로 메모리 고려, 실제 스왑 수행 고려할 경우 선택 정렬이 나을 수도 있음.

삽입 정렬

작동 방식

삽입 정렬은 배열의 과반을 점차적으로 만들어 정렬을 구축
과반은 항상 정렬
하나씩 이동하거나, 한 번에 가장 큰 요소를 찾거나 한번에 가장 작은 요소를 찾는 대신
각 요소를 취하여 정렬되어 있는 절반 속 해당되는 위치에 배치
[3,44,38,5,47,15] 이렇게 있을 때 44의 경우 3보다 크기 때문에 원래 자리에 위치
38의 경우 44와 비교 했을때 44보다 작고, 3과 비교했을때 3보다 크기 때문에, 3과 44 사이에서 44보다 작기 때문에 [3,38,44,5,47,15]로 위치 변경
다음 5의 경우 [3,38,44,5] 이렇게만 봤을때 3과 38 사이에 들어가야 하기때문에 [3,5,38,44,47,15]로 변경
47의 경우 [3,5,38,44,47] 중에서 제 위치이기 때문에 가만히
마지막 15의 경우 [3,5,15,38,44,47]로 위치
첫 번째 요소는 정렬되어 있다고 가정하고, 두 번째 요소부터 올바른 위치에 삽입.

▷ 삽입 정렬 구현

insertion_sort.js

function insertionSort(arr){
    var currentVal;
    for(var i = 1; i < arr.length; i++){
        currentVal = arr[i];
        for(var j = i - 1; j >= 0 && arr[j] > currentVal; j--) {
            arr[j+1] = arr[j]
        }
        arr[j+1] = currentVal;
    }
    return arr;
}

insertionSort([2,1,9,76,4])

i = 1로 해두는 이유는 추가로 반복하지 않기 위해서임. 0으로 해도 상관은 없지만 무의미한 반복.
처음부터 시작하는 것보다 배열의 끝이나 중간에서 진행하는게 더 쉽기 때문에 거꾸로 루프(실제로 거꾸로 수행해야 할 작업이 없기 때문에 쉬움)
만약 [1,2,9,76,0] 배열로 돌린다하면
1,2,9,76은 그대로고 0의 경우 재배열 필요
i가 4 값일 경우 0값에 해당하는거고
이를 j = i-1값이랑 계속해서 비교 즉, 3,2,1,0번째랑 비교
for반복 조건안에 arr[j]가 현재값보다 클때라고 해놨기 때문에 그럴 경우 arr[j+1]값에 j를 넣음
[1,2,9,76,0] 일때 0과 76을 비교해서 76이 더 크기 때문에 arr[5]값에 arr[4]값을 넣음
[1,2,9,76,76] 이렇게 됨. 0은 이미 currentVal에 저장했기 때문에 걱정 안해도 됨.
이렇게 계속해서 반복 후에 제 위치인 [0,1,2,9,76]로 가게 됨

참고) 추가 과정 설명

초기 배열: [2, 1, 9, 76, 4]
첫 번째 패스 (i = 1):
- currentVal = 1
- 비교 (2 > 1): [2, 2, 9, 76, 4] (2를 오른쪽으로 이동)
- arr[0] 위치에 1 삽입: [1, 2, 9, 76, 4]
두 번째 패스 (i = 2):
- currentVal = 9
- 비교 (2 ≤ 9): [1, 2, 9, 76, 4] (변경 없음)
세 번째 패스 (i = 3):
- currentVal = 76
- 비교 (9 ≤ 76): [1, 2, 9, 76, 4] (변경 없음)
네 번째 패스 (i = 4):
- currentVal = 4
- 비교 (76 > 4): [1, 2, 9, 76, 76] (76를 오른쪽으로 이동)
- 비교 (9 > 4): [1, 2, 9, 9, 76] (9를 오른쪽으로 이동)
- arr[2] 위치에 4 삽입: [1, 2, 4, 9, 76]

최종 배열

정렬된 배열: [1, 2, 4, 9, 76]

▷ 삽입 정렬 : 빅오 복잡도

가장 안 좋은 경우 O(n^2) 배열의 길이가 늘어날 수록 비교 횟수를 기본적으로 n제곱
삽입 정렬이 유리한 경우는
예를들어 온라인 알고리즘이라는 데이터가 있어서 데이터가 들어오는 대로 작동하는 알고리즘.
새로운 데이터를 수신하기 때문에 전체 배열을 한 번에 정렬할 필요가 없음.
예를들어 온라인에서 실시간으로 번호 제출하는 코드 받아서 정렬하려고 할 때, 삽입 정렬은 한 부분을 정렬된 배열로 유지하고 한 번에 항목을 삽입하여 작동하기 때문에
어떤 숫자가 입력되더라도 필요한 위치에 놓을 수 있음
라이브, 스트리밍 방식으로 들어온 데이터 즉시 입력하는 상황에 편리

정렬 기본 : 버블, 선택, 삽입 비교

[시간 복잡도]

worst 인 경우 모두 O(n^2)
정렬이 많이 되어 있는 경우 버블, 삽입은 O(n) : 정렬되어 있는 것들은 안 해도 되기 때문
선택의 경우 O(n^2) 왜냐하면 계속해서 순서대로 최솟값 찾기 때문

[공간 복잡도]

O(1)
버블, 선택 및 삽입 정렬 알고리즘의 공간 복잡도는 O(1)
이러한 알고리즘이 요소를 제자리에 정렬하기 때문
즉, 입력 배열 자체 외에 일정한 양의 추가 메모리만 필요하기 때문
입력 크기에 따라 증가하는 추가 데이터 구조를 사용하지 않고 대신 요소 교환 및 인덱스 관리를 위한 몇 가지 추가 변수에 의존. 이렇게 하면 보조 공간이 일정하게 유지

버블, 삽입, 선택 한번에 정리해서 내용이 많지만..!_! 그래도 한번에 보는게 더 정리가 잘 되니까!
다음에는 합병, 퀵, 기수 정렬에 대해서 차례대로 각각 다뤄볼 것이당 !_! 내용이 많으니까!

[알고리즘 JS] 합병 정렬 (merge sort) 나누고 정복해!

haileyham.tistory.com

[JavaScript] 함수 선언문과 함수 표현식, 화살표 함수 그리고 호이스팅

haileyham — Wed, 10 Jul 2024 15:18:55 +0900

함수선언, 함수표현식, 화살표함수!

최근 알고리즘에 대해서만 정리를 했었는데, 주제의 다양성을 위해 다시 JavaScript 개념을 정리하여 다뤄볼까한다. 오늘의 주제는 함수선언문, 함수표현식 그리고 화살표함수이다!_! 그리고 호이스팅과 TDZ 까지 살펴볼건데, 쉽게 쉽게 정리를 할테니~ 오늘도 스따뜨!!

둘리 호이 짤

함수 선언형

1. 개념 및 특징

함수 선언문은 함수 이름과 함께 "function" 키워드를 사용하여 함수를 정의하는 방식. 함수가 호이스팅되기 때문에 함수 정의 이전에 호출해도 동작

함수 선언형은 function 키워드를 사용하여 함수를 선언
스크립트나 함수 내에서 어디서든 호출할 수 있음
함수 선언형은 호이스팅으로 인해 선언부가 코드 상단으로 끌어올려짐

2. 코드로 살펴보기

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

console.log(add(2, 3)); // Output: 5

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

console.log(add(5, 7)); // Output: 12

이 예에서는 'add' 함수가 함수 선언을 사용하여 선언
함수 선언은 완전히 호이스팅
즉, 함수 이름과 함수 본문이 모두 해당 범위의 맨 위로 호이스팅
결과적으로 코드에서 선언하기 전에 add 함수를 호출 가능

함수 선언: 전체 함수(이름과 본문 모두)가 호이스팅. 함수를 선언하기 전에 호출 가능

함수 표현식

1. 개념 및 특징

함수 표현식은 함수를 변수에 할당하여 정의하는 방식으로, 함수가 변수에 저장되어야 호출 가능. 함수 표현식은 변수에 할당된 이후에만 사용

함수 표현식은 변수에 함수를 할당하여 선언하며
선언 이전에 호출하면 에러가 발생
함수 표현식은 변수의 스코프에 따라 동작
사실 함수 표현식도 호이스팅이 되기는 하지만 변수가 호이스팅 되는 것

함수표현식도 변수 자체가 호이스팅되지만 함수에 대한 할당은 런타임에 발생함

함수 표현식에서는 함수 정의가 아닌 변수 선언만 끌어올려짐
변수는 해당 범위의 맨 위로 끌어올려지고 '정의되지 않음 undefined'으로 초기화
실제 함수 할당은 할당 문이 실행되는 지점인 런타임에 발생

2. 코드로 살펴보기

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

console.log(add); // Output: ReferenceError: Cannot access 'add' before initialization

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

console.log(add(5, 3)); // Output: 8

이 예에서는 add 변수가 const를 사용하여 선언되고 함수 표현식이 할당
var와 달리 const(및 let)로 선언된 변수는 undefine으로 초기화되지 않으며
블록 시작부터 선언이 나타날 때까지 "일시적 데드존"
이는 선언 전에 add에 액세스하려고 하면 ReferenceError가 발생한다는 것을 의미

변수 선언(const 사용): 선언은 해당 범위의 맨 위로 끌어올려지지만 초기화되지는 않음. 변수는 할당이 발생할 때까지 "일시적 데드존"에 있음.
기능 할당: 할당은 런타임에 발생. 할당 전에 변수에 액세스하려고 하면 ReferenceError가 발생

화살표 함수

1. 개념 및 특징

화살표 함수는 자체 this, arguments, super 또는 new.target을 바인딩하지 않는 함수 표현식을 작성하기 위한 간결한 구문
화살표 함수 표현식(화살표 함수 expression)은 함수 표현식에 대한 간결한 대안으로, 약간의 의미적 차이와 의도적인 사용상의 제한을 가지고 있음

2. 코드로 살펴보기

const add = (a, b) => a + b;

console.log(myArrowFunction); // Output: undefined

var myArrowFunction = () => {
  console.log("Hello, world!");
};

myArrowFunction(); // Output: Hello, world!

이 예에서는 myArrowFunction 변수가 호이스팅되고 undefine으로 초기화
화살표 함수 자체는 호이스팅되지 않으며 할당은 런타임에 발생
따라서 할당 전에 'myArrowFunction'을 호출하면 오류가 발생하지만 할당 전에 변수를 기록하면 '정의되지 않음'이 표시

화살표 함수에 대한 변수 선언이 호이스팅,
화살표 기능 할당은 호이스팅 단계가 아닌 런타임에 발생

함수 선언형 vs 함수 표현식

1. 호이스팅

함수 선언문은 호이스팅에 의해 코드의 상단으로 끌어올려지므로 정의 이전에도 호출 가능
반면, 함수 표현식은 변수 할당이 이루어진 이후부터 호출

2. 익명 함수

함수 선언문은 함수 이름이 필수적이지만, 함수 표현식은 익명 함수로 정의할 수 있음

3. 표현식으로 활용

함수 표현식은 변수에 할당되므로, 다른 함수의 인자로 전달하거나 반환 값으로 사용하는 등 다양한 상황에서 활용 가능

호이스팅

1. 개념 및 특징

호이스팅은 컴파일 단계 중에 변수 및 함수 선언이 포함 범위의 맨 위로 이동되는 동작

JavaScript에서 호이스팅은 컴파일 단계 중에 변수 및 함수 선언이 포함 범위의 맨 위로 이동되는 동작
즉, var로 선언된 변수는 정의되지 않음으로 초기화되는 반면, 함수 선언은 코드에 정의되기 전에 호출 가능
그러나 'let' 및 'const' 선언은 같은 방식으로 끌어올려지지 않으며 해당 정의를 만날 때까지 시간적 데드존에 남음.

2. 주의할 점?

호이스팅은 코드의 가독성과 예측 가능성을 낮출 수 있으므로, 변수 및 함수를 가능한한 선언한 위치에 가까이 하고, 미리 초기화하여 사용하는 것이 권장

3. 장단점?

장점

유연성: 함수와 변수를 선언하기 전에 사용할 수 있으므로 때로는 더 깔끔하고 읽기 쉬운 코드가 생성될 수 있음.
함수 범위 명확성: 함수 선언의 경우 함수 범위가 블록 범위가 아닌 포함 함수로 지정된다는 점을 명확히 하는데, JavaScript의 함수 범위 규칙에 따름

단점

잠재적인 버그: var로 선언된 변수는 undefined으로 끌어올려지고 초기화. 이는 값이 할당되기 전에 액세스하면 버그가 발생할 수 있음.
가독성 문제: 호이스팅은 코드의 실제 실행 순서를 모호하게 만들어 호이스팅 규칙에 익숙하지 않은 개발자가 이해하기 어렵게 만들 수 있음.
엄격 모드 차이점: 엄격 모드(``use strict';`)에서는 'var'을 사용하여 우발적인 전역 변수가 생성되지 않음. 이는 호이스팅 동작을 변경하고 코드가 제대로 구조화되지 않은 경우 예상치 못한 결과를 초래할 수 있음.

요약하면 호이스팅은 유연성을 제공하고 JavaScript의 범위 지정 규칙에 부합할 수 있지만 변수 초기화 및 코드 명확성과 관련된 잠재적인 함정도 발생. 변수 선언에 'let' 및 'const'를 사용하고 명확한 코드 구성을 보장하는 등의 최신 JavaScript 방식을 사용하면 이러한 문제 중 일부를 완화 가능.

TDZ (Temporal Dead Zone)

1. 개념

TDZ(Temporal Dead Zone)는 변수가 선언된 위치부터 초기화될 때까지의 영역
let과 const 변수는 선언되었지만 아직 초기화되지 않은 상태에서 접근하려고 하면 TDZ에 해당하며 에러가 발생
이후 변수가 초기화되면 TDZ를 벗어나 정상적으로 사용 가능.

쉽게 말하면, 변수가 생성(=변수선언)되고 메모리에 처음 값이 저장(=초기화) 될 때까지의 영역으로
메모리에 초기 값이 없는 상태에서 접근하려고 하면 에러가 발생한다는 것!

*ES6의 let과 const는 변수를 블록의 상단으로 호이스팅 하지만 초기화하지는 않음! 변수가 선언되기 전에 블록 안에서 사용할 수 없는데, 이 위치를 시간상 사각지대(Temporal Dead Zone, TDZ)라고 표현. (ReferenceError 발생)
참고로 var 선언의 경우 undefined로 초기화 되기 때문에 TDZ가 없음!_!

TDZ에 대해서 조금 더 자세히 알고싶다면 이전 정리글 참고!

[JavaScript] TDZ(Temporal Dead Zone) : 변수의 시간 여행~

변수의 시간 여행! Temporal Dead Zone!오늘은 TDZ에 대해서 살펴보도록 하겠다. Temporal Dead Zone, TDZ! 넌 무엇이니!? TDZ 란?1. 개념 TDZ(Temporal Dead Zone)는 변수가 선언된 위치부터 초기화될 때까지

haileyham.tistory.com

이제 호이스팅과 TDZ까지 쉽게 설명 가능!

[알고리즘 JS] 재귀(Recursion)

haileyham — Sun, 30 Jun 2024 17:30:21 +0900

재귀 함수에 대하여

이번 게시물에서는 재귀(Recursion)에 대해서 다뤄보도록 하겠당!_! 먼저 재귀 함수를 사용하는 이유에 대해서 살펴보고, 재귀가 어떻게 진행되는지 스택호출 순서에 대해서 살펴볼 것이당. 그리고 순서대로 재귀함수 기본, 반복문과 재귀함수를 이용한 팩토리얼, Helper 메소드 재귀까지 살펴보쟝!_! 쉬운 코드들로 진행을 하니 이해하기는 편할 것이당!_! 레츠꼬우꼬우!!

https://media.licdn.com/dms/image/D5612AQGv528Gl3SwoQ/article-cover_image-shrink_600_2000/0/1694632817194?e=2147483647&v=beta&t=n_cpZboP6VGgza95PIpLd07wKhoX3LqnS1bjWYAaRxU

재귀 함수를 사용하는 이유

▷ 정의

재귀는 자기자신을 호출하는 절차. 자바스크립트(JavaScript)나 코드를 가지고 하는 모든 일.
우리가 말하는 재귀는 자기자신을 호출하는 함수. 스스로를 호출.
Laugh라는 이름의 함수가 존재하면 내부 함수의 이름도 Laugh.

▷ 살펴보기 (재귀 예시)

두 가지의 서로 다른 메소드에 걸쳐 실행되기는 하지만, 결국에는 이 사이클에서 두 함수가 서로를 호출.
즉, readValue가 readObject를 호출하고, readObject는 readValue를 호출하고, readValue는 다시 readObject를 호출. 이 사이클이 계속해서 반복.

JSON.parse와 JSON.stringify
document.getElementByld와 DOM(Document Object Model)
순회 알고리즘(traversal algorithm)
DOM은 모든 요소가 중첩된 트리 구조. 그래서 div 안의 div에 div가 들어 있는 중첩 계층이 100개나 될 수도 있음. 만약에 그 모든 걸 살펴보고자 한다면, 흔한 접근법 중 하나는 재귀적으로 작동하는 코드를 작성.

스택 호출하기

▷ 개념

거의 모든 프로그래밍 언어에는 함수 호출을 관리하는 데이터 구조가 있음. 호출된 함수는 종종 다른 함수가 반환될 때까지 기다림. 특별한 순서가 있으며, 함수들은 무작위로 실행되지 않음. 먼저 호출되는 함수가 있고, 그 함수 내에서 두 번째 함수가 호출. 함수들은 올바른 순서대로 실행되어야 하고 이를 처리하는 데이터 구조가 있음. JavaScript의 경우, 호출 스택.

호출 스택을 종이 더미로 생각할 수 있지만, 스택이라는 데이터 구조. 함수를 호출할 때, 그 함수는 호출 스택의 맨 위에 쌓이는데, 마치 책상 위에 종이 더미를 쌓는 것처럼, 새로 추가된 함수는 맨 위에 위치함. JavaScript는 return 키워드를 찾거나 함수 내에서 더 이상 실행할 코드가 없을 때, 컴파일러가 스택의 맨 위 항목을 제거. 스택의 개념을 설명할 때, 그것을 책상 위의 종이 더미에 비유하게 되는데, 무언가를 위에 놓기. 심지어 무언가를 꺼낼 때도, 위에서부터 꺼냄.

- 개발자도구 sources > 버튼 or command + enter 실행으로 콜스택 확인 (next step 눌러보면서 순서 확인)
- 재귀 함수에서 호출 스택 많이 사용
- 보통의 경우 함수 완료 > 호출 스택 아래 > 제거
- 재귀의 경우 계속해서 새로운 함수 호출 스택에 추가(동일 함수 계속 추가, 추가된 함수는 호출 기다림)
- 어느 지점에 호출 종료 필요(종료 지점 없으면 무한 루프빠짐)

호출 스택은 자바스크립트의 보이지 않는 곳에서 작동하는 정적 데이터 구조(static data structure). 그 의미는 항목이 꼭대기에 추가되고 마찬가지로 꼭대기에서부터 제거되며, 함수가 호출되면 이 구조에 추가된다는 것.

첫번째 재귀함수

▷ 기본 요소

라인을 끝내는 종료 조건 : 종료 지점이 있어야만 무한루프에 빠지지 않음
다른 입력 값 : 계속해서 같은 값을 호출하는 것이 아니라 매번 다른 데이터로 함수 호출

▷ 코드로 살펴보기

countdown.js

// Recursive Version
function countDown(num) {
  if (num <= 0) {
    console.log("All done!");
    return;
  }
  console.log(num);
  num--;
  countDown(num);
}
countDown(3)

// Iterative Version 재귀 사용하지 않고 반복문 사용
function countDown(num) {
  for (var i = num; i > 0; i--) {
    console.log(i);
  }
  console.log("All done!")
}

퀴즈

자바스크립트는 함수 호출하기 위해 어떤 도구 사용?

스택 호출

기본 케이스는 무엇?

재귀가 끝난 상태

두 번째 재귀함수

▷ 코드로 살펴보기

sumrange.js

function sumRange(num) {
  if (num === 1) return 1;
  return num + sumRange(num - 1);
}

sumRange(4)

위의 과정의 경우 다음과 같이 진행 됨

sumRange(3)
  return 3 + sumRange(2)
    return 2 + sumRange(1)
      return 1

위의 순서로 진행이 되고 다시 살펴보면 거꾸로 진행됨
스택과정, 넣고 위에있는것부터 다시 계산하여 뺌

sumRange(3) // 아래에서 위로 순서대로 하여 6 나옴.
  return 3 + 3 // sumRange(2) 반환값 3 +3 = 6 ------ (3)
    return 2 + 1 // sumRange(1) 반환값 1 + 2 = 3  ------ (2)
      return 1 //함수 종료 1  ------ (1)

반복문으로 팩토리얼 구현하기

▷ 코드로 살펴보기

factorial_iterative.js

function factorial(num){
    let total = 1;
    for(let i = num; i > 1; i--){
        total *= i
    }
    return total;
}

반복문으로 팩토리얼 구현(비재귀적 해결법)
factorial(4) 할 경우 4 * 3 * 2 순서로 i값 작아지면서 진행하여 24 결과 도출
마지막 1의 경우 그전 값의 * 1이기 때문에 i값 1보다 큰 값까지만 진행

재귀 호출로 팩토리얼 구현하기

▷ 코드로 살펴보기

factorial_recursive.js

function factorial(num){
    if(num === 1) return 1;
    return num * factorial(num-1);
}

재귀적 해결법
num 이 1과 같을 때 종료 (반복문의 경우 i가 1보다 큰 값까지만 진행)
그 전까지는 계속해서 factorial 재귀적 호출
factorial(4)로 num이 4로 들어오면

factorial(4) 진행할 경우,
4 * factorial(3)
3 * factorial(2)
2 * factorial(1)
순으로 되고, 계산은
factorial(1) = return 1되어서 종료되면서
2 * 1(factorial(1)값) = 2
3 * 2(factorial(2)값) = 6
4 * 6(factorial(3)값) = 24
순으로 진행

helper_method_재귀

▷ 설명

이전까지 살펴본 재귀 함수들은 단일 단독 함수(스스로를 재귀)
헬퍼 메소드 재귀의 경우 코드가 실제로 뭘 하지는 않음
두 개의 함수 존재
외부 함수와 내부에는 재귀 함수
아래의 재귀함수 또한 자기 자신 호출
헬퍼 메소드 재귀는 그냥 재귀적이지 않은 외부 함수가 재귀적인 내부 함수(inner function)를 호출하는 패턴

function outer(input){
var outerScopedVariable = []

function helper(helperInput){
// modify the outerScopedVariable
helper(helperInput--)
}

helper(input)

return outerScopedVariable;
}

메인 외부 함수는 우리가 외부에서 호출
외부 함수를 호출해서 무언가를 내부로 전달 가능
외부 함수 안에 또 다른 함수, 재귀적으로 자기 자신 호출
배열이나 데이터 목록 같은 걸 컴파일(compile)해야 할 때 흔히 이렇게 작업
타뷸레이션(tabulation)을 하는 게 아님. 팩토리얼이나 다른 함수를 사용했을 때처럼 하나의 값을 계속해서 곱하는 것도 아니고, 범위의 합계를 내는 것도 아님.

helper_method_recursion.js

어느 배열에서 모든 홀수값을 수집하는 것과 같은 같은 작업을 수행 중이라면, 헬퍼 메소드 재귀를 사용하는 게 편함
빈 배열을 생성하고 그 안에 모든 데이터를 입력. 그러고 나서 헬퍼 함수를 호출.

function collectOddValues(arr) {

  let result = [];

  function helper(helperInput) {
    if (helperInput.length === 0) {
      return;
    }

    if (helperInput[0] % 2 !== 0) {
      result.push(helperInput[0])
    }

    helper(helperInput.slice(1))
  }

  helper(arr)

  return result;
}

collectOddValues([1, 2, 3, 4, 5, 6, 7, 8, 9])

위에서 재귀 논리는 result를 조작할 것. result에 값 추가
이렇게 작업하는 이유는 result를 collectOddValues(외부)에 정리하면 함수가 재귀로 호출될 때마다 빈 배열로 리셋되기 때문에
헬퍼 메소드 재귀를 통해서 해당 문제 해결 result 값은 helper 재귀 속에서
실제 논리는 helper이고, 배열을 사용해서 helper(arr)에서 실행
종료 조건은 helperInput.length가 0일 때,
그 외에는 홀수를 걸러냄. result 값에 push
짝수 일 경우 helper 배열 slice한 부분배열로 다시 helper 재귀호출

순수_재귀

collect_odds_pure_recursion.js

▷ 설명

재귀가 아닌 반복을 사용해서 홀수 반환 문제 해결(쉬움)
헬퍼 재귀를 사용할 수도 있지만 다음과 같이 순수 재귀 사용해서 작업 수행 가능
외부 데이터 구조 사용하지 않음
코드는 더 짧지만 이해하는데 어려울 수 잇음

function collectOddValues(arr) {
let newArr = [];

if (arr.length === 0) {
return newArr;
}

if (arr[0] % 2 !== 0) {
newArr.push(arr[0]);
}

newArr = newArr.concat(collectOddValues(arr.slice(1)));
return newArr;
}

collectOddValues([1, 2, 3, 4, 5])

함수가 호출될 때마다 newArr 배열 초기화
리셋되어도 상관없음. 실제 작업은 계산이 완료 됐을 때 모든 배열을 하나로 합쳐서 반환하는 것
우선 arr.length가 0인지 확인하고 맞으면 newArr 반환
arr가 배열일 경우 newArr에 push
newArr를 concat하면서 collectOddValules 재귀 호출(arr slice한 값으로 넘기면서 재귀 호출)

배열 사용하면서 헬퍼 메소드 없이 순수 재귀 솔루션사용 경우
배열 복사하는 slice, spread 연산자(operator), concat 같은 메소드 사용 - 배열 변경 필요 없음 / 일종의 결과 축적
문자열 변경 불가 - slice나 substring 사용해서 사본 만들어야 함
객체의 경우 object.assign이나 spread 연산자 사용하는 것이 유용

나중에 다시 맞이할 재귀를 위해
탄탄하게..

.
.

[알고리즘JS] 다중 포인터 패턴

다중 포인터 패턴?이번에 정리할 내용은 다중 포인터 패턴! 간단하게 설명하자면, 두개의 포인터가 고유값을 세는 것인데 아무튼 이에 대해서 코드와 함께 개념 정리를 해보자꾸! 정의

haileyham.tistory.com

[알고리즘JS] 다중 포인터 패턴

haileyham — Wed, 26 Jun 2024 17:00:30 +0900

다중 포인터 패턴?

이번에 정리할 내용은 다중 포인터 패턴! 간단하게 설명하자면, 두개의 포인터가 고유값을 세는 것인데 아무튼 이에 대해서 코드와 함께 개념 정리를 해보자꾸!

정의

설명

이 패턴의 개념은 인덱스나 위치에 해당하는 포인터나 값을 만든 다음 특정 조건에 따라 중간 지점에서부터 시작 지점이나 끝 지점이나 양쪽 지점을 향해 이동시키는 것. 결론적으로 배열이나 문자열과 같은 일종의 선형 구조나 또는 나중에 살펴볼 패턴들 중에 익숙하지 않겠지만 이중 연결 리스트나 단일 연결 리스트를 만드는 것. 이런 패턴들 일단 몰라도 됨.
한 쌍의 값이나 조건을 충족시키는 무언가를 찾는다는 개념을 알아두기.

[-4, -3, -2, -1, 0, 1, 2, 5]
"alidjflijweortjwojros"

보통은 한 쌍을 찾음. 두 가지의 참조값을 사용. 참조값 하나는 여기서, 다른 하나는 여기서 시작하여 가운데로 서로를 향해 이동하도록 해주거나 참조값 하나는 여기서, 다른 하나는 여기서 시작할 수 있음. 참조값이란 인덱스를 가리키는 숫자인
i와 j 같은 변수를 의미.
따라서 i와 j를 여기에 입력하여 시작하여 특정 방향으로 이동하도록 하면 됨. 방향이 확실하지는 않음.
지난 영상에서 보았던 빈도 카운터 패턴과 비교하여 다소 느슨하게 정의되지만 그래도 자주 볼 수 있음.

요약부터 하자면, 여기에 포인터 변수는 배열이나 문자열의 특정 위치를 가리키는 것. 두 번째도 있으므로 서로를 향해 이동하거나 같은 방향으로 이동하든 끝에서부터 시작 위치로 이동하든 상관 없음. 다만 포인터를 두 개 사용하는 것.

예시 sum_zero_naive.js (개선전)

Time Complexity : O(N^2)
Space Complexity : O(1)

function sumZero(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] + arr[j] === 0) {
        return [arr[i], arr[j]];
      }
    }
  }
}


sumZero([-4, -3, -2, -1, 0, 1, 2, 5])

문제

sumZero([-3,-2,-1,0,1,2,3]) //[-3,3]
sumZero([-2,0,1,3]) // undefined
sumZero([-1,2,3]) // undefined

분류(assorted)가 아니라 정렬(assorted)된 배열. 다만 오름차순. 이 함수는 합계가 0인 첫 번째 쌍, 즉, 한 숫자를 가져와 다른 숫자에 더하면 0이 되는 쌍을 찾음. 여기 -3이. 이 정렬된 배열에는 -3부터 +3까지 있습니다. 이 경우에 -3 더하기 +3은 0이므로 이 쌍은 배열로 반환. 그렇지 않으면 이 경우처럼 합이 0인 쌍이 없다면 undefined가 반환됨. 위에서 [-3,3]만 되어있는 이유는 합이 0이 되는 첫 번째 쌍을 찾아 반환하는 즉시 중지 됐기 때문.

문제 접근

배열이 정렬 되어 있어야 함
정렬된 배열의 경우 합계가 0이 되는 것을 찾으면 됨

설명

for문으로 배열 한번 돌리고, 그 안에서 for문으로 한번 더 배열 돌림 i+1로
각 배열 순회하면서 각 값 더해서 0이 되는 값 찾은 다음
return 값으로 해당 값 각각 반환
필요 없이 많은 작업 수행

특징

루프 2개 사용됨
모든 배열 순회하기 때문에 필요 없는 많은 작업 수행

예시 sum_zero_naive_refactored.js (리팩토링)

Time Complexity : O(N)
Space Complexity : O(1)

function sumZero(arr) {
  let left = 0;
  let right = arr.length - 1;
  while (left < right) {
    let sum = arr[left] + arr[right];
    if (sum === 0) {
      return [arr[left], arr[right]];
    } else if (sum > 0) {
      right--;
    } else {
      left++;
    }
  }
}


sumZero([-3, -2, -1, 0, 1, 2, 3])

설명

left와 right를 설정
while 반복문으로 left < right 될 때까지 진행
배열의 left 인덱스와 right 인덱스 값 더한 것을 sum
sum 이 0되면 arr[left]와 arr[right] 값 return
sum > 0 이면, right--;
위의 4-5 아닐경우(sum<0), left++;

예시 sum_zero_naive_refactored2.js

위의 경우 합계 0 되면 반환 후 종료. sum_zero_naive_refactored2의 경우 0 값에 해당하는 모든 값 출력하게 함.

function sumZeroAllPairs(arr) {
  let left = 0;
  let right = arr.length - 1;
  const result = [];

  while (left < right) {
    let sum = arr[left] + arr[right];

    if (sum === 0) {
      result.push([arr[left], arr[right]]);
      left++;
      right--;
    } else if (sum > 0) {
      right--;
    } else {
      left++;
    }
  }

  return result.length > 0 ? result : undefined;
}


console.log(sumZeroAllPairs([-3, -2, -1, 0, 1, 2, 3])); // [[-3, 3], [-2, 2], [-1, 1]]

설명

left, right 동일
result 배열 생성
while 반복문 sum === 0 일 경우 result에 arr[left]와 arr[right] 값 push 하고 left++, right--;
sum > 0 일 경우, sum < 0일 경우 처리 동일
최종 return값 result.length 확인 후, 0보다 크면 result 값 반환, 아니면 undefined 반환

다중 포인터 : 고유 값 세는 문제 countUniqueValues

설명

countUniqueValues([1,1,1,1,1,2]) // 2
countUniqueValues([1,2,3,4,4,4,7,7,12,12,13]) // 7
countUniqueValues([]) // 0
countUniqueValues([-2, -1, 0, 1]) // 4

두 번째 문제를 살펴보자. 다중 포인터나 투 포인터 패턴을 사용하여 해결 가능. 처음과 끝에서 가운데로 이동하는 게 아니라서 약간 다름. 그래도 마찬가지로 두 개의 포인터를 사용한다는 것이 관건.
조건에 따라 두 포인터가 특정 방향으로 움직이도록 하고 countUniqueValues라는 함수를 구현하여 앞서 작업과 마찬가지로 정렬된 배열을 전달하면 해당 배열의 고유한 값의 개수를 반환하도록.
음수가 포함될 수 있지만 항상 정렬된 상태로 있음. 이 경우에는 2를 반환. 고유한 숫자가 1과 2 두 가지만 있기 때문. 이 경우에는 7을 반환. 숫자값이 일곱 가지가 있기 때문.
고유한 숫자가 비어있는 한 고유한 값은 0. 여기에는 고유 값이 -2, -1, 0, 1 네 가지. 여기서도 투 포인터의 도움을 받을 수 있음. 이 해결책은 이전 해결책과 동일하지 않고 약간 다름. 다만 똑같이 두 개의 포인터를 사용.

문제 풀기 힌트

i, j(i+1) 배열 순회하면서, 같으면 j만 이동하고, 다르면 i 한칸 이동시키고 j에 있는 값 i 인덱스에 두기. 그렇게 계속 반복하고나면 i 인덱스까지의 배열이 고유 값들임. 결국 i+1이 고유값.
배열에 루프 1개 적용하여 O(n) 값일 것.

문제

다중 포인터 - countUniqueValues
정렬된 배열을 받아들이고 배열의 고유 값을 세는 countUniqueValues라는 함수를 구현합니다. 배열에 음수가 있을 수 있지만 항상 정렬.

countUniqueValues([1,1,1,1,1,2]) // 2
countUniqueValues([1,2,3,4,4,4,7,7,12,12,13]) // 7
countUniqueValues([]) // 0
countUniqueValues([-2,-1,-1,0,1]) // 4

Time Complexity - O(n)
Space Complexity - O(n)

(추가) 상수 또는 O(1) space 와 O(n) time으로만 이 작업을 수행해야 함.

solution

function countUniqueValues(arr) {
  if (arr.length === 0) return 0;
  var i = 0;
  for (var j = 1; j < arr.length; j++) {
    if (arr[i] !== arr[j]) {
      i++;
      arr[i] = arr[j]
    }
  }
  return i + 1;
}
countUniqueValues([1, 2, 2, 5, 7, 7, 99])

설명

배열의 length 확인 후 0 이면 0 return
i에 0 값 넣기 (var)
for문을 돌리는데, j;
if문으로 arr[i]랑 arr[j]랑 다르면 i++ 해주고
arr[i] = arr[j] 같게 만들기(arr[j]를 arr[i]에 할당하여 i 위치를 이 새로운 고유 값으로 업데이트) > arr[i]값에다가 arr[j] 넣어서 새로운 값으로 !_!
i+1 값 return 하기 => 고유값 갯수!

과정 설명

초기 배열: [1, 2, 2, 5, 7, 7, 99]
  i = 0, j = 1

arr[i]와 arr[j]를 비교
  arr[0] = 1, arr[1] = 2
  1 !== 2, 따라서 i를 증가시키고 arr[i]를 업데이트:
      i++ -> i = 1
      arr[1] = arr[1] -> 변경 없음, 배열은 [1, 2, 2, 5, 7, 7, 99]로 유지.


다음 반복:
  j = 2
  arr[1] = 2, arr[2] = 2
  2 === 2, 따라서 i나 배열은 변경되지 않음.

다음 반복:
  j = 3
  arr[1] = 2, arr[3] = 5
  2 !== 5, 따라서 i를 증가시키고 arr[i]를 업데이트
    i++ -> i = 2
    arr[2] = arr[3] -> 배열은 [1, 2, 5, 5, 7, 7, 99]가

다음 반복:
  j = 4
  arr[2] = 5, arr[4] = 7
  5 !== 7, 따라서 i를 증가시키고 arr[i]를 업데이트:
    i++ -> i = 3
    arr[3] = arr[4] -> 배열은 [1, 2, 5, 7, 7, 7, 99]

다음 반복:
  j = 5
  arr[3] = 7, arr[5] = 7
  7 === 7, 따라서 i나 배열은 변경되지 않음.

다음 반복:
  j = 6
  arr[3] = 7, arr[6] = 99
  7 !== 99, 따라서 i를 증가시키고 arr[i]를 업데이트:
i++ -> i = 4
  arr[4] = arr[6] -> 배열은 [1, 2, 5, 7, 99, 7, 99]

Quiz

문제

빈도수 세기 / 다중 포인터 - areThereDuplicates
가변적인 수의 인수(a variable number of arguments)를 받아들이고 전달된 인자 중 중복이 있는지 확인하는 areThereDuplicates라는 함수를 구현합니다.  빈도 카운터 패턴 또는 다중 포인터 패턴을 사용하여 이 문제를 해결할 수 있습니다.



예시:

areThereDuplicates(1, 2, 3) // false
areThereDuplicates(1, 2, 2) // true 
areThereDuplicates('a', 'b', 'c', 'a') // true 
제약 조건:

Time - O(n)

Space - O(n)

보너스:

Time - O(n log n)

Space - O(1)

정답1(빈도수세기)

function areThereDuplicates() {
  let collection = {}
  for (let val in arguments) {
    collection[arguments[val]] = (collection[arguments[val]] || 0) + 1
  }
  for (let key in collection) {
    if (collection[key] > 1) return true
  }
  return false;
}

정답2(다중포인터)

function areThereDuplicates(...args) {
  args.sort((a, b) => a > b);
  let start = 0;
  let next = 1;
  while (next < args.length) {
    if (args[start] === args[next]) {
      return true
    }
    start++
    next++
  }
  return false
}

정답3(선형)

function areThereDuplicates() {
  return new Set(arguments).size !== arguments.length;
}

이전의 정리글은 아래 게시글 참고!_!

[알고리즘JS] 빈도 수 세기 패턴

문제 해결 패턴문제 해결 패턴에서 빈도 수 세기 패턴을 정리해보자! 사실 코드를 치며 각 주제마다 폴더를 만들어 README에 정리를 한 내용을 슬쩍슬쩍 옮겨오는 것이지만! 블로그에도 정리

haileyham.tistory.com

재귀가 궁금하다면?

[알고리즘 JS] 재귀(Recursion)

재귀 함수에 대하여이번 게시물에서는 재귀(Recursion)에 대해서 다뤄보도록 하겠당!_! 먼저 재귀 함수를 사용하는 이유에 대해서 살펴보고, 재귀가 어떻게 진행되는지 스택호출 순서에 대해서

haileyham.tistory.com

[알고리즘JS] 빈도 수 세기 패턴

haileyham — Wed, 26 Jun 2024 16:46:45 +0900

문제 해결 패턴

문제 해결 패턴에서 빈도 수 세기 패턴을 정리해보자! 사실 코드를 치며 각 주제마다 폴더를 만들어 README에 정리를 한 내용을 슬쩍슬쩍 옮겨오는 것이지만! 블로그에도 정리해두면 좋을 것 같아서 옮겨본다.

레츠꼬우~!_!

Question

2개의 배열을 허용하는 same이라는 함수를 작성.
배열의 모든 값이 두 번째 배열에 해당하는 값을 가지면 참을 반환.
따라서 첫 번째 배열에는 여러 값, 두 번째 배열의 값이 정확히 동일하지만 제곱되어 있음.
순서는 상관 없고, 제곱만 되어 있으면 됨. 값의 빈도도 동일해야 함.

example

입력 값

1,2,3

반환 값

4,1,9 // true
1,9,9 // false

solution 1

O(o^2)

function same(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  for (let i = 0; i < arr1.length; i++) {
    let correctIndex = arr2.indexOf(arr1[i] ** 2)
    if (correctIndex === -1) {
      return false;
    }
    console.log(arr2);
    arr2.splice(correctIndex, 1)
  }
  return true;
}

same([1, 2, 3, 2], [9, 1, 4, 4])

설명

중첩된 루프 사용. 하나의 루프 작성하지만 그 자체가 루프인 인덱스 사용.

두 배열의 길이가 다른지 여부 확인
각 값의 제곱을 전달하는 위치에 indexOf를 호출(해당 배열에 루프 적용)
indexOf
arr2에서 arr1의 각 값에 해당하는 인덱스를 물음
(ex [1,2,3], [9,1,4] 일경우, arr2에서 arr1의 값 1의 제곱이 어느 인덱스인지)
-1 값일 경우 false; 처리. 나머지 corrrectIndex 저장
splice 사용하여 true값들인 correctIndex 배열에서 제거
splice

아래 흐름대로 감

[9,1,4,4]
[9,4,4]
[9,4]
[4]
true

특징

O(o^2) : 배열 길이 1000이면 100만번반복
제곱 시간 사용. 순진한 접근법
indexOf 기능 전체 배열 반복, 중첩된 루프인 전체 배열 잠재적 반복
따라서 n이 배열의 길이를 늘리면 이 값이 함께 증가하여 2차 관계로 중첩

solution 2

O(n)

function same(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }
  let frequencyCounter1 = {}
  let frequencyCounter2 = {}
  for (let val of arr1) {
    frequencyCounter1[val] = (frequencyCounter1[val] || 0) + 1
  }
  for (let val of arr2) {
    frequencyCounter2[val] = (frequencyCounter2[val] || 0) + 1
  }
  console.log(frequencyCounter1);
  console.log(frequencyCounter2);
  for (let key in frequencyCounter1) {
    if (!(key ** 2 in frequencyCounter2)) {
      return false
    }
    if (frequencyCounter2[key ** 2] !== frequencyCounter1[key]) {
      return false
    }
  }
  return true
}

same([1, 2, 3, 2, 5], [9, 1, 4, 4, 11])

설명

배열 길이 비교
for of 로 각 배열 돌려줌
frequencyCounter1 혹은 2 객체에 각 배열(arr1,arr2) 값들이 있으면 넣어주고 아니면 +1
```
{1: 1, 2: 2, 3: 1, 5: 1}
{9: 1, 1: 1, 4: 2, 11: 1}
```
for in 로 frequencyCounter1 객체 돌려주면서 값들 있는지 확인
frequencyCounter2랑 key값 다르면 false(ex: arr1의 key 2를 2배한 4가 arr2 key에 있는지 확인)
두번째 if문에서 key 빈도수 확인(key의 value 비교)

특징

O(n) (여기서는 3n정도 O(n))
첫 번째 배열에 루프를 적용하여 두 번째 배열의 하위 루프에서 각 값을 확인하는 대신 각 배열에 한 번씩 개별적으로 루프를 적용
두 개의 루프가 두 개의 중첩된 개별 루프보다 훨씬 나음
각 배열에 한 번씩 개별적으로 루프를 적용

{1:1, 2:2, 3:1}
{1:1, 4:2, 9:1}
true

{1:1, 2:2, 3:1,5:1}
{1:1, 4:2, 9:1, 11:1}
false

빈도수 세기 - validAnagram

문제

두 개의 문자열이 주어졌을 때, 두 번째 문자열이 첫 번째 문자열의 애너그램인지 확인하는 함수를 작성합니다. 애너그램은 다른 글자의 글자를 재배열하여 형성된 단어, 구 또는 이름입니다. (예시: cinema -> iceman)

예시:

validAnagram('', '') // true
validAnagram('aaz', 'zza') // false
validAnagram('anagram', 'nagaram') // true
validAnagram("rat","car") // false // false
validAnagram('awesome', 'awesom') // false
validAnagram('amanaplanacanalpanama', 'acanalmanplanpamana') // false
validAnagram('qwerty', 'qeywrt') // true
validAnagram('texttwisttime', 'timetwisttext') // true

안내: 문자열에 소문자만 포함되어 있다고 가정해도 됩니다.
Time Complexity - O(n)

function validAnagram(first, second) {
  if (first.length !== second.length) {
    return false;
  }

  const lookup = {};

  for (let i = 0; i < first.length; i++) {
    let letter = first[i];
    lookup[letter] ? lookup[letter] += 1 : lookup[letter] = 1;
  }
  console.log(lookup)

  for (let i = 0; i < second.length; i++) {
    let letter = second[i];
    if (!lookup[letter]) {
      return false;
    } else {
      lookup[letter] -= 1;
    }
  }

  return true;
}

// {a: 0, n: 0, g: 0, r: 0, m: 0,s:1}
validAnagram('anagrams', 'nagaramm')

설명

각 문자 길이 확인
첫번째 문자 for 반복 돌리면서 letter에 문자 차례로 넣어줌
lookup 배열에 letter key 있으면 +1 해주고, 아니면 1
다음 두번째 문자 for문 반복 letter에 문자 차례로 넣기
lookup에 두번째문자의 letter이 없으면 false
있으면 1빼기
입력값 validAnagram('anagrams', 'nagaramm')의 경우 s가 1개 남기 때문에 false임(5번에서 false 됨)

Quiz

문제1

빈도수 세기 - sameFrequency
sameFrequency라는 함수를 작성하세요. 두 개의 양의 정수가 주어졌을 때, 두 숫자의 자릿수가 같은 빈도를 갖는지 구합니다.



여러분의 솔루션은 반드시 다음과 같은 복잡성을 가져야 합니다.:

Time: O(N)

예시 인풋:

sameFrequency(182,281) // true
sameFrequency(34,14) // false
sameFrequency(3589578, 5879385) // true
sameFrequency(22,222) // false

정답1

풀은 것

function sameFrequency(a, b) {
  const aa = a.toString();
  const bb = b.toString();
  if (aa.length !== bb.length) {
    return false;
  }

  const match = {};
  for (let i = 0; i < aa.length; i++) {
    let letter = aa[i];
    match[letter] = (match[letter] || 0) + 1
  }

  for (let i = 0; i < bb.length; i++) {
    let letter = bb[i];
    if (!match[letter]) {
      return false;
    } else {
      match[letter] -= 1;
    }
  }
  return true;
}

정답2

function sameFrequency(num1, num2) {
  let strNum1 = num1.toString();
  let strNum2 = num2.toString();
  if (strNum1.length !== strNum2.length) return false;

  let countNum1 = {};
  let countNum2 = {};

  for (let i = 0; i < strNum1.length; i++) {
    countNum1[strNum1[i]] = (countNum1[strNum1[i]] || 0) + 1
  }

  for (let j = 0; j < strNum1.length; j++) {
    countNum2[strNum2[j]] = (countNum2[strNum2[j]] || 0) + 1
  }

  for (let key in countNum1) {
    if (countNum1[key] !== countNum2[key]) return false;
  }

  return true;
}

밀린 알고리즘 공부 부랴부랴~

[알고리즘 JS] 다중 포인터 패턴

haileyham.tistory.com

[React] TanStack-Query (React-Query)

haileyham — Mon, 24 Jun 2024 16:15:32 +0900

들어가기 전에!_!

이번 게시물에서는 TanStack Query에 대해서 정리해 볼 것이다!_! 혹시 아직 React Query라고 알고 있는 가?! React Query는 2022년 8월에 TanStack Query로 변경되었다. 그 이유는 라이브러리가 React 외에도 Vue 및 Svelte와 같은 여러 프레임워크를 지원하도록 확장됨에 따라 React를 넘어 다양한 버전을 통합하고 더 광범위한 다중 프레임워크 유틸리티를 강조하는 것이기 때문!_!

아무튼 이번 게시물에서는 프로젝트 설치 및 셋팅방법과 tanstack query 사용 이유 그리고 주요 함수에 대해서 살펴보고, 다음 게시물에서 tanstack query 사용법, query 동작 이해, 동적 query 함수 및 query key, 쿼리 활성화 비활성화 등을 차례차례 정리해보겠따!

TanStack img

TanStack Query

TanStack Query 사용하는 이유?

1. TanStack Query 란?

TanStack Query는 React, Vue 및 Svelte를 포함한 여러 프레임워크를 지원하는 데이터 가져오기 및 상태 관리 라이브러리. 최소한의 상용구를 사용하여 데이터 동기화, 캐싱 및 백그라운드 업데이트를 단순화 함. TanStack Query는 프레임워크 전반에 걸쳐 일관된 API를 제공하여 최신 웹 애플리케이션에서 서버 상태를 관리하는 데 다목적이고 효율적임.

TanStack Query의 가장 중요한 기능에는 자동 업데이트 및 백그라운드 다시 가져오기를 통해 데이터를 가져오고 캐시하는 useMutation과 강력한 오류 처리 및 낙관적 업데이트로 데이터 수정을 처리하는 useMutation이 포함 됨. 이러한 기능은 비동기식 데이터 관리를 간소화하여 지원되는 프레임워크 전반에 걸쳐 강력하고 일관된 API를 제공함.

2. 그래서 사용하는 이유는?

간단히 설명하면 아래와 같음.

refetch기능과 캐시처리가 편리!_!
자동 캐싱, 동기화, 백그라운드 업데이트를 통해 서버 상태 관리를 단순화하여 효율성을 높인다규!

React 내부에서 HTTP 편리하게 요청 가능
리액트 프로젝트에서 백엔드 연결 편리
프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지
- 물론 반드시 tanstack이 필요한 것은 아님
- 하지만 이용하면 코드 간결하고 편리

이렇게만 살펴보면 아마도 fetch 가 있는데 왜 굳이 tanstack-query를 사용할까? 라는 의문점이 생길 것임. 아래에서 fetch와 비교를 하여 살펴보겠음!

▷ fetch와 tanstack-query의 비교

(코드) 기존에 useEffect와 fetch를 이용한 방법은 아래와 같음

import { useEffect, useState } from 'react';

import LoadingIndicator from '../UI/LoadingIndicator.jsx';
import ErrorBlock from '../UI/ErrorBlock.jsx';
import EventItem from './EventItem.jsx';

export default function NewEventsSection() {
  const [data, setData] = useState();
  const [error, setError] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function fetchEvents() {
      setIsLoading(true);
      const response = await fetch('http://localhost:3000/events');

      if (!response.ok) {
        const error = new Error('An error occurred while fetching the events');
        error.code = response.status;
        error.info = await response.json();
        throw error;
      }

      const { events } = await response.json();

      return events;
    }

    fetchEvents()
      .then((events) => {
        setData(events);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  let content;

  if (isLoading) {
    content = <LoadingIndicator />;
  }

  if (error) {
    content = (
      <ErrorBlock title="An error occurred" message="Failed to fetch events" />
    );
  }

  if (data) {
    content = (
      <ul className="events-list">
        {data.map((event) => (
          <li key={event.id}>
            <EventItem event={event} />
          </li>
        ))}
      </ul>
    );
  }

  return (
    <section className="content-section" id="new-events-section">
      <header>
        <h2>Recently added events</h2>
      </header>
      {content}
    </section>
  );
}

useEffect 내에서 fetch 돌리고, useState의 data에 담아주고, error 랑isLoading을 통해서 상태 표시 해주고~ 등
사실 나는 위 코드가 더 익숙하지만, 이 코드는 데이터를 가져올 때 매번 긴 코드를 작성해야 함. 물론 커스텀 훅으로 만들거나 할 경우 코드를 간소화하거나 재사용할 수 있음(뭐 예를들면 useHTTP)
그렇지만 아래와 같은 기능들의 부족함이 있는데,
1. 하지만 다른 탭으로 이동한 후 다시 웹사이트로 돌아왔을 때, refetch가 되지 않음(동작을 효율적 구현 위해서는 코드 추가 필요)
2. 캐시처리 - 가져온 데이터 캐시처리하고, 메모리 저장 후, 필요할 때 다시 사용

프로젝트 설치 및 셋팅

1. 설치

https://tanstack.com/query/latest/docs/framework/react/overview

Overview | TanStack Query React Docs

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation Mo

tanstack.com

위의 홈페이지에서 latest로 설치하면 편리

npm i @tanstack/react-query

참고로 5버전을 사용하고 있음.

App() 컴포넌트에 wrapping

react-query와 useQuery 훅을 사용하려면 해당 기능을 사용할 component를 tanstack-query가 제공하는 provider component로 감싸야 함.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />;
    </QueryClientProvider>
  );
}

TanStack Query의 주요 구성 요소

1. useQuery

데이터를 가져오고 캐시하여 자동으로 서버와 동기화하고 필요에 따라 백그라운드에서 업데이트. 수동 데이터 가져오기 논리의 필요성을 최소화하여 상태 관리를 더욱 간단하고 효율적으로 만듦.

2. useMutation

내장된 오류 처리 및 낙관적 업데이트를 통해 생성, 업데이트 또는 삭제 작업을 수행하여 데이터 수정을 관리. useMutation 사용하면 비동기 작업 중에 UI의 응답성과 일관성이 유지 가능.

2. QueryClient

쿼리 및 변형의 구성 및 관리를 중앙 집중화하여 쿼리 캐시를 조작하고 검사하는 방법을 제공. 캐싱 정책, 쿼리 무효화 및 백그라운드 다시 가져오기에 대한 전역 제어를 용이하게 가능.

다음 게시물에서는 기본적인 tanstack-query
사용법에 대해 다뤄보겠다(useQuery, isPending, isError, error 등)

[TypeScript] class type

haileyham — Thu, 20 Jun 2024 17:47:35 +0900

들어가기 전에!

이번 시간에는 class 타입에 대해 다뤄보도록 하겠당!_! 당연한 말이지만 class도 타입이 존재한다. 혹여 class에 대해서 개념히 잘 생각 안난다면 object 객체를 복제하는 어떠한 것이라고 생각하면 된다. 그럼 class type도 꼬우꼬우!

손흥민 아버지 손웅정 씨('MBC스포츠탐험대' 유튜브 화면 캡쳐)

class type

1. class field 클래스 필드값

class에 object들이 사용할 수 있는 것들을 만들 수 있는데, 아래처럼 타입을 지정할 수 있음.

class의 필드 타입을 지정할 수도 있고, 지정하지 않아도 자동으로 타입이 지정됨.

일반 변수처럼 타입 지정해주면 됨

class Person2{
    data = 0; // class 필드값(constructor와 똑같은 역할) / 자식들한테서 출력가능 (사람1.data 출력 가능)
    data1: number = 0; // class 필드 타입지정 가능(위에처럼 안해도 number로 자동 타입지정되기도 함)
}

let 사람1 = new Person2();
console.log(사람1.data)

2. class constructor type

class는 object를 복제하는 어떠한 것이라고 했는데, ES6부터는 constructor 함수를 사용하면 됨.

다음 코드에서 type error가 발생하는데, 이는 this를 사용하기 이전에 field 값을 미리 설정해야하기 때문.

class Person3{
    constructor() {
        // this.name = "ham"; //그냥 this.name하면 name의 property값 없다고 나옴
    }
}

field 값 지정은 다음과 같이 1번에서 했던 것처럼 변수 설정하듯 미리 설정해두면 됨.

이렇게 constructor 안에서 사용하는 this 값을 사용하려면 field 값에 미리 지정을 해놔야 함!_!

class Person4{
    name: string; //필드값에 미리 지정해놔야 밑에서 this.name 사용가능
    constructor() {
        this.name = "ham" // constructor 위에서 미리 name 필드값 정했기에, this.name 사용 가능
    }
}

이제 this.name 사용 가넝!!!

파라미터는?

참고로 이제 constructor 파라미터도 타입 지정이 가능한데, 아래 코드를 살펴보면 파라미터를 지정할 때 원래처럼 하면 됨. return 타입을 지정할 필요는 없음. 아니 안됨. 왜냐하면 constructor에 복제되는 것이 항상 object 이기 때문.

// constructor 파라미터 타입지정 가능
class Person5{
    name: string;
    constructor(a : string) { //파라미터 타입지정 / return 타입도 지정? => 복제되는게 항상 object이기에 return 타입 지정할 이유는 없음
        this.name = a;
    }
}

let 사람2 = new Person5("ham");
let 사람3 = new Person5("hailey");
console.log(사람2.name);
console.log(사람3.name);

// 당연히 함수 관련 파라미터 모두 가능
// rest parameter, default parameter 등 가능

3. prototype 함수 어디에? methods type

class에는 prototype을 추가할 수 있음. prototype은 class 내부에 함수를 입력할 수 있는건데, 함수명 () {} 이렇게 사용할 수 있음.

아래 코드로 살펴보면, person6라는 class에 함수(){}라는 prototype을 추가했음. 사람4라는 변수가 person6 class를 만들고, 그 사람4(person6의 자식 개념)은 함수를 호출 가능함(메소드를 상속받을 수 있기 때문에 person6의 프로토타입에 정의된 함수를 호출 가능한 것)

참고로 프로토 타입의 함수는 함수의 타입 지정과 같이 파라미터와 return 타입 지정이 가능함.

class Person6{
    name: string;
    constructor(a:string) {
        this.name = a;
    }

    함수(a: string) { // 프로토타입 함수 추가 이곳에 / 프로토타입 파라미터 타입 지정 가능 / 모든 자식들은 사용 가능
        // 함수랑 똑같이 파라미터 & retrun 타입 지정 가능
        console.log("안녕~! " + a);
        return "a"
    }
}

// Person6.prototype.함수다 = function(){} //여기에 하는 것이 아니라 위에 constructor 밑에다가 추가하면 됨

let 사람4 = new Person6("toto");
사람4.함수("반가워 토토"); // 사람4에서 Person6의 프로토타입 출력 가능

4. Quiz 1

[Car 클래스를 만들기]
1. { model : '소나타', price : 3000 } 이렇게 생긴 object를 복사해주는 class를 만들어보십시오.
2. 그리고 복사된 object 자료들은 .tax() 라는 함수를 사용가능한데 현재 object에 저장된 price의 10분의1을 출력. 
3. model과 price 속성의 타입지정. tax() 함수의 return 타입. 

(동작 예시)
```
let car1 = new Car('소나타', 3000)
console.log(car1) //콘솔창 출력결과는 { model : '소나타', price : 3000 }
console.log(car1.tax()) //콘솔창 출력결과는 300
```

아래는 풀이

class Car{
    model: string;
    price: number;
    constructor(model:string, price:number) {
        this.model = model;
        this.price = price;
    }

    tax1():number {
        return this.price * 0.1
    }

    tax2(price: number):number {
        const tax = price * 0.1 
        return tax;
    }
}

let car1 = new Car('소나타', 3000) // car1은 Car 클래스의 인스턴스
console.log(car1); // Car {model: '소나타', price: 3000}
console.log(car1.tax1()); //tax 자동
console.log(car1.tax2(3000)); //tax를 직접 숫자입력해서 할 때

5. Quiz 2

[class인데 파라미터가 들어가는 class Word를 만들기]
1. object 만들 때 new Word() 소괄호 안에 숫자 혹은 문자를 입력하면 
2. 숫자는 전부 object 안의  num 속성 안에 array 형태로 저장되고 
3. 문자는 전부 object 안의 str 속성 안에 array 형태로 저장되는 class를 만들기
4. class 만들 때 넣을 수 있는 숫자와 문자 갯수는 일단 제한은 없고, 타입 지정


(동작 예시)
```
let obj = new Word('kim', 3, 5, 'park');
console.log(obj.num) //[3,5]
console.log(obj.str) //['kim', 'park']
```

아래는 풀이

class Word{
    num: number[];
    str: string[];
    constructor(...a: (number | string)[]) {
        this.str = [];
        this.num = [];

        a.forEach((i) => {
            if (typeof i === 'string') {
                this.str.push(i);
            } else if (typeof i === 'number') {
                this.num.push(i);
            }
        })
    }
}

let obj = new Word('ham', 3, 5, 'hailey');
console.log(obj.str);
console.log(obj.num);

아래처럼도 가능

//이렇게도 가능
class Word{
    num: number[];
    str: string[];
    constructor(...a: (number | string)[]) {
        let 글자 : string[] = [];
        let 숫자 : number[] = [];

        a.forEach((i) => {
            if (typeof i === 'string') {
                글자.push(i)
            } else{
                숫자.push(i)
            }
        })
        this.str = 글자;
        this.num = 숫자;
    }
}

6. 참고 : Rest Parameter

파라미터 여러개를 받고 싶을 때, rest parameter를 사용하면 됨. 객체 값으로 들어옴.

class Word1{
    constructor(...a) { // 그냥 a로 받으면 파라미터 한개만 받음('ham')
        //Rest 파라미터(Rest Parameter, 나머지 매개변수) : 매개변수 이름 앞에 세개의 ...을 붙여서 정의한 매개변수. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받음
        //(4) ['ham', 3, 5, 'hailey'] 이렇게 됨
        console.log(a)
    }
}

let obj1 = new Word1('ham', 3, 5, 'hailey');

이렇게 보니 class type도 별 것 없다는 것을 알 수 있음.
중요한건 역시 순정...돌고 돌아 결국 JS가 중요해!