728x90 반응형 Frontend/React12 [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] Create React App requires Node 14 or higher.Please update your version of Node. 오류 내용Create React App requires Node 14 or higher.Please update your version of Node. 오류 화면 오류 확인 결과- 24-04-08기준 create-react-app은 node 14버전 이상 시 프로젝트 생성이 가능하다.특정 npm 라이브러리 중 14이상이 필요한 라이브러리가 있다고 생각하면 된다.- nvm 을 사용해서 14버전 이상으로 로컨 노드 버전을 설정해주면 된다. 결과 2024. 4. 8. React 컴포넌트 생명주기, 렌더링 | LifeCycle(render) 개요React는 상태가 변경될 때마다 전체 UI를 Virtual DOM에 렌더링한다.React의 Reconciliation 알고리즘이 Virtual DOM과 실제 DOM 간의 차이를 비교하여 필요한 부분만 실제 DOM에 업데이트합니다. 리액트 생명주기 메서드생명주기 메서드에는 componentDidMount, componentDidUpdate, componentWillUnmount가 포함됩니다. 이러한 메서드를 사용하면 컴포넌트의 생명주기 특정 시점에 코드를 실행할 수 있습니다. 리액트 생명주기1. 초기 렌더링초기 렌더링은 컴포넌트가 처음 DOM에 삽입될 때 발생하며, 이후 상태나 속성이 변경될 때마다 업데이트 렌더링이 이루어진다.constructor(): 컴포넌트 인스턴스가 생성되고 초기 state가.. 2024. 4. 5. React 버전 정책 및 주버전(V16, 17, 18, 19) 특징 주의해당 문서는 React 18에 대해 설명하고 있습니다. React 17은 아래를 살펴봐 주세요. https://17.reactjs.org. 개요2022-03-29에 React 18 버전(18.0.0)이 처음 배포되었습니다. 2024-04-25에 18.3.0이 출시되기까지 약 2년 동안 18.2.0이 최신 버전으로 유지되었습니다.이후 18.2.0과 동일한 기능을 유지하면서도 React 19에 맞는 변경 사항이 추가된 버전 18.3.0이 배포 2024-12-05에 React 19(19.0)가 정식 배포되었습니다.이제 최신 버전과 가장 많이 사용되는 버전을 확인하고, 버전별 변경 사항을 살펴보는 시간을 가지려고 합니다. 리액트 변경 로그https://github.com/facebook/react/bl.. 2024. 2. 2. 이전 1 2 다음 728x90 반응형
