23.07.02 TIL+WIL

 

1. 오늘 한 일

 

알고리즘스터디 - 귤고르기

https://school.programmers.co.kr/learn/courses/30/lessons/138476

프로그래머스

구현코드 

로직

// 1. key, value 자료구조를 사용 => key 값에 귤의 크기, value값에 개수로 정리
// 2. 정리한 값을 value가 큰 순서대로 정렬 가능한가?
// 3. 개수가 큰 값부터 빼낼 때, value값과 k값을 비교해서 k가 더 크다면 k - value => 
//answer + 1, k가 더 작다면 answer에 +1 하고 종료

첫번째 코드 

function solution(k, tangerine) {

    let obj = {};
    for (a of tangerine) {
        if (Object.keys(obj).includes(`${a}`)) {
            obj[a] = obj[a] + 1;
        } else {
            obj[a] = 1;
        }
    }

    const sorted = Object.values(obj).sort((a, b) => b - a);

    let answer = 0;  // 횟수
    let temp_sum = 0;   // 갯수비교용
    for (a of sorted) {
        if (temp_sum < k) {  // a의 값과 k를 비교
            answer++;
            temp_sum += a;
        } else {
            break;
        }
    }
    return answer;

}

console.log(solution(6, [1, 3, 2, 5, 4, 5, 2, 3]));

결과 : 시간초과.

 

민승님의 제안에 의한 수정코드

function solution(k, tangerine) {

    let obj = {};
    for (a of tangerine) {
        // obj[a] = (obj[a] || 0) + 1
        obj[a] ? obj[a] += 1 : obj[a] = 1
    }

    const sorted = Object.values(obj).sort((a, b) => b - a);

    let answer = 0;  // 횟수
    let temp_sum = 0;   // 갯수비교용
    for (a of sorted) {
        if (temp_sum < k) {  // a의 값과 k를 비교
            answer++;
            temp_sum += a;
        } else {
            break;
        }
    }
    return answer;
}

console.log(solution(6, [1, 3, 2, 5, 4, 5, 2, 3]));

결과 : 성공 (일부 답안에서 약 10000배의 성능차이가 난다.....)

 

달라진점?

AS-IS

    let obj = {};
    for (a of tangerine) {
        if (Object.keys(obj).includes(`${a}`)) {
            obj[a] = obj[a] + 1;
        } else {
            obj[a] = 1;
        }
    }

 TO-BE

///삼항연산자 사용시/////   
   	let obj = {};
    for (a of tangerine) {
        obj[a] ? obj[a] += 1 : obj[a] = 1
    }
    

////////위 아래 성능은 거의 동일함///////////


///단축속성명 사용시////
    let obj = {};
    for (a of tangerine) {
		obj[a] = (obj[a] || 0) + 1
    }

for문에 includes가 들어가면 시간복잡도가 제곱이 되어버려서, 이렇게 직접 비교하는 방법을 추천.

머릿속 로직에선 비슷하나, 컴퓨터의 작동 방식에서는 매우 다름.

특히 이 방법은 객체에서 바로 꺼내와서 비교하므로, 시간복잡도에서 큰 차이를 가져옴.

 

 

2. 토스컨퍼런스 발표자료 

https://toss.im/slash-21/sessions/3-3

실무에서 바로 쓰는 Frontend Clean Code

https://toss.im/slash-21/sessions/3-1

프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

https://toss.im/slash-21/sessions/3-2

JavaScript Bundle Diet

 

 

 

3. WIL 키워드. state, props, 리엑트 리렌더링(재랜더링)

state

리엑트는 결국 사용자에게 보여주는 view영역을 어떻게 변화시킬지에 대한 고민에서 나온 툴이며, 

state는 결국 이런 view를 변화(리랜더링)의 trigger가 되는 값이다. 이걸 상태 라고 하며, 

자바스크립트의 변수에 값을 할당하는 것과 개념은 비슷하지만, 

빠르게 변화된 값을 감지하기 위해 몇가지 특징을 가지고 있다. 

 

첫번째, 함수의 형태를 가지고 있으며, useState를 통해 초기 값을 설정하고 업데이트하는 함수를 얻는다.

두번째, 값을 넣을때와 가져올때의 창구가 다르다. const [state명, setState명] = useState('') 

세번째, JS에서 원시값이 아닌 값을 변경하는 경우(배열, 객체등) 반드시 깊은 복사를 거쳐야 한다.(불변성을 유지해야 한다.) 이는 리엑트가 메모리값의 변화를 통해 변경 유무를 감지하기 때문이다(얕은비교라고 한다). 변경된 state는 반드시 다른 메모리값이 할당되어야만 한다. 

네번째, state는 연속적으로 동작할 때 성능 최적화를 위해 비동기적으로 처리되며, 몇가지 문제를 일으킬 수 있다.

https://leehwarang.github.io/2020/07/28/setState.html   

다섯번째, 위와같은 문제점이나, 복잡한 로직을 처리해야 하는 경우 useReducer를 사용하기도 한다. 

 

props

리엑트는 컴포넌트 단위로 파일이 분리되어 있는 구조로 되어있는데, 이로 인해 데이터를 파일간에 주고받기 위해 처리를 해주어야 하는데, 그중 하나가 props를 이용한 데이터 핸들링이다. props는 부모 컴포넌트-> 자식컴포넌트로 데이터를 전달하는 방법이다. 

여기서 컴포넌트는 props를 직접 변경할 수 없고, 읽기 전용으로만 사용가능한데, 이는 useState와도 동일하며, React의 단방향 데이터 흐름이라는 원칙에 의거함을 알 수 있다. 

 

리랜더링(재랜더링)

 React는 빠른 랜더링 성능을 위해 가상돔을 이용해서 변경된 부분만 감지 한 뒤, 그 부분만 랜더링을 해주는데, 기본적으로 React에서 재랜더링은 해당/부모 컴포넌트의  state나 props가 변경될때 일어난다. 여기서 추가적으로 사용자가 판단하여 재랜더링이 필요없다고 판단되는 경우 React.memo, useMemo등을 이용해 필요한 경우에만 재랜더링을 하도록 최적화를 지원한다.