다음 을 사용하여 React 항목을 구성하는 방법js, Typescript, TSLint 및 Jest?

CRA (Create-React-App) provides an easy way to start our React project. But there are still lots of things we can do to make the project more easy to develop. In this article, I will show you how I usually config my React project and explain what's the benefit of doing that.

우리가 시작하기 전에, 몇몇 사람들은 왜 우리가 프로젝트를 설정하는 데 이렇게 많은 시간을 들여야 하는지 알고 싶어 할지도 모른다.우리는 이미 많은 예와 견본이 있다.우리는 간단하게 복제하고 즉시 인코딩을 시작할 수 있다.
나는 프로젝트를 어떻게 정확하게 배치하는지 이해하는 데 적어도 두 가지 좋은 점이 있다고 믿는다.우선, 우리는 우리가 필요로 하는 기능을 선택하고 수시로 그것들을 교체할 수 있다.둘째, 만약 우리가 이 라이브러리 중의 어느 것을 업그레이드하고 싶다면 더욱 쉽다.
React, Next와 같은 프레임워크와 라이브러리입니다.js와 Typescript는 끊임없이 새로운 버전을 발표하여 많은 좋은 기능을 제공합니다.그래서 가능하다면, 나는 항상 나의 프로젝트에서 최신 버전을 응용하여 본래 새로운 기능을 누리려고 시도한다.만약 우리가 프로젝트를 어떻게 설정하는지 익숙하다면, 프로젝트의 프레임워크/라이브러리를 업그레이드하는 것이 더욱 쉽다.
본고에서 나는 이러한 우수한 프레임워크/라이브러리를 어떻게 우리의 프로젝트에 응용하는지 설명할 것이다.다음은 환매 협의를 참고로 하는 것입니다 - react-config.모든git가 제출한 변경 사항을 검사할 수 있습니다.

--

다음회사 명

다음은 뭐야?js？

다음js는 React 프레임워크로 SSR(서버 쪽 렌더링)과 내장 루트 시스템, js의 CSS와 AMP 지원(이동 페이지 가속) 등 많은 강력한 기능을 지원합니다.

Next 사용 방법js？

(1). 폴더를 만들고 항목을 초기화합니다.

mkdir your-project-name
cd your-project-name
npm init -y
git init

(2). 다음을 사용하여 작성.gitignore:

node_modules
.next

(3). 설치:

npm install --save next react react-dom

(4). package.json를 열고 다음 스크립트를 추가합니다.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

(5). 다음을 사용하여 작성./pages/index.js:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

(6). 로컬 웹 서버를 시작하려면:

npm run dev

(7). 방문http://localhost:3000 신청을 확인하십시오.

다음 단계의 이해득실.js？

✅ SSR:
SSR은 검색 엔진의 최적화를 개선할 뿐만 아니라 서버에서 추가 작업을 하는 데 큰 유연성을 가져왔다. 예를 들어 맞춤형 응답 헤더와 프록시 제3자 API를 사용하여 영패가 노출되는 것을 방지했다.
✅ 노선 시스템:
나는 다음 길을 좋아한다.js는 폴더 구조를 통해 루트를 처리합니다.이것은 항목을 더욱 쉽게 이해하게 한다.
✅ AMP 지원:
다음js는 AMP 구현을 단순화합니다.React에 익숙하고 웹 사이트에서 AMP를 실현하고 싶다면Next를 사용하시기 바랍니다.js.
❌ 노드js 지원:
만약 우리가 SSR을 지원하고 싶다면, 우리는 우리의 코드가 노드 아래에서 정확하게 실행될 수 있도록 확보해야 한다.js 환경.이것은 진입장벽을 높일 수 있다.
하지만 내 생각에 따르면 우리가 전방 분야에서 장악하고 싶다면.우리는 어쩔 수 없이 Node를 익혀야 한다.하루
❌ 군중 또는 부대의 집합:
우리는 서버를 위탁 관리해야 할 것이다. 이것은 통상적으로 추가 비용을 가져올 것이다.그러나 서버가 필요하지 않으면 Next에서 정적 HTML을 내보낼 수 있습니다.js-Static HTML export.
--

타자 스크립트

Typescript란 무엇입니까?

TypeScript는 JavaScript의 유형 초과 집합으로 순수한 JavaScript로 컴파일할 수 있습니다.우리가 과거에 React 프로젝트에서 응용한 것처럼prop-types.그러나 우리는 구성 요소 도구에 대해 형식 검사를 할 수 있을 뿐만 아니라 모든 자바스크립트 코드에 대해서도 형식 검사를 할 수 있다.

Typescript 사용은 어떻게 시작합니까?

(1). 설치:

npm install --save-dev typescript @types/react @types/node

(2). 프로젝트 루트 디렉터리에 빈 파일 tsconfig.json 을 만듭니다.

touch tsconfig.json

(3). .js 파일을 .ts/.tsx 로 변경합니다..tsx JSX를 사용하는 파일의 경우 .ts 나머지 파일의 경우
(4) 실행next, 다음.js는 자동으로 tsconfig.json 업데이트되고 필요한 파일을 생성합니다.

npm run dev

🔸[추가] 가져오기 경로 별칭🔸

가져오기 경로 별칭을 적용하면 절대 경로로 파일을 가져올 수 있습니다.현재 파일이 어디에 있는지, 가져올 대상 파일이 어디에 있는지 걱정할 필요가 없습니다.이렇게 하면 가져오기 구문을 복사하고 붙여넣을 수 있으며 파일을 다른 폴더로 이동하는 것이 더욱 쉬워집니다.

// Before
import App from '../components/App/App';

// After
import App from '@components/App/App';

(1). 설치

npm install --save-dev babel-plugin-module-resolver

(2). 다음을 사용하여 작성.babelrc:

{
  "presets": [["next/babel"]],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./components"
        }
      }
    ]
  ]
}

(3). tsconfig.json에 다음을 추가합니다.

  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./components/*"]
    }
  },

Typescript의 이해득실?

✅ 정적 유형 검사:
컴파일 기간의 유형 검사는 우리가 많은 오류를 방지하는 데 도움을 줄 수 있다.

✅ 지능형 인식 및 자동 완성:
정확한 유형 정의를 통해 VScode는 사용할 수 있는 정확한 속성을 알려주고 자동으로 완성할 수도 있습니다.

❌ 유형 정의:
우리는 어떻게 유형을 정확하게 정의하는지 배워야 한다.우리가 뭔가를 바꾸고 싶을 때, 우리는 더 많은 파일을 수정해야 한다.
--

대들보를 건너다

린트는 무엇입니까?

Linter는 코드를 디버깅하는 데 도움을 주는 도구입니다.그것은 자주 발생하는 문제와 오류를 찾기 위해 코드를 스캔할 것이다.그리고 줄 번호와 우리가 위반한 규칙으로 정보를 제공한다.

* 2020년 5월 29일 업데이트: Tslint가 사용되지 않습니다. 새 프로젝트를 시작하려면 eslint를 사용해야 합니다.감사
언급할 만하다.우리 프로젝트에서 eslint를 실현하려면 npx eslint --init만 사용하고 절차에 따라 조작하면 된다.
https://github.com/palantir/tslint/issues/4534

어떻게 대들보를 사용하기 시작합니까?

(1). 설치:

npm install --save-dev tslint tslint-config-airbnb

(2). 추가tslint.json 내용은 다음과 같습니다.

{
  "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
  "rules": {
    "import-name": false,
    "align": false,
    "function-name": [
      true,
      {
        "function-regex": "^[a-zA-Z$][\\w\\d]+$",
        "method-regex": "^[a-z$][\\w\\d]+$",
        "private-method-regex": "^[a-z$][\\w\\d]+$",
        "protected-method-regex": "^[a-z$][\\w\\d]+$",
        "static-method-regex": "^[a-z$][\\w\\d]+$"
      }
    ],
    "variable-name": {
      "options": ["ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"]
    }
  }
}

(3). 다음 스크립트를 package.json에 추가합니다.

  "scripts": {
    ...
    "tslint": "tslint -p . -c tslint.json"
  },

(4). 실행 tslint 우리의 코드를 검증하기 위해

npm run tslint

🔸[추가] tslint 반응 연결🔸

프로젝트에서 React 갈고리를 사용한다면이것은 우리가 그것을 사용할 때 약간의 오류를 피하는 데 도움을 줄 수 있다.
(1). 설치:

npm install --save-dev tslint-react-hooks

(2). 업데이트tslint.json:

{
  "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
  "rules": {
   ...
    "react-hooks-nesting": true
  }
}

🔸[추가] 더 예뻐요.🔸

모든 tslint 오류를 수동으로 복구하는 것은 지루할 수 있습니다.따라서prettier를 사용하여 형식 오류를 자동으로 복구할 수 있습니다.
(1). 설치:

npm install --save-dev prettier

(2). package.json에 다음을 추가합니다.

  "prettier": {
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 120
  },

(3). 다음을 사용하여 작성./.vscode/settings.json:

{
  "editor.formatOnSave": true
}

🔸[추가] 하스키🔸

수동으로 대들보를 집행하는 효율이 높지 않기 때문에 잊어버리기 쉽다.따라서 우리는 Githook을 통해 대들보를 터치할 수 있다.
(1). 설치:

npm install --save-dev husky

(2). husky에 다음을 추가합니다.

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "npm run tslint"
    }
  }
  ...
}

(3) 현재,git 제출을 실행할 때, 코드를 검증하기 위해 package.json 를 터치합니다.

tslint의 이해득실?

✅ 오류 방지:
Linter는 일반적인 오류를 방지하는 데 도움을 줄 수 있습니다.
✅ 서비스 용이성:
Linter는 읽을 수 있는 코드를 만들기 위해 적당한 형식과 이름을 사용해야 하며, 코드를 쉽게 유지할 수 있도록 합니다.
❌ 적절한 규칙 구성:
모든 규칙이 모든 사람에게 적합한 것은 아니다.우리는 반드시 시간을 써서 우리와 우리 팀원들을 위해 가장 좋은 환경을 찾아야 한다.
--

제스트&효소

린트는 무엇입니까?

Jest & Enzyme는 JavaScript 테스트 프레임워크입니다.Jest는 React에 사용되는 JavaScript 테스트 유틸리티로 React 구성 요소의 출력을 더욱 쉽게 테스트할 수 있습니다.
이 두 가지를 결합하면 우리는 우리의 프로젝트에서 테스트를 실시하여 우리의 코드가 예상대로 작동하도록 확보할 수 있을 것이다.

어떻게 효소를 사용하기 시작합니까?

(1). 설치:

npm install --save-dev jest enzyme enzyme-adapter-react-16 babel-jest @types/jest @types/enzyme

(2). 다음을 사용하여 작성Jest & Enzyme:

const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

enzyme.configure({ adapter: new Adapter() });

(3). 다음을 사용하여 작성./config/setup.js:

module.exports = {
  roots: ['<rootDir>'],
  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
  setupFiles: ['<rootDir>/config/setup.js'],
  testPathIgnorePatterns: ['<rootDir>[/\\\\](build|docs|node_modules|.next)[/\\\\]'],
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
  testEnvironment: 'jsdom',
  testURL: 'http://localhost',
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
  },
  testRegex: '/__tests__/.*\\.(test|spec)\\.tsx?$',
};

(4). 다음을 사용하여 작성./jest.config.js:

import React from 'react';
import { mount } from 'enzyme';
import Index from '../index';

describe('index page', () => {
  it('should have App component', () => {
    const subject = mount(<Index />);

    expect(subject.find('App')).toHaveLength(1);
  });
});

(5). 다음 스크립트를 pages/__tests__/index.test.tsx에 추가합니다.

  "scripts": {
    ...
    "test": "jest"
  },

(6) 유닛 테스트 실행

npm run test

🔸json의 [부가] 효소🔸

스냅샷을 포맷하여 읽기 쉽게 만듭니다.
(1) 설치package.json:

npm install --save-dev enzyme-to-json

(2) enzyme-to-json에 다음을 추가합니다.

module.exports = {
  ...
  snapshotSerializers: ['enzyme-to-json/serializer'],
};

🔸[추가] 제스트 워치 typeahead.🔸

필터링 시 일치 테스트 표시
jest watch 모드에서의 테스트입니다.

(1). 설치:

npm install --save-dev jest-watch-typeahead

(2). jest.config.js에 다음을 추가합니다.

module.exports = {
  ...
  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};

🔸[추가] lint 단계🔸

git 임시 저장 파일에test와linter를 실행합니다.
(1). 설치:

npm install --save-dev lint-staged

(2). jest.config.js에 다음을 추가합니다.
여기에서 우리는 package.json과prettier를 tslint 파이프에 추가하고 미리 제출한 연결을 통해 촉발합니다.

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.+(ts|tsx)": [
      "prettier --write",
      "git add",
      "jest --findRelatedTests",
      "tslint"
    ]
  },
}

lint가 상연하는 이해득실?

✅ 신뢰성:
우리는 코드가 예상대로 작동하도록 하기 위해 Jest & Enzyme 테스트를 사용할 수 있다.이것은 우리가 수동으로 테스트를 진행하는 시간을 절약할 수 있을 뿐만 아니라, 재구성도 더욱 쉽게 할 수 있다.
✅ 서비스 용이성:
적당한 테스트 용례를 통해 사람들은 모든 기능과 구성 요소의 용도를 더욱 쉽게 이해할 수 있을 것이다.
❌ 과도한 사용 가능성:
때때로 우리는 코드를 더욱 유지하기 어렵게 하는 불필요한 테스트를 너무 많이 만들 수도 있다.

결론

어떤 사람들은 어쩔 줄 몰라 할지도 모른다. 이것은 단지 시작일 뿐이다.이 모든 설정을 완성한 후에도 우리는 위에서 언급한 모든 프레임워크/라이브러리를 익히는 데 많은 시간을 들여야 한다.
처음엔 힘들겠지만하지만 우리가 그들에게 익숙해지면이것은 틀림없이 인코딩을 더욱 쉽게 할 뿐만 아니라, 우리로 하여금 유지할 수 있는 코드를 만들어 낼 것이다.
프로젝트를 구성하는 방법에 대한 조언이 있다면.나는 더 많이 공부하는 것을 좋아할 것이다.언제든지 논평을 발표해 주십시오.읽어주셔서 감사합니다.
--

참고

create-react-app

Next.js

Typescript

TSLint

Husky

Jest

Enzyme

enzyme-to-json

jest-watch-typeahead

lint-staged

https://github.com/zeit/next-plugins/issues/136