201215

React + TypeScript + Storybook + ESLint 세팅

프로젝트 생성

yarn create react-app my-app-name --template typescript

CRA + ESLint + Prettier

Create-React-App with TypeScript, ESLint, Prettier, and Github Actions

• tsc —noEmit : https://stackoverflow.com/questions/55002137/typescript-noemit-use-case

Husky + lint-staged

사용하지 않는 파일 지우기

• reportWebVitals - web-vitals를 통한 성능 측정에 사용됨

  • https://create-react-app.dev/docs/measuring-performance/#web-vitals

  yarn remove web-vitals

• setupTests.ts - browser API를 사용하거나 Test 실행 전 global setup이 필요한경우에 사용

  • jest의 setupFilesAfterEnv 와 관련 - https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

  • https://create-react-app.dev/docs/running-tests/#initializing-test-environment

• react-app-env.d.ts - yarn start 마다 생성됨. 많은 유저가 생성을 멈춰달라고 react team에 요청함

  • .gitignore 에 /src/react-app-env.d.ts 추가

  • .vscode/settings.json 에 추가

    "files.exclude": {  "src/*.d.ts": true}

  • https://github.com/facebook/create-react-app/issues/6560

.gitignore

.gitignore 는 프로젝트에서 중요한 것으로 응용 프로그램 자체에서 생성한 파일이나 디렉토리를 나열해야 한다. 가장 좋은 예는 캐시 파일, 로그, 로컬 구성 등이다.

.vscode , .idea , .DS_Store 등은 프로젝트의 .gitignore 보다 컴퓨터의 글로벌 .gitignore 에 추가하는 것이 좋다.

글로벌 .gitignore 는 home 디렉토리의 .gitconfig 을 보면 알 수 있다.

[core]    excludesfile = /Users/{home}/.gitignore_global

Don't put .idea and .vscode directories to project's .gitignore

폴더 구성하기

└── src    ├── components        └── src    ├── pages    ├── App.tsx    └── index.tsx

Storybook 설치하기

npx sb init

• lint error 발생 (임시)

  .eslintignore

  **/*.stories.tsx**/stories/*.tsx

  .eslintrc.js

  rules: {  // ...
    'import/no-extraneous-dependencies': [    'error',    {      devDependencies: [        '**/*.stories.tsx',      ],    },  ],
    // ...}

• storybook babel-loader crash

  create-react-app babel-loader clash · Issue #4764 · storybookjs/storybook

https://storybook.js.org/docs/react/get-started/install

웹 폰트 사용

NAVER D2

free illustration

unDraw - Open source illustrations for any idea

Styled Components

The Advanced Way to Style with Styled Components

Thoughts around design systems: implementation - React, Styled-Components, and more

How does the ampersand work in styled-components?

The Sass Ampersand | CSS-Tricks

Type Guard

https://www.typescriptlang.org/docs/handbook/advanced-types.html

validate css unit value

https://www.reddit.com/r/learnjavascript/comments/8u5pew/function_that_can_validate_if_a_string_is_a_valid/