react14 Exported variable has or is using name from external module but cannot be named 에러 타입스크립트로 컴파일을 하다가, styled css 쪽에서 에러가 났습니다. Item은 EffectedItem을 상속받고 있는데, export const Item = styled(EffectedItem)` text-align: center; `; EffectedItem의 props의 타입이 export 되지 않아 생긴 에러였습니다. import { useTheme } from "@emotion/react"; import { forwardRef, useCallback } from "react"; import { ListItemDefaultProps, ListItemForwardedRef, } from "../../../types/props"; import { rippleEffect } from "../.... 2022. 10. 4. [React] Material UI의 TextField 만들어보기 워낙 유명한 MUI의 TextField 컴포넌트다. 깔끔하고 직관적이다. 번잡하지 않은 애니메이션으로 UX도 상당히 좋다고 생각한다. css만으로 해당 컴포넌트를 만들어보자. 구조는 아래처럼 input 태그와 label 태그를 감싸는 컨테이너 div 태그하나로 구성하였다. //TextField.tsx import { useState } from "react"; import "./style.css"; interface TextFieldProps { label: string; } const TextField = (props: TextFieldProps) => { const { label } = props; const [value, setValue] = useState(""); return ( setValue.. 2022. 9. 4. [React/Typescript] CSS Property를 Props로 사용하는 법 컴포넌트를 만들 때, CSS Property 값을 Props로 받고 싶을 때가 있다. style 자체를 넘겨받고 싶을 땐, React에서 제공해주는 React.CSSProperties 타입을 사용하면 된다. interface TestProps { style: React.CSSProperties; } const Test = (props: TestProps) => { return ; }; export default Test; 하지만 css property 중 하나의 값을 프롭으로 받고 싶다면 어떻게 해야 할까? csstype 모듈에서 StandardProperties를 import해서 원하는 css property를 키값으로 넣어주면 된다. import type { Properties } from "csst.. 2022. 8. 22. [React] Jest SyntaxError: Cannot use import statement outside a module TDD를 공부하기 위해 Jest를 설치하고... //jest.setup.js import "@testing-library/jest-dom"; react testing library를 사용하기 위해 jest.setup.js 파일을 생성하고 test를 실행하는데 에러가 발생했다. 공식문서와 스택오버플로우를 돌아다니며 설정 프로퍼티에 대한 설명을 읽고 아래와 같이 다 세팅했음에도 SyntaxError: Cannot use import statement outside a module 에러가 자꾸 발생했는데... //babel.config.js module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/.. 2022. 8. 16. 이전 1 2 3 4 다음
