Node.js로 CRA 시 기본 파일과 폴더 한 번에 세팅하기

리액트를 공부하면서 CRA 때마다 반복적으로 기본 파일을 생성하거나 폴더링 작업을 하는 것이 시간이 아깝다는 생각이 들었다. 매 번 component 구조나 파일이 바뀌었기 때문에 파일을 복사 붙여넣기도 애매했는데, 이 작업들을 Node.js의 file system을 이용해서 자동화를 해보았다.

 

 

file system 모듈 import

Node.js에 내장되어있는 파일시스템을 불러온다.

const fs = require('fs');

 

 

디렉토리 세팅

생성할 디렉토리 경로를 array에 담아 작성해준다.

const arrDirectory = [
    'src/apis',
    'src/components/Shared/BtnLike',
    'src/components/Shared/NotFound',
    'src/components/Shared/FailLoadData',
    'src/pages/CartPage',
    'src/pages/HomePage',
    'src/pages/ProductDetailPage',
];

 

 

생성할 파일의 템플릿 세팅

파일이 생성되었을 때 기본적으로 들어갈 코드를 생성해주는 함수를 추가한다.

아래의 코드는 JSX 컴포넌트와 styled-component 파일의 템플릿을 생성하는 함수다.

const constComponent = title => `import React from 'react';
import {${title}Wrapper} from './styled.jsx'

const ${title} = () => {
    return <p>${title}</p>;
};

export default ${title};
`;

const styledComponent = title => `import styled from 'styled-components';

export const ${title}Wrapper = styled.div\`\`;
`;

 

 

Util 함수 추가

파스칼 케이스를 카멜 케이스로 변환하는 함수를 추가한다.

이 함수는 네이밍 컨벤션을 맞추기 위해 추가해준 것으로 필수적인 부분은 아니다.

const pascalToCamel = str => {
    return str[0].toLowerCase() + str.slice(1);
};

 

 

파일 생성 함수 추가

파일을 생성할 디렉토리, 파일명, 템플릿을 인자로 받는 함수를 만들어주었다.

[ic]fs.writeFile[/ic] 을 통해 파일을 생성하는데, 이미 존재한다면 파일이 생성되지 않고 에러를 반환하도록 옵션을 주었다.

const createFile = (dir, file, content) => {
    fs.writeFile(
        `${dir}/${file}`,
        content,
        {
            flag: 'ax',
        },
        err => {
            if (err === null) {
                console.log(`${file} file successfully saved`);
            } else if (err.code === 'EEXIST') {
                console.log('File already exists');
            }
        }
    );
};

 

 

디렉토리 및 템플릿 파일 생성

[ic]fs.mkdirSync[/ic] 를 이용해서 폴더를 생성하는 함수를 추가한다.

위에서 선언해 준 디렉토리 array를 순회하면서 폴더와 파일을 생성해주었다.

const createDirectory = path => {
    path.split('/').reduce((directories, directory) => {
        const category = directories;

        directories += `${directory}/`;

        if (!fs.existsSync(directories)) {
            fs.mkdirSync(directories);
        }

        // components 와 pages 하위 경로에 템플릿 생성
        if (category.includes('components') || category.includes('pages')) {
            createFile(directories, `styled.jsx`, styledComponent(directory));
            createFile(
                directories,
                `${directory}.jsx`,
                constComponent(directory)
            );
        }

        return directories;
    }, '');
};

arrDirectory.forEach(item => createDirectory(item));

 

 

scripts 추가

조금 더 직관적으로 명령어를 작성할 수 있도록 scripts를 추가해주었다.

이제 작성한 js 파일을 프로젝트의 루트 디렉토리에 두고 터미널에 [ic]node 파일명[/ic]을 입력하면 기본 폴더가 생성된다.

// package.json

"scripts": {
    "setDir": "node {파일명}"
},