import 에도 순서가 있다구요~?

 

A... import should occur before import of .....B

 

eslint-plugin-import설치 후 나오는

린트 에러이기 때문에 구동자체가 문제가 되지는 않는다.

하지만 이런 린트 규칙은 이유가 없지는 않을터,

하지만 import 구문은 하나의 코드 파일의 서두와도 같다.

깔끔하게 정렬된 import문은 대략의 코드를 한눈에 보게끔 할 수 있을 것이다.

 

일반적인 import 순서는 아래와 같다.

// Standard Library Imports
import path from 'path';
import fs from 'fs';

일반적인 라이브러리를 최상단에 import해준다.

 

// Third-Party Imports
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import lodash from 'lodash';

그리고 리엑트나, 서드파티 라이브러리를 import해준다.

 

// Absolute Imports (internal)
import utils from 'utils';
import config from 'config';

// Relative Imports (internal)
import MyComponent from './components/MyComponent';
import { someFunction } from './utils/helpers';

그리고 나서 절대경로, 상대경로의 순으로 import 해준다.

 

 

정리하자면, 

1. 일반적인 라이브러리

2. 서드파티

3. 절대경로

4. 상대경로

순으로 import 해주면된다.

 

import 순서

가 코딩 실력을 다이내믹하게 바꿔주지는 않겠지만

이런 세세한 디테일이 쌓여서 

프로가 되는게 아닐까!