[Svelte] 경로 Alias 설정

안녕하세요. J4J입니다.

 

이번 포스팅은 경로 alias 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

svelte에 한정된 것은 아니지만 개발을 하다 보면 모듈화 되어 있는 다른 컴포넌트 또는 이미지 등의 파일들을 로드해올 때 보통 상대 경로로 로드합니다.

 

예를 들면 이런식으로 표현이 되죠.

 

import MyComponent from '../components/MyComponent.svelte';

 

 

 

하지만 이런 표현들은 만약 파일의 위치를 옮기는 상황이 발생되면 경로들을 다시 수정해줘야 합니다.

 

이런 상황들을 방지할 수 있는 것이 경로 alias 설정을 하는 것입니다.

 

경로 alias에 대한 예를 간단히 들면 보통 소스 파일들이 저장되는 src에 해당하는 경로의 alias를 ~로 지정하면 모듈을 로드해올 때 다음과 같이 코드를 작성하게 됩니다.

 

import MyComponent from '~/components/MyComponent.svelte';

 

 

 

그리고 이후에 해당 코드가 작성된 파일의 위치가 변경되어도 상대 경로로 지정한 것이 아니라 src경로를 기준으로 절대 경로를 사용했기 때문에 로드해오는 경로를 수정할 필요가 없어지게 됩니다.

 

제가 말한것과 같이 동작이 되는지 rollup설정 파일을 이용하여 alias설정을 해보겠습니다.

 

 

반응형

 

 

경로 Alias 설정

 

[ 1. 패키지 설치 ]

 

$ npm install -D @rollup/plugin-alias

 

 

 

[ 2. rollup 설정 파일 수정 ]

 

import alias from '@rollup/plugin-alias';
import path from 'path';

export default {
    plugins: [
        alias({
            entries: [
                {
                    find: '~',
                    replacement: path.resolve(__dirname, 'src/'), // __dirmname: 해당 파일의 경로, "해당 파일의 경로/src"에 해당하는 경로를 ~로 alias
                }
            ]
        }),
    ],
};

 

 

 

예시 코드

 

간단 예시 코드를 만들어보겠습니다.

 

App.svelte에는 다음과 같이 작성해보겠습니다.

 

<script>
	import MyComponent from '~/components/MyComponent.svelte';
</script>

<main>
	<MyComponent />
</main>

 

 

 

그리고 App.svelte와 동일한 경로에 components폴더를 만들고 폴더 내부에 MyComponent.svelte파일을 다음과 같이 작성해보겠습니다.

 

<script>
    import Hello from '~/components/Hello.svelte';
</script>

<div>
    <h2>MyComponent ...</h2>
    <span>this component for tistory</span>

    <Hello />
</div>

 

 

 

MyComponent.svelte와 동일 경로에 Hello.svelte파일을 다음과 같이 작성해보겠습니다.

 

<h3>Hello, Svelte</h3>

 

 

 

코드를 실행해보면 다음과 같이 정상적으로 나오는 것을 확인할 수 있습니다.

 

실행 결과

 

 

 

이제 여기서 만약 MyComponent.svelte파일의 경로를 App.svelte와 동일 위치로 변경해야 된다고 가정해보겠습니다.

 

그럴 경우 각각의 파일들은 다음과 같이 소스코드가 수정됩니다.

 

 

 

[ App.svelte ]

 

<script>
	import MyComponent from '~/MyComponent.svelte';
</script>

<main>
	<MyComponent />
</main>

 

 

 

[ MyComponent.svelte ]

 

<script>
    import Hello from '~/components/Hello.svelte';
</script>

<div>
    <h2>MyComponent ...</h2>
    <span>this component for tistory</span>

    <Hello />
</div>

 

 

 

[ Hello.svelte ]

 

<h3>Hello, Svelte</h3>

 

 

 

결과만 보자면 경로 이동이 실제로 일어난 MyComponent.svelte를 사용하는 App.svelte에서만 경로가 수정되었습니다.

 

그리고 상대경로를 사용했을 경우에 수정되어야 했던 MyComponent.svelte에서 Hello.svelte를 불러오는 경로는 달라지지 않고 동일한 것을 확인할 수 있습니다.

 

이처럼 경로 alias를 설정하면 파일 경로를 변경하는 등의 상황에 있어 더 효율적인 상황을 제공해줄 수 있습니다.

 

 

728x90

 

 

파일 경로

 

파일 이동 전

 

파일 이동 후

 

 

 

 

 

 

이상으로 경로 alias 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.