절대 경로 적용

// tsconfig.json
"baseUrl": "./",
    "paths": {
      "@/*": ["./app/*"],
      "@/store/*": ["./store/*"],
      "@/public/*": ["./public/*"],
      "@/styles/*": ["./styles/*"],
      "@/common/*": ["./common/*"]
    }

baseUrl에 기본 경로를 지정해주고, path에 별칭을 지정해주면 된다. 별칭은 기본경로부터 최상단이라고 생각하고 지정해주면 된다.

저렇게 작성하면 다른 파일에서 import 해올 때 '../../../../.....' 할 필요 없이 한 눈에 볼 수 있다.

// /app/_components/auth/signOut/actions
import logout from '@/_components/auth/signOut/actions'

// /store/useUserStore
import { useUserStore } from '@/store/useUserStore'
// /public/icons/unknown.png
import UnknownUser from '@/public/icons/unknown.png'

Absolute Imports and Module path aliases
https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases