본문 바로가기
728x90

frontend/React12

[React] 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] react-router-dom이란, Hooks(useLocation) 타입 속성, V5 -> V6 마이그레이션 가이드 react-router-domReact 애플리케이션에서 주로 SPA(Single Page Application)을 구현하기 위한 라이브러리애플리케이션 내에서 URL 경로와 해당 경로에 렌더링할 컴포넌트를 매핑하여, 페이지를 새로고침하지 않고도 다른 화면을 보여줄 수 있게 해준다. 주요 컴포넌트BrowserRouter: HTML5의 History API를 사용하여 URL을 관리하는 라우터입니다.Routes: Route들을 래핑하여 경로와 해당 경로에 매핑되는 컴포넌트를 정의합니다.Route: 특정 경로에 대해 렌더링할 컴포넌트를 정의합니다.Link: 사용자가 클릭할 수 있는 링크를 제공합니다. 이 링크를 클릭하면 페이지가 새로 고침 없이 변경됩니다. 마이그레이션 준비1. 개발 환경Node.js 12.2.0.. 2024. 8. 22.
[React] React 컴포넌트 유형과 디자인 패턴 개요2013년 리액트가 출시된 후 2024년 까지 다양한 유형의 컴포넌트가 등장해왔다.그 중 일부는 deprecated 기술이 되었지만, 왜 이전 기술이 사용하지 않게 되었는지, 최신 컴포넌트와 패턴은 무엇인지 알아보자 컴포넌트 유형과 패턴리액트 createClass - deprecated리액트 믹스인 (패턴) - deprecated리액트 클래스 컴포넌트 - 권장하지 않음리액트 고차 컴포넌트 (패턴) - 권장하지 않음리액트 함수 컴포넌트Presentational & Container Component (패턴)Custom Hook (패턴)Atomic Design (패턴)View Asset Component (패턴)리액트 서버 컴포넌트비동기 컴포넌트 리액트 createClass자바스크립트 클래스를 사용하지 .. 2024. 5. 22.
[React] 리액트 시각화, 차트 라이브러리 추천 및 비교 분석 - HTML5 캔버스, SVG 개요차트 라이브러리는 데이터를 시각화하여 사용자가 쉽게 이해할 수 있도록 다양한 그래픽 요소를 제공합니다.이러한 라이브러리들은 보통 SVG(Scalable Vector Graphics)와 Canvas를 사용하여 차트를 렌더링합니다.두 가지 방법은 각기 장단점이 있기 때문에, 필요에 따라 적절한 방식을 선택하는 것이 중요합니다.물론, 이러한 작업을 직접 하지 않고도 아름답고 고성능의 차트를 만들고 싶다면 Charts 라이브러리를 사용하는 방법도 고려해보세요! 데이터 시각화란, 데이터를 선으로 연결하여 시각적으로 표현하는 것을 말한다. 대표적으로 차트. 그래프가 있다. HTML5 캔버스 작동 방식1. 에 그림을 그리려면 렌더링 컨텍스트에 접근해야 합니다.2. 2D 컨텍스트에 접근한 후에는 다양한 메서드를 사.. 2024. 5. 17.
[React] 2024 리액트 생태계 정리(라이브러리, 프레임워크 기능별 분류) 개요- 리액트는 컴포넌트 기반의 UI 라이브러리이다. 구체적으로 정의하면 함수 컴포넌트 기반으로 state, side effect, optimization을 처리를 하게 도와주는 Virtual DOM 기반의 사용자 인터페이스에 특화되어 있는 라이브러리이다. - 리액트와 리액트 훅등 내장 기능을 통해 애플리케이션을 개발할 수도 있지만, 아마 대부분 개발자들은 원하는 작업을 위한 오픈소스 라이브러리를 같이 사용하여 애플리케이션을 개발하고 있다.   2024년 WEB 생태계 포스팅 바로가기https://sillimmouse.tistory.com/85   리액트 프로젝트를 설정하는 방법HTML 프로젝트 생성 후 직접 도구(webpack, babel 등)을 추가하여 프로젝트 설정create-react-app(cr.. 2024. 5. 16.
[React] ERROR - create-react-app / 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] React이란?, React 기본 개념 - Component, JSX(Javascript + xml), Virtual DOMLifeCycle(render), state, props, SPA, CSR, Hooks, Event React이란?프로젝트 규모가 커지고, 다양한 유저 인터렉션이 전달되면서 DOM요소의 변화가 많아지게 되면서 DOM 요소의 변화를 개발자가 직접 관리하는 어려움을 개선하기 위해 DOM 관리와 상태 변화 관리를 최소화하고, 개발자 오직 기능 개발, 사용자 인터페이스에 더 집중할수 있게 만들어진 프론트앤드 라이브러리, 프레임워크중 하나 이다.리액트에서는 컴포넌트 단위로 작성하여 하나의 컴포넌트를 여러 부분에서 재사용하여 생산성과 유지보수에 좋다.Virtual DOM을 사용하여 렌더링 효율성이 높다. React가 인기있는 이유는 무엇일까?기술 쏠림 현상을 가지고 있는 대한민국 IT문화상 Virtual DOM을 토대로한 장점으로 초기 독점을 하였고, 현재까지 유지되어 사용율 1위를 차지하고 있다.2024년 기준.. 2024. 4. 5.
[React] ERROR - create-next-app / Cannot find module 'stream/promises' 오류 메시지- Cannot find module 'stream/promises'- 'stream/promise' 모듈의 경로를 확인할 수 없습니다. 오류 화면 오류 원인- 프로젝트를 생성하면서 작성되는 import 식에서 해당 모듈을 가져오지 못해서 발생한다.- node:stream/promises>=15.x 해당 모듈은 노드 버전이 15이상만 지원되기 때문에 노드 버전 업이 필요하다. 해결 방법- nvm 을 사용한다면 노드 버전 15이상을 설치한 뒤 변경한다.- 노드 버전은 메이저 버전을 짝수로 사용하는 것을 권장한다.- 나는 10버전으로 셋팅 되어 있었고 18버전으로 변경해 주었다.nvm install 18.19.0nvm use 18.19.0 결과 2024. 3. 27.
[React] 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.
728x90

티스토리툴바