🤔Routing이란? 어떤 네트워크 내에서 통신 데이터를 보낸 경로를 선택하는 일련의 과정 - 위키백과 Router: 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 즉, 길잡이의 역할을 한다. Routing: 경로를 정해주는 행위와 그런 과정들을 다 포함하여 일컫는 말이다. 🤔Page Routing이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 할 수 있다. 요청(Request)에 명시된 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정 자체를 Page Routing이라 한다. 👉 MPA와 SPA, SSR과 CSR 리액트와 같은 경우 단일 페이지로 구성되는 SPA 방식을 따르며 CSR으로 페이지를 렌더링 한다. ..
구글 로그인 OAuth를 사용하기 위해 프로젝트에 도입하려했던 라이브러리는 react-google-login였으나, 테스트 도중 웹용 Google 로그인 자바스크립트 플랫폼 라이브러리는 2023년 3월 31일 이후에는 지원이 중단된다는 것을 알았다. 새로운 Google Identity Services for Web을 사용하여 간편하게 구글 로그인을 시도해보자. *사전준비: 구글 로그인을 구현하기 위해선 Google API 클라이언트 ID를 받아와야 한다. 그리고 사용자가 로그인할 수 있는 페이지에 클라이언트 라이브러리를 로드해야 하기에 Use the following code snippet: anync 와 defer 속성을 사용하여 스크립트를 로드하면 페이지의 로딩 속도를 최적화할 수 있다. App.js..
퀵 정렬(Quick Sort) 퀵 정렬은 합병 정렬과 같은 가정으로 작동한다. 재귀를 통해 해결하기 가장 쉬운 방식 중 하나이다. 기본적으로 데이터를 분할하여 배열에 0개 또는 1개의 항목이 남을 때까지 분할하여 개별적으로 정렬되는 방식이다. 피벗(pivot) 포인트라 부르는 단일 요소를 선택하고 정렬된 배열에서 피벗이 끝날 인덱스를 찾는 방식으로 작동한다. 피벗이 적절하게 배치되면 피벗 양쪽에 퀵 정렬을 적용할 수 있다. 이 설명이 어렵게 들리겠지만 천천히 하나씩 살펴보자. 그림으로 이해해보자. 정렬되지 않은 8개의 요소를 가진 배열이 있다. 첫 번째인 5를 피벗 포인트로 잡고 5보다 작은 숫자를 모두 왼쪽으로, 큰 숫자를 오른쪽으로 옮긴다. 5는 올바른 위치에 있게 되며 이 과정을 왼쪽과 오른쪽에서 ..
합병 정렬 알고리즘 - Merge Sort 이 알고리즘을 뒷받침하는 개념은 실제로 합병과 정렬, 분할 이 세 가지 조합으로 이루어져 있다. 배열을 0 또는 1개의 요소로 구성된 더 작은 배열로 분해한 다음 새로운 정렬 배열을 작성한다. 시각적으로 살펴보자. 배열을 1,2,3 단계를 걸쳐서 0 또는 1개의 요소로 구성된 작은 배열로 만들어 주었다. 4단계에서 정렬되면서 합쳐진다. 5단계에서도 마찬가지. 분해한 것들을 모두 합침으로써 정렬된 배열이 나온다. 개별적인 배열이라는 것을 각각의 색상으로 표현되었다. 최종적으로 합병 정렬은 배열이 정렬되어 있다고 가정하고 정렬된 두 개의 조합을 반환하면 된다. 직접 구현해보자. 기능을 구현하기 위해 정렬된 두 배열 합병을 담당할 기능 즉, 함수를 구현하는 것이 유용..
Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 형제끼리의 상태를 알려면 공통된 부모에게 상태를 올려주고 그것을 props로 서로 바라보게 할 수 있다. 이 과정에서 수많은 자식 컴포넌트들이 있어서 길어진다면 제일 밑에 있는 자식이 부모의 상태를 알려면 그 부모의 자식에게, 또 자식에게 이런 식으로 props를 내려줘야 알 수 있다. props를 내리는 과정에서 비효율적인 코드가 되고 상태가 변할 수 있고 변하는 지점을 알아차리지 못할 수도 있다. context는 props를 넘기지 않고도 부모의 상태를 변경할 수 있게 해준다. Context를 사용하기 전에 알아두어야할 점. 일부 props를 여러 수준 깊이 전달해야 한..
해당 내용은 2022년 11월 08일 React Docs BETA 버전을 토대로 작성되었습니다. -링크 Purity - 순도 일부 JavaScript 함수는 순수하며 컴포넌트를 순수 함수로 작성하면 코드 베이스가 커짐에 따라 마주치는 당황스러운 버그와 예측하기 힘든 동작을 피할 수 있다. 순수 함수의 한 예인 수학 공식에 이미 익숙할 것이며 수학 공식을 예로 생각해보자. y = 2x 일때. x = 2 이면 y = 4 x = 3 이면 y = 6 x = 3 이면 y는 항상 6이다. 이것을 JavaScript로 작성하면 아래와 같다. double은 순수 함수이다. function double(number) { return 2 * number; } React는 위와 같은 개념을 중심으로 설계되었으며 작성하는 모..
해당 내용은 2022년 11월 08일 React Docs BETA 버전을 토대로 작성되었습니다. - 링크 👉 사전 지식 - Purity and Side Effect useEffect란 ? useEffect란 컴포넌트를 외부 시스템과 동기화할 수 있는 React hook이다. 컴포넌트를 외부 시스템과 동기화할 수 있다는 게 무슨 의미일까? 때때로 컴포넌트가 페이지에 표시되는 동안 네트워크, 일부 브라우저 API 또는 외부 라이브러리에 연결된 상태를 유지해야할 수 있다. 이러한 시스템들은 React에 의해 제어되지 않으므로 외부 시스템이라고 한다. 이러한 외부 시스템과 컴포넌트를 연결할 수 있는 역할을 하는 것이 useEffect hook인 것이다. 즉, 컴포넌트에서 Side Effect를 사용할 수 있게하..
삽입 정렬 알고리즘(Insertion Sort Algorithm) 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입해서 배열의 정렬된 부분을 점진적으로 구축하는 알고리즘이다. 왜 삽입 정렬인지 애니메이션을 통해 알 수 있다. 한 번에 하나를 취해서 올바른 위치에 삽입하는 것이다. 의사코드 1. 배열의 두 번째 요소를 선택하여 시작한다. 왜냐하면 첫 번째 요소는 정렬된 부분으로 간주하기 때문이다. 2. 앞의 요소와 비교하고 필요하면 swap한다. 3. 다음 요소로 계속 이동한 후 순서가 잘못된 경우, 정렬된 부분을 반복하여 요소를 올바른 위치에 배치한다. 4. 배열이 정렬될 때까지 반복한다. 삽입 정렬 구현 과정 function insertionSort(arr) { for (..
