[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..
CRA 로 리엑트 작업중에 interface 를 export 선언하자 아래와 같은 에러 발생. Re-exporting a type when the '-isolatedModules' flag is provided requires using 'export type'. 우선 컴파일 옵션이 가물가물하여 --isolatedModules 을 찾아보았다. --isolatedModules : 추가 검사를 수행하여 별도의 컴파일 (예를 들어 트랜스파일된 모듈 혹은 @babel/plugin-transform-typescript) 이 안전한지 확인합니다. 옵션 타입 기본값 --isolatedModules boolean false 라고 한다.. 그리고 TS 버전을 찾아보니 3.8 부터는 type-only imports와 ex..
forEach ( javascript 반복문 ) forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) forEach 에서 처리 되는 매개변수 - callback 각 요소에 대해 실행할 함수. 그리고 아래는 callback 함수에서 세 가지 매개변수를 받는다. 1. currentValue : 처리할 현재 요소. 2. index : 배열 인덱스. 옵셔널 처리 되어 있기에 선언 안해도 된다. 3. array : forEach()를 호출한 배열. 옵셔널 처리 되어 있기에 선언 안해도..
- Total
- Today
- Yesterday
- JsDoc
- 아이콘 폰트 만들기
- 반복문
- 내장요소
- react-router-dom
- RefreshToken
- cordova
- 리프래시토큰
- 코도바
- 태그
- git
- icon font
- interceptors
- Intrinsic
- svg모션
- vue-router
- Angular
- 앵귤러
- git checkout -b
- Vue3
- IntrinsicElements
- 자바스크립트
- for of 구문
- CSS
- react
- React.StrictMode
- Aptana
- svg 폰트
- anime.js
- svg icon font
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |