반응형 📍 Front-End72 [Typescript] Attempted import error: 'createGlobalStyle' is not exported from 'styled-components' 타입스크립트 기반 리액트 프로젝트에서 createGlobalStyle이 안 불러와질 때 문제 타입스크립트 프로젝트에서 styled-compontents를 쓰기 위해 아래와 같이 공식 문서에 나와 있는 대로 styled-components를 설치했다 npm install --save styled-components //or yarn install styled-components 그리고 global style을 적용하기 위해 createGlobalStlye을 불러왔다 import { createGlobalStyle } from 'styled-components'; 그리고 맞이한 에러.. ^^ 불러올 수가 없다니. 근데 친절하게 해결법도 알려준다! 해결 @types/styed-components를 설치하면 된.. 2022. 6. 11. [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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음 반응형
