Javascript 개발자 여정의 어느 시점에서 다음과 같은 유형의 가져오기를 접한 적이 있을 것입니다.

import Car from '../../../vehicles/car'
import House from '../../../buildings/house'

그리고 당신은 아마도 그들의 추악함에 괴로워했을 것입니다 ...



하지만 그거 알아? 나는 그들을 제거하는 방법을 보여주기 위해 구세주로 여기 있습니다! (정말) 😎

준비가 된? 갑시다! 🏁

기본 URL

이러한 끔찍한 가져오기를 제거하는 가장 간단한 방법은 단순히 jsconfig.json 파일을 편집하는 것입니다. 아직 없는 경우 프로젝트의 루트에서 만들 수 있습니다.

다음 키를 사용하여 완료해 보겠습니다.

{
    "compilerOptions": {
        "baseUrl": "."
    }
}

이제 가장 학구적인 분들은 "컴파일러 옵션? 하지만 JavaScript는 컴파일된 언어가 아닙니다!"라고 생각할 수 있습니다. 그리고 당신 말이 맞아요! 이 키가 존재하는 이유를 알고 싶다면 Visual Studio Code의 공식 웹 사이트에서 this link을 따르는 것이 좋습니다.

이제 다음과 같은 디렉토리 구조가 있다고 상상해 보십시오.

.
├── components
│   └── layouts
│       └── header.js
├── styles
│   └── header.css
└── jsconfig.json

header.css 스타일 파일을 header.js 파일에 포함하려면 이제 다음과 같이 할 수 있습니다.

// header.js
import 'styles/header.css'

이 구성이 없으면 수행 방법은 다음과 같습니다.

// header.js
import '../../styles/header.css'

이제 프로젝트 아키텍처의 깊이에 관계없이 프로젝트의 루트에 있는 것처럼 파일을 가져올 수 있습니다. 😲

그리고 당연히 현재 있는 디렉토리에서 상대적으로 가져올 수 있습니다!

.
├── src
│   ├── vehicles
│   │   └── car.js
│   │   └── truck.js
│   └── index.js
└── jsconfig.json

// index.js
import truck from './vehicles/truck.js'

경로

우리 jsconfig.json로 돌아갑니다. 가져오기를 특정 폴더로 매핑하기 위해 paths 키를 추가할 수도 있습니다. 이는 가져오기의 일부 폴더에 별칭을 지정하는 데 유용합니다.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "css/*": ["styles/*"]
        }
    }
}

이전 부분에서 본 것과 동일한 폴더 구조를 고려하면 이제 다음과 같이 스타일을 가져올 수 있습니다.

// header.js
import 'css/header.css'

하지만 이렇게 하면 실제 폴더의 이름과 별칭 사이에 불일치가 생길 수 있으므로 전혀 권장하지 않습니다. 대신 단순히 실제 폴더의 이름을 바꾸지 않는 이유는 무엇입니까? 🤨

그럼에도 불구하고 이 옵션은 자주 사용하고 프로젝트의 루트에 있지 않은 폴더에 유용할 수 있습니다. 다음 구조를 고려해 봅시다.

.
├── assets
│   ├── styles
│   │   └── index.css
|── src
│   └── index.js
└── jsconfig.json

우리는 종종 styles 디렉토리를 사용하여 스타일을 가져옵니다. assets 접두사를 제거할 수 있다면 항상 다음과 같이 작성할 필요가 없습니다.

import 'assets/styles/index.css'

이 경우 jsconfig.json에 다음을 추가할 수 있습니다.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@styles/*": ["assets/styles/*"]
        }
    }
}

그런 다음 스타일을 가져오는 방법은 다음과 같습니다.

import '@styles/index.css'

@는 클래식 가져오기와 구별하기 위해 폴더 매핑 가져오기를 참조하는 일반적인 방법입니다.

타입스크립트

오, TypeScript를 사용하고 있습니까? 대박! 물론 이 트릭을 사용할 수도 있습니다. 유일한 차이점은 이러한 설정을 jsconfig.json 파일 내부에 쓰지 않고 대신 내부...?



정확히! tsconfig.json 파일 내부. 똑똑하지 않나요? 😏

결론

그게 다야! 이제 그 끔찍한 수입품을 없앴습니다. 축하합니다! 🎉

더 나아가서 특히 소스 코드의 일부가 아닌 일부 디렉터리를 제외하려면 공식 Visual Studio Code 웹 사이트에서 this link을 따르는 것이 좋습니다.

그런 의미에서 저를 끝까지 읽어주셔서 감사하고 이 기사를 통해 무언가를 배웠기를 바랍니다. 😎