그럼에도 불구하고

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에 영향을 주는..

리엑트 렌더링이 두 번 되는 경우 이를 방지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 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..

새로고침해도 redux의 store를 유지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Redux-Persist Redux는 새로고침하거나 창을 닫으면 store에 저장된 state가 리셋됩니다. 이를 방지하기 위해 Redux의 Redux-Persist를 사용해 보겠습니다. 현재 Posts 상에 있는 게시물에서 View Post를 누르면 해당 게시물의 상세 페이지로 넘어가고 각각의 게시물마다 nanoid로 지정된 id를 통해 해당 페이지로 이동하고 있습니다. 내 localhost/post/:nanoid 이때 생성된 nanoid는 무작위이며, 새로고침할 때마다 redux store는 기존 state를 가지고 있지 못하고 새로운 nanoid로 생성된 게시물 리스트를 갖고 있습니다. 그렇기 때문에 기존 state가..

createAsyncThunk에 대해 알아보겠습니다. 🧑🏻‍💻 createAsyncThunk 프로그램을 개발하다 보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만, 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에, Redux Toolkit의 createAsyncThunk를 사용해 비동기 처리를 진행하고는 합니다. 📌 사용법 createAsyncThunk 1. createAsy..

오늘은 id를 자동으로 생성해 주는 @reduxjs/toolkit nanoid에 대해 알아보겠습니다. 🧑🏻‍💻 nanoid import { nanoid } from "@reduxjs/toolkit"; nanoId는 @reduxjs/toolkit안에 내장되어 되어있는 기능으로 자동으로 id를 생성해 줍니다. 예를들어, TodoList에 새로운 Post를 게시할 때 PostList의 각각의 post에 고유한 key를 지정할 경우 유용하게 사용할 수 있습니다. 📌 AddPostForm.tsx HTML 삽입 미리보기할 수 없는 소스 const onSavePostClicked = () => { if( title && content ) { dispatch( postAdded({ id: nanoid(), title,..

버블 정렬, 선택 정렬, 삽입 정렬에 대해 알아보겠습니다. 🧑🏻‍💻 정렬이 무엇인가? 정렬은 항목이 일종의 순서가 되도록 컬렉션(예: 배열)의 항목을 재정렬하는 프로세스입니다. 📌 정렬을 왜 알아야 하는가? - 정렬은 매우 일반적인 작업이므로 작동 방식을 아는 것이 좋습니다. - 물건을 분류하는 방법에는 여러 가지가 있으며, 기술마다 장단점이 있습니다. ⭐️ 버블 정렬 (Bubble Sort) 버블 정렬은 잘 사용되지 않고 엄청 효율적이지는 않습니다. 하지만 어떻게 사용하는지 알면 재미있는 정렬 방식입니다. 버블 정렬의 개념은 배열을 가장 작은 숫자에서 가장 큰 숫자 순으로, 즉 오름차순으로 정렬한다면 더 큰 숫자가 한 번에 하나씩 뒤로 이동한다는 것입니다. 📚 버블 정렬 예시 - 배열의 끝인 i라는 변..