반응형 Dev. Yelee ˗ˋˏϟˎˊ˗100 [React/Typescript] styled-components로 global style 적용하기 1. 패키지 설치 타입스크립트 이용 시 @types/styled-components도 설치해주세요 yarn add styled-components yarn add -D @types/styled-components 2. global style 파일 생성 저는 루트(/src)디렉토리 하위에 style이라는 폴더를 생성하고 globalStyle.ts라는 파일에 아래 코드를 작성했습니다 import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` // 초기화 코드 `; export default GlobalStyle; 3. global style 적용 index.ts 파일로 돌아와서 global style.. 2022. 6. 10. [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. 이전 1 ··· 8 9 10 11 12 13 14 ··· 25 다음 반응형
