> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/absolute-path-import.md).

# 절대 경로 import

디렉토리 별칭 등록

앱 구조가 복잡해지면 상대 경로를 사용해 컴포넌트를 호출할 때 상당히 괴롭습니다.

```javascript
import AppCalendar from '../../../../../../../components/ui/Calendar'
```

CRA는 절대 경로를 사용할 수 있는 기능을 제공하므로 보다 손쉽게 컴포넌트를 호출할 수 있습니다. 프로젝트 루트 위치에 `jsconfig.json` 파일을 생성한 후 다음 코드를 작성합니다.

{% tabs %}
{% tab title="jsonfig.json" %}

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

{% endtab %}
{% endtabs %}

기본 URL 설정이 `src` 디렉토리가 되므로 `src` 디렉토리 기준 절대 경로를 사용하여 컴포넌트를 불러올 수 있습니다.

```javascript
import AppCalendar from 'components/ui/Calendar'
```

다른 모듈(예: `node_modules` 디렉토리 안에 포함된 설치 모듈)과 충돌이 염려된다면 특수 문자(예: `@`)를 사용해 디렉토리 별칭을 등록할 수도 있습니다. `paths` 항목을 추가한 다음 디렉토리 별칭을 등록합니다.

{% tabs %}
{% tab title="jsonfig.json" %}

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

{% endtab %}
{% endtabs %}

등록된 별칭으로 디렉토리 명을 입력해 컴포넌트를 호출하면 다른 NPM 모듈과 충돌 문제를 방지할 수 있습니다.

```javascript
import AppCalendar from '@components/ui/Calendar'
```