{"id":15663628,"url":"https://github.com/dl0312/react-typescript-boilerplate","last_synced_at":"2025-05-06T18:15:39.923Z","repository":{"id":93729162,"uuid":"171441547","full_name":"dl0312/react-typescript-boilerplate","owner":"dl0312","description":"👶 타입스크립트와 함께 리액트 앱을 만들기 위한 최고의 방법!","archived":false,"fork":false,"pushed_at":"2021-09-16T14:55:06.000Z","size":721,"stargazers_count":18,"open_issues_count":2,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-31T01:41:17.363Z","etag":null,"topics":["boilerplate","create-react-app-typescript","react","redux","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","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/dl0312.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":"2019-02-19T09:07:05.000Z","updated_at":"2024-06-20T06:39:08.000Z","dependencies_parsed_at":"2023-04-04T15:02:15.415Z","dependency_job_id":null,"html_url":"https://github.com/dl0312/react-typescript-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Freact-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Freact-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Freact-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2Freact-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dl0312","download_url":"https://codeload.github.com/dl0312/react-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252741475,"owners_count":21797027,"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":["boilerplate","create-react-app-typescript","react","redux","styled-components","typescript"],"created_at":"2024-10-03T13:38:57.618Z","updated_at":"2025-05-06T18:15:39.899Z","avatar_url":"https://github.com/dl0312.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌌 Frontend Boilerplate with React, TypeScript\n\n리액트 앱을 처음부터 만들기 위한 최고의 방법!\n\n## 👀 라이브러리\n\n| 라이브러리               | 버전       |\n| ------------------------ | ---------- |\n| react (with 🎣**Hooks**) | **^16.11** |\n| react-dom                | **^16.11** |\n| react-router             | **^5.1**   |\n| react-scripts            | **3.3**    |\n| styled-components        | **^4.4**   |\n| typescript               | **3.6**    |\n| antd                     | **4.1.5**  |\n\n## 🔧 설정 파일들\n\n### 🖋 title\n\n타이틀 수정을 위해서는 [index.html](/public/index.html)에서 현재 `React-TypeScript-Boilerplate`로 되어있는 부분들을 고쳐야합니다.\n\n```html\n\u003cmeta\n  name=\"apple-mobile-web-app-title\"\n  content=\"React-TypeScript-Boilerplate\"\n/\u003e\n```\n\n```html\n\u003ctitle\u003eReact-TypeScript-Boilerplate\u003c/title\u003e\n```\n\n### 🦞 favicon\n\n파비콘 수정을 위해서는 [asset](/public/asset)에 있는 기존의 이미지 파일들을 대체해야합니다. (현재는 🦞 이모지로 되어있습니다.)\n\n[FAVIC-O-MATIC](https://favicomatic.com/)에 접속하여 `Every damm size,sir!`를 선택하고 `Upload Your Image` 버튼을 클릭하여 필요한 이미지 파일이 들어있는 압축파일을 받습니다.\n\n### 📄 .eslintrc.json\n\n```json\n{\n  \"extends\": [\n    \"eslint:recommended\",\n    \"plugin:react/recommended\",\n    \"plugin:@typescript-eslint/recommended\",\n    \"prettier/@typescript-eslint\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"plugins\": [\"react\", \"@typescript-eslint\", \"prettier\"],\n  \"env\": {\n    \"browser\": true,\n    \"jasmine\": true,\n    \"jest\": true\n  },\n  \"settings\": {\n    \"react\": {\n      \"pragma\": \"React\",\n      \"version\": \"detect\"\n    }\n  },\n  \"parser\": \"@typescript-eslint/parser\"\n}\n```\n\n### 📄 tsconfig.json\n\n`tsconfig.json`에는 `TypeScript`의 [컴파일러 옵션](https://typescript-kr.github.io/pages/compiler-options.html)이 정의되어 있습니다.\n\n다음 커맨드를 통해 가장 기본적인 `tsconfig.json`를 생성할 수 있습니다.\n\n```shell\n$ npx tsc --init\n```\n\n해당 프로젝트에서는 기본 옵션에서 수정된 `tsconfig.json`를 사용합니다.\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"noImplicitAny\": false,\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react\"\n  },\n  \"include\": [\"src\"]\n}\n```\n\n### 📄 tslint.json\n\n```json\n{\n  \"defaultSeverity\": \"error\",\n  \"extends\": [\"tslint:recommended\"],\n  \"jsRules\": {},\n  \"rules\": {\n    \"quotemark\": false,\n    \"ordered-imports\": false,\n    \"object-literal-sort-keys\": false,\n    \"member-access\": false\n  },\n  \"rulesDirectory\": []\n}\n```\n\n### 📄 .prettierrc\n\n```json\n{\n  \"singleQuote\": true,\n  \"semi\": true,\n  \"useTabs\": false,\n  \"tabWidth\": 2,\n  \"trailingComma\": \"all\",\n  \"printWidth\": 80,\n  \"arrowParens\": \"always\",\n  \"orderedImports\": true\n}\n```\n\n## Installation\n\n```\n$ npm install\n```\n\n## Running\n\n```\n$ npm run start\n```\n\n## Build\n\n```\n$ npm run build\n```\n\n## Reference\n\n- [CRA(Create React App)에 tslint, eslint, prettier 적용하기](https://milooy.wordpress.com/2019/09/21/cracreate-react-app%ec%97%90-tslint-eslint-prettier-%ec%a0%81%ec%9a%a9%ed%95%98%ea%b8%b0/comment-page-1/#comment-2044)\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Freact-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdl0312%2Freact-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Freact-typescript-boilerplate/lists"}