[취업준비일지] - 100

1.면접 때 리액트의 장점 중 하나로 버츄얼 돔을 이야기 했었는데
사실은 앞뒤가 완전히 바뀐 말이었다.

자바스크립트에서는 DOM을 각자 건드리기 때문에
규모가 커질수록 점점 복잡한 실타래처럼 DOM이 꼬이기 때문에
유지보수도 힘들고 확장은 꿈도 꾸기 어려웠다.

이런 문제를 해결하기 위해 Angular 등의 프레임워크가 DOM을 간단하게 정리했는데
React에서는 DOM 자체를 날려버리고 새로 렌더링하는 방식을 사용하기로 한다.

하지만 모든 DOM을 새로 생성하기에는 큰 부담이 되었기 때문에
Virtual DOM을 메모리상에 만든 후 
바뀐 부분만을 새로 렌더링하는 방식으로 진행해 빠른 처리가 가능했다.

사실 리액트의 장점이 Virtual DOM이 아니라
DOM을 관리하기 위한 새로운 방식을 진행했고
그 과정에서 최적화?를 위해 나온 방식인 것이다.

어쩐지 면접관님이 고개를 갸우뚱 하시면서
"틀린 말은 아닌데 또 그건 순서가 다른데?" 라는 말씀을 하신 이유를 알게 되었다..

요약하자면 리액트의 장점은 빠른 업데이트(DOM 처리)가 가능하며
복잡한 설계가 필요하지 않다는 것이고(JavaScript에 비해)
이것을 가능하게 해주는 보조적인 역할을 Virtual DOM이 한다.




2.아래의 코드에서 checkIndex가 NaN이 되는 문제가 발생했다.
내용을 확인해보니 정상적으로 arr, target이 들어갔는데
도대체 어떤 문제가 발생한 것일까?

const targetOrderChecker = (arr, target) => {
    let printCount = 0
    let sortedArr = arr.sort((a,b) => a-b)
    let needToPrint = sortedArr.pop()
    let checkIndex = 0
    
    while(arr[target] !== 0){
        if(arr[needToPrint] === arr[checkIndex]){
            arr[checkIndex] = 0
            printCount++
            needToPrint = sortedArr.pop() 
        }
        checkIndex = (checkIndex + 1) % (arr.length)
    }
    return printCount
}

정답은 arr과 sortedArr이 같은 heap의 주소값을 가리키기 때문에
needToPrint를 만들 때 arr도 같이 pop()처리되어 손상되어 버린 것이다.

sortedArr = [...arr].sort((a,b) => a-b)로 수정해 해결할 수 있었다.
배열의 값을 다른 곳에 저장할 때는 꼭 구조분해 할당을 사용해야 한다.


3.내부에 children을 넘겨줄 때는 
props.children 또는 {children}으로 받아올 수 있으며
아래와 같이 태그 사이에 넣어 사용할 수 있다.

<Wrapper>
  {children}
</Wrapper>

 

주로 모달같이 내부 값들이 자주 변경되야 하는 형태에서 쓰이며
input이나 wrapper 형태로도 볼 수 있다.





(1).백준 7568번 덩치는 각각의 덩치 순위를 출력하는 문제로
처음에는 정렬 방식으로 문제를 해결해야 한다고 생각했지만
정렬을 한 데이터에서 추가 비교로 넘어가면 특이한 문제가 발생하는데
무게로는 88/186 60/175 58/183 56/182 55/185 46/155 순이지만
키로는 88/186 55/185 58/183 56/182 60/175 46/155 순이고
56/182가 4번째에 공통으로 위치하지만
의외로 4순위가 아닌 것을 볼 수 있다(3등)
결국 전체 조회를 통해 현재 키,무게를 비교한 다음
높은 사람이 나올 때 마다 순위에 +1을 해주는 방식으로 진행했다.

let input = `5
55 185
58 183
88 186
56 182
60 175
46 155`.split('\n')

let result = []

let peopleData = input.slice(1).map((el,index) => [...el.split(' ').map(Number),index])

for(let i = 0 ; i < peopleData.length ; i++){
    let order = 1
    for(let j = 0 ; j < peopleData.length ; j++){
        if(peopleData[i][0] < peopleData[j][0] && peopleData[i][1] < peopleData[j][1]){
            order++
        }
    }
    result.push(order)
}

console.log(result.join(' '))

(2).백준 1966 프린터 큐는 여러개의 테스트케이스를 주고
각 테스트케이스에서는 큐의 길이, 목표, 큐 배열을 주며
목표 타겟이 몇 번째로 인쇄되는지를 묻는 문제였다.

단순히 순번을 따져서 풀 수 있는 문제는 아니었는데
큐 형태로 순환하기 때문에 111121111의 경우 5번째인 5를 처리한 다음
1번의 1부터 처리하는 것이 아닌 6번째의 1부터 순환해
5,6,7,8,9,1,2,3,4 순서로 처리하게 된다.

문제를 해결하기 위해 일단 테스트케이스를 for문으로 조립하고
프린트를 진행해 타겟의 순번을 처리해주는 함수를 생성한 다음
조립된 내부에서는 타겟과 해당 배열을 만든 함수에 넣어주는 방식으로 진행했다.

let input = `3
1 0
5
4 2
1 2 3 4
6 0
1 1 9 1 1 1`.split('\n')

const result = []

const targetOrderChecker = (arr, target) => {
    let printCount = 0
    let sortedArr = [...arr].sort((a,b) => a-b)
    let needToPrint = sortedArr.pop()
    let checkIndex = 0
    
    while(arr[target] !== 0){
        if(needToPrint === arr[checkIndex]){
            arr[checkIndex] = 0
            printCount++
            needToPrint = sortedArr.pop() 
        }
        checkIndex = (checkIndex + 1) % (arr.length)
    }
    return printCount
}

for(let i = 1 ; i < input.length ; i+=2){
    const [waitAmount, targetOrder] = input[i].split(' ').map(Number)
    let waitList = input[i+1].split(' ').map(Number)
    result.push(targetOrderChecker(waitList, targetOrder))
}


console.log(result.join('\n'))