세줄코딩

React 에서 emotion 사용시 Unknown property 'css' found 라는 에러가 발생할 때가 있다. 결론은 아래 코드를 .eslintrc.json 에 추가해 두면 된다. { "rules": { "react/no-unknown-property": ["error", { "ignore": ["css"] }] } } 아래 링크에서 해당 내용을 확인 할 수 있다. https://emotion.sh/docs/eslint-plugin-react Emotion – eslint-plugin-react The react/no-unknown-property rule from eslint-plugin-react will produce an error if the css prop is passed to a..

storybook 에 @emotion/babel-preset-css-prop 설정 ( storybook + ts + emotion 환경 ) storybook 에서 컴포넌트를 추가하고 작업하는데 흠 잘 되긴 하는데 소스에 emotion 의 style컴포넌트 명이 입력이 되지를 않고 심지어 실행도 제대로 되지 않는 모양새가 펼쳐지고 있었다. styled 컴포넌트 명이 입력된 상태. styled 컴포넌트 명이 입력이 되지 않고 emotion 의 css 및 styled 가 실행되지 않은 상태. 참고로 span 태그에 입력된 영어를 해석해 보면 `css` 함수에서 반환된 개체를 문자열화하려고 했습니다. 직접 사용해서는 안되며(예: `className` prop의 값으로), emotion 에 전달되어 처리할 수 있..

[ESLintError: [eslint] src/stories/Page.tsx Line 39:13: `"` can be escaped with `"`, `“`, `"`, `”` react/no-unescaped-entities eslint 에서 error 나는 거니 해당 부분을 일단 꺼두면 될거 같아 해보니 잘 된다. .eslintrc.json 의 rules 부분에 아래 react/no-unescaped-entities 부분을 추가해 주면 된다. { "rules": { .......중략............. "react/no-unescaped-entities": 0 } }

storybook + ts+ emotion + storybook 설정 - SassError: SassError: expected "{". storybook 설정하는데 있어서 엄청 삽질을 해서 기록해 두려한다. -------------- 설치된 환경 - 기타 다른 패키지도 많이 설치 되었지만 필수적으로 필요한 것만 나열했다. @craco/craco ( Create-React-App Configuration Override ) - CRA에 config 설정 덮어쓰기 위한 패키지 craco-alias ( 경로 축약을 위한 즉 alias 설정 ../ 를 @ 같은 것으로~) craco-sass-resources-loader ( craco 패키지에 scss 파일 로드를 위한 로더 ) @emotion/react @e..

inter 키워드 Typescript 에서 inter 키워드라는 게 있다. 이게 생각보다 명확하게 이해가 안가서 꽤나 오랫동안 살펴보기도 했다. 요지는 inter 키워드는 조건부 타입이라는 것이다. 아래 URL 에서 해당 내용에 대한 설명을 볼 수 있다. https://typescript-kr.github.io/pages/advanced-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 내용을 보면 조건부 타입의 타입 추론 (Type inference in conditional types) 조건부 타입의 extends 절 안에서, 이제 추론 될 타입 변수를 도입하는 infer 선언을 가지는 것이 가능합니다. 이렇게 추론된..

JSX.IntrinsicElements 이란 React + TS. 형태로 코딩 중에 있는데 간혹 IntrinsicElements & 어쩌구 에러가 발생하곤 했다. 대부분 컴포넌트 네임의 첫문자를 대문자로 하지 않거나 Props 부분에 없는 속성 값을 호출 하거나 하면 발생하는 게 대부분이였다. 근데 IntrinsicElements 얘는 대체 머지???? 나도 좀 헷갈리는 부분이긴 하지만 머 어찌되었건 웹스톰에서 cmd+클릭하면 해당 부분 클래스나 인터페이스 선언된 부분으로 찾아들어가 볼 수 있다. 해서 바로 들어가 봤더니 두둥!!! 아래와 같이 선언되어 있었다. declare namespace JSX { interface IntrinsicElements { ......중략....... a: React.D..

forwardRef 관련 Component definition is missing display name(react/display-name) 에러 React.forwardRef((props, ref) ... ) forwardRef 역활 React.forwardRef 는 렌더링에 사용될 함수를 인자로 받는데 React는 이 함수를 두 개 인자 props와 ref를 사용하여 호출하고, 이 함수는 React 노드를 반환. 하는 게 주요 맹점이다. React 를 사용하다보면 ref 를 자식 컴포넌트에 넘겨서, 그 내부 HTML 엘리먼트에 접근할 수 있게 해줘야하는 경우가 발생. 이때 사용하게 되는 것이 React.forwardRef 타입스크립트를 사용하지 않는 경우 위 방법은 정상적으로 동작. 하지만, 타입스크..

React + Typescript Error 사항들 1. 'React' must be in scope when using JSX react/react-in-jsx-scope React를 import 해서 쓸 일이 없는 코드라고 할 지라도 확장자가 .tsx 이고 또 컴포넌트 태그를 리턴하거나 하면 반드시 상단에 import React from 'react'; 라고 선언해 두어야 한다. React 를 import 해두지 않으면 babel은 JSX를 구문 분석하고 JavaScript로 변환하는 방법을 알지 못하기 때문이다. https://stackoverflow.com/questions/56562685/react-must-be-in-scope-when-using-jsx-error-in-routes-js-fil..