ReactJs에서 절대 경로를 사용하는 방법

ReactJs에서 절대 경로를 사용하는 방법

2022-10-04 last update

5 minutes reading react absolutepath javascript path
절대경로 vs 상대경로?
절대 경로는 시스템 저장소가 시작되거나 프로젝트가 시작되는 루트에서 폴더 또는 파일을 소싱하는 경우입니다.

상대 경로는 프로젝트 구조에서 현재 위치를 고려하여 파일 또는 폴더에 대한 소스를 시도할 때입니다.

절대 경로로 React 프로젝트를 구성하는 단계입니다.


  • React 앱 만들기
  • jsconfig.json 추가
  • 절대 경로가 있는 가져오기 파일

  • React 앱 만들기



    구성할 반응 앱이 이미 있는 경우 이 단계를 건너뛸 수 있습니다.

    npx create-react-app app_name
    


    App.js



    import Button from "./components/button";
    
    const App = () => {
      return (
        <div>
          <Button />
          <Card></Card>
        </div>
      );
    };
    
    export default App;
    
    


    jsconfig.json 추가



    프로젝트에서 package.json 옆에 jsconfig.json을 추가하십시오.


    jsconfig.js



    {
      "compilerOptions": {
        "baseUrl": "src"
      },
      "exclude": ["node_modules", "build"],
      "include": ["src"]
    }
    
    


    typescript의 경우 tsconfig.json 생성

    tsconfig.json



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


    절대 경로로 가져오기




    import Button from "components/button";
    
    const App = () => {
      return (
        <div>
          <Button />
          <Card></Card>
        </div>
      );
    };
    
    export default App;