반응형 📍 Front-End72 [리액트/React] Module not found: Can't resolve 'swiper/react' (Swiper 안될때) yarn으로 swiper를 설치하고 yarn add swiper swiper를 불러왔는데 import { Swiper } from 'swiper/react'; swiper가 안 불러와지고 아래와 같은 에러가 발생했다 Module not found: Can't resolve 'swiper/react' 1. 원인 현재 Swiper의 가장 최신 버전은 v8.1.6이고 공식 문서를 살펴보니 CRA는 아직 pure ESM을 지원하지 않고 v7.2.0에서 사용할 수 있다 2. 해결법 해결 방법에는 두 가지가 있다. 첫 번째 방법은 가장 최신 버전인 v.8.x.x을 사용하고 싶으면 Swiper를 사용할 때 직접 파일을 가져온다 import { Swiper, SwiperSlide } from 'swiper/reac.. 2022. 5. 30. React + Typescript + ESLint + prettier 환경 구성하기 (2022. 5. 29 기준) 📍 패키지 매니저로 yarn을 이용했습니다. 📍 Mac OS 기반으로 설치한 가이드입니다. 1. 프로젝트 생성 yarn create react-app template --template typescript // yarn create react-app ${프로젝트명} --template typescript --template typescript : typescript 모드로 프로젝트를 생성해준다는 명령어 옵션입니다! 2. ESLint 설치 yarn add -D eslint 3. ESLint의 config 파일을 초기화 $ yarn eslint --init You can also run this command directly using 'npm init @eslint/config'. Need to inst.. 2022. 5. 29. [React/리액트] Fragment(<></>)에 key 추가하기 (불필요한 element 생성을 막자!) 리액트에서 혹은 축약형인 를 사용할 때가 있다. 이 fragment는 불필요한 element를 생성하지 않아도 된다는 장점이 있지만 배열 렌더링을 할 때 key 값을 추가할 수 없다는 단점이 있다. 그래서 보통 태그를 감싸서 key값을 주곤 했는데 괜히 불필요한 element를 생성하는 것 같아 느낌적인 느낌으로다가,, 기분이 별로 좋지가 않았음 그래서 해결 방법을 찾아본 결과! 예제 {options.map(item => {item.isborder && } {item.label} , )} 위 방법 처럼 사용하게 되면 fragment에 key 값을 추가할 수 없다. div 태그로 감싸 key값을 주는 방법도 있지만 불필요한 div가 생성된다 해결 {options.map(item => [ item.isbor.. 2022. 5. 24. [React Error/리액트 에러] Attempted import error: 'useHistory' is not exported from 'react-router'. 회사에서 작업 중이던 프로젝트에서 패키지 이것저것 업데이트하다가 완전히 꼬여버렸다 node-modules를 삭제하고 yarn cache clean을 해봤지만 아래와 같이 react-router에서 Attempted import error가 떴다 발생 에러 Attempted import error: 'useHistory' is not exported from 'react-router'. 원인. 예~~ 전에 react-router v3를 사용하다가 중간에 react-router-dom v5.2.0으로 업데이트를 했는지 일부에서는 useHistory를 'react-router'에서 import 해왔고 또 일부에서는 'react-router-dom'에서 import를 해왔다 (내 잘못 아님,,ㅠ 누군가 짜 놓은.. 2022. 5. 11. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음 반응형
