최  호민

최 호민

1608648966

백엔드 개발자는 꼭 배워보세요

Ruby 는 Ruby on Rails 가 있고,
Python 에는 Django 가 있고,
Java 에는 Spring 이 있다면…
Node.JS 에는? Nest.JS 가 있습니다!! 뽬!

#ruby #python #java #node #nest

What is GEEK

Buddha Community

백엔드 개발자는 꼭 배워보세요
최  호민

최 호민

1608648966

백엔드 개발자는 꼭 배워보세요

Ruby 는 Ruby on Rails 가 있고,
Python 에는 Django 가 있고,
Java 에는 Spring 이 있다면…
Node.JS 에는? Nest.JS 가 있습니다!! 뽬!

#ruby #python #java #node #nest

최  호민

최 호민

1652288040

꼭 알아야 할 JavaScript 배열 메서드 10가지

필터 forEach, some, every, included, map, reduce, sort, find, findIndex가 무엇이며 어떻게 사용할 수 있는지 알아보겠습니다.

목차

  • 1. 필터()
  • 2. forEach()
  • 3. 일부()
  • 4. 모든()
  • 5. 포함()
  • 6. 지도()
  • 7. 줄이기()
  • 8. 정렬()
  • 9. 찾기()
  • 10. 인덱스 찾기()

 

1. 필터()

filter값을 필터링하고 싶을 때마다 사용 하는 방법 입니다 . 양수 값만 원하십니까? 특정 속성을 가진 개체만 찾고 계십니까? filter당신이 가야 할 길입니다.

다음은 filter메서드의 서명입니다.

filter(function (element, index, array) {
  // element is the element within the array
  // index is the index of the element in the array
  // array is a reference to the array filter works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

온라인 상점이 있다고 상상해보십시오. 이제 특정 지역에 거주하는 모든 고객에게 할인 코드를 보내려고 합니다.

const getElibigleCustomers(customers, zipCode) {
  return customers.filter(
    (customer) => customer.address.zipCode === zipCode
  );
}

getElibigleCustomers찾고 있는 것과 동일한 우편번호로 주소가 저장된 모든 고객을 반환합니다. 다른 모든 고객은 어레이에서 필터링됩니다.

필터 재구현

더 잘 이해하고 싶다면 filter다시 구현해 봅시다.

function filter(callbackFn) {
  const newArray = [];

  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i], i, this)) {
      newArray.push(this[i]);
    }
  }

  return newArray;
}

Array.prototype.filter = filter;

주의: 내장 유형의 프로토타입 메서드를 직접 교체해서는 안 된다는 점을 명심하십시오. 그러나 이것은 가능한 구현이 어떻게 보이는지 보여주기 위한 것입니다.

보시다시피 filter는 각 요소에 대해 콜백 함수를 실행하는 루프에 불과합니다. 콜백 함수가 false를 반환하는 모든 요소는 필터링됩니다.


2. forEach()

forEach배열 요소를 반복하고 각 요소에 대해 일부 논리를 실행하는 기능적 방법입니다. 메서드 자체는 새 배열을 반환하지 않습니다.

다음은 forEach메서드의 서명입니다.

forEach(function (element, index, array) {
  // element is the element within the array
  // index is the index of the element in the array
  // array is a reference to the array forEach works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

온라인 상점의 예를 계속 들어 보겠습니다. 이제 이전에 필터링한 고객의 모든 이름을 인쇄하려고 합니다.

getElibigleCustomers(customers, '123456')
  .forEach(
    (customer) => console.log(`${customer.forename} ${customer.surname}`)
  );

forEach가 실행되면 콘솔은 이전에 필터링된 모든 고객의 전체 이름을 인쇄합니다.

forEach 재구현

forEach작동 방식을 더 잘 이해할 수 있도록 다시 구현해 보겠습니다 .

function forEach(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    callbackFn(this[i], i, this);
  }
}

Array.prototype.forEach = forEach;

다시 한 번, 자신이 하고 있는 일을 정말로 알고 있는 경우를 제외하고는 실제 앱에서 내장 유형의 프로토타입 메소드를 대체해서는 안 된다는 점을 명심하십시오.

당신은 아마 지금쯤 패턴을 알아차리기 시작할 것입니다. forEach다시 한 번, 루프에 지나지 않습니다. 그리고 이 루프 내에서 콜백 함수가 호출됩니다. 결과는 흥미롭지 않으므로 폐기됩니다.


3. 일부()

some특별한 배열 방법입니다. 배열 내의 하나 이상의 요소가 특정 조건에 대해 양성으로 테스트되는지 여부를 테스트합니다. 그렇다면 sometrue를 반환하고, 그렇지 않으면 false를 반환합니다.

다음은 some메서드의 서명입니다.

some(function (element, index, array) {
  // element is the element within the array
  // index is the index of the element in the array
  // array is a reference to the array some works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

온라인 상점의 예로 돌아가십시오. 이제 필터링한 고객 중 일부가 미성년자인지 테스트하려고 한다고 상상해 보십시오. 그렇다면 다른 모든 사람들이 알코올 음료에 대해 할인을 받기 때문에 다른 거래를 보여주고 싶습니다. 그러나 물론 미성년자의 음주를 지원하고 싶지는 않습니다.

const eligibleCustomers = getElibigleCustomers(customers, '123456')

const containsUnderAgedCustomers = eligibleCustomers.some(
  (customer) => customer.age < 18
);

some실행 시 각 고객의 연령 속성을 확인합니다 . 적어도 하나가 18 미만이면 false를 반환합니다.

일부 재구현

다시 구현할 시간 some입니다.

function some(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i], i, this)) {
      return true;
    }
  }
  return false;
}

