2020-12-15

React + TypeScript + Storybook + ESLint 세팅 #

프로젝트 생성 #

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

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를 통한 성능 측정에 사용됨

  • Web Vitals
  bash

  yarn remove web-vitals
  

  yarn remove web-vitals
  

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

  • jest의 setupFilesAfterEnv 와 관련 - Configuring Jest · Jest (jestjs.io)

  • Running Tests | Create React App (create-react-app.dev)

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

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

  • .vscode/settings.json 에 추가

    bash

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

    "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

[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

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

Storybook 설치하기 #

npx sb init

npx sb init

• lint error 발생 (임시)

  .eslintignore

  javascript

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

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

  .eslintrc.js

  javascript

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

  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/