[React] 리액트 엑시오스 import axios 오류 Absolute imports should come before relative imports.eslint import/first

import axios from 'axios';

프로젝트 하면서 엑시오스를 불러오려는데

다른 파일에서도 멀쩡하게 불러와지던게

보기 싫은 빨간 밑줄이 생겨버렸다

 

이런 오류는 왜 뜨는걸까?!

 

원인은 from 뒤에 있다

 

 

오류 메세지를 보면

 

Absolute imports should come before relative imports. eslint (import/first)

 

=> 절대 경로는 상대 경로보다 이전에 와야만 한다 ESLint (불러오기/ 먼저)

 

절대 경로는 'react' 나 'axios' 처럼 절대적인 경로이고

 

상대 경로는 

'../../components/molecules/TopNavBarSave/TopNavBarSave'

와 같이 현재 파일의 위치로부터 설정된 경로이다

 

 

때문에 이런 오류가 떴다면 현재 위의 상황과 같이 폴더로 된 상대 경로가

엑시오스와 같은 절대 경로보다 위에 있지는 않는지 위치를 확인해보면 된다

 

 

위치를 바꿔주자 간단히 오류가 사라졌다

 

근본적으로 왜그런지 까지는 알 수 없지만 스택오버 플로우에 의하면 ESLint 설정상 법칙인 것 같다

 

https://stackoverflow.com/questions/47734886/why-should-absolute-imports-come-before-relative-imports

Why should absolute imports come before relative imports?

It's just an coding convention to make everything cleaner.