Array.prototype.some = some;

some콜백 함수가 true를 반환하는 요소를 찾을 때까지 배열의 모든 요소를 ​​반복합니다. 이 경우 메서드는 일부 요소가 조건을 충족하기 위해 이미 충분하기 때문에 일찍 반환됩니다. 일치하는 요소가 없는 경우에만 false가 반환됩니다.


4. 모든()

every의 상대편입니다 some. 모든 요소가 조건을 만족하는지 테스트합니다. 그래야만 메서드가 true를 반환합니다. 하나의 요소만 테스트에 실패하면 false가 반환됩니다.

다음은 every메서드의 서명입니다.

every(function (element, index, array) {
  // element is the element within the array
  // index is the index of the element in the array
  // array is a reference to the array every works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

할인 코드를 받은 많은 고객이 지금까지 주문했습니다. 배송비를 아끼기 위해 일괄 발송을 원합니다. 그러나 먼저 모든 고객에게 유효한 주소 데이터가 저장되어 있는지 확인해야 합니다.

const customersWhoOrdered = getCustomersForOrder('discount1234');

const allCustomersHaveValidShipmentData = customersWhoOrdered
  .every(
    (customer) => hasValidShipmentData(customer)
  );

실행 되면 every해당 고객에게 유효한 배송 데이터가 저장되어 있는지 확인하는 기능으로 각 고객을 전달합니다. 한 명의 고객에게만 유효하지 않은 데이터가 있는 경우 전체 함수가 false를 반환합니다.

매번 재구현

다시 구현할 시간 every입니다.

function every(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (!callbackFn(this[i], i, this)) {
      return false;
    }
  }
  return true;
}

Array.prototype.every = every;

every콜백 함수가 false를 반환하는 요소를 찾을 때까지 배열의 모든 요소를 ​​반복합니다. 이 경우 모든 요소가 조건을 만족하는 것은 아니므로 메서드가 일찍 반환 됩니다. 하나면 이미 충분합니다. 일치하는 요소가 없는 경우에만 true가 반환됩니다.

every와 크게 다르지 않다는 것을 눈치채셨을 수도 있습니다 some. 특정 지점에서 true가 false로 바뀌고 콜백 함수를 사용한 검사가 무효화됩니다. 이러한 작은 변경만으로도 메서드가 원하는 대로 정확하게 수행할 수 있습니다.


5. 포함()

includes배열에 특정 요소가 포함되어 있는지 확인하는 방법입니다. 빠른 확인을 위해서는 좋지만 단점도 있습니다. 이에 대해서는 잠시 후에 설명하겠습니다.

다음은 includes메서드의 서명입니다.

includes(function (searchElement, fromIndex) {
  // searchElement is the element you look for
  // fromIndex is the index the search should start at
});

사용 사례 예시

includes특별하다. 이것은 실제로 엄격한 동등성을 테스트합니다. 즉, 검색 요소와 완전히 동일한 값을 검색하거나 개체의 정확한 참조를 찾습니다.

다음과 같이 고객 주문에 매우 구체적인 주문이 포함되어 있는지 확인하려는 경우를 가정해 보겠습니다.

const allOrders = getAllOrders();

const containsSpecificOrder = allOrders.includes({
  customer: 'John Doe'
  zipCode: '54321'
});

배열에 정확히 같은 속성을 가진 객체가 포함되어 있더라도 include가 false를 반환한다는 사실을 알게 되면 아마 놀랄 것입니다. 이것은 엄격한 동등성을 찾고 객체가 동일한 참조인 경우에만 엄격하게 동일하기 때문입니다. JavaScript는 equals 메소드를 모릅니다.

이것은 includes' 사용 사례를 기본 값으로 줄입니다. 예를 들어 숫자 배열에 다음과 같은 특정 숫자가 포함되어 있는지 확인하려는 경우:

const numbers = [1, 2, 3, 4, 5];

const includesFive = numbers.includes(5);

경험 법칙이 있습니다. 기본 값의 배열을 처리하는 경우 includes. 객체를 다루는 경우 객체 some가 동일한지 테스트할 수 있는 콜백을 전달할 수 있으므로 사용하십시오.

재구현에는 다음이 포함됩니다.

다시 구현할 시간 includes입니다.

function includes(searchElement, fromIndex = 0) {
  if (fromIndex > this.length || fromIndex < 0) {
    return false;
  }

  for (let i = fromIndex; i < this.length; i++) {
    if (this[i] === searchElement) {
      return true;
    }
  }

  return false;
}

Array.prototype.includes = includes;

시작 부분의 가드 문은 메서드 실행을 조금 더 안전하게 만들기 위한 것입니다. 음수 fromIndex와 배열의 최대 인덱스보다 큰 인덱스는 의미가 없습니다. 나머지는 검색된 요소와 완전히 동일한지 각 요소를 테스트하는 루프일 뿐입니다.


6. 지도()

map가장 중요한 배열 방법 중 하나입니다. 배열 내의 모든 값을 변환하고 싶을 때마다 map가는 방법 입니다.

다음은 map메서드의 서명입니다.

map(function (element, index, array) {
  // element is the element within the array
  // index is the index of the element in the array
  // array is a reference to the array map works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

적격한 고객을 모두 필터링한 시점으로 다시 이동해 보겠습니다. 이제 주문을 보내려고 하고 모든 주소를 가져와야 합니다. 이것은 지도의 훌륭한 사용 사례입니다.

const eligibleCustomers = getElibigleCustomers(customers, '123456');

const addresses = eligibleCustomers
  .map((customer) => customer.address);

map모든 고객에 대해 반복한 다음 모든 주소를 추출합니다. 이것들은 새 배열에 넣고 함수에서 반환됩니다.

맵 재구현

다시 구현할 시간 map입니다.

function map(callbackFn) {
  const newArray = [];
  for (let i = 0; i < this.length; i++) {
    const mappedValue = callbackFn(this[i], i, this);
    newArray.push(mappedValue);
  }
  return newArray;
}

Array.prototype.map = map;

map배열의 모든 요소를 ​​반복합니다. 각 요소에 대해 콜백 함수를 호출하고 새 값이 반환될 것으로 예상합니다. 이 값은 새 배열로 푸시됩니다. 그 배열이 완전히 반환되어 원래 배열과 크기는 같지만 요소가 다를 수 있습니다.


7. 줄이기()

reduce현존하는 가장 강력한 배열 방법입니다. 기존의 모든 배열 방법을 다시 구현하는 데 사용할 수 있으며 가장 유연한 방법입니다. 그것이 제공하는 모든 장점에 대해 이야기하려면 분명히 기사 자체가 필요하지만 곧 그것을 엿볼 수 있습니다.

다음은 reduce메서드의 서명입니다.

reduce(function (accumulator, currentValue, currentIndex, array) {
  // accumulator is the result of the last call, or the initialValue in the beginning
  // currentValue is the value currently processed
  // currentIndex is the index of the current value within the array
  // array is a reference to the array reduce works on
}, initialValue);

사용 사례 예시

미성년자 고객이 있는지 확인하고 싶었을 때를 기억하십니까? 이 문제를 처리하는 또 다른 방법은 모든 적격 고객을 두 그룹으로 그룹화하는 것입니다. 법정 연령인 사람과 미성년자입니다.

const eligibleCustomers = getElibigleCustomers(customers, '123456');

const customerGroups = eligibleCustomers
  .reduce((accumulator, customer) => {
    if (customer.age > 18) {
      accumulator[0].push(customer);
    } else {
      accumulator[1].push(customer);
    }
    return accumulator;
  }, [[], []]);

reduce이해하기가 꽤 어려울 수 있지만 위의 코드를 함께 살펴보고 그것이 하는 일을 볼 수 있습니다. 이 경우 누산기는 2차원 배열입니다. 인덱스 0에는 18세 이상의 모든 고객이 포함됩니다. 색인 1에는 미성년자인 모든 고객이 포함됩니다. 처음 실행을 줄이면 accumulator를 빈 2차원 배열로 설정합니다. 메서드 내에서 코드는 고객의 age 속성이 18세 이상인지 확인합니다. 그렇다면 고객을 첫 번째 배열로 푸시합니다. 고객이 미성년자인 경우 두 번째 어레이로 푸시됩니다. 결국, 그룹화된 고객이 있는 2차원 배열이 반환됩니다.

감소 재구현

다시 구현할 시간 reduce입니다.

function reduce(callbackFn, initialValue) {
  let accumulator = initialValue ?? this[0];
  for (let i = 0; i < this.length; i++) {
    accumulator = callbackFn(accumulator, this[i], i, this);
  }
  return accumulator;
}

Array.prototype.reduce = reduce;

reduce다른 모든 배열 메서드와 마찬가지로 모든 요소를 ​​반복합니다. 처음에 메서드는 initialValue가 제공되었는지 여부를 결정해야 합니다. 그렇지 않은 경우 배열의 첫 번째 요소가 그대로 사용됩니다. 그 후 accumulator는 매번 콜백을 호출한 결과로 대체되고 결국 최종 형태로 반환됩니다.


8. 정렬()

의 이름이 sort이미 모든 것을 말해줍니다. 배열을 정렬할 때마다 호출해야 하는 메서드입니다.

다음은 sort메서드의 서명입니다.

sort(function (firstElement, secondElement) {
  // firstElement is the first element to compare
  // secondElement is the second element to compare
});

사용 사례 예시

무언가를 정렬해야 할 때마다 에 대한 사용 사례를 찾았습니다 sort. 예를 들어 고객을 연령별로 정렬해 보겠습니다. 이러한 경우 적절하게 주문하는 방법을 sort알려주는 데 사용할 수 있는 비교기 기능을 전달할 수 있습니다 .sort

const customers = getCustomers();

customers.sort((a, b) => customer.a - customer.b);

콜백 함수는 요소의 순서에 따라 숫자를 반환해야 합니다. b 앞에 오면 값 < 0, 둘 다 같으면 0, b 뒤에 a가 오면 값 > 0을 반환해야 합니다.

정렬 재구현

다시 구현 sort하는 것은 약간 어렵습니다. 왜냐하면 후드 아래에서 런타임이 적절해 보이는 정렬 알고리즘을 구현할 수 있기 때문입니다. 알고리즘이 안정적이어야 하는 것과 같은 몇 가지 요구 사항만 있습니다. 일반적으로 런타임은 최소한 QuickSort를 구현하고 때로는 배열 내의 요소를 기반으로 구현을 변경합니다.

function partition(array, left, right, compareFunction) {
  let pivot = array[Math.floor((right + left) / 2)];
  let i = left;
  let j = right;
    while (i <= j) {
        while (compareFunction(array[i], pivot) < 0) {
            i++;
        }
        while (compareFunction(array[j], pivot) > 0) {
            j--;
        }
        if (i <= j) {
            [array[i], array[j]] = [array[j], array[i]]
            i++;
            j--;
        }
    }
    return i;
}

function quickSort(array, left, right, compareFunction) {
  let index;
  if (array.length > 1) {
      index = partition(array, left, right, compareFunction);
      if (left < index - 1) {
          quickSort(array, left, index - 1, compareFunction);
      }
      if (index < right) {
          quickSort(array, index, right, compareFunction);
      }
  }
  return array;
}

function sort(compareFunction) {
  return quickSort(this, 0, this.length - 1, compareFunction);
}

Array.prototype.sort = sort;

이것은 정렬의 예시적인 구현일 뿐입니다. 이 경우에는 QuickSort입니다. 그러나 일반적인 아이디어를 제공해야 합니다.


9. 찾기()

find검색 기능입니다. 배열 내에서 무언가를 찾을 때마다 를 사용 find하여 조건을 충족하는 배열에서 첫 번째 요소를 검색할 수 있습니다.

다음은 find메서드의 서명입니다.

find(function (element, index, array) {
  // element is the current element
  // index is the current index
  // array is a reference to the array find works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

모든 고객 중에서 특정 이름을 가진 고객을 찾으려고 한다고 상상해 보십시오.

const customers = getCustomers();

const customerJohn = customers.find(
  (customer) => customer.forename === 'John'
);

이 경우 find배열 내에서 이름이 John인 첫 번째 사용자를 반환합니다. 중요한 부분은 find해당 이름을 가진 모든 고객을 반환하지 않는다는 것입니다.

찾기 다시 구현

다시 구현할 시간 find입니다.

function find(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i], i, this)) {
      return this[i];
    }
  }
  return undefined;
}

Array.prototype.find = find;

find다른 모든 배열 메서드와 마찬가지로 모든 요소를 ​​반복합니다. 모든 요소에 대해 콜백 함수가 true를 반환하는지 확인합니다. 그렇다면 해당 위치의 요소를 반환합니다. 일찍 반환하지 않으면 마지막에 undefined를 반환합니다.


10. 인덱스 찾기()

findIndex배열 내 요소의 인덱스를 가져오는 데 사용할 수 있는 방법입니다. 와 같이 find조건을 만족하는 첫 번째 요소에서 멈춥니다. 따라서 테스트를 충족하는 첫 번째 요소의 인덱스만 반환합니다.

다음은 findIndex메서드의 서명입니다.

findIndex(function (element, index, array) {
  // element is the current element
  // index is the current index
  // array is a reference to the array find works on
}, thisOverride);
// thisOverride is a way to override the semantical this within the callback function.
// If you set it to another object, calling this.anyThing would access anyThing within that
// object, and not the actual array.

사용 사례 예시

모든 고객이 연령별로 정렬되어 있고 이제 이름이 John인 첫 번째 고객을 찾고 있다고 상상해 보십시오.

const customers = getCustomers();
const customersSortedByAge = sortByAge(customers);

const indexOfJohn customersSortedByAge.findIndex((customer) => customer.forename === 'John');
const customerJohn = customersSortedByAge[indexOfJohn];

이 경우 findIndex배열 내에서 이름이 John인 첫 번째 사용자의 인덱스를 반환합니다. 중요한 부분은 findIndex해당 이름을 가진 고객의 모든 인덱스를 반환하지 않는다는 것입니다.

findIndex 재구현

다시 구현할 시간 findIndex입니다.

function findIndex(callbackFn) {
  for (let i = 0; i < this.length; i++) {
    if (callbackFn(this[i], i, this)) {
      return i;
    }
  }
  return -1;
}

Array.prototype.findIndex = findIndex;

findIndex다른 모든 배열 메서드와 마찬가지로 모든 요소를 ​​반복합니다. 과의 유사성에 주목해야 합니다 find. 요소를 반환하는 대신 요소가 발견되면 인덱스만 반환됩니다. 정의되지 않은 대신 아무 것도 발견되지 않으면 -1이 반환됩니다.

#javascript

안 용태

안 용태

1608518400

[웹개발] [React] React 개발자라면 꼭 알아야하는 SWR

React, swr, axios 를 사용해서 효율적인 ajax 요청 캐싱 및 optimistic response 를 구현하는 방법입니다.

구독과 좋아요는 영상 제작에 큰 힘이 됩니다!

[GitHub]
https://github.com/serendipity1004/cf-react-swr

[이메일 문의]
withj1123@gmail.com

#react #javascript #reactjs #web-development

안 용태

안 용태

1607568000

[앱개발] [Flutter] Flutter 개발자는 무조건 알아야 하는 GetX [#1-Navigation]

Flutter GetX 라이브러리에 대한 강의입니다. 이번 강의는 GetX의 Navigation 기능 및 Snackbar, Dialog, BottomSheet 에 대해 알아보았습니다.

[GitHub]
https://github.com/serendipity1004/Youtube-Flutter-Tutorials

#flutter #dart #mobile-apps #programming #developer

최  호민

최 호민

1646014967

NFT Hack Explained in 10min! 세계 최대 NFT 거래소 해킹! 꼭 알아야하는 이유는?

NFT Hack Explained in 10min! 세계 최대 NFT 거래소 해킹! 꼭 알아야하는 이유는?

뭐야 내 NFT 돌려줘요!
오픈씨 (OpenSea) 2,400억원 피해.... 근데 진짜 해킹 맞아?
 

#nft #blockchain