728x90 Frontend29 리액트 컴파일러란? 리액트 컴파일러란?리액트 컴파일러는 빌드 과정에서 사용되는 도구입니다. 리액트 19 프로젝트에서 리액트 도구 생태계가 제공하는 설정 옵션을 사용하여 명시적으로 설정해야 합니다. 리액트 컴파일러 주요 설정 요소바벨 플러그인: 컴파일 과정에서 코드 변환을 돕습니다.ESLint 플러그인: 리액트 규칙 위반을 포착하고 보고하는 데 도움을 줍니다.컴파일러 코어: 코드 분석과 최적화를 수행하는 핵심 컴파일러 로직입니다. 바벨과 ESLint 플러그인 모두 코어 컴파일러 로직을 사용합니다.리액트 컴파일 흐름바벨 플러그인은 컴파일할 함수(컴포넌트 또는 훅)를 식별합니다. 나중에 컴파일 과정에 포함하거나 제외하는 방법을 배우기 위해 몇 가지 설정을 볼 것입니다. 플러그인은 각 함수에 대해 코어 컴파일러 로직을 호출하고 최.. 2025. 4. 17. [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 Router 핵심 개념과 버전 | react-router-dom React RouterReact Router는 React를 위한 다중 전략 라우터입니다.react-router-dom 라이브러리를 통해 React 애플리케이션에서 주로 사용합니다.React 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있습니다. } /> } /> }> } /> } /> } /> } /> } /> React Router 버전별 특징v5 : v4의 안정성을 높힌 버전, v5이상 부터 모던 프론트엔드에 적합한 버전이라고 한다.v6 : 구조적 개선이 진행, v7을 데이터 패칭 강화를 위한 마련한 버전이다.v7 : v6을 유지하면서 성능 및 데이터 패칭을 강화한 버전이다. React Router v4 이하React Router v.. 2024. 8. 22. React 컴포넌트 디자인 패턴 개요2013년 React 출시 이후 2024년까지 다양한 컴포넌트 유형이 등장했다.일부 기술은 더 이상 사용되지 않는(deprecated) 상태가 되었는데, 이는 성능 향상 및 유지 보수성을 위한 React의 발전 과정에서 발생한 변화을 알아볼 수 있다.최근에는 컴포넌트 아키텍처와 디자인 패턴은 Server Components, Server Functions, Server Actions 등을 통해 풀스택 애플리케이션 개발을 혁신되고 있다. 컴포넌트 유형별 디자인 패턴 발전리액트 createClass - deprecated자바스크립트 클래스를 사용하지 않고도, 리액트 클래스 컴포넌트를 생성할 수 있는 팩토리 함수이다.ES5에는 클래스 문법이 없었기에 2015년 ES6가 도입되기 전까지 리액트 표준 컴포넌트.. 2024. 5. 22. React 시각화/차트 라이브러리 추천 데이터 시각화란, 데이터를 선으로 연결하여 시각적으로 표현하는 것을 말한다. 대표적으로 차트. 그래프가 있다. 캔버스 렌더링 한계캔버스 렌더링에서는 beginPath, arc, fill, stroke 등의 메서드와 save, restore 명령어가 반복적으로 호출됩니다.이러한 작업은 메인 스레드에서 실행되므로, 프레임당 수천~수십만 번 호출될 경우 성능 저하가 발생할 수 있습니다.따라서 데이터가 많아질수록 병목 현상이 심해지며, 이를 방지하기 위해 차트 라이브러리를 사용하는 것이 좋습니다. 차트 라이브러리를 왜 사용하나요?차트 라이브러리는 데이터를 시각화하여 사용자가 쉽게 이해할 수 있도록 다양한 그래픽 요소를 제공합니다.이러한 라이브러리들은 보통 SVG(Scalable Vector Graphics).. 2024. 5. 17. 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. 이전 1 2 3 4 다음 728x90
