💘들어가며

• import 순서도 코드의 가독성, 일관성 등을 높이는 데 한 몫 단단히 하는거 같습니다.
• 가독성
  • 파일이 구분되어 코드 읽는 데 도움을 줌
  • 필요한 모듈을 빠르게 찾아 개발 속도 상승
• 코드 통일성 유지
• 모듈 추가시 충돌 최소화 등
  
  

---

import 순서

1. 기본 라이브러리

• React에서 기본이 되는 라이브러리들

import React from 'react';
import ReactDOM from 'react-dom';

2. 서드파티 라이브러리

• 외부 라이브러리

import axios from 'axios';
import _ from 'lodash';

3. 절대경로

• 지정된 모듈이나 컴포넌트
• jsconfig.json tsconfig.json에서 설정

import App from 'components/App';
import config from 'config';

4. 상대경로

• 상대 경로에 위치한 모듈이나 컴포넌트들

import Header from './Header';
import { formatDate } from '../utils/formatDate';

5. 스타일

• css 스타일 관련

import './App.css';

---

ESLint를 사용해서 import 순서 정의

ESLint "sort-imports" 추가

https://eslint.org/docs/latest/rules/sort-imports

eslint-plugin-import 플러그인 설치하는 방법

https://www.npmjs.com/package/eslint-plugin-import
https://pozafly.github.io/environment/putting-rules-into-import-syntax-with-eslint/