풀소유

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 RequireAuth 컴포넌트를 사용해 비공개 라우트를 보호하고, Layout 컴포넌트를 통해 공통 레이아웃을 정의한다.useAuth.tsximport type {FC, PropsWithChildren} from "react";import {createContext, useCallback, useContext, useState} from "react";import * as U from "../utils";// L..

react-router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리할 수 있게 도와주는 라이브러리이다.React Router의 주요 기능경로 기반 라우팅: URL 경로에 따라 다른 컴포넌트를 렌더링 한다.네스티드 라우팅: 라우트 안에 라우트를 중첩하여 복잡한 내비게이션을 구현한다.동적 라우팅: URL 매개변수를 사용하여 동적인 콘텐츠를 처리한다.프로그램적 내비게이션: 코드에서 직접 내비게이션을 제어할 수 있다.라우트 보호: 인증 및 권한 관리를 통해 특정 라우트 접근을 제어한다.설치npm i react-router Routes, Route, LinkRoutesRoutes는 React Router v6에서 도입된 새로운 컴포넌트로, 라우트의 집합을 정의하는 역할을 한다. 이전 버전에서는 S..

react-beautiful-dnd는 React 애플리케이션에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 복잡한 드래그 앤 드롭 상호작용을 간단하게 처리할 수 있게 설계되었으며, 높은 유연성과 성능을 제공한다.주요 특징쉬운 사용법: API가 간단하고 직관적이며, 드래그 앤 드롭 기능을 쉽게 추가할 수 있다.성능 최적화: 가상화와 메모이제이션을 통해 높은 성능을 유지하며, 많은 요소를 포함한 리스트에서도 원활한 성능을 보장한다.접근성: 기본적으로 접근성(Accessibility, a11y)을 고려하여 설계되었다.애니메이션: 드래그 및 드롭 동작에 대한 부드러운 애니메이션을 제공한다.설치npm i --legacy-pee-deps react-beautiful-dn..

React에서는 react-dnd 라이브러리를 사용하여 드래그 앤 드롭 기능을 간편하게 구현할 수 있다.설치먼저, react-dnd와 react-dnd-html5-backend를 설치한다. react-dnd-html5-backend는 HTML5의 드래그 앤 드롭 API를 사용하는 기본 백엔드이다.npm i react-dnd react-dnd-html5-backendnpm i -D @types/react-dndReact DnD에서 백엔드는 드래그 앤 드롭 이벤트를 처리하고, 드래그된 아이템의 상태를 관리하는 시스템이다. "백엔드"라는 용어는 여기서 드래그 앤 드롭 기능을 지원하는 '기술적 메커니즘' 또는 '엔진'을 의미한다. 실제 서버 백엔드와 혼동할 수 있지만, 문맥상 이 백엔드는 클라이언트 측에서 동작..

리듀서 함수 몸통에서는 사이드 이펙트를 일으키는 코드를 사용할 수 없다. 그런데 이 점은 리덕스 기능을 사용하는 컴포넌트를 복잡하게 만든다. 리덕스 미들웨어는 리듀서 앞 단에서 부작용이 있는 코드들을 실행하여 얻은 결과를 리듀서 쪽으로 넘겨주는 역할을 한다.dispatch(액션) -> 미들웨어 -> 리듀서 -> 리덕스 저장소 리덕스 미들웨어 타입// 리덕스 미들웨어 타입interface Middleware { (api: MiddlewareAPI): (next: (action: unknown) => unknown) => (action: unknown) => unknown;}// 리덕스 미들웨어 API 타입interface MiddlewareAPI { dispatch: D; getState(..

리듀서 합치기combineReducerscombineReducers() 함수는 여러 리듀서를 통합하여 새로운 리듀서를 만들어 준다. 이 함수는 ReducerMapObject 타입을 매개변수로 받는다. 여기서 타입변수 S는 상태(AppState)를 의미한다.// combineReducers 함수 선언문export function combineReducer(reducers: ReducersMapObject):Reducer>// ReducersMapObject 타입 선언문export type ReducersMapObject = { [Key in keyof State]: Reducer} AppState.ts4개의 멤버 상태로 구성했으므로 각각 처리하는 4개의 리듀서가  필요하다.import * as Clo..

메타는 리액트를 처음 발표할 때 플럭스라고 부르는 앱설계 규격을 함께 발표했다. 플럭스는 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법이다. 이후로 플럭스 설계 규격을 준수하는 오픈소스 라이브러리가 등장했는데, 리덕스는 그중에서 가장 많이 사용되는 패키지이다.리덕스 관련 필수 패키지npm i redux @reduxjs/toolkit react-reduxredux와 @reduxjs/tookit(RTK 패키지) 은 프레임워크와 무관하므로 앵귤러나 뷰에서도 사용할 수 있다. 앱 수준 상태useState 훅은 컴포넌트가 유지해야 할 상태를 관리하는 용도로 사용된다. 그런데 여러 컴포넌트가 상태들을 함께 공유하는 형태로 만들 때가 많은데, 이처럼 앱을 구성하는 모든 컴포넌트가 ..

컨텍스트란?컴포넌트의 속성은 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용되는 메커니즘이다. 그런데 부모 컴포넌트가 직계 자식이 아닌, 손자나 증손자 컴포넌트에 정보를 전달하려고 하면 번거로운 속성 전달을 해야 한다.리액트는 이런 속성 전달의 번거로움을 해소하고자 컨텍스트라는 메커니즘을 구현해놓았다. 리액트나 리액트 네이티브에서 컨텍스트는 createContext와 useContext 훅으로 이뤄진다.컨텍스트 기능을 사용하는 리액트와 리액트 네이티브 코드는 항상 이름에 'Provider'가 있는 컴포넌트와 'use컨텍스트_이름()'형태의 커스텀 훅을 사용한다. 컨텍스트 기능을 구현한 react-native-paper와 같은 패키지 또한 항상 Provider란 이름이 있는 컴포넌트와 ..

자바스크립트의 FileReader 클래스는 웹 애플리케이션에서 파일을 읽을 수 있는 기능을 제공한다. 이 클래스는 파일 시스템에 접근하지 않고도, 사용자가 선택한 파일을 비동기적으로 읽어 들여 다양한 형태로 처리할 수 있게 한다. FileReader는 특히 파일 업로드와 관련된 기능을 구현할 때 유용하다.메서드readAsText(file): 파일을 텍스트로 읽는다.readAsDataURL(file): 파일을 데이터 URL(Base64)로 읽는다.readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽는다.readAsBinaryString(file): 파일을 바이너리 문자열로 읽는다. (비권장)속성result: 파일 읽기가 완료되면 읽은 데이터가 저장된다.onloadstart: 파일 ..

useRef와 useImperativeHandle은 ref라는 속성에 적용하는 값을 만들어 주는 훅이다. 리액트와 리액트 네이티브가 제공하는 컴포넌트는 모두 ref라는 이름의 속성을 가지고 있다.ref 속성이란?Ref는 참조를 의미한다.ref 속성값은 사용자 코드에서 설정하는 것이 아니라, 특정 시점에 React 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이지만, 컴포넌트가 마운트 되는 시점에서 실제 DOM 객체의 값이 된다.HTML 요소들은 자바스크립트에서 DOM 타입 객체이다. 모든 요소는 HTMLElement 타입이며, click(), blur(), focus() 메서드를 제공한다. 이 메서드들은 가상 DOM 상태에서는 호출할 수 없고, 실제 DOM 상태에서만 호출할 수 있다...