React Cosmos 시작

작성자Elizabeth Amaechi✏️

소개하다.

React의 많은 장점 중 하나는 사용자가 구성 요소를 구축하고 특정한 코드 라이브러리에서 반복해서 사용할 수 있다는 것이다.이 기능은 React Cosmos developer 도구의 도움을 받아 추가로 사용할 수 있습니다.
React Cosmos는 독립적이고 확장 가능한 React 구성 요소를 구축하는 데 사용됩니다.React 애플리케이션의 고유한 구성 요소를 생성할 수 있습니다.React Cosmos를 사용할 때 서로 다른 용례와 디자인 모델을 고려할 수 있습니다. 이것은 많은 다른 조건에 적합한 매우 통용되고 격리된 구성 요소를 만들 수 있도록 합니다.

React Cosmos의 이점

React Cosmos는 어셈블리 피쳐를 사용하여 작동합니다.이러한 구성 요소 특성의 총체는 구성 요소 라이브러리를 구성한다.추적이 용이하도록 UI 에 표시됩니다.사용 React Cosmos 의 주요 장점 중 하나는 모든 React 프로젝트를 스캔할 수 있고, 모든 도구 조합을 사용하거나, 모든 항목의 구성 요소를 어떤 상태로 렌더링할 수 있다는 것이다.
이 섹션에서는 React Cosmos를 사용하면 얻을 수 있는 여러 가지 이점에 대해 설명합니다.

어셈블리 생성 재사용 가능

앞에서 말한 바와 같이 React Cosmos는 React의 재사용 가능한 장점을 새로운 수준으로 끌어올려 독립적이고 재사용 가능한 구성 요소를 만들 수 있도록 한다.이것은 정의된 UI를 다시 쓰는 것을 피하기 위해 더 큰 공간을 제공합니다.

여러 프로젝트의 UI 공유

React Cosmos는 지정된 프로젝트에서 UI를 재사용하는 것 외에 포트폴리오의 각 프로젝트에서 구성 요소를 재사용할 수 있습니다.이것은 전체 프로젝트에서 견고하고 통일된 브랜드를 만드는 데 매우 도움이 된다.

간편한 디버깅

React Cosmos를 사용할 경우 비격리 구성 요소를 강제로 사용하지 않고 하나의 단위로 구성 요소를 분리하기 때문에 응용 프로그램의 오류를 인식하고 수정하는 것이 훨씬 쉽습니다.이로 인해 개발은 점점 쉬워지고 빨라졌다. 왜냐하면 잘못된 원인을 찾아내는 것이 훨씬 쉽기 때문이다.

구성 요소 라이브러리 구축 및 게시

동료나 인터넷상의 누구에게도 React Cosmos 구성 요소를 공개할 수 있습니다.대중이 사용할 수 있도록 구성 요소 라이브러리를 구축하거나 시작하기로 결정하면 도움이 될 수 있습니다.

실시간 외부 API 시뮬레이션

외부 API를 시뮬레이션하여 응용 프로그램의 현재 상태를 실시간으로 볼 수 있습니다.이로 인해 개발 속도가 더욱 빨라져 디버깅 기간에도 쓸모가 있을 것이다.

설치 반응 우주

React Cosmos는 모든 React 또는 React 네이티브 프로젝트에 사용할 수 있지만 이 문서에서 React를 중점적으로 다룹니다.미리 사용했는지 확인하세요. npx create-react-app이제 npm(노드 패키지 관리자)을 사용하여 React 프로젝트에 React Cosmos를 설치합니다.

npm i --D react-cosmos

또는 실:

yarn add --dev react-cosmos

React 프로젝트의 package.json 파일을 검사하면 설치 성공을 확인할 수 있습니다.
설치 후 다음 단계는 응용 프로그램에서 package.json 스크립트를 만드는 것입니다.이렇게 하면 Cosmos 프로젝트를 시작할 수 있습니다.package.json 파일의 스크립트 섹션에는 다음 코드가 포함되어 있습니다.

"scripts": {
      "cosmos": "cosmos",
      "cosmos:export": "cosmos-export"
}

전체 package.json 파일은 다음과 같습니다.

{
"name": "reactcosmos",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "cosmos": "cosmos",
    "cosmos:export" : "cosmos-export"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-cosmos": "^5.6.2"
  }
}

우리 신청하기 시작합시다.

React 프로젝트 설치 React Cosmos를 사용하여 React 애플리케이션 시작

터미널에서 다음 명령을 실행합니다.
npm 사용:

npm run cosmos

또는 실 사용:

yarn cosmos

어셈블리 라이브러리를 보려면 localhost:5000에 액세스하라는 메시지가 표시됩니다.우리는 아직 어떤 구성 요소도 구축하지 않았기 때문에, 너는 아직 어떤 구성 요소도 볼 수 없다.

오류 메시지가 나타나면 다음과 같이 하십시오.

라는 파일을 만들고 다음 코드로 내용을 업데이트합니다.

    module.exports = {
       presets: [
          ['@babel/preset-env', {targets: {node: 'current'}}],
          ['@babel/preset-react', {targets: {node: 'current'}}] // add this
       ]
    };

라는 다른 파일을 만들고 내용을 업데이트합니다.

    module.exports = {}

