라우팅 @ [절대경로를 통한 라우팅이 상태관리에 더욱 용이]

@기호

import 이미지 from "../../public/food1.png";

import 이미지 from "@/public/food1.png";

 

같은 효과를 가져온다.

 

@기호란?

{

  "compilerOptions": {

    "paths": {

      "@/*": ["./*"]

    }

  }

}

 

 

이 설정은 프로젝트의 모든 디렉토리를 @를 통해 접근할 수 있도록 합니다. 구체적으로 설명하면, @/something이 실제로는 ./something 디렉토리를 가리키도록 매핑됩니다.

---

import Image from "next/image";

import Image from "next/image";

 

next component로 이미지 로딩을 위한 최적화된 설정을 도와준다.

---

 

두 코드 모두 똑같은 값을 불러오지만, 나중에 폴더나, 파일위치 등이 바뀌었을 경우, 절대경로(@)를 통한 것이

파일 관리가 더욱 용이하다. 그래서 전자보다 쓸 수 있다면 후자를 추천.

import { Header } from './styles';

import { Header } from '@layouts/Workspace/styles';