[Next.js] 포트폴리오 웹 페이지 제작기 - 12. import 개선 (path alias)

현재 index.ts의 import들이 보기가 좋지 않다.

// pages/index.ts

/* ... */

import About from '@/components/Contents/About/About';
import Contact from '@/components/Contents/Contact/Contact';
import Main from '@/components/Contents/Main/Main';
import Projects from '@/components/Contents/Projects/Projects';
import Header from '@/components/Header/Header';
import IconBar from '@/components/IconBar/IconBar';
import { IconNames } from '@/components/Icons/types';

/* ... */

가독성이 매우 떨어진다고 생각한다.
이는 다른 파일에서도 마찬가지다.

// components/Iconbar/IconBar.tsx

/* ... */

import { IconNames } from '../Icons/types';
import IconButton from '../Buttons/IconButton';
import VerticalLine from './VerticalLine';
import { GENERAL_ICON_STYLE } from '@/constants/styles';

/* ... */

이런 식으로 상대 경로와 절대 경로가 뒤죽박죽 섞여있으면 가독성은 더욱 떨어지게 된다.
path alias를 정의해서 이 문제를 해결할 수 있다.

// tsconfig.json 

{
  "compilerOptions": {
	/* ... */
    
    "paths": {
      "@/*": ["./src/*"], // 원래 있었음, e.g. '@/constants/styles' 처럼 사용
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@About/*": ["./src/components/Contents/About/*"],
      "@Contact/*": ["./src/components/Contents/Contact/*"],
      "@Main/*": ["./src/components/Contents/Main/*"],
      "@Projects/*": ["./src/components/Contents/Projects/*"],
      "@constants/*": ["./src/constants/*"],
      "@hooks/*": ["./src/hooks/*"]
    }
  },

위와 같이 alias를 설정해주면 아래처럼 import문들을 보다 가독성 좋게 바꿀 수 있다...?

// pages/index.ts

/* ... */

import About from '@About/About';
import Contact from '@Contact/Contact';
import Main from '@Main/Main';
import Projects from '@Projects/Projects';
import Header from '@components/Header/Header';
import IconBar from '@components/IconBar/IconBar';
import { IconNames } from '@components/Icons/types';

/* ... */

맨 처음보단 나아졌지만, 여전히 마음에 들지 않는 부분들이 있다.
가장 거슬리는 문제는 @About/About처럼 이름이 중복되는 현상이다.

이를 해결하기 위해서는 우선 아까 tsconfig.json에서 paths 부분을 아래처럼 조금 수정해야 한다.

// tsconfig.json

/* ... */

"@About": ["./src/components/Contents/About"],
"@About/*": ["./src/components/Contents/About/*"],
  
/* ... */

첫 번째 줄은 About 폴더의 index.ts 파일을 @About/index 대신 @About만으로도 import할 수 있게 만들기 위함이고, 두 번째 줄은 About 폴더에 있는 다른 컴포넌트들을 @About/Component처럼 사용하기 위함이다.

그리고 About 폴더에 index.ts를 생성해준다.

// components/Contents/About/index.ts

import About from "./About";

export default About;

다른 디렉토리에 대해서도 같은 방식으로 설정해주면 아래와 같이 바꿀 수 있다.

// index.ts

/* ... */

import Contact from '@Contact';
import About from '@About';
import Main from '@Main';
import Projects from '@Projects';
import Header from '@Header';
import IconBar from '@IconBar';
import { IconNames } from '@Icons/types';

/* ... */

// components/IconBar/Iconbar.tsx

import { IconNames } from '@Icons/types';
import { IconButton } from '@Buttons';
import VerticalLine from '@IconBar/VerticalLine';
import { GENERAL_ICON_STYLE } from '@constants/styles';

path alias의 모양과 형식은 취향 차이기 때문에 무조건 위와 동일한 구조를 사용해야 하는 것은 아니다.
개인 프로젝트라면 개인이 선호하는 방식을 따르고, 팀 프로젝트라면 팀원들과 합의 하에 결정하면 좋을 것이다.
하지만 path alias를 적용한 프로젝트와 적용하지 않은 프로젝트는 그 규모가 커질수록 가독성 차이도 커질 것이기 때문에, 어떤 방식으로든 적용하면 도움이 될 것이다.