- Banner Maker을 보고 만들어 보았습니다.
- html로만 만든 html-banner-maker를 리액트를 사용해서 다시 만들어 보았습니다.
- 캔버스 크기 조절
- 실시간 캔버스 업데이트
- 폰트 사이즈 조절
- 폰트색 조절
- 캔버스색에 따른 폰트색 자동조절
- 캔버스색 조절
- 랜덤 캠버스색
- 이미지로 다운로드
- 클립보드로 카피
- 컬러 히스토리 기능
- 컬러 히스토리 임포트, 익스포트 기능
npx create-react-app . --typescript
yarn add redux react-redux @types/react-redux
yarn add typesafe-actions- typesafe-actions 설치해서 액션과 리듀서 편하게 만들기
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으로 다운그레이드하라고 한다.
- useEffect를 사용안하니까 처음 웹을 로딩했을때 캔버스 초기화를 못하는 문제가 있엇다.
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 하는 타입에 맞게 배열을 선언해 넣어줘야한다.
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를 지정해줘야한다.