[취업준비일지] - 121

1.event loop에 대해 학습한 적은 있지만
의외로 회고에 정리한 내용이 보이지 않았다.

이벤트 루프에 대해 다시 학습해보니 아래와 같은 순서에 따라 작동한다.

1.함수가 동기적으로 call stack에 추가된다
2.Web APIs로 이동되어 비동기적으로 실행된다.
3.APIs에서 처리가 끝난 후 Callback Queue로 이동된다.
4.감시하던 Event loop에서 call stack이 빈 경우 Callback Queue에서 call stack으로
  이동시킨다.
5.call stack에서 이동된 비동기 함수가 실행된 후 제거된다.

 

비동기 처리가 끝났다고 하더라도 call stack이 비어야만 값이 들어오기 때문에
APIs에서 처리되는 시간과 실제 처리되는 시간이 다를 수 있기 때문에
비동기처리를 할 경우 본인의 예상시간과 다를 수 있다는 점을 유의해야 한다.


2.map과 set 그리고 배열에는 차이가 있는데
map은 자바스크립트 Array에 있는 메서드만 알고 있었는데
알고보니 new Map과 같은 형태로 만들 수 있는 자료구조의 하나였다.

map은 배열보다는 객체에 가까운 배열형태인데
내부 값을 [key, value]형태로 각각 저장하기 때문에
key에 다양한 자료형태(원시값 뿐만 아니라 객체 형태 등)가 가능하다는 특징이 있으며
객체와는 다르게 삽입 순서에 따라 배치된다는 특징이 있다.

set은 new Set을 사용해 중복값을 제거해본 경험만 몇번 있었는데
set 자체의 정의가 중복을 허용하지 않는 값을 모은 형태라고 한다.

set에는 key 없이 value만 저장되며 index 또한 존재하지 않기 때문에
조회를 위해서는 iterator 등을 사용한다.

주 사용 목적은 중복의 여지가 없는 데이터(방문자, 사용자, 출석자 등)에 사용된다.


3.리액트의 생명주기에 대해서 가장 먼저 나온 것은 class에서 작동하는 생명주기였는데
이 부분만 지나치고 나는 리액트 생명주기에 대해서 모른다고 생각하고 있었다.

하지만 함수 컴포넌트에서는 useEffect가 라이프사이클을 대체한다고 하고
이 부분에 대해서 이해하고 있기 때문에 리액트의 라이프 사이클을 안다고 해도 되는 것 같다.

useEffect에서 랜더링이 될 때 마운트 되며
의존성배열이 있는 경우 그 뒤에 랜더링이 된다고 해도 추가적인 실행이 되지 않는다.
하지만 의존성 배열에 들어있는 값이 존재하고 그 값이 변할경우 리랜더링 시 재실행되는데
그 과정에서 cleanUp 함수가 존재할 경우 componentWillUnmount의 역할을 하며
그 후 다시 랜더링이 된다.

요약하자면 
의존성배열이 없는 경우

랜더링 시 componentDidMount
=> 리랜더링으로 인한 demount
=> 랜더링 후 componentDidMount

의존성배열이 존재하지만 변경이 없거나 아무것도 들어있지 않은 경우

랜더링 시 componentDidMount 
=> 리랜더링에 반응하지 않는다.

의존성배열이 존재하며 해당 내용이 변경된 경우(update에만 반응한다)

랜더링 시 componentDidMount 
=> componentDidUpdate으로 인한 demount
=> 랜더링 후  componentDidMount

의존성배열에 따른 변경이 있으며 cleanUp 함수가 있는 경우

랜더링 시 componentDidMount 
=> componentDidUpdate으로 인한 demount
=> demount로 인한 componentWillUnmount(cleanUp)
=> 랜더링 후  componentDidMount

(1).백준 17626 Four Squares는 하나의 숫자를 
최소 몇개의 제곱수로 표현할 수 있는지를 구하는 문제였다.

예전엔 뭘 원하는지 몰라서 넘어갔었는데
풀어야 한다는 생각을 가지고(class3 모든 문제 해결 중) 보니 생각보다 간단했다.

라그랑주의 정리를 통해 자연수의 제곱 4개로 제한된다는 사실을 알 수 있었고
그게 아니라도 제곱수의 합으로 만들어진다면 dp로 만들 수 있었다.

dp에 만들기 위한 제곱수의 갯수를 표기하며 최대 4개임을 알기 때문에
dp에는 5로 가득 채운 다음 dp[0] = 0을 통해 순차적으로 진행될 기반을 마련했다.

제곱수들의 집합인 poweredNum 배열을 생성한 다음
input값보다 작은 제곱수들을 모두 넣어주고
각 dp를 순회할 때 해당 index값보다 작은 power까지 순회하며
현재 dp[index]에 저장된 값보다 작은 값이 있는지를 비교했다.

const input = 34567

const dp = new Array(input+1).fill(5) 
dp[0] = 0
const poweredNum = []
const result = []
for(let i = 1 ; i <= Math.floor(Math.sqrt(input)) ; i++){
    poweredNum.push(i**2)
}

for(let i = 1 ; i <= input ; i++){
    for(let j = 0 ; j < Math.floor(Math.sqrt(i)) ; j++){
        dp[i] = Math.min(dp[i], dp[i-poweredNum[j]]+1)
    }
}

console.log(dp[input])