react

먼저 3번의 fetch를 받아 올거기 때문에 3개의 배열이 있는 useState 작성 처음 페이지 로드 될떄 fetch useState 안에 작성 copy 라는 변수 생성 후 spread문법을 사용하여 선언한 변수를 넣고 copy[원하는 번쨰] = 원하는 데이터 를 넣고 setCategory(copy) useState 상태값 변경 문법을 사용 하면 배열...

유효성 검사를 만든후 실행하면 name이 공백일떄 자동 포커스

클릭한 버튼만 class 'on' 이추가되고 나머지는 class가 사라지는 버튼을 만들고 싶었다 클릭하면 color 값을 e.target.value로 변경 그리고 color 값과 반복문 해당 순서의 value 값이 맞으면 class를 추가하려고 했는데 안됌 알고보

그리고 파일을 전송할때는

스와이프 링크

리액트의 커스텀 훅은 리액트 훅을 사용하여 만든 사용자 정의 함수입니다. 이러한 함수를 작성하면 컴포넌트 간에 상태 관리나 로직을 재사용할 수 있습니다. 커스텀 훅의 이름은 일반적으로 "use"로 시작하며, 리액트 훅을 사용하여 상태를 관리하거나 부작용을 처리합니다.커

버튼을 누르면 useCartDelete라는 커스텀훅이 실행되어 삭제하는 컴포넌트클릭시 if (buttonRef && buttonRef.current) 조건이 충족되어 handleDelete 이벤트 실행

useReducer는 리액트의 훅 중 하나로, 상태 관리를 위해 사용됩니다. 이 훅은 복잡한 상태 로직을 다루기 위한 대안으로서, 특히 상태가 여러 부분에 걸쳐 변할 때 또는 다양한 액션에 따라 상태를 업데이트할 때 유용합니다.간략하게 말하면, useReducer는 컴

리덕스 <------> react-redux <---------> 리액트리덕스 키워드상태에 변화가 필요할 때 발생시킴 (객체하나로 표현)type을 필수로 그외의 값들은 개발자 마음대로 생성변화를 일으키는 함수현재의 상태와 액션을 참조하여 새로운 상태를 반환

1. 스토어 생성 index.js에 createStore import 후 스토어 생성 그리고 범위 설정 2. 액션 리덕스 모듈(Reducer객체) 생성 reduxCount파일 state생성 후 default 리턴값을 생성 후 action.type값에 따라 다른

import { legacy_createStore as createStore } from 'redux'; //스토어 라이브러리import { Provider } from 'react-redux';function reducer(현재상태, 컴포넌트액션처리변수){return

활용

Chart.js는 데이터를 시각화하기 위한 강력한, 유연한 차트 라이브러리입니다. React 애플리케이션에서 Chart.js를 사용하려면, react-chartjs-2와 chart.js 라이브러리를 함께 사용하는 것이 일반적입니다. react-chartjs-2는 Cha

일반적인 날짜 선택기에서는 사용자가 과거 또는 미래의 어떤 날짜든지 선택할 수 있습니다. 하지만 특정 범위 내의 날짜만 선택하도록 제한하고 싶을 때가 있습니다. 예를 들어, 오늘부터 2주 후까지만 선택할 수 있도록 하고 싶다면, minDate와 maxDate 속성을 사

rc-pagination은 리액트에서 페이지네이션을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. rc-pagination을 사용하여 페이지네이션 컴포넌트를 만들기 위해 필요한 기본 속성은 current, total, pageSize입니다.페이지네이션 상태 관리리액

rc-pagination 기능을 만드는중 다른 탭을 클릭하면 기존 currentpage가 유지되어 데이터 불러오는게 잘못되어 currentpage를 리덕스 툴킷으로 관리해보았습니다.리덕스 툴킷은 리덕스를 더 쉽고 효율적으로 사용하기 위한 도구입니다. 기존의 리덕스 사용

초기 챗봇 메시지 설정, 사용자와의 인터랙션을 위한 버튼 위젯 설정 등 챗봇의 주요 설정을 포함합니다.사용자의 액션에 따라 적절한 함수를 실행하는 버튼들을 생성합니다.likeRanking 액션은 책의 좋아요 순위를 불러오고, 결과를 챗봇에 표시합니다. 오류 발생 시 적

참고 링크 : https://fredrikoseberg.github.io/react-chatbot-kit-docs/npm install react-chatbot-kit챗봇 설정 (config.js 파일)챗봇의 초기 메시지와 기타 설정을 정의합니다:액션 제공자

