React에서 여러 항목의 공통 구성 요소를 처리하는 방법 [create-react-ap]

8552 단어 Reactcreate-react-appAtomicDesign

TL;DR

  • 리액트에 Atomic Design 등을 적용해 재활용성을 추가하면서 구성 요소를 만들고, 여러 프로젝트에서 공통의 구성 요소를 사용하려는 경우도 있다.(e.g.User用와 Admin用는 다른 프로젝트로 제작, 공동 구성 요소 처리 등)

  • create-react-app 프로젝트를 시작하는 경우 기본 설정이 어렵기 때문에 거스를 수 없는 조작yarn eject(ornpm run eject을 통해 수동으로 설정합니다.

    • Pros & Cons


    Pros

  • create-react-app의 은혜(간단하게 구축 가능)
  • 핫 로딩이 가능하므로 공동 구성 요소를 폭발 속도로 수정할 수 있음

    • Cons

  • monorepo로 구성되어 있어 코드를 처음 본 사람에게는 위압적
  • 여러 프로젝트가 동일package.json에서 관리되므로 여러 프로젝트에서 동일한 패키지를 사용할 때 버전 일치
    • 가 필요합니다.

  • 진행npm run eject하기 때문에create-react-app 버전 업그레이드를 따라갈 수 없음

    • 메서드

  • yarn eject

  • 편집config/paths.js
  • src/, 수정public/의 디렉터리 구조

  • 편집package.json

    • 전제 조건


    create-react-app ( ver1.3.1 )
    샘플(Giithub)
    commit

    1. yarn eject

    $ yarn eject
    주의: 이 명령을 실행하면 (git 작업 이외에는) 취소할 수 없습니다

    2. config/paths.js 편집


    paths.js
     ~ 省略 ~ 
// デフォルトは'user'　
const ENTRY_NAME = process.env.ENTRY_NAME || 'user' //追加

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build/' + ENTRY_NAME),                      //
  appPublic: resolveApp('public/' + ENTRY_NAME),                    //
  appHtml: resolveApp(`public/${ENTRY_NAME}/index.html`),           //　 編集
  appIndexJs: resolveModule(resolveApp, `src/${ENTRY_NAME}/index`), //  
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

    3. src/,public/의 디렉터리 구조 수정

    config
scripts
public
  index.html
  favicon.ico
  manifest.json
src
  index.js
  index.css
package.json
    ↓
    config
scripts
public
  admin
    index.html
    favicon.ico
    manifest.json
　　 user　　
    index.html
    favicon.ico
    manifest.json
src
  admin
    index.js
    index.css
  user
    index.js
    index.css
  shared
    MySharedComponent.jsx
package.json

    4. package.json 편집


    package.json
      "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "start:admin": "ENTRY_NAME='admin' node scripts/start.js",
    "build:admin": "ENTRY_NAME='admin' node scripts/build.js",
    "test:admin": "ENTRY_NAME='admin' node scripts/test.js"
  },
    [프런트엔드 프레임워크] Element UI Dialog 구성 요소에서 DOM 작업 수행 예외 문제 분석 및 처리
    WPF는 ShowDialog 이후의 메인 창이 키보드 입력법에 응답할 수 있는 해결 방안에 대해 설명합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage