그럼에도 불구하고

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,..

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

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

connect 고차 함수와 useSelector, useDispatch에 대해 알아보겠습니다. [ 리덕스 컨테이너 컴포넌트 ] Redux 플로우 전체도 Connect Component = Container Component 리덕스 스토어와 연결되는 컴포넌트들은 모두 표현 컴포넌트(presentational component)로 작성할 수 있습니다. react-redux 같은 라이브러리가 리덕스 스토어의 상태를 표현 컴포넌트의 속성으로 전달해 주는 컨테이너 컴포넌트를 손쉽게 작성할 수 있는 리덕스 훅들과 connect()와 같은 고차 함수를 지원하기 때문입니다. 이렇게 작성하면 컴포넌트 트리를 거치면서 반복적, 계층적으로 속성을 전달하지 않아도 됩니다. 그렇다고 모든 표현 컴포넌트에 대해 컨테이너를 만드는..

레이지 로딩에 대해 알아보겠습니다. :) 목차 [ 레이지 로딩 (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..

quill Editor에서 bold 체와 italic 체가 적용 안 되는 에러에 대해 알아보겠습니다. 📌 전체 코드 HTML 삽입 미리보기할 수 없는 소스 📌 quill HTML 삽입 미리보기할 수 없는 소스 결론적으로 text를 작성하는 화면에서는 bold채와 italic 체가 적용되었지만 게시글이 작성된 후에 게시글 리스트에서 보이는 게시글에는 bold 체와 italic 체가 적용되지 않았습니다. 📌 게시글 작성 화면 📌 게시글 리스트 화면 HTML 삽입 미리보기할 수 없는 소스 코드에 아래와 같이 추가하여 해결하였습니다. var bold = Quill.import('formats/bold'); bold.tagName = 'b'; Quill.register(bold, true); var italic ..