[TIL] 데일리 학습 - 221031

David Oh·2022년 11월 4일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

TIL

목록 보기

4/6

React

리액트를 사용하는 이유
- 반응성
- 데이터만 바꾸면 화면이 알아서 바뀜
  - 생산성이 좋음
  - 대신 메모리는 많이 잡아먹긴 함

Array

.length

배열의 길이를 반환

배열이 지니고 있는 아이템의 갯수를 반환

.at()

대상 배열을 인덱싱합니다.

대괄호를 이용하는 것과 같은 역할을 하지만, 더욱 직관적으로 이용가능

마이너스 숫자로 이용가능

console.log(arr[0])
console.log(arr.at(0))

.concat()

2개의 배열을 병합하여 새로운 배열을 반환합니다.

원본 배열에는 영향을 끼치지 않음

const arr1 = [1,2,3]
const arr2 = [4,5,6]

const arr3 = arr1.concat(arr2) // [1,2,3,4,5,6]
//const arr3 = [...arr1, ...arr2] (전개 연산자)

.every()

대상 배열이 가지고 있는 모든 아이템이 콜백 테스트를 통과(Truthy를 반환)하는지 확인합니다.

const arr = [1,2,3,4]
const isValid = arr.every(item => item < 5)

console.log(isValid) // true

.filter()

대상 배열에서 콜백 테스트를 통과하는 요소만으로 새로운 배열을 만들어 반환

모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환

원본 배열보다 같거나 더 적은 아이템을 지닌 배열을 반환

const num = [1,2,6,7,8,9]
const filterNum = num.filter(number => number < 50)

console.log(filterNum) // [1,2]

.find

대상 배열에서 콜백 테스트를 통과하는 첫번째 아이템 반환

테스트가 통과하면, 이후 콜백은 실행하지 않음

모든 테스트가 실패하면, undefined 반환

const arr = [1,2,3,4,5]
const foundItem = arr.find(item => item > 3)

console.log(foundItem) // 4

// 해당 예제에서는 총 4번의 콜백만 실행함
// 4를 찾은 다음에는 콜백 실행하지 않음

.findIndex()

대상 배열에서 콜백 테스트를 통과하는 첫번째 요소의 인덱스를 반환

최초로 테스트가 통과되면 이후 콜백은 실행되지 않음

모든 테스트가 실패하면 -1을 반환

const arr = [1,2,3,4,5]

const index = arr.findIndex(item => item > 3)

console.log(index) // 3

.flat()

2차원 배열을 1차원 배열로 변환시킴

.forEach(콜백)

단순한 반복문

인수로 콜백함수를 받음

중간에 반복을 멈출 수 없음

.includes()

대상 배열이 특정 요소를 포함하고 있는지 확인

const arr = [1,2,3]

console.log(arr.includes(2)) //true

참조형 방식의 리터럴 데이터의 경우, 생성 위치가 다르기 때문에 같은 모양을 지니더라도 다른 데이터일 수 있음

.join(구분자)

대상 배열의 모든 요소를 구분자로 연결한 문자를 반환

.map(콜백)

원본 배열의 갯수만큼 콜백을 수행하여 해당 갯수와 같은 새로운 배열을 만든다.

const num = [1,2,3]
const newNum = numb.map(item => item +2)

console.log(newNum) // [2,4,6]

.pop()

대상 배열에서 마지막 요소를 제거하고 해당 요소를 반환

대상 배열의 원본이 변경됩니다.

const arr = [1,2,3]

console.log(arr.pop()) // 3
console.log(arr) // [1,2]

.shift()

대상 배열의 첫 번째 요소를 제거하고 제거된 요소 반환

대상 배열의 원본이 변경됩니다.

.push()

배열의 마지막 자리에 해당 요소를 저장

대상 배열의 원본이 변경됩니다.

여러개의 요소를 한번에 추가할 수 있습니다.

arr.push(item) // 해당 배열의 길이 반환

.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환

push의 반대 개념

대상 배열의 원본이 변경됩니다.

.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환합니다.

각 콜백의 반환 값은 다음 콜백으로 전달됩니다.

const num = [1,2,3]

const result = num.reduce((accumulator, currentValue) => {
		return accumulator + currentValue
}, 초기값)

처음 콜백 실행시, accumulator에 초기값이 들어가고

currentValue에 배열의 첫번째 값이 들어감

콜백 실행문을 실행한 이후의 반환값이 accumulator로 다시 들어감

.split()

.toFixed의 결과는 문자로 반환!~!!

.reverse()

대상 배열의 순서를 반전시킵니다.

대상 배열의 원본이 변경됩니다.

.slice()

대상 배열의 일부를 추출하여 새로운 배열을 반환합니다.

두 번째 인수 직전까지 추출

두 번쨰 인수를 생략하면 첫 번째 인수에 해당하는 인덱스부터 배열의 끝까지 추출

.some()

대상 배열의 요소 중 1개라도 콜백 테스트를 통과하는지 확인

every와 반대 개념

const arr = [1,2,3,4]
const isValid = arr.some(item => item > 3) 

console.log(isValid) // true

.sort()

