가져오기 계층

수입품을 더욱 우아하고 체계적으로 만들기 | 파트 II

오늘 우리는 가져오기를 더 우아하고 체계적으로 만드는 방법에 대해 계속 이야기할 것입니다. 이를 위해서는 가져오기 계층 구조에 대해 이야기해야 합니다.

가져오기 계층이란 무엇입니까?

이름 자체에서 알 수 있듯이 가져오기 계층 구조는 코드에서 가져온 종속성의 우선 순위입니다.

우리의 .js 및 .jsx 파일이 많은 라이브러리, 구성 요소, 페이지, 컨트롤러, 서비스, 도우미, 스타일, 즉 다양한 파일 유형 및 데이터를 가져오는 것은 매우 일반적입니다.

아래 예는 프런트 엔드 개발자의 일상 생활에서 매우 일반적입니다.

import React, { useState, useEffect } from 'react';
import Button from '~/components/Button';
import { Container } from './styles.js';
import Card from '~/components/Card';
import PropTypes from 'prop-types';
import { combineReducers } from 'redux';
import Main from '~/pages/Main';
import Dashboard from '~/components/Dashboard';
import Home from '~/pages/Home';
import Routes from '~/routes';

function ExampleComponent() { ...

위의 코드를 보면 "이 코드에는 아무런 문제가 없습니다"라고 생각할 수 있습니다.

그리고 실제로는 없습니다. 필요한 종속성을 가져왔고 사용할 준비가 되었습니다.

But if we can make it more organized, why not?

아래에서는 동일한 예를 보여 주며 더 체계적입니다.

import React, { useState, useEffect } from 'react';
import { combineReducers } from 'redux';

import PropTypes from 'prop-types';

import Home from '~/pages/Home';
import Main from '~/pages/Main';

import Button from '~/components/Button';
import Card from '~/components/Card';
import Dashboard from '~/components/Dashboard';

import Routes from '~/routes';

import { Container } from './styles.js';

function ExampleComponent() { ...

위의 예에서 다음과 같이 가져오기를 주문했습니다.

첫째: 내 애플리케이션에서 가장 중요하다고 생각하는 모든 종속성입니다. 예를 들어 'react' 및 'redux'로 시작하는 모든 항목

다음: 다른 모든 라이브러리와 모듈은 package.json에 설치됩니다. 예를 들어 소품 유형, Storybook, Unform 등

다음: ~/ 또는 @ 별칭으로 시작하는 모든 내부 파일. 예를 들어 ~/components , ~/pages , ~/styles , @controllers , @models 등이 있습니다. 게시물에서 이것이 어떻게 도움이 되는지 설명합니다. 애플리케이션 가져오기를 용이하게 하기 위해 사용자 정의 가져오기 경로를 만들고 구성하는 방법을 보여줍니다

.

so: 내 응용 프로그램 경로"

그리고 마지막으로: 내 스타일. 이 경우 .styled.js라는 파일이

// first, everything that starts with 'react' and 'redux'
import React, { useState, useEffect } from 'react';
import { combineReducers } from 'redux';

// then all imported modules and libraries
import PropTypes from 'prop-types';

// then anything that starts with an alias '~/pages' or '@pages'
import Home from '~/pages/Home';
import Main from '~/pages/Main';

// then anything that starts with an alias '~/components' or '@components'
import Button from '~/components/Button';
import Card from '~/components/Card';
import Dashboard from '~/components/Dashboard';

// so my routes
import Routes from '~/routes';

// and finally, my styles
import { Container } from './styles.js';

function ExampleComponent() { ...

물론 모든 코드에 대해 이 계층 구조를 유지하려면 많은 시간과 관심, 주의가 필요합니다.

하지만 이 작업을 자동화할 수 있다는 것은 좋은 일입니다. 그렇죠?

eslint-plugin-import-helpers 알아보기

eslint-plugin-import-helpers는 에서 만든 패키지로 eslint-plugin-import 보완을 목표로 합니다. 이것은 eslint-plugin-import에서 여전히 누락된 매우 중요한 사용 사례인 가져오기 순서를 가져옵니다.

주문 가져오기 및 작동 방식 정보

eslint-plugin-import-helpers는 order-imports 플러그인만 가져옵니다(이 게시물 날짜 기준). 이 플러그인을 사용하면 간단한.eslintrc.js 구성 파일만으로 가져오기 계층 구조를 구성할 수 있습니다.

실현하기

우선 프로젝트에 ESLint 및 Prettier를 구성해야 합니다. 우연히 아직 구성하지 않은 경우 이 자습서를 따르는 것이 좋습니다.



ESLint 및 Prettier를 설치 및 구성한 후 다음 단계를 진행할 수 있습니다.

eslint-plugin-import-helpers 설치 및 구성

반응 프로젝트의 루트에 puglin을 설치해 보겠습니다.

yarn add -D eslint-plugin-import-helpers

이제 .eslintrc.js 파일에서 import-helpers/order-imports 규칙을 구성해 보겠습니다.

// .eslintrc.js
rules: {
  'import-helpers/order-imports': [
    'warn', // displays an alert in the editor
    {
      newlinesBetween: 'always', // inserts a blank line after each priority group
      groups: [
        ['/^react/', '/^redux/'], // first group: everything that starts with 'react' and 'redux'
        '/styled-components/', // second group: everything that is imported directly from the styled-components library. This is to ensure that the first import in styles.js files is always styled-components.
        'module', // third group: everything that is a module (any library listed in the package.json file)
        '/prop-types/', // fourth group: importing prop-types
        '/^~/pages/', // fifth group: all my pages
        '/^~/components/', // sixth group: all my components
        ['parent', 'sibling', 'index'], // seventh group: any parent, sibling, or child file of the current file
        '/routes/', // eighth group: my routes
        '/^~/', // ninth group: all other files imported by the configured alias
        '/styles/', // last group: my styles
      ],
      alphabetize: { order: 'asc', ignoreCase: true }, // configures imports in alphabetical (ascending) order, ignoring case
    },
  ],
}

준비 완료!

ESLint 개선 제안을 자동으로 수정하도록 prettier를 구성한 경우 이 계층 구조가 준수되지 않을 때마다 VSCODE는 파일이 저장되는 즉시 가져오기를 자동으로 재구성합니다.

이 예제를 실제로 보고 싶다면 여기에서 내가 React 프로젝트용으로 만든 템플릿을 살펴볼 수 있습니다.

코데라모스 / 템플릿-reactjs

이 프로젝트에는 React 프로젝트의 기본 구조가 포함되어 있습니다. babel-plugin-root-import, eslint-plugin-import-helpers, prop-types, react-router-dom, styled-components 등에 대한 설정도 포함되어 있습니다.

이 게시물에 대해 어떻게 생각하는지 댓글로 남겨주세요 :)