js/리액트 절대경로 설정하기 - jsconfig.json / tsconfig.json

혹시 나의 폴더 구조가 이렇다면?

import {...} from './components/폴더/폴더'
import {...} from '../../components/폴더/폴더'
import {...} from '../../../components/폴더/폴더'

 

코드양이 증가할수록 임포트할 모듈도 많아지면 점점 복잡해지고

새로운 파일에 임포트 내용을 복사붙여넣기한다면 다시 경로를 검토해야할것이다.

이때 절대경로로 할수있다면 깔끔하고 좋지않을까?

import {...} from 'component/styled/login'

 

root 폴더내 jsconfig.json을 생성한다.

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

vs코드를 종료했다가 다시 실행하니 문제없이 작동했다.

 

하지만 이래도 문장들이 너무 중복되는것 같다.

import {...} from 'components/layout/폴더'
import {...} from 'components/layout/폴더'
import {...} from 'components/layout/폴더'

예를들어 'components/layout/blabla' 폴더경로를 '@/layout/blabla'로 줄일 수있다.

    "paths": {
      "@/layout/*": ["compoents/layout/*"]
    },

https://fe-flower.tistory.com/23

import를 위한 절대경로 Path설정 - jsconfig.json

https://www.youtube.com/watch?v=h5ekwDyjmW4 

https://www.youtube.com/watch?v=V-ntY44UvhM