2023-11-08 본 캠프 25일차 / 44일차 TIL

2023-11-08 본 캠프 25일차 / 44일차 TIL

주요 진행사항

- 알고리즘 문제풀이

- 리액트 숙련과정 강의 수강

 

1. 알고리즘 문제풀이 - 투포인트 알고리즘

두개의 배열이 주어졌을 때 시간 복잡도를 줄이기 위한 알고리즘이다.

다음 문제풀이를 통해 알고리즘을 알아보겠다.

 

- 문제

오름차순으로 정렬이 된 두 배열이 주어지면 두 배열을 오름차순으로 합쳐 출력하는 프로그램 을 작성하세요.

 

- 입력

첫 번째 줄에 첫 번째 배열의 크기 N(1<=N<=100)이 주어집니다. 두 번째 줄에 N개의 배열 원소가 오름차순으로 주어집니다. 세 번째 줄에 두 번째 배열의 크기 M(1<=M<=100)이 주어집니다. 네 번째 줄에 M개의 배열 원소가 오름차순으로 주어집니다. 각 리스트의 원소는 int형 변수의 크기를 넘지 않습니다.

(예시)

3

1 3 5

5

2 3 6 7 9

 

- 출력

오름차순으로 정렬된 배열을 출력합니다.

(예시)

1 2 3 3 5 6 7 9

 

- 풀이

function solution(arr1, arr2) {
  let p1 = 0;
  let p2 = 0;
  const length_1 = arr1.length;
  const length_2 = arr2.length;
  let answer = [];

  while (length_1 > p1 && length_2 > p2) {
    if (arr1[p1] <= arr2[p2]) {
      answer.push(arr1[p1++]);
    } else {
      answer.push(arr2[p2++]);
    }
  }

  while (length_1 > p1) {
    answer.push(arr1[p1++]);
  }
  while (length_2 > p2) {
    answer.push(arr2[p2++]);
  }

  return answer;
}

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

 

1) 두개의 배열을 비교하는 문제는 효율적인 시간 복잡도를 위해서 투포인트 알고리즘을 사용한다.

2) 비교하여 조건에 부합하는 array의 값을 도출하고 인덱스를 올리면서 while문의 조건을 만족시킨다.

위 문제에서는 오름차순 정렬이 되어있는 두 array를 병합하여 오름차순 정렬하는 것으로, 맨 앞 인덱스부터 비교하여 더 작은 값을 answer array에 추가하고 작은 값을 가진 array의 인덱스를 증가시킨다. 이때 while문의 탈출조건은 두 array 중 하나라도 해당 array의 길이보다 인덱스값이 높아졌을 때 종료한다.

3) 비교가 끝나고 남은 값에 대해서 추가 처리를 해준다.

위 문제에서는 인덱스의 값이 array의 길이 값을 넘지 않았을 때 남은 길이만큼 반복하여 answer에 추가하도록 로직을 구성하였다.  

 

2. 리액트 강의 수강 요약

1) Optization (최적화) 를 위한 React Hook

 - React.memo - 컴포넌트를 메모리에 임시 저장 (캐싱)

 - useCallback - function의 초기 snapshot을 메모리에 저장(캐싱)

 - useMemo - 메모리에 값을 임시 저장(캐싱)

 

2) Virtual Dom

기존 dom과 차이점(장점)

- 자바스크립트의 Dom은 업데이트가 될 때 업데이트가 되는 항목 개수만큼 업데이트가 진행 되지만 Virtual Dom은 배치업데이트가 일어나 한번 업데이트 된다.

- Virtual Dom은 실제 Dom을 복사한 것으로 Javascrip 객체형태로 저장된다. 기존 Javascript에서 Dom에 접근하여 변경하는 것보다 JavaScript의 객체를 변경하는 것이 시간적으로 더 효율적이다.

 

결론적으로 기존 Dom 보다 Virtual Dom이 더 빠르고 효율적이다.

 

3) Redux 

리액트의 상태관리 라이브러리로 useState의 props drilling 같은 현상을 방지하고자 사용한다.

중앙 state 관리소인 store의 개념을 사용하게해주는 package라고 보면 되며, npm이나 yarn으로 다운받아 사용한다.

 

redux를 사용하게 해주는 hook들이 있다.

- useSelector : store의 state에 접근하여 값을 가져온다.

- useDispatch : store에 객체상태의 action을 전달하여 state 값을 업데이트한다.

* action의 구성 : {type, payload}

 

4) React Router Dom

React Router Dom 이란 SPA 프로그램에서 화면을 전환하는 것과 같은 효과를 주기위해 사용한다.

패키지 이므로 npm, yarn으로 설치가 필요하다.

주소 뒤에 path를 추가하여 경로를 탐색/이동 하는 개념이다.