공부내용
피그마로 react에 띄우기
본인화면 width 적용해서 프레임만들고 max width min hieght 적용
plugin => anima, autohtml
프레임 자체도 꺼낼 수 있는데 요소 자체도 꺼낼수있음
자바스크립트 배열
자바스크립트 배열은 배열안의 각 값들에 개별적으로 접근할 수 있는 큰 장점이 있다. 만약 배열이 없다면 모든 원소를 별도의 변수에 저장해야 할 것이고, 각 원소에 대해 별도로 출력하고 더하는 코드를 불러야 할 것 배열의 각 원소는 index를 활용하여 접근이 가능하며 str[index] 이런 식으로 접근한다.
String.split() 메서드를 이용해 문자열을 배열로 만들어 사용이 가능하다!!
만약 배열을 문자열로 만들고싶다면 Array.join()을 사용해보자 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환합니다. 배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환됩니다.
const elements = ["Fire", "Air", "Water"];
console.log(elements.join());
// output: "Fire,Air,Water"
console.log(elements.join(""));
// output: "FireAirWater"
console.log(elements.join("-"));
// output: "Fire-Air-Water"배열 추가 및 삭제
push("s") : 맨뒤에 s 추가
pop() : 맨뒤 요소 삭제
shift() : 맨앞 요소 삭제
unshift("s") : 맨앞에 s 추가
얕은복사 깊은복사
얕은 복사는 배열의 요소가 객체일 경우, 객체의 참조를 복사합니다. 따라서 원본 배열이나 복사된 배열 중 하나를 변경하면, 다른 배열에도 영향을 미치게 됩니다.
깊은 복사는 배열의 모든 수준에서 실제 값을 복사하여, 원본 배열과 복사된 배열이 완전히 독립적으로 동작하도록 만듭니다.
Slice(),Spread 연산자 ,Array.from(), concat()
이 네가지 방법으 모두 얕은 복사에 해당한다.
JSON.parse()와 JSON.stringify()
이 두가지를 활용해 깊은 복사가 가능하다 아래는 예시이다
const originalArray = [1, 2, 3, 4];
const copiedArray = JSON.parse(JSON.stringify(originalArray));
copiedArray.push(5)
console.log(originalArray);//[1,2,3,4]
console.log(copiedArray);//[1,2,3,4,5]언제 얕은 복사를 사용하고 언제 깊은 복사를 사용 해야할까
얕은 복사는 단순한 데이터 구조와 성능이 중요한 경우 유용하며, 깊은 복사는 데이터 무결성이 중요한 복잡한 데이터 구조에 적합합니다.
Array 메서드 알아보기
Array.copyWithin(target,start,end) : 처음 알게된 메서드이다. copyWithin은 target을 꼭 가져야하며 target은 복사를 시작할 인덱스라고 생각하면 된다. start도 꼭 가져야 하며 start 인덱스부터 복사를 진행한다 end는 필수적이지 않으며 end가 있다면 end전까지 없다면 끝까지 복사를 하여 target 부터 복사를 시켜준다 말로는 어려우니 예제를 보겠다!!
console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
// [4, 5, 3, 4, 5] 0이 타겟 4,5를 복사시켜 1 과 2 를 4와 5 로 바꿈
console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));
// [4, 2, 3, 4, 5]
console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1));
// [1, 2, 3, 3, 4]
start부터 end전까지 혹은 start부터 끝까지 복사한 길이만큼 타깃부터 그 길이만큼 복사한 배열로 바꿔준다고 생각하면 될것같다!!!!
Array.every(callbackFn) : every() 메서드는 순회 메서드이며 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 거짓 값을 반환할 때까지 호출을 반복합니다. 거짓 요소가 발견되면 every()는 즉시 false를 반환하고 배열 순회를 중지합니다. 그렇지 않고 callbackFn이 모든 요소에 대해 참 값을 반환하면, every()는 true를 반환합니다.
const isSubset = (array1, array2) =>
array2.every((element) => array1.includes(element));
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // falseArray.filter(callbackFn) : filter() 메서드는 순회 메서드이며 filter()는 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 참 값을 반환하는 모든 값으로 새 배열을 구성합니다. 또한 배열을 얕은복사를 하여 새로운 배열로 만들어냅니다.
Array.fill(num,start,end) : 배열을 num으로 채워줍니다 num은 필수로 존재하여야 하며 start와 end는 옵션입니다. num만 정의한 경우 배열의 모든 길이만큼 num으로 채우고 start가있다면 start부터 채우고 end가있으면 start부터 end전까지만 채웁니다
findIndex() 와 indexOf()
findIndex()와 indexOf()는 둘 다 배열에서 특정 요소의 인덱스를 찾는 메서드이지만, 동작 방식과 사용해야 할 상황이 다릅니다.
findIndex는 indexOf와 다르게 객체 배열에서 특정 조건을 만족하는 요소를 찾을 때 사용이 가능하다. 물론 조건을 만족하는 첫번째 인덱스만 반환한다.
const products = [
{ name: "Laptop", price: 1000 },
{ name: "Phone", price: 500 },
{ name: "Tablet", price: 700 }
];
const expensiveProductIndex = products.findIndex(product => product.price > 600);
console.log(expensiveProductIndex); // 0 (첫 번째로 600 이상인 상품)indexOf는 객체 비교가 되지 않으며 배열을 순회하며 완전히 일치하는 값을 찾을 수 있다.
const numbers = [10, 20, 30, 40, 50];
console.log(numbers.indexOf(30)); // 2어느 상황에 어떤걸 써야할까??
- 배열 크기가 크다면 indexOf()가 더 빠를 수 있다.
- 객체 배열에서는 indexOf() 대신 무조건 findIndex() 사용
- 반복적으로 찾는다면 배열을 Map이나 Set으로 변환해서 빠르게 검색하는 것도 고려
단순한 값(숫자, 문자열)을 찾을 때는 indexOf()
객체를 포함한 배열에서 조건을 걸어 찾을 때는 findIndex()
Array.flat(num) : 배열을 평탄화 해준다 num을 쓰지 않으면 1이 기본값이 된다.
num의 숫자만큼 평탄화를 진행한다 또한 빈 슬롯은 제거를한다.아래는 예시이다
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]Array.forEach() : forEach() 메서드는 순회 메서드이며 배열의 각 요소에 대해 제공된 callbackFn 함수를 오름차순 인덱스 순서로 한 번씩 호출합니다. map()과 달리 forEach()는 항상 undefined를 반환하므로 체이닝할 수 없습니다.
forEach는 왜 map과 다르게 체이닝이 불가능한가?
위에서 말했듯이 forEach는 undefined를 반환한다. map은 새로운 배열을 반환하기 때문에 그 뒤에 이어서 체이닝이 가능함 체이닝의 예시
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2).filter(num => num > 5);
console.log(doubled); // [6, 8, 10]
또한 forEach는 예외를 발생시키는 것 외에는 루프를 중지 및 중단할 수 없습니다.
for, for...of, for...in과 같은 반복문을 사용하여 조기 종료를 수행할 수 있습니다. every(), some(), find(), findIndex()와 같은 배열 메서드도 추가 순회가 필요하지 않은 경우 즉시 순회를 중지할 수있습니다.
또한 forEach()는 await를 기다려주지 않음 forEach() 내부에서 await을 사용해도 비동기 작업이 기다려지지 않고 그냥 다음 루프로 넘어간다. 비동기에서는 for...of를 사용해보자!!
Array.map(callbackFn) : map() 메서드는 순회 메서드이며 주어진 callbackFn 함수를 배열의 각각의 요소 당 한번 씩 호출하여 그 결과로 새로운 배열을 생성합니다.
map을 활용해 2차원 배열 회전 (90도 회전)
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
const rotated = matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]).reverse());
console.log(rotated);
/*
출력 (90도 회전):
[
[7, 4, 1],
[8, 5, 2],
[9, 6, 3]
]
*/
코드설명
배열의 첫 행의 길이 만큼 반복하며 index에 맞게 가져옴 그렇게 되면
[1,4,7][2,5,6],[3,6,9] 라는 배열이 생김 근데 이렇게 되면 열과 행만 바뀐 배열이 된다 우리는 90도 회전을 원하기 때문에 받아온 배열을 reverse()로 뒤집어준 후 반환하면 [7,4,1][6,5,2] [9,6,3] 배열이 완성이된다.
Array.reduce() : reduce()는 배열을 순회하면서 누적 값(acc)을 계속 변경하고, 마지막에 누적된 값을 반환하는 메서드이다.
arr.reduce((누적값, 현재값) => { return 새로운 누적값 }, 초기값);누적값 (acc): 이전 반복에서 반환된 값
현재값 (cur): 현재 요소
초기값: reduce()의 첫 번째 인자로 설정 (없으면 첫 번째 요소 사용)
reduce를 보통 배열의 합을 구할때만 사용했는데 이번 기회에 reduce를 사용하는 예시 및 사용 방법을 알아보자
reduce() 사용 예제
배열 요소 개수 세기 (빈도수 계산)
const words = ["apple", "banana", "apple", "orange", "banana", "banana"];
const wordCount = words.reduce((acc, cur) => {
acc[cur] = (acc[cur] || 0) + 1;
return acc;
}, {});위 코드에서는 words 배열을 순회하며 누적 객체를 업데이트 시켜주는 코드이다.
코딩테스트 문제에서 빈도수 계산 즉 배열에 어떠한 문자열이 몇번 나오는지 나오게 되면 reduce를 사용하면 된다!!
return acc가 하는 역할
reduce()에서 반환된 acc는 다음 반복에서도 계속 사용되기 때문에
return acc를 하지 않으면 누적 객체가 계속 사라지고 초기화된다 항상 return해야 이전까지 누적한 데이터를 유지할 수 있음
reduce 활용해 객체로 변환하기
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" }
];
const userMap = users.reduce((acc, user) => {
acc[user.id] = user;
return acc;
}, {});
console.log(userMap);
/*
{
1: { id: 1, name: "Alice" },
2: { id: 2, name: "Bob" },
3: { id: 3, name: "Charlie" }
}
*/
그룹화 하기 (배열을 특정 키 기준으로 그룹화)
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 25 },
{ name: "David", age: 30 }
];
const groupedByAge = people.reduce((acc, cur) => {
acc[cur.age] = acc[cur.age] || [];
acc[cur.age].push(cur);
return acc;
}, {});
console.log(groupedByAge);
/*
{
25: [
{ name: "Alice", age: 25 },
{ name: "Charlie", age: 25 }
],
30: [
{ name: "Bob", age: 30 },
{ name: "David", age: 30 }
]
}
*/
Array.some() : some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 체크하는 메서드이다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
Array.sort() : sort는 파라미터가 없으면 유니코드 순서에 따라서 오름차순으로 정렬된다.숫자를 정렬할 때는 콜백함수로 return값을 주어야 원하는 결과를 얻을 수 있다.
const arr = [2, 1, 3, 10];
// 유니코드 정렬
arr.sort(); // [1, 10, 2, 3]
// 오름차순 정렬
arr.sort((a, b) => a-b) // [1, 2, 3, 10]
// 내림차순 정렬
arr.sort((a,b) => b-a) // [10, 3, 2, 1]2차원배열 정렬하기
두수의 합으로 비교하기
const arr = [[6, 6], [2, 2], [4, 3], [4, 5], [10, 3]];
// 오름차순
arr.sort((a, b) => a[0] + a[1] - (b[0] + b[1]));
console.log(arr);
// [[ 2, 2 ], [ 4, 3 ], [ 4, 5 ], [ 6, 6 ], [ 10, 3 ]]
// 내림차순
arr.sort((a, b) => b[0] + b[1] - (a[0] + a[1]));
console.log(arr);
// [[ 10, 3 ], [ 6, 6 ], [ 4, 5 ], [ 4, 3 ], [ 2, 2 ]]
arr[0]이 같을 경우 arr[1] 기준으로 오름차순 정렬
arr.sort((a, b) => {
if (a[0] === b[0]) {
return a[1] - b[1];
} else {
return a[0] - b[0];
};
});
console.log(arr)
// [[ 2, 2 ], [ 4, 3 ], [ 4, 5 ], [ 6, 6 ], [ 10, 3 ]]2차원 배열 문자로 정렬하기
let str = [["ICN", "SFO"], ["ICN", "ATL"], ["SFO", "ATL"], ["ATL", "ICN"], ["ATL","SFO"]];
let strSort = str.sort((a, b) => {
if (a[0] === b[0]) {
return a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0;
} else {
return -1;
};
}); Array.splice(start,count,...arr) : splice는 배열의 요소를 삭제하고 변경 및 추가하는 메서드이다. start는 필수적이며 start 인덱스부터 count만큼 삭제한다. count가 없다면 뒤에 요소는 전부 삭제된다.추가적으로 arr을 매개변수로 넣는다면 삭제된 위치에 arr을 추가하게된다.
var myFish = ["angel", "clown", "trumpet", "sturgeon"];
var removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]