react-banner-maker

• Banner Maker을 보고 만들어 보았습니다.
• html로만 만든 html-banner-maker를 리액트를 사용해서 다시 만들어 보았습니다.

데모

기능

• 캔버스 크기 조절
• 실시간 캔버스 업데이트
• 폰트 사이즈 조절
• 폰트색 조절
• 캔버스색에 따른 폰트색 자동조절
• 캔버스색 조절
• 랜덤 캠버스색
• 이미지로 다운로드
• 클립보드로 카피
• 컬러 히스토리 기능
• 컬러 히스토리 임포트, 익스포트 기능

---

---

---

create-react-app으로 프로젝트 생성

npx create-react-app . --typescript
yarn add redux react-redux @types/react-redux

yarn add typesafe-actions

yarn add typesafe-actions

• typesafe-actions 설치해서 액션과 리듀서 편하게 만들기

프로젝트를 진행하면서 겪은 문제들..

parsing error: cannot read property 'name' of undefined

export { default } from './reducer';
export * from './actions';
export * from './types';

• 파일 분리를할 때 위 문법에서 lint 오류가 발생한다.
• 기존 yarn.lock파일을 삭제한다.

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.23.0",
    "@typescript-eslint/parser": "^2.23.0"
  },

• 노드모듈 폴더를 삭제한다

• npm i로 다시 노드모듈을 설치한다.

• 나는 ts버전이 3.7이였는데, 이 경우 eslint를 2.23으로 다운그레이드하라고 한다.

• typescript-eslint/typescript-eslint#1746

• https://stackoverflow.com/questions/60729199/react-typescript-line-0-parsing-error-cannot-read-property-name-of-undefine

useEffect 사용해서 Canvas 초기화 및 업데이트 하기

• useEffect를 사용안하니까 처음 웹을 로딩했을때 캔버스 초기화를 못하는 문제가 있엇다.

Type 'boolean' is not assignable to type 'never'.ts(2322)

       const offsets = lines
          .map((_line, index) => index)
          .reduce((prev, curr) => {
            const subtract = curr - mid;
            prev.push([subtract < 0, parseInt(subtract.toString(), 10)]);
            return prev;
          }, new Array<[boolean, number]>());

• prev.push 하는 타입에 맞게 배열을 선언해 넣어줘야한다.

react Object is possibly 'null'. useref

const canvas = canvasRef.current;

const canvas = (canvasRef as any).current;

• 위처럼 하니까 안됬는데, 아래처럼 하니까 됬다.

reactcss Type '{ position: string; zIndex: string; }' is not assignable to type 'CSSProperties'. Types of property 'position' are incompatible.

      popover: {
        position: 'absolute',
        zIndex: 3 ,
      }  as CSSProperties,

• as CSSProperties를 붙여주니까 잘 적용되었다.
• 또 zIndex의 값은 number로 줘야한다.

리액트 타입스크립트에서 프리티어 적용하기

  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"

• 저장할때 자동으로 포맷팅할려면 formatOnSave, defaultFormatter를 지정해줘야한다.

컬러픽커 알파값 못바꾸는 문제