반응형 Dev. Yelee ˗ˋˏϟˎˊ˗99 [React] CRA없이 React+ Typescript + Webpack + babel 환경 구성하기 - 2022.06.05 기준 📍 들어가며 CRA로 간단하게 리액트 + 타입 스크립트 프로젝트를 생성할 수 있지만 웹팩과 바벨을 공부할 겸 환경을 직접 구성해보기로 했다 참고로 CRA로 생성된 프로젝트에서 yarn eject (npm run eject) 명령어를 입력하면 숨겨진 웹팩과 바벨 설정이 나타나고 이를 커스터마이징 하는 방법도 있다. 이 글은 2022년 6월 5일에 React 18 + Typescript + Webpack 5 + Babel 7 기준으로 작성되었으며 패키지 매니저는 yarn, IDE는 VSCode를 사용했습니다 1. 프로젝트 초기화 먼저 root 폴더 생성 후 해당 위치에서 아래 명령어로 프로젝트를 초기화시켰다 초기화를 하면 package.json 파일이 생성된다 yarn init -y 2. React 구성하기.. 2022. 6. 5. [ESLint] module is not defined 오류 제거 방법 ESLint가 적용된 타입스크립트 프로젝트를 생성 후 웹팩 환경을 구성하는데 module.export를 하려고 하면 자꾸만 module is not defined라는 오류가 발생했다. 원인 eslint 설정 시 환경(env)에서 node를 설정해주지 않았기 때문. 해결 .eslintrc.json 파일을 열고 node가 true로 되어있지 않거나 없다면 추가해주면 된다! module.exports = { env: { browser: true, es2021: true node: true, // 추가 }, ...code }; 2022. 6. 4. [리액트/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. 이전 1 ··· 8 9 10 11 12 13 14 ··· 25 다음 반응형
