병합 정렬 : 피벗 값이 없고 일단 정확히 반으로 자르고 나중에 정렬 -> 퀵 정렬과 마찬가지로 ' 분할 정복' 방법을 채택한 알고리즘 ​ 정확하게 반절씩 나눈다는 점에서 최악의 경우에도 O(N * logN)의 시간 복잡도를 가진다. ​ 76583519를 병합 정렬을 사용하여 정렬한다고 했을 경우 시작 : 7 6 5 8 3 5 9 1 1 : 67 58 35 19로 2개씩 묶어서 2개씩 각각 정렬해 준다. 2 : 5678 1359로 4개씩 묶어 4개씩 각각 정렬해 준다. 3 : 13556789 ​로 하나로 합치며 정렬하여 준다. ​ 이때 폭을 N 높이를 log2N이라고 한다. 즉, 위 정렬은 8 * log28(3) 번 연산을 한다. 1번에서 8번 -> 76 정렬 때 2번, 58 정렬 때 2번, 35 정렬 ..

​ ​ 알고리즘 순서도의 도형 각각의 의미이다!

선택정렬 : 가장 작은 것을 선택해서 제일 앞으로 보내는 알고리즘 ​ 1 10 5 8 7 6 4 3 2 9 를 오름차순으로 정렬하시오 1 10 5 8 7 6 4 3 2 9 을 정렬하기 위해서는 ​ 1 ~ 10 => 10 , 2 ~ 10 => 9 , 3 ~ 10 => 8 .... , 10 ~ 10 => 1 => 1 + 2 + 3 + 4 + ... + 10 10 * (10 + 1) / 2 = 55 (1 + 7) / 2 * 4 ​ 1 ~ 10 까지 정렬하기 위해서 최소한 55번의 비교 연산을 해야한다. ​ 즉 위 알고리즘의 수행시간은 => N * (N + 1) / 2 로 나타낼 수 있다. 컴퓨터에서는 "/ 2" 나 "+ 1" 는 N의 값이 클 경우 의미가 없기 때문에 무시한다 ​ 그렇기 때문에 결과적으로 N ..

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신한다. 이 경우 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 요청이 끝나야 비로소 다음 예정된 작업을 할 수 있다. 하지만 비동기적으로 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 ..

useEffect랑 useLayoutEffect 둘 중 useLayoutEffect 먼저 화면에 랜더링 된다. useLayoutEffect?? useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 랜더링 된 후 실행이 되지만, useLayoutEffect는 화면의 리사이징, 즉 레이아웃의 변환을 감지하는 Effect이다. 정리하자면 useEffect -> 화면이 완전히 바뀌고 난 후 발생 useLayoutEffect -> 화면이 바뀌기 전 발생

Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택해야 한다. 리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지, 또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다. 그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다. 이럴 때, 리액트에서는 ref라는 것을 사용한다. ..

useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능..

특정 DOM 요소에 작업을 해야 할 경우 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 이렇게 HTML에서 id를 사용하여 특정 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법도 있다. 이것이 바로 ref(reference의 줄임말)이다. 물론 리액트 컴포넌트 안에서 id를 사용할 수 있다. JSX안에 id를 달면 되기 때문이다. 하지만 여러 컴포넌트를 사용할 때 id를 사용하게 되면 HTML의 id는 유일(unique) 해야 하는데, 중복된 id를 사용하는 컴포넌트가 여러 개 생길 우려가 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제에 걱정이..