그럼에도 불구하고

useInfiniteQuery와 Infinite Scroll에 대해 알아보겠습니다. 🧑🏻‍💻 useInfiniteQuery 기존 데이터를 모두 불러왔을 때, 더 많은 데이터를 아래에 불러오는 "무한 스크롤"은 매우 흔한 UI 패턴입니다. Tanstack Query는 이런 리스트형 데이터를 요청하기 위해, useQuery의 유용한 버전인 useInfiniteQuery를 지원합니다. 즉, useInfiniteQuery는 파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할 때 사용합니다. useInfiniteQuery는 전반적으로 useQuery와 동일하지만, useInfiniteQuery와 useQuery의 차이를 비교하며 useInfiniteQuery의 기능을 살펴보겠습니다. 📌 반환 객체에서 ..

기수 정렬에 대해 알아보겠습니다. 🧑🏻‍💻 기수 정렬 (Radix Sort) 기수 정렬이란 낮은 자릿수부터 비교하여 정렬해 간다는 것을 기본 개념으로 하는 정렬입니다. 이는 요소 간의 비교를 하는 것이 아니며 숫자의 크기에 대한 정보가 자릿수로 인코딩 된다는 사실을 이용합니다. 📌 Radix Sort Helpers 기수 정렬을 구현하려면 먼저 몇 가지 도우미 함수를 구축하는 것이 도움이 됩니다. ⭐️ getDigit(num, place) 주어진 자릿값에서 num의 숫자를 반환합니다. function getDigit(num, i) { return Math.floor(Math.abs(num) / Math.pow(10, i)) % 10; } getDigit(12345, 0); // 5 getDigit(1234..

퀵정렬에 대해 알아보겠습니다. 🧑🏻‍💻 퀵 정렬 (Quick Sort) - 퀵 정렬은 병합 정렬과 마찬가지로 0 또는 1개의 요소로 구성된 배열이 항상 정렬된다는 사실을 활용합니다. - 하나의 요소 ("피벗"이라고 함)를 선택하고 정렬된 배열에서 피벗이 끝나야 하는 인덱스를 찾는 방식으로 작동합니다. - 피벗이 적절하게 배치되면 피벗 양쪽에 퀵 정렬을 적용할 수 있습니다. 📌 Pivot Helper 병합 정렬을 구현하려면 먼저 피벗 양쪽의 배열 요소를 배열하는 기능을 구현하는 것이 유용합니다. 배열이 주어지면 이 도우미 함수는 요소를 피벗으로 지정해야 합니다. 그런 다음 피벗보다 작은 모든 값은 피벗의 왼쪽으로 이동하고 피벗보다 큰 모든 값은 피벗의 오른쪽으로 이동하도록 배열의 요소를 재정렬해야 합니다...

React Query에 대해 알아보겠습니다. 🧑🏻‍💻 React Query란? 공식문서에 따르면 React Query란 fetching, caching, 서버 데이터와의 동기화를 지원해 주는 라이브러리라고 합니다. React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다고 합니다. - 카카오페이 React Query 설명 인용 또한 카카오페이 프론트엔드 개발자분들의 말을 더 빌려보자면, React Que..

병합 정렬에 대해 알아보겠습니다. 🧑🏻‍💻 병합 정렬 (Merge Sort) 병합 정렬은 존 폰 노이만(John von Neumann)이라는 사람이 제안한 방법입니다. 이 알고리즘을 사용하면 O(n^2)에서 O(nlogn)까지 시간 복잡도를 개선할 수 있습니다. 일반적인 방법으로 구현했을 때 이 정렬은 분할 정복 알고리즘의 하나입니다. 📌 분할 정복(divide and conquer) 문제를 작은 2개의 문제로 분리하고 각각을 해결한 다음, 결과를 모아서 원래의 문제를 해결하는 전략입니다. 분할 정복 방법은 대개 순환 호출을 이용하여 구현합니다. ⭐️ 과정 설명 - 리스트의 길이가 0 또는 1이면 이미 정렬된 것으로 봅니다. - 정렬되지 않은 리스트를 절반으로 잘라 비슷한 크기의 두 부분 리스트로 나눕니..

