지난 시간 Sorting Algorithms이 무엇인지 그 중에서도 Bubble Sort에 대해서 알아보았다. 👉 Link - Sroting Algorithms + Bubble Sort 선택 정렬 알고리즘(Selection Sort Algorithm) 데이터 배열을 내림차순 혹은 오름차순으로 나열하는 과정에서 사용되는 정렬 알고리즘 중 하나로 데이터 배열에서 가장 작은 데이터를 선택하여 앞으로 보내는 정렬이다. 정렬 과정을 보면 첫 시작 값에서 시작하여 모든 데이터를 최소값을 찾은 뒤 교환한다. 교환된 최소값은 정렬이 된 것이며 다음 값에서 시작하여 다시 최소값을 찾아서 교환하기를 반복한다. 간단한 원리이다. bubble 정렬과 마찬가지로 swap이 발생한다. 선택 정렬의 의사코드를 살펴보자. 의사코드 ..
useReduer는 컴포넌트에 reducer를 추가할 수 있는 React Hook이다. 상태 업데이트가 많은 컴포넌트들이 많은 이벤트 헨들러에 분산되어 있으면 부담이 커질 수있다. 이런 경우, 컴포넌트 외부의 모든 상태 변화 로직을 reducer라는 단일 기능으로 통합할 수 있다. 쉽게 말자하면, 컴포넌트 내부의 상태를 변경하는 로직이 내부에 작성되어 있어 해당 로직을 다른 컴포넌트에서 재사용할 수 없기에 useReducer를 사용하여 해당 로직을 컴포넌트 외부에서 재사용할 수 있게 된다. reducer는 상태를 처리하는 하나의 방법이며 세 단계를 통해 작성된다. setting state에서 dispatching actions로 옮긴다. reducer 함수를 작성한다. 컴포넌트에서 reducer를 사용한..
해당 글은 2022/10/24 React Docs BETA 버전을 기반으로 작성되었습니다. 링크 React에서 props(properites)와 state는 일반 JavaScript 객체라고 한다. 두 객체는 모두 렌더링 결과물에 영향을 주는 정보는 갖고 있다. props는 (함수의 매개변수처럼) 컴포넌트에 전달되는 반면에 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. state와 prop을 정리하면 아래와 같다. 둘 다 일반 자바스크립트 객체다 state는 컴포넌트 안에서 사용된다 props는 컴포넌트에 매개변수처럼 전달하는 것이다 State Props 유스케이스 뷰에 렌더링돼야 하는 컴포넌트의 데이터를 저장하는 데 사용한다. 데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는 데..
정렬 알고리즘(Sorting Algorithm)은 무엇일까? 정렬 알고리즘은 컬랙션(배열과 같은)의 아이템들을 어떤 종류의 순서로 재배열하는 과정이다. 목록이나 트리 같은 데이터 구조의 정렬 등 다양하지만 배열에 초점을 두고 살펴보자. 여기서 핵심은 뭘 어떻게 비교해서 정렬하는지는 중요하지 않다. 오름차순이든, 내림차순이든, 순자를 기준으로 하든 상관없다. 👉정렬 알고리즘 애니메이션 정렬 알고리즘을 배워야 하는 이유는? 정렬은 흔히 발생하기에 이것들이 어떻게 동작하는지 이해하는 것은 중요하다. 데이터들을 정렬하는 방법은 많고 각 알고리즘에는 장단점이 있기에 상황에 맞는 알고리즘을 사용해야한다. 정렬은 다양한 접근법을 제공하고 비판적 사고가 필요한 아주 좋은 도전과제이자 문제이다. 1. 버블 정렬(Bubb..
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 에러를 살펴보면 정의되지 않은 값(undefined)에서 정의된 값으로 변경되는 요소이기에 해당 에러가 발생할 수 있으며, 그런 일이 발생해서는 안된다는 이야기를 하고 있는 듯 하다. input의 value가 뭐라도 있어..
목표 Searching Algorithm이 무엇인가 배열의 선형 검색(linear search) 정렬된 배열의 이진 검색(binary search) 나이브(navie) 문자열 검색 알고리즘, KMP 문자열 검색 알고리즘 선형 검색 알고리즘(linear search algorithm) 선형 검색은 데이터가 모인 집합(배열, 링크드리스트 등)의 처음부터 끝까지 하나씩 순서대로 비교하며 원하는 값을 찾아내는 알고리즘이다. 데이터를 정렬하거나 따로 건드릴 필요가 없고, 난이도가 쉬운 편이나, 데이터의 양이 많아지면 검색에 소요되는 시간도 비례하여 많아지고, 하나씩 일일이 비교하기 때문에 비효율적이라는 단점이 있다. JavaScript는 선형 검색 기능을 가지고 있다. indexOf includes find fi..
🤔Routing이란? 어떤 네트워크 내에서 통신 데이터를 보낸 경로를 선택하는 일련의 과정 - 위키백과 Router: 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 즉, 길잡이의 역할을 한다. Routing: 경로를 정해주는 행위와 그런 과정들을 다 포함하여 일컫는 말이다. 🤔Page Routing이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 할 수 있다. 요청(Request)에 명시된 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정 자체를 Page Routing이라 한다. 👉 MPA와 SPA, SSR과 CSR 리액트와 같은 경우 단일 페이지로 구성되는 SPA 방식을 따르며 CSR으로 페이지를 렌더링 한다. ..
Memoization: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 연산의 결과값을 메모리에 저장해 두고 동일한 연산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 즉, 재사용하는 기법 UseMemo 성능 최적화를 위하여 연산된 값(연산 결과)을 useMemo라는 Hook 을 사용하여 재사용한다. // CommentItem const [clickCount, setClickCount] = useState(0); const handleClick = () => { onClick(); setClickCount((prev) => prev + 1); // 클릭 시 숫자 증가...
