https://github.com/chinsun9/react-banner-maker

🎨 banner maker clone
https://github.com/chinsun9/react-banner-maker

banner-maker clone-coding react typesafe-actions typescript useeffect

Last synced: about 1 year ago
JSON representation

🎨 banner maker clone

• Host: GitHub
• URL: https://github.com/chinsun9/react-banner-maker
• Owner: chinsun9
• Created: 2020-10-13T08:49:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-21T00:06:07.000Z (over 5 years ago)
• Last Synced: 2025-01-30T08:43:07.332Z (over 1 year ago)
• Topics: banner-maker, clone-coding, react, typesafe-actions, typescript, useeffect
• Language: TypeScript
• Homepage: https://chinsun9.github.io/react-banner-maker/
• Size: 654 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-banner-maker

- [Banner Maker](https://banner.godori.dev/)을 보고 만들어 보았습니다.

- html로만 만든 [html-banner-maker](https://github.com/chinsun9/html-banner-maker)를 리액트를 사용해서 다시 만들어 보았습니다.

## [데모](https://chinsun9.github.io/react-banner-maker/)

[![데모](readmeRes/preview.jpg)](https://chinsun9.github.io/react-banner-maker/)

## 기능

- 캔버스 크기 조절

- 실시간 캔버스 업데이트

- 폰트 사이즈 조절

- 폰트색 조절

- 캔버스색에 따른 폰트색 자동조절

- 캔버스색 조절

- 랜덤 캠버스색

- 이미지로 다운로드

- 클립보드로 카피

- 컬러 히스토리 기능

- 컬러 히스토리 임포트, 익스포트 기능



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

```

npx create-react-app . --typescript

yarn add redux react-redux @types/react-redux

```

## yarn add typesafe-actions

```cmd cmd

yarn add typesafe-actions

```

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

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

### parsing error: cannot read property 'name' of undefined

```ts modules/history/index.ts

export { default } from './reducer';

export * from './actions';

export * from './types';

```

- 파일 분리를할 때 위 문법에서 lint 오류가 발생한다.

- 기존 `yarn.lock`파일을 삭제한다.

```json package.json

  "devDependencies": {

    "@typescript-eslint/eslint-plugin": "^2.23.0",

    "@typescript-eslint/parser": "^2.23.0"

  },

```

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

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

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

- https://github.com/typescript-eslint/typescript-eslint/issues/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)

```ts Canvas.tsx

       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

```ts Canvas.tsx

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.

```tsx SettingCanvasDetail.tsx

      popover: {

        position: 'absolute',

        zIndex: 3 ,

      }  as CSSProperties,

```

- ` as CSSProperties`를 붙여주니까 잘 적용되었다.

- 또 zIndex의 값은 number로 줘야한다.

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

```json settings.json

  "[typescript]": {

    "editor.formatOnSave": true,

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[typescriptreact]": {

    "editor.formatOnSave": true,

    "editor.defaultFormatter": "esbenp.prettier-vscode"

```

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

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