🧑🏻‍💻 React Quill Editor 현재 제 개인 프로젝트에서 React Quill을 이용하여 게시글을 등록하는 작업을 하고 있습니다. 이제 여기서 image를 올려보겠습니다. 이미지를 첨부했을 때 base64로 인코딩 되어 어마무시한 길이의 경로를 볼 수 있습니다. 대충 어느 정도냐면... 이렇게 변환을 거치지 않고 데이터를 전송할 경우 스트링이 너무 길어서 서버에 저장되지 않는 문제가 발생할 수 있습니다. 또한 실제로 작성 후에 게시물을 확인해 봐도 img의 src 경로에 값이 들어가지 않습니다. (sanitizeHtml를 사용하기 때문) 따라서 이 문제를 해결하기 위해 에디터에 이미지 첨부 이벤트가 발생하게 되면 서버(firebase)에 API 요청을 보내 응답 값으로 URL을 돌려받고, 이..

진행 중인 프로젝트 해서 계속되는 List를 최적화하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Palette Project 이 프로젝트는 현재 제가 진행하고 있는 Palette라는 프로젝트입니다. 위의 사진과 같이 게시물을 차례대로 나열하고 있는데 이 게시물의 수가 무수히 많아진다면, 성능 면에서 어떻게 개선할 수 있을지 알아보겠습니다. 실험 조건: 현재 10명의 사람이 각각 250개의 포스트를 작성하여 총 2500개의 게시물이 있는 상태 측정 방식: Redux Profiler를 이용하여 렌더링 되어있는 post의 reaction 버튼을 눌렀을 때, 다시 렌더링되는 시점을 측정 📌 PostList.tsx HTML 삽입 미리보기할 수 없는 소스 const PostExcerpt = ({post} : {post:..

RTK의 createSelector에 대해 알아보겠습니다. 🧑🏻‍💻 createSelector createSelector는 리덕스 스토어 상태에서 데이터를 추출할 수 있도록 도와주는 유틸리티 함수입니다. 이를 통해 계산 비용이 높은 셀렉터(Selector)함수의 결과를 캐싱하여 성능을 최적화할 수 있습니다. createSelector 함수는 Reselect 라이브러리에 의해 제공됩니다. Reselect는 Redux 애플리케이션의 상태(state)가 바뀔 때만 해당 셀렉터를 다시 계산하도록 제어하여 중복 계산을 방지합니다. 기존의 useSelector의 경우 컴포넌트가 상태를 처리하는 작업이며, 컴포넌트가 리렌더링 되는 문제를 야기할 수 있습니다. 이런 문제를 미연에 방지하기 위해, createSelect..

useEffect와 useLayoutEffect의 차이에 대해 알아보겠습니다. 🧑🏻‍💻 useLayoutEffect 📌 useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) 📌 useEffect useEffect(() => { effect return () => { cleanup } }, [input]) useLayoutEffect와 useEffect 훅의 형태는 동일합니다. 그렇다면 어떤 부분에서 차이점이 있을까요? ⭐️ useEffect useEffect는 컴포넌트가 render와 paint 된 후 비동기적으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는..

Tag에 대해 알아보겠습니다. 🧑🏻‍💻 Semantic Versioning Semantic version 지정 사양은 소프트웨어 release를 위한 표준화된 버전 지정 시스템을 설명합니다. 개발자가 소프트웨어 릴리스에 의미를 부여할 수 있는 일관된 방법을 제공합니다. 버전은 마침표로 구분된 세 개의 숫자로 구성됩니다. 2.4.1 2: MAJOR RELEASE 4: MINOR RELEASE 1: PATCH RELEASE 📌 Initial Release 일반적으로 첫 번째 release는 1.0.0으로 시작합니다. ⭐️ Patch Release Patch Release는 일반적으로 새로운 기능이나 중요한 변경 사항이 포함되어 있지 않습니다. 일반적으로 코드 사용 방식에 영향을 미치지 않는 버그 수정 및 기..

리엑트 렌더링이 두 번 되는 경우 이를 방지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 React Strict Mode 렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. HTML 삽입 미리보기할 수 없는 소스 따라서 React.StrictMode Wrapper를 제거해 주면 컴포넌트가 두 번씩 호출되지 않습니다. 📌 존재 이유 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Frament와 같이 UI를 렌더링 하지 않고, 자식들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. React 공식 문서에 따르면 StrictMode는 아래와 같은 부분에서 도움이 ..

리덕스를 이용한 프로젝트를 만들다가 아래와 같은 오류와 직면했습니다. 🧑🏻‍💻 Non-serializable value 오류 내용을 확인해보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있습니다. 여기서 직렬화란 redux에서 값을 주고 받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringify) 역질렬화는 직렬화와 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정을 말합니다. (JSON.parse) 즉, Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 발생한 에러입니다. ⭐️ 해결 방법 HTML 삽입 미리보기할 수 없는 소스 export default configureStor..