프로젝트에서 pagenation에 쓰이는 currentpage 를 리덕스 툴킷을 사용했었는데 zustand가 간편하다 해서 간단하게 사용해봤습니다.프로젝트의 src 폴더 안에 store 폴더를 생성하고, 그 안에 currentPageStore.js 파일을 만들었습니다.

웹 애플리케이션에서 사용자가 검색 입력을 하는 경우, 연속적인 입력에 대해 효율적으로 반응하기 위해 디바운싱 기법을 사용할 수 있습니다. 이 글에서는 디바운싱을 구현하는 방법과, 이 과정에서 타이머를 사용하여 검색 로직을 어떻게 최적화할 수 있는지 설명합니다.디바운싱은

첫 번째 단계로, react-date-range 라이브러리와 함께 필요한 CSS 파일을 설치해야 합니다. 이 라이브러리는 리액트 프로젝트에 간편하게 날짜 범위 선택기를 추가할 수 있게 해줍니다. 설치는 npm이나 yarn을 사용하여 수행할 수 있습니다.또한, react

Sentry는 오픈 소스 오류 추적 소프트웨어로, 애플리케이션에서 발생하는 예외나 오류를 실시간으로 모니터링하고 분석하는 데 사용됩니다. 개발자들은 Sentry를 통해 오류를 자동으로 감지하고, 문제의 원인을 신속하게 파악하여 사용자에게 영향을 미치기 전에 수정할 수

useRef는 React 컴포넌트에서 DOM 요소를 직접 접근할 수 있게 해주는 훅입니다. 이를 사용하여 특정 DOM 요소의 참조(ref)를 생성하고, 이를 통해 해당 요소를 직접 조작할 수 있습니다.여기서 HTMLLIElement는 참조될 DOM 요소의 타입을 지정합

React 프로젝트에 TOAST UI Editor를 통합하기 전에, 필요한 npm 패키지들을 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다이 명령어는 TOAST UI Editor의 React 래퍼와 색상 선택 기능을 제공하는 플러그인을 설치합니다. 에디터

이 섹션에서는 Toast UI Editor 내에서 iframe과 div 태그를 처리하기 위해 사용자 정의 HTML 렌더러를 구현합니다. 이 렌더러는 각 HTML 블록의 태그를 개방, 내용 삽입, 종료하는 과정으로 구성됩니다.이 렌더러는 iframe에 유튜브 동영상을 삽

React-Quill은 스타일링을 위해 Quill의 CSS를 필요로 합니다. 이 CSS 파일은 패키지 설치 시 함께 제공되므로, 프로젝트에서 직접 임포트해야 합니다.

React-Quill 에디터의 기능을 확장하기 위해 이미지 드랍 및 이미지 리사이즈 기능을 추가하는 방법을 설명하겠습니다. 이 기능들은 사용자가 텍스트 에디터 내에서 이미지를 더욱 효과적으로 관리할 수 있게 해줍니다.먼저, 이미지 드랍 및 이미지 리사이즈 모듈을 사용하

게시물을 표시하기 위해 ReactQuill 컴포넌트를 사용하되, readOnly 속성을 true로 설정하여 편집을 불가능하게 합니다. 이렇게 설정함으로써 컨텐츠는 오직 읽기만 가능하며, 사용자는 내용을 변경할 수 없습니다.

Quill 에디터에서 이미지 드롭 및 복사 붙여넣기 기능을 구현하기 위해 quill-image-drop-and-paste 라이브러리를 사용하였는데, 기존 이미지 처리 함수는 제대로 작동하지 않았습니다.툴바 버튼을 클릭하여 이미지를 업로드하고 삽입하는 기능입니다. 사용자

zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 할 수 있게 해주는 상태 관리 라이브러리입니다. persist 미들웨어를 사용하면 상태를 브라우저의 스토리지(로컬 스토리지 또는 세션 스토리지)에 저장할 수 있습니다. 이를 통해 페이지를 새로

@hello-pangea/dnd는 모바일 장치에서도 원활하게 작동합니다. 모바일 웹 애플리케이션을 개발할 때 중요한 요구 사항을 충족합니다.다른 드래그 앤 드롭 라이브러리는 React 최신 버전이나 React.StrictMode와 호환되지 않는 경우가 많지만, @hel

throttle 을 사용하는 이유는 웹 애플리케이션에서 스크롤 이벤트를 처리할 때 자주 겪는 문제 중 하나는 이벤트가 너무 자주 발생한다는 것, 작은 스크롤 동작만으로도 수많은 이벤트가 트리거되기 때문에, API 호출이나 UI 업데이트와 같은 무거운 작업을 수행할 경우