[TIL] 데일리 학습 - 221115

메모리

fetch()
.then(res => res.json())
,then(json => console.log('json is result'))

axios('url')
.then(data => console.log('data is result'))

Shallow Copy

const a = {x : 1}
const b = {...a} // {x : 1}

const a = {x : [1,2]}
const b = {...a}

b.x[0] = 7
console.log(b) // [7,2]
console.log(a) // [7,2]

참조형 내에 참조형 데이터가 있는 경우에 복사를 하게되면 해당 데이터가 바뀌면, 다른 데이터도 바뀜

Deep Copy

깊이가 1이상인 경우에 사용해야

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

const a = {x : [1,2]}
const b = _.clonedeep(a)

b.x[0] = 7
console.log(b) // [7,2]
console.log(a) // [7,2]

Closer

함수안에서 함수를 반환될 때, 함수 내의 특정 데이터를 바라보고 있는 상태의 코드에서 클로저가 만들어집니다.

function createCount(){
	let a = 0 //closer
	return function () {
		return a+= 1
	}
}

const count = createCount()

console.log(count()) //1
console.log(count()) //2
console.log(count()) //3

클로저의 패턴

함수가 실행될 때마다 별개의 데이터 생성하기 위함

상태관리를 하기 위함

cosnt create = () =>{
	let isRed = false // 상태, 내가 취급해야할 데이터
	//Store => 상태를 저장하는 공간, 상태 관리 패턴 라이브러
	return event  => {
		isRed = !isRed
		event.style.color = isRed ? 'red' : 'black'
	}
}

메모리 누수

더 이상 필요하지 않은 데이터가 해제되지 못하고 메모리를 계속 차지되는 현상

불필요한 전역 변수 사용

ex) 최상위 위치에 변수 선언

window.hello = 'hello'

btn.addEventListner('click',  () => {
	console.log(parent)
	parent.remove()
})

// 화면 상에서는 지워지지만, 콘솔을 찍어야하기 때문에 메모리상에는 남아있음

btn.addEventListner('click',  () => {
	const parent = document.querySelector('.parent') //null
	console.log(parent)
	parent && parent.remove()
})

// 화면 상에서는 지워지지만, 콘솔을 찍어야하기 때문에 메모리상에는 남아있음

클로저 활용

const 함수명 = () ⇒ {
	let 초기값
	return () ⇒ {
		return 값
	}
}

콜 스택

setTimeout은 기존 존재하는 코드가 모두 실행된 후, 실행됨

이 때, setTimeout은 콜백 큐에 쌓이게 됨

이유 : 자바스크립트에서는 기다리는 기능이 없기 때문에 브라우저를 이용하여 해당 기능을 수행함, 따라서 가장 나중에 실행

FIFO : 가장 먼저 들어온 데이터가 먼저 나감, 콜백

LIFO : 마지막에 들어온 데이터가 먼저 나감, 콜스택은 LIFO

마이크로 태스크 큐 : 프로미스

매크로 태스크 큐 : setTimeout, fetch, Ajax

스택

랜더 : 애니메이션

⇒ 스택 > 마이크로 > 랜더 > 매크로

리플로우 & 리페인트

리플로우 : 브라우저 화면에 무엇인가 출력하기 위해, 크기나 위치 등을 계산하는 과정

리페인트 : 리플로우 이후에 화면에 실제 출력하는 과정

margin-top을 주는 경우 모든 요소가 움직이게 되고 리플로우가 발생함

따라서 transfrom을 이용하면 리플로우가 발생하지 않음(움직이는 대상만 변화)

visibility, outline, opacity, transform, filter, box-shadow, background-color, color 등

주변 노드에 영향을 주지 않는 단순 표시 속성이 변경되면 브라우저는 리플로우 없이,

해당 노드만 리페인트 합니다.

브라우저 렌더링 과정

1. HTML 파싱
2. DOM 트리 생성(DMCcomtentLoaded 이벤트)
   1. 당장에 필요한 이벤트
3. CSS
4. CSSOM 트리 생성
5. DOM-CSSOM 결합
6. 렌더 트리 생성
7. 레이아웃 계산
8. 렌더링 (load 이벤트)