728x90 반응형 Frontend23 [ERROR] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component St 오류 내용Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component Stack 경고: 언마운트된 컴포넌트에서 React 상태 업데이트를 수행할 수 없습니다. 이는 아무런 작업을 하지 않지만, 애플리케이션에 메모리 누수가 발생했음을 나타냅니다. 이를 해결하려면, useEffect의 cleanup 함수에서 모든 구독과 비동기 작업을 취.. 2025. 4. 11. 2025년 React 라이브러리 생태계 정리 | Full-Stack React Tech Stack 개요리액트는 2012년에 배포된 이후, 2025년 현재 가장 인기 있는 UI 개발 라이브러리로 자리 잡았다.10년 이상 오랜 기간 동안 사용되면서 React만의 라이브러리 생태계가 형성되었다.이번 포스팅에서는 2025년 대규모 애플리케이션 개발에 필수적인 리액트 라이브러리를 알아보고자 한다. React 라이브러리React 프로젝트 시작하기Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공Next.js :React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원파일 기반 라우팅, API 라우트, 캐싱, React Server Components(RSC) 등 다양한 기능 제공서버 컴포넌트 및 서버 함수.. 2025. 3. 17. React 파일 업로드, 드래그 앤 드랍, 미리보기 기능 구현하기 file 요소란?file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다." data-og-title=" - HTML: Hypertext Markup Language | MDN" data-og-type="website" data-ke-align="al.. 2025. 2. 28. [ERROR] react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 오류 메시지react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 원인value로 받는 타입과 리턴으로 받는 타입이 일치하지 않아서 발생하는 메시지이다.정해진 타입으로 받을 수 있도록 코드를 수정해야 한다.해당 코드const value: string;onChange: (_e: React.ChangeEvent) => void;const handleChange = () => { if (maxLength) { if (value.length > maxLen.. 2024. 9. 19. React 컴포넌트 디자인 패턴 개요2013년 React 출시 이후 2024년까지 다양한 컴포넌트 유형이 등장했다.일부 기술은 더 이상 사용되지 않는(deprecated) 상태가 되었는데, 이는 성능 향상 및 유지 보수성을 위한 React의 발전 과정에서 발생한 변화을 알아볼 수 있다.최근에는 컴포넌트 아키텍처와 디자인 패턴은 Server Components, Server Functions, Server Actions 등을 통해 풀스택 애플리케이션 개발을 혁신되고 있다. 컴포넌트 유형별 디자인 패턴 발전리액트 createClass - deprecated자바스크립트 클래스를 사용하지 않고도, 리액트 클래스 컴포넌트를 생성할 수 있는 팩토리 함수이다.ES5에는 클래스 문법이 없었기에 2015년 ES6가 도입되기 전까지 리액트 표준 컴포넌트.. 2024. 5. 22. 2024년 React 라이브러리 생태계 정리 | Full-Stack React Tech Stack 개요- 리액트는 컴포넌트 기반의 UI 라이브러리이다. 구체적으로 정의하면 함수 컴포넌트 기반으로 state, side effect, optimization을 처리를 하게 도와주는 Virtual DOM 기반의 사용자 인터페이스에 특화되어 있는 라이브러리이다. - 리액트와 리액트 훅등 내장 기능을 통해 애플리케이션을 개발할 수도 있지만, 아마 대부분 개발자들은 원하는 작업을 위한 오픈소스 라이브러리를 같이 사용하여 애플리케이션을 개발하고 있다. 2024년 WEB 생태계 포스팅 바로가기https://sillimmouse.tistory.com/85 리액트 프로젝트를 설정하는 방법HTML 프로젝트 생성 후 직접 도구(webpack, babel 등)을 추가하여 프로젝트 설정create-react-app(cr.. 2024. 5. 16. [ERROR] React Hook names must start with the word 'use' react-hooks/rules-of-hooks 개요ESLint 규칙에서 "plugin:react-hooks/recommended" 을 연결하고 "react-hooks/rules-of-hooks": "error"로 설정시 발생하는 react-hook 오류 메시지을 해결하는 방법react-hooks/rules-of-hooks : 훅을 사용할 때 제약사항을 준수할 것react-hooks/exhaustive-deps : useEffect를 통해 부수 효과를 처리할 때 사용하는 훅경고 메시지1) React Hook 'useDispatch' is called in function 'dispatcher' that is neither a React function component nor a custom React Hook function. React compon.. 2024. 5. 7. [TypeScript] TypeScript 유틸리티 타입 - 6 유틸리티 타입? - 지금까지의 타입 조작기능 (제너릭, 맵드, 조건부 타입 등)을 이용해 실무에서 자주 사용되는 유용한 타입을 모아놓은 기능 - https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 맵드 타입 기반 Partial - 특정 객체 타입의 모든 프로터티를 선택적 프로퍼티로 바꿔주는 타입 // Partial interface Post { title: string; tags: string[]; content: string; thumbnailURL?: strin.. 2024. 4. 19. [TypeScript] TypeScript 타입 조작 기능 - 5 타입 조작이란? - 이미 할당 된 기본 타입, 별칭, 인터페이스 타입들을 새로운 타입으로 변환할 수 있는 타입스크립트 문법 타입 조작 기능 - 제너릭 - 인덱스드 엑세스 타입 - keyof 연산자 - Mapped(맵드) 타입 - 템플릿 리터럴 타입 - 조건부 타입 제너릭 - https://sillimmouse.tistory.com/75 인덱스드 엑세스 타입 - 객체, 배열, 튜플에서 특정 프로퍼티 혹은 요소의 타입을 추출하는 타입 - 대괄호 속에 들어가는 String Literal 타입인 “author” 를 인덱스라고 하며 인덱스를 이용해 특정 타입에 접근하다고 하여 인덱스드 엑세스 타입라고 한다. - 인덱스에는 값이 아니라 타입(기본타입, 리터럴 타입 등)만 가능하다. // 인덱스드 엑세스 타입 // .. 2024. 4. 17. 이전 1 2 3 다음 728x90 반응형
