본문 바로가기
반응형

react5

[React] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. \*.tsx 파일은 \*.ts 로 변경하면서 생긴 에러... 또는 import 할 때 { \*\*\* } 때문일 수도 있으니 import 할 때도 주의깊게 확인할 것! [정리] 해당 에러는 componen.. 2022. 9. 30.
에러메시지 error: Command failed with exit code 1 프로젝트 시작시 발생한 에러 error: Command failed with exit code 1 1. yarn 으로 생성된 node_modules, yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 2. yarn 공유 캐시 파일 지우기 yarn cache clean 3. yarn 재설치 후 시작하기 yarn yarn start or 1. yarn 업데이트 후 yarn 시작하기 yarn update yarn start 2022. 3. 28.
React-query 시작하기 새 프로젝트에 React에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 React-query를 사용하기로 결정이 났다 그래서 React-query를 공부하면서 블로그에 끄적여본다 개요 React Query는 종종 누락된 데이터 가져오는 라이브러리로 설명되지만, 보다 기술적인 용어로 말하면 React 애플리케이션에서 fetching(가져오기), caching(캐싱), synchronizing and updating server state(동기화 및 서버상태 업데이트)를 수행한다 기본 코드 import { QueryClient, QueryClientProvider, useQuery } from 'react-query' const queryClient = new QueryClient() export defa.. 2022. 3. 16.
React-Admin 리스트에 검색 및 필터 추가하기 Post List에 검색 및 필터를 추가해보겠다 먼저 PostFilter 컴포넌트를 추가한다 그리고 PostList 컴포넌트의 List에 filters 속성을 추가해준다 // in src/posts.tsx const PostFilter = (props) => { return ( ) } export const PostList = (props) => { return ( // ... ) } PostFilter 컴포넌트에서 의 source="q"는 JSONPlaceholder가 제공하는 전체 텍스트 활용을 말한다 alwaysOn는 항상 화면에 나타나도록 설정하는 속성이다 그리고 PostList 컴포넌트의 List에 filters를 추가하면 ADD FILTER 버튼이 생성된다 ADD FILTER 버튼을 클릭하면 .. 2020. 4. 23.
React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app test-admin cd test-admin/ yarn add react-admin ra-data-json-server prop-types yarn start http://localhost:3000/ 에는 아래 화면처럼 나올 것이다 React-admin를 사용하기 위해서는 생성, 검색, 업데이트 및 삭제 (CRUD) 할 수 있어야 한다 그래서 JSONPlaceholder에서 예시용으로 제공해주는 샘플 더미 API를 이용해 연습해 볼 것이다 .. 2020. 4. 21.
반응형