{"id":22234820,"url":"https://github.com/chinsun9/react-banner-maker","last_synced_at":"2025-03-25T09:23:21.260Z","repository":{"id":126361614,"uuid":"303642885","full_name":"chinsun9/react-banner-maker","owner":"chinsun9","description":"🎨 banner maker clone","archived":false,"fork":false,"pushed_at":"2020-10-21T00:06:07.000Z","size":670,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-30T08:43:07.332Z","etag":null,"topics":["banner-maker","clone-coding","react","typesafe-actions","typescript","useeffect"],"latest_commit_sha":null,"homepage":"https://chinsun9.github.io/react-banner-maker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinsun9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-13T08:49:31.000Z","updated_at":"2021-09-20T10:46:52.000Z","dependencies_parsed_at":"2023-06-16T10:31:18.830Z","dependency_job_id":null,"html_url":"https://github.com/chinsun9/react-banner-maker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinsun9%2Freact-banner-maker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinsun9%2Freact-banner-maker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinsun9%2Freact-banner-maker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinsun9%2Freact-banner-maker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinsun9","download_url":"https://codeload.github.com/chinsun9/react-banner-maker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245432495,"owners_count":20614335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["banner-maker","clone-coding","react","typesafe-actions","typescript","useeffect"],"created_at":"2024-12-03T02:09:46.137Z","updated_at":"2025-03-25T09:23:21.253Z","avatar_url":"https://github.com/chinsun9.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-banner-maker\n\n- [Banner Maker](https://banner.godori.dev/)을 보고 만들어 보았습니다.\n- html로만 만든 [html-banner-maker](https://github.com/chinsun9/html-banner-maker)를 리액트를 사용해서 다시 만들어 보았습니다.\n\n## [데모](https://chinsun9.github.io/react-banner-maker/)\n\n[![데모](readmeRes/preview.jpg)](https://chinsun9.github.io/react-banner-maker/)\n\n## 기능\n\n- 캔버스 크기 조절\n- 실시간 캔버스 업데이트\n- 폰트 사이즈 조절\n- 폰트색 조절\n- 캔버스색에 따른 폰트색 자동조절\n- 캔버스색 조절\n- 랜덤 캠버스색\n- 이미지로 다운로드\n- 클립보드로 카피\n- 컬러 히스토리 기능\n- 컬러 히스토리 임포트, 익스포트 기능\n\n\u003chr\u003e\u003chr\u003e\u003chr\u003e\n\n## create-react-app으로 프로젝트 생성\n\n```\nnpx create-react-app . --typescript\nyarn add redux react-redux @types/react-redux\n```\n\n## yarn add typesafe-actions\n\n```cmd cmd\nyarn add typesafe-actions\n```\n\n- typesafe-actions 설치해서 액션과 리듀서 편하게 만들기\n\n## 프로젝트를 진행하면서 겪은 문제들..\n\n### parsing error: cannot read property 'name' of undefined\n\n```ts modules/history/index.ts\nexport { default } from './reducer';\nexport * from './actions';\nexport * from './types';\n```\n\n- 파일 분리를할 때 위 문법에서 lint 오류가 발생한다.\n- 기존 `yarn.lock`파일을 삭제한다.\n\n```json package.json\n  \"devDependencies\": {\n    \"@typescript-eslint/eslint-plugin\": \"^2.23.0\",\n    \"@typescript-eslint/parser\": \"^2.23.0\"\n  },\n```\n\n- 노드모듈 폴더를 삭제한다\n- `npm i`로 다시 노드모듈을 설치한다.\n\n- 나는 ts버전이 3.7이였는데, 이 경우 eslint를 2.23으로 다운그레이드하라고 한다.\n- https://github.com/typescript-eslint/typescript-eslint/issues/1746\n- https://stackoverflow.com/questions/60729199/react-typescript-line-0-parsing-error-cannot-read-property-name-of-undefine\n\n### useEffect 사용해서 Canvas 초기화 및 업데이트 하기\n\n- useEffect를 사용안하니까 처음 웹을 로딩했을때 캔버스 초기화를 못하는 문제가 있엇다.\n\n### Type 'boolean' is not assignable to type 'never'.ts(2322)\n\n```ts Canvas.tsx\n       const offsets = lines\n          .map((_line, index) =\u003e index)\n          .reduce((prev, curr) =\u003e {\n            const subtract = curr - mid;\n            prev.push([subtract \u003c 0, parseInt(subtract.toString(), 10)]);\n            return prev;\n          }, new Array\u003c[boolean, number]\u003e());\n```\n- prev.push 하는 타입에 맞게 배열을 선언해 넣어줘야한다.\n\n### react Object is possibly 'null'. useref\n\n```ts Canvas.tsx\nconst canvas = canvasRef.current;\n\nconst canvas = (canvasRef as any).current;\n```\n\n- 위처럼 하니까 안됬는데, 아래처럼 하니까 됬다.\n\n### reactcss Type '{ position: string; zIndex: string; }' is not assignable to type 'CSSProperties'. Types of property 'position' are incompatible.\n\n```tsx SettingCanvasDetail.tsx\n      popover: {\n        position: 'absolute',\n        zIndex: 3 ,\n      }  as CSSProperties,\n```\n\n- ` as CSSProperties`를 붙여주니까 잘 적용되었다.\n- 또 zIndex의 값은 number로 줘야한다.\n\n### 리액트 타입스크립트에서 프리티어 적용하기\n```json settings.json\n  \"[typescript]\": {\n    \"editor.formatOnSave\": true,\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[typescriptreact]\": {\n    \"editor.formatOnSave\": true,\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n```\n- 저장할때 자동으로 포맷팅할려면 formatOnSave, defaultFormatter를 지정해줘야한다.\n\n### 컬러픽커 알파값 못바꾸는 문제\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinsun9%2Freact-banner-maker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinsun9%2Freact-banner-maker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinsun9%2Freact-banner-maker/lists"}