이렇게 하면 Babel 또는 PostSS 문제가 해결됩니다.오류가 계속되면 메시지를 읽거나 문제 해결을 시도하거나 가장 좋아하는 브라우저에서 오류 메시지를 탐색할 수 있습니다.

첫 번째 React 구성 요소 구축

첫 번째 어셈블리를 구성하려면 고정장치를 생성해야 합니다.고정장치 파일에는 일반적으로 리액션 어셈블리 또는 리액션 노드의 기본 내보내기 하나만 포함됩니다.구성 요소를 만들려면 구성 요소를 포함하는 파일 이름 babel.config.js 을 추가해야 합니다. postcss.config.js 을 사용할 것입니다.이렇게 하면 React Cosmos가 쉽게 추적할 수 있습니다.
React 프로그램의 .fixture 폴더에 main.fixture.js 라는 파일을 계속 만듭니다.다음 단계에서는 다음 코드를 사용하여 파일을 업데이트합니다.

// button.fixture.jsx
import React from 'react';

export default function Hello() {
  return <h1>Hello, World</h1>
}

만세!React Cosmos를 사용하여 첫 번째 독립 실행형 컴포넌트를 생성했습니다.이를 확인하려면 button.fixture.jsx로 다시 이동하면 모든 기기 아래에 나열된 첫 번째 부품을 볼 수 있습니다.

React 구성 요소 업데이트

현재 우리는 첫 번째 구성 요소를 성공적으로 만들었기 때문에, 우리는 그것을 계속 업데이트할 수 있다.이 절에서, 우리는 단추 구성 요소를 구축할 것이다.다음 그림과 같이 저희src 파일의 내용을 계속 업데이트합니다.

import React from 'react';
import './button.fixture.css'

export default function Button() {

  return <button> Hey, Click me</button>;
}

버튼 레이블을 만들고 아직 만들지 않은 CSS 스타일시트를 링크합니다.현재, 우리의 단추 구성 요소 스타일에 localhost:5000 라는 다른 파일을 만듭니다.새 파일의 컨텐트를 다음과 같이 업데이트합니다.

button{
    padding:10px 20px;
    color:#fff;
    border:none;
    outline:none;
    background-color: teal;
    border-radius: 8px;
    display:block;
    margin:auto;
    margin-top:40px;
    cursor:pointer;
}

이것은 새로 만든 단추의 스타일을 설정합니다.구성 요소에 대한 변경 사항을 다시 볼 수 있습니다. button.fixture.jsx
우리는 우리의 독립된 단추 구성 요소를 성공적으로 만들고 업데이트했습니다.그것은 현재 우리의 다른 응용에 사용할 수 있다.추가 어셈블리를 생성하면 미리 렌더링된 대시보드에 표시되어 볼 수 있습니다.
고정장치 파일은 React 응용 프로그램button.fixture.css 폴더에 있어야 합니다.파일 이름localhost:5000을 추가하거나 폴더를 만들고src 모든 기기 파일을 배치하여 기기를 생성할 수 있습니다.

다중 고정장치 파일

고정장치 파일에서 여러 부품을 내보내는 것은 어려울 수 있습니다. 특히 기본 내보내기만 허용할 때.당신은 구성 요소를 .fixture에 놓는 형식으로 이 문제를 해결할 수 있습니다. 아래와 같습니다.이렇게 하면 고정장치 파일을 사용하여 여러 부품을 내보낼 수 있습니다.

export default {
  primary: <PrimaryButton>Click me</PrimaryButton>,
  primaryDisabled: <PrimaryButton disabled>Click me</PrimaryButton>,
  secondary: <SecondaryButton>Click me</SecondaryButton>,
  secondaryDisabled: <SecondaryButton disabled>Click me</SecondaryButton>,
};

결론

React Cosmos는 현재 또는 미래의 React 응용 프로그램에 격리 구성 요소를 만드는 가장 좋은 방법입니다. 특히 사용하기 쉽고 빠른 디버깅 등의 장점이 있기 때문입니다.다음에 구성 요소를 구축할 때 간단하고 빠른 개발을 위해 React Cosmos를 사용하십시오!

운영 애플리케이션에 대한 포괄적인 이해

React 애플리케이션을 디버깅하는 것은 특히 재현하기 어려운 문제가 발생할 경우 어려울 수 있습니다.Redux 상태 모니터링 및 추적, JavaScript 오류 자동 표시, 느린 네트워크 요청 추적 및 구성 요소 로드 시간 추적에 관심이 있는 경우 .
try LogRocket
마치 인터넷 응용 프로그램의 DVR처럼 당신의React 응용 프로그램에서 발생한 모든 것을 기록합니다.문제가 발생한 원인을 추측할 필요가 없습니다. 문제가 발생했을 때의 응용 프로그램의 상태를 종합하고 보고할 수 있습니다.LogRocket은 또한 어플리케이션의 성능을 모니터링하고 클라이언트 CPU 로드, 클라이언트 메모리 사용 등의 지표를 사용하여 보고할 수 있습니다.
LogRocket Redux 중간 패키지는 사용자 세션에 대한 가시성을 추가합니다.LogRocket은 Redux 스토어의 모든 작업 및 상태를 기록합니다.
React 애플리케이션의 디버깅 방식을 업데이트합니다LogRocket.