대상 배열을 콜백의 반환 값에 따라 정렬

콜백을 제공하지 않으면, 요소를 문자열로 반환하고 유니코드 코드 포인트 순서로 정렬

대상 배열 원본이 변경됨

음수 : a를 낮은 순서로 변경
0 : 순서 변경 ㅇ벗음
양수 : b를 낮은 순서로 변경
콜백을 제공하지 않으면, 요소를 문자열로 반환하고 유니코드 코드 포인트 순서로 정렬

const users= [
	{name : 'Neo', age:85}
	{name : 'Amy', age:22}
	{name : 'Lewis', age:11}
]

users.sort((a,b) => a.age - b.age) :  오름차순
 // b -a : 내림차순
console.log(users)

.splice()

요소를 추가하거나 삭제하거나 교체합니다.

대상 배열의 원본이 변경됩니다.

// 삽입
cosnt arr = [1,2,3]
arr.splice(2, 0, 5) // [1,2,5,3]
// (인덱스 위치, 추가할 갯수, 추가할 요소)

// 요소 삭제
const arr [1,2,3]
arr.splice(1, 1) // [1,3]
// (인덱스 위치, 삭제할 갯수)

const arr = [1, 2, 3]
arr.splice(1,1,'x') // [1,1, 'x']
// (인덱스 위치, 삭제할 갯수, 추가할 요소)

.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환

대상 파일 원본이 변경됩니다.

Static Method

Array.from(유사배열)

.querySelectorAll

모든 해당 선택자를 유사 배열로 받음

따라서 Array.from(유사배열)을 통해서 실제 배열로 만들어줌

이를 통해 map 메소드를 사용할 수 있음

arrayLike.constructor === 타입 을 이용하여 확인 가능

// 유사 배열 형태
const arrayLike = {
	0 : '1'
  1 : '2'
  2 : '3'
	length : 3
}

Object.assign()

하나 이상의 소스 객체로부터 대상 객체로 속성을 복사하고 대상 객체를 반환

해당 방식은 전개연산자를 사용해도 동일하게 바꿀 수 있음

const target = {a: 1, b: 2}
const source1 = {b: 3, c: 4}
const source2 = {c: 5, d: 6}
const result = Object.assign(target, source1, source2)

// target이 result로 들어감

가장 나중에 덮어씌워진 데이터를 반영시킵니다.

El.style.속성 = ‘속성값’
El.sytle = {
	속성 : ‘속성값’
} // 이와 같이 작성하는 경우 모든 값이 해당 속성으로 교체됨

따라서 assign을 활용하여 해당 스타일만 교체되도록 해야함

Object.assign(El.style, {
	속성 : '속성값'
})

Object.keys()

주어진 객체의 키 이름을 나열한 배열을 반환

Object.values()

주어진 객체의 값들을 나열한 배열을 반환

Object.entries

주어진 객체를 2차원 배열 형태로 [[key, value] …] 와 같이 변환된 데이터를 반환

for const items of Object.entries ...
for const [k, v] of Object.entries ...

Object.freeze()

주어진 객체를 변경할 수 없도록 동결시킴

ObjectisFrozen()을 이용ㅎ마여 해당 동결 여부를 확인 가능

Object.seal()

주어진 객체를 변경할 수 없도록 밀봉

Object.defineProperty

디테일하게 속성을 추가하면서 정의하기 위한 기능

for문으로 조회가 가능하거나 가능하지 않도록 만들 수 있음

get, set 함수를 속성으로 이용 가능

Object.defineProperty(객체명, 키 이름, {
	value : 값
	enumerable : 조회가능 여부
	writable : 수정가능 여부
	get : getter // 오브젝트 값을 불러옴
	set : setter // 오브젝트 값을 수정함
})

해당 리엑트의 원리

JSON

.stringify()

JS 데이터를 JSON 문자로 변환

JSON 문자는 항상 큰 따옴표로 만들어져 있음

모든 데이터를 문자로 변환

JSON에서는 데이터가 뒤에 없는 경우 , 가 존재하면 안된다

이러한 데이터는 .json 파일로 만들 수 있으며 데이터 통신을 위해 사용됨

.parse()

JS 문자를 분석하여 JS 데이터로 변환

Module

이해가능한 보다 작은 단위로 나눠진 것을 말합니다.

David Oh

let David_Oh === UX+Programming

이전 포스트

[TIL] 데일리 학습 - 221024

다음 포스트

[TIL] 데일리 학습 - 221031

TIL

React

Array

.length

.at()

.concat()

.every()

.filter()

.find

.findIndex()

.flat()

.forEach(콜백)

.includes()

.join(구분자)

.map(콜백)

.pop()

.shift()

.push()

.unshift()

.reduce()

.split()

.reverse()

.slice()

.some()

.sort()

.splice()

.unshift()

Static Method

Array.from(유사배열)

Object.assign()

Object.keys()

Object.values()

Object.entries

Object.freeze()

Object.seal()

Object.defineProperty

JSON

.stringify()

.parse()

Module

[TIL] 데일리 학습 - 221024

[TIL] 데일리 학습 - 221108

0개의 댓글