개발자당 10개의 도구 필요

만약 현대 도구를 사용하지 않는다면, React 프로그램을 만들고, 유지하고, 배치하는 것은 사람을 낙담하게 할 수도 있다.그러나 수십만 가지 공구가 생겨서 어떤 공구를 사용할지 결정하는 것은 당황스러울 수도 있다.기능 개발과 인코딩이 가능한 한 순조롭도록 하기 위해 저는 연구를 했고 제가 발견한 도구를 여러분과 공유했습니다. 이런 도구들은 제 생활을 더욱 수월하게 합니다.

1. React 애플리케이션 만들기

`npx create-react-app my-app`
<small id="shcb-language-31"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

페이스북Create React App은 React 프로그램을 만들고 유지하는 간단한 방법으로 알려져 있다.프로젝트 구조나 어떤 모듈을 추가할지 걱정할 필요가 없습니다.Create React 애플리케이션은 이러한 모든 문제를 해결합니다.Create React Apps를 차별화하는 것은 설정입니다.이 도구를 사용하여 응용 프로그램을 만들면 React 응용 프로그램에서 실행해야 하는 모든 파일이 자동으로 설정됩니다.너도 어떤 것도 배치할 필요가 없다. 왜냐하면 그것은 이미 너를 위해 준비가 되어 있기 때문이다.

2. 땀 없는 기모와 더 예쁜 설정

`npx install-peerdeps --dev eslint-config-wesbos`
<small id="shcb-language-32"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

웨스보스가 제공하는 이 가죽 가방ESLint and Prettier setup은 당신이 사용할 수 있는 가장 좋은 가죽 가방 중의 하나입니다.이것은 최신 표준에 따라 자바스크립트를 필터하고, 포맷 오류를 Prettier로 복구하며, html 스크립트 표시의 모든 내용을 필터하고 복구합니다.이 설정에 관해서 내가 가장 좋아하는 부분은 필요할 때 자동으로 번호를 추가하는 것이다.

3.XState

`npm i xstate @xstate/react`
<small id="shcb-language-33"><span>Code language:</span> <span>CSS</span> <span>(</span><span>css</span><span>)</span></small>

XState는 자바스크립트와 TypeScript 유한상태기 및 현대 웹 개발에 사용되는 상태도를 만들고 해석하며 실행하는 라이브러리입니다.useState를 사용하면 구성 요소에서 언제든지 변경할 수 있는 상태를 나타낼 수 있습니다.그러나 국가는 직접적으로'변화'하기 때문에 국가가 어떻게 바뀌는지 잘 모른다.이런 논리는 이벤트 처리 프로그램과 구성 요소의 다른 부분에 분산되어 있다.use Reducer가 있으면 논리는 집중된 곳에서 감속기를 명확하게 나타낼 수 있다.이벤트는 Reducer로 '스케줄링' 할 수 있으며, Reducer는 현재 상태와 받은 이벤트에 따라 다음 상태를 정합니다.그러나 두 가지는 아직 명확하지 않다. 발생할 수 있는 모든 논리적 '절차'를 완전히 이해하지 못하고, 부작용은 분리되어 있다.이 모든 논리는 코드가 아닌 개발자의 머릿속에 머물러 있기 때문에 무슨 일이 일어날지 정확히 알기 어렵다.
이것이 XState와 @XState/react의 역할입니다.useMachine 갈고리를 사용하면 상태기로 정의하는 것 외에 useReducer와 유사한 상태와 논리를 나타낼 수 있습니다.이렇게 하면 각 상태의 다음 단계 동작과 상태 전환에 대해 수행해야 할 효과를 제어하는 제한된 상태를 지정할 수 있습니다.그 결과는 더 강한 논리로 불가능한 상태로 진입할 수 없게 하는 것이다.읊다, 읊조리다

4. 반응 테스트 라이브러리

`npm install --save-dev @testing-library/react`
<small id="shcb-language-34"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

테스트는 자신감이다.결함 없는 프로그램을 발표할 수 있기를 바랍니다.켄트 도드 (Kent C.Dodds) 가 정확하게 말한 것처럼, 당신의 테스트가 당신의 소프트웨어 사용 방식과 같을수록, 그것들은 당신에게 자신감을 줄 수 있다.React Testing Library는 이를 효과적으로 수행할 수 있는 절대적인 도구입니다.또한 React 팀은 React 응용 프로그램을 테스트하는 데 사용할 것을 권장합니다. 이것은 React 코드를 테스트하는 사실의 표준입니다.해봐!

5. 반응 라우터

`npm install react-router-dom`
<small id="shcb-language-35"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

React Router는 하나의 구성 요소의 집합으로 이 구성 요소들은 성명 방식을 통해 응용 프로그램과 조합된다.React Router는 URL에 사용된 라우팅에 따라 표시할 특정 구성 요소를 조건부로 렌더링합니다.React Router의 강력한 기능은 여러 루트를 사용하여 활성 상태의 경로에 따라 렌더링할 구성 요소를 결정할 때 검증됩니다.한 페이지의 프로그램을 구축하고 있다면, 독립된 페이지와 같은 특정한 구성 요소를 React Router로 보여줌으로써 웹 사이트를 여러 페이지로 구성하는 것처럼 보일 때가 많다.

6. 스타일 지정 어셈블리

`npm install -E styled-components`
<small id="shcb-language-36"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

