그럼에도 불구하고

🧑🏻‍💻 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:..

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는 아래와 같은 부분에서 도움이 ..

오늘은 createSlice에 대해 알아보겠습니다. 🧑🏻‍💻 createSlice createSlice란 리듀서 함수의 대상인 초기 상태와 "슬라이스 이름"을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수를 말합니다. 내부적으로는 createAction 및 createReducer를 사용하므로 Immer를 사용하여 "변형"되지 않는 업데이트를 작성할 수 있습니다. 슬라이스를 생성하려면 슬라이스를 식별하기 위한 문자열 이름, 초기 상태 값 및 상태를 업데이트할 수 있는 방법을 정의하는 하나 이상의 리듀서 함수가 필요합니다. 슬라이스가 생성되면 생성된 Redux 액션 생성자와 전체 슬라이스에 대한 reducer 기능을 내보낼 수 있습니다. Redux는 데이터 사본을 만들고 ..

useTransition과 useDeferredValue에 대해 알아보겠습니다. 🧑🏻‍💻 전환 기능 리액트 애플리케이션으로 개발하는 화면에서의 UI 업데이트는 두 가지 유형이 있습니다. 그중 하나는 사용자에게 즉각적인 피드백을 전달해야 하는 업데이트입니다. 예를 들면 화면의 입력 필드에 사용자가 타이핑하는 것을 예시로 들 수 있습니다. 사용자가 타이핑할 때 UI 업데이트가 느리면 실행 도중 화면이 깜빡거리거나 입력이 느려지는 등의 문제가 있을 수 있습니다. 이러한 경우를 긴급한 업데이트(urgent update)라고 부릅니다. 또 다른 업데이트 유형은 사용자가 입력한 필드의 값을 이용해 백엔드의 데이터를 조회해서 화면을 갱신하는 작업입니다. 이 유형은 긴급한 업데이트보다는 긴급하지 않은 업데이트(non-..

레이지 로딩에 대해 알아보겠습니다. :) 목차 [ 레이지 로딩 (Lazy Loading) ] SPA (Single Page Application)은 파일 하나와 다수의 자바스크립트 코드 그리고 CSS 파일로 구성됩니다. 이런 구성 때문에 SPA에는 약간의 문제점이 있습니다. 리액트 라우터를 적용한 수백에서 수천 개의 화면과 컴포넌트로 구성된 애플리케이션이 있다고 가정해 봅시다. 수백, 수천 개의 컴포넌트를 작성할 때 만들어진 자바스크립트 파일은 모두 빌드 과정을 거쳐서 하나 또는 몇 개의. js 파일로 빌드됩니다. 빌드된 파일은 모든 컴포넌트를 묶은 것이므로 파일의 크기도 클 것으로 예상할 수 있습니다. 브라우저는 첫 화면을 로딩하기 위해 브라우저가 웹 서버에 경로를 요청하면, 웹 서버는 하나의. js파..

Context API를 이용하여 todoList를 만들어봅시다!! 목차 [ Context API란? ] 자세한 설명은 아래를 참고해 주세요 https://despiteallthat.tistory.com/184 [React] Context API란? 오늘은 Context API에 대해 알아보겠습니다. [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능입니다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하는데, 꼭 despiteallthat.tistory.com 간단하게나마 다시 언급하자면, Context API는 컴포넌트 트리에서 속성을 전달하지 않고 필요한 데이터를 컴포넌트에 전달하는 방법을 제공하는 API입니다. [ todolist-app에..

오늘은 useReducer를 이용한 todoList를 만들어보겠습니다. 목차 [ useReducer ] useReducer 훅을 사용하는 방법은 다음과 같습니다. // state : 상태 // dispatch : 상태를 변경하는 메서드 // reducer : 새로운 상태를 리턴하는 리듀서 함수 /// initialState : 초기 상태로 지정할 객체 const [state, dispatch] = useReducer(reducer, initialState); useReducer 훅에 리듀서 함수와 초기 상태를 인자로 전달하여 호출하면 상태와 상태 변경을 위해 메시지를 전달할 수 있는 dispatch 함수가 리턴됩니다. dispatch 함수가 미리 정의한 형식의 메시지를 전달하면 상태를 변경하도록 리듀서 ..

SyntheticEvent를 통한 React 이벤트 적용에 대해 알아보겠습니다. 목차 [ Event Argument ] 리액트 이벤트 핸들러 함수에서의 이벤트 아규먼트는 브라우저의 종류와 관계없이 이벤트를 처리할 수 있도록 SyntheticEvent 타입으로 추상화합니다. SyntheticEvent를 기반으로 확장된 다양한 Event 타입은 다음과 같습니다. 각 Event Argument 타입에서 사용할 수 있는 속성은 다음 문서의 타입 정보를 확인하세요. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts GitHub - DefinitelyTyped/DefinitelyTyped: The repo..

PropTypes를 이용하여 리액트 컴포넌트의 유효성을 검증하는 방법에 대해 알아보겠습니다. 목차 [ 속성의 유효성 검증 방법 ] 리액트 컴포넌트의 유효성을 검증하는 방법은 여러 가지가 있습니다만 타입스크립트를 사용한다면 타입스크립트의 정적 타입 지원 기능을 이용할 수 있습니다. 이 방법은 컴파일(빌드) 시에 타입을 검사하며, IDE를 통해서 코드 자동완성 기능을 지원받을 수 있습니다. 또 다른 유효성 검증 기능으로는 PropTypes가 있습니다. PropTypes는 리액트가 지원하는 기능이며, 컴파일할 때가 아닌 실행 중에 속성에 대한 유효성 검증을 수행합니다. 따라서 속성으로 전달하는 값과 타입에 따라 경고를 발생시킵니다. 일반적으로는 타입스크립트의 정적 타입을 이용한 유효성 검증만으로도 충분하지만,..

dangerouslySetInnerHTML에 대해 알아보겠습니다. 다음과 같이 msg에 "Hello World"를 넣고 react를 실행시켰습니다. HTML 삽입 미리보기할 수 없는 소스 출력되는 화면 실행한 서버에서 웹 브라우저의 개발자 도구를 열고 콘솔 화면에서 다음과 같이 스크립트를 실행해 보겠습니다. 브라우저 화면에서 태그의 문자열이 그대로 출력됐습니다. 그 이유는 웹 애플리케이션에서 흔히 발생하는 XSS(Corss Site Scripting) 같은 공격에 대비하기 위해서 가 로 HTML 인코딩 됐기 때문입니다. 만일 HTML 마크업 형태의 값을 보간하려고 한다면 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 dangerouslySetInnerHTML 특성을 사용하는 것입니다. [ d..