별칭

별칭은 가져오기에 대한 바로가기를 만드는 방법입니다.

별칭은 디렉터리 또는 상대 경로에서 가져오는 경우가 많은 코드베이스의 개발 경험을 개선하는 데 도움이 됩니다.

src/pages/about/company.astro

---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---

이 예에서 개발자는 src/pages/about/company.astro, src/components/controls/Button.astro, src/assets/logo.png 세 파일 간의 트리 관계를 이해해야 합니다. 그리고 company.astro 파일을 옮기려면 가져오는 경로도 함께 업데이트해야 합니다.

tsconfig.json 또는 jsconfig.json 파일에서 가져오기 별칭을 추가할 수 있습니다.

tsconfig.json

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

노트

별칭 경로를 확인할 수 있도록 compilerOptions.baseUrl이 설정되어 있는지 확인하세요.

이 구성이 변경되면 개발 서버가 자동으로 다시 시작됩니다. 이제 프로젝트의 어느 곳에서나 별칭을 사용하여 가져올 수 있습니다.

src/pages/about/company.astro

---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---

이러한 별칭은 VS Code 및 기타 편집기에 자동으로 통합됩니다.