전형적인 React 프로그램에서 CSS 파일과 JS 파일은 분리되어 있으며, 이것은 스타일과 구성 요소가 서로 다른 위치에 있다는 것을 의미한다.React 애플리케이션을 처리하는 일반적인 방법임에도 불구하고 단점이 있습니다.예를 들어, 만약 CSS 파일을 보고 있다면, 어떤 구성 요소가 그것을 사용하고 있는지 모르기 때문에, 만약 변경 사항을 했다면, 무엇을 손상시킬 수 있는지 모른다.이 문제의 해결 방안은 레이아웃, 스타일, 응용 프로그램 논리가 코드의 한 위치에 위치하도록 스타일의 범위를 정하는 것이다.그렇기 때문에, 당신이 변화를 할 때, 그것이 어떤 영향을 미쳤는지 알 수 있고, 생산 과정에서 의외의 사고가 발생하는 것을 피할 수 있다.Styled Components CSS와 js 파일 사이를 왔다 갔다 할 필요가 없기 때문에 구성 요소와 스타일 사이의 매핑을 없애고 왔다 갔다 하는 혼란과 시간 낭비를 줄일 수 있습니다.

7. 제헌자 동의

`npm install framer-motion`
<small id="shcb-language-37"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

Framer Motion는 React에 사용할 수 있는 제품급 스포츠 라이브러리입니다.이것은 React 응용 프로그램에 사용되는 소스 오픈 프로토타입 도구입니다.동작 및 애니메이션은 Framer library에서 지원됩니다.프레임 동작에는 스프링 애니메이션, 단순 키프레임 구문, 제스처(드래그/클릭/스톱), 레이아웃 및 공유 레이아웃 애니메이션이 포함됩니다.Framer Motion의 묘미는 CSS 전문가가 되지 않아도 멋진 애니메이션을 만들 수 있다는 것이다. 원형을 만들고 응용 프로그램과 통합하기만 하면 된다.

8. 이야기책

`npx sb init`
<small id="shcb-language-38"><span>Code language:</span> <span>Swift</span> <span>(</span><span>swift</span><span>)</span></small>

Storybook는 UI 구성 요소를 개별적으로 개발하고 확인할 수 있는 오픈 소스 툴입니다.그것은 격리 구성 요소를 통해 개발을 더욱 빠르고 쉽게 한다.이것은 한 번에 하나의 구성 요소를 처리할 수 있도록 합니다.복잡한 개발 스택을 시작하거나 데이터베이스에 특정 데이터를 강제로 입력하거나 애플리케이션을 탐색하지 않고도 전체 UI를 개발할 수 있습니다.다시 사용하기 위해 구성 요소를 기록하고, 오류가 발생하지 않도록 자동으로 시각화 테스트를 할 수 있습니다.

9. 사용자 인터페이스 도착

`git clone [email protected]:reach/reach-ui.git
cd reach-ui
yarn install
yarn build`
<small id="shcb-language-39"><span>Code language:</span> <span>Bash</span> <span>(</span><span>bash</span><span>)</span></small>

Reach UI React 애플리케이션의 액세스 용이성을 위한 토대 마련Reach UI는 Safari + Voice Over,Firefox + NVDA, Edge + JAWS의 테스트를 거친 액세스 가능한 React 구성 요소 라이브러리입니다.그것들의 스타일은 매우 간단하기 때문에, 구성 요소에 원하는 스타일을 계속 추가할 수 있습니다.하나 또는 모든 구성 요소를 사용하도록 선택하든지 여부에 관계없이 범위에 따라 Reach UI는 액세스 용이성에서 시작됩니다!

10. 반응 원형
Fork and CloneRepository

`cd react-proto
yarn install
yarn start`
<small id="shcb-language-40"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

React Proto는 개발자와 디자이너의 또 다른 원형 도구다.코드를 작성하지 않고 UI 원형을 만들 수 있습니다. 구성 요소를 기존 프로그램에 끌어다 놓거나,create react app를 사용하여 새 프로그램을 만들고 내보낼 수 있습니다.내보내기가 완료되면 자동으로 생성된 코드를 가지고 팀과 이 코드를 더욱 사용자 정의할 수 있습니다.이것은 클래식 CSS가 가져오는 번거로움을 없앴다.

보너스: Split

`npm install --save @splitsoftware/splitio-react`
<small id="shcb-language-41"><span>Code language:</span> <span>SQL (Structured Query Language)</span> <span>(</span><span>sql</span><span>)</span></small>

스플릿은 개발자가 코드 배치와 특성 발표를 분리할 수 있는 특성 표시 도구다.스플릿을 사용하면 생산 환경에서 코드를 테스트하고 AB 테스트와 다른 종류의 실험을 실행하며 monolith를 마이크로서비스로 옮기고 단추를 누르면 기능을 발표할 수 있습니다.Split에는 기능 플래그와 데이터가 조합되어 있습니다.자주 배치하고 두려움 없이 방출하며 영향력을 극대화하려고 시도한다.스플릿을 사용하면 더 빨리 개발하고 더 자주 발표하며 영향력을 최대한 발휘할 수 있다.그것numerous integrations이 있으면 현재의 업무 절차에 쉽게 융합될 것이다!

React 및 기능 플래그에 대한 자세한 내용
React 응용 프로그램에 정확한 도구를 사용하면 당신의 생활을 더욱 간단하게 할 수 있을 뿐만 아니라 React의 개발도 더욱 재미있게 할 수 있습니다!이 열 가지 도구가 있으면 당신은 더욱 쉽게 기능 개발을 진행할 수 있으며, 이것은 당신의 발표를 가속화하고, 당신의 공학 문화를 증가시킬 것이다.React에서 기능 플래그, 장점 및 용례를 사용하는 방법에 대한 자세한 내용은 다음 게시물을 참조하십시오.

Add Styled Components to Your React App

The Benefits of Feature Flags in Software Development

7 Ways Feature Flags Improve Software Development

Testing Styled Components in Your React App

Set Up Feature Flags with React in 10 Minutes

우리는 항상 트위터 페이지에 새로운 내용을 올리기 때문에 반드시 우리를 주목해야 한다!