하나의 node_modules로 CRA를 관리해서 front 디렉토리를 생성한다.

[4BFC]

• CRA는 설치한 특정 root에서만 동작하게 webpack으로 설정이 되어 있다. 만약 우리가 특정 디렉토리에서 동작하게 하기위해서는 본래에는 webpack을 가지고 사용해야하 지만 현재 CRA를 기준으로 동작할 수 있게 코드를 구현하려 한다. 따라 craco와 같은 override를 할 수 있는 라이브러리를 사용해서 CRA의 webpack 설정을 변경 하였다. 내가 설정한 craco는 다음과 같다.

    const path = require('path');
    
    module.exports = {
      webpack: {
        alias: {
          '@': path.resolve(__dirname, 'front/src'), // '@'로 src 경로 접근
        },
      },
      paths: {
        appSrc: path.resolve(__dirname, 'front/src'), // src 경로 재설정
        appPublic: path.resolve(__dirname, 'front/public'), // public 경로 재설정
        appIndexJs: path.resolve(__dirname, 'front/src/index.tsx'), // index.js 경로 지정
        appHtml: path.resolve(__dirname, 'front/public/index.html'), // index.html 경로 지정
      },
    };
  

  여기서 appSrc는 front/src로 src 디렉토리를 설정하고 appIndexJs front/src/index.js로 진입 파일 경로를 설정, appHtml은 front/public/index.html로 index.html 경로를 설정한다. 여기서 해당 path 객체 이름은 임의로 설정된 것이 아니라 기존 React에서 설정된 webpack의 이름을 사용한 것이기 때문에 변경하면 안된다. 따라서 전체 적인 디렉토리 구조는 다음과 같다.

    TRENDGARAGE
    ├── front
    │   ├── public
    │   ├── src
    │   └── README.md
    ├── node_modules
    ├── .gitignore
    ├── craco.config.js
    ├── package-lock.json
    ├── package.json
    ├── README.old.md
    └── tsconfig.json
  

• 그렇다면 mono-repo인가?

  • 그렇지 않다. 현재 독릭접인 package.json이 아니며 workspace를 설정하지 않았기 때문에 mono-repo라고 할 수 없다. 우리가 이상적으로 생각하고 있는 mono-repe의 구조는 다음과 같다.

    TRENDGARAGE
    ├── front
    │   ├── public
    │   ├── src
    │   ├── package.json       // front의 개별 package.json
    │   ├── craco.config.js
    │   └── tsconfig.json
    ├── node_modules            // 공유된 node_modules
    ├── .gitignore
    ├── package.json            // 루트-level package.json with workspaces
    └── README.md
    

• 앞으로의 다양한 라이브러리를 설치할 때 루트에서 설정하고 이를 내부로 설정할 수 있도록 하면 될 것이다. 특히, eslint같은 경우 extned를 사용해서 규칙을 정해볼 예정이다.