리액트 프로젝트 사이트맵 생성

리액트 프로젝트 사이트맵 생성

• 구글 검색을 최적화하려면 사이트맵을 제출해야 한다.

• yarn과 npm을 혼용했는데 웬만하면 하나로 통일해서 사용하는게 좋은 듯하다.

• react-router-sitemap 패키지를 사용한다.

    npm install react-router-sitemap

• 사이트에서 Route를 사용한 파일을 복사하여 이름을 변경한다.

  • 나는 1개의 파일에서만 분리했는데, 서브라우팅의 경우 어떻게 하는지 궁금하다.

  • 참고 : https://ujeon.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%B5-%EB%A7%8C%EB%93%A4%EA%B8%B0-1116ff8b6c2a

• 적절한 경로에 사이트맵 제네레이터 파일을 생성한다.

  sitemapGenerator.js

    require("babel-register")({
        presets: ["es2015", "react"]
    });
    require.extensions['.css'] = () => {};
  
    const router = require("./sitemapRoutes").default;
    const Sitemap = require("react-router-sitemap").default;
  
    function generateSitemap() {
            return (
                new Sitemap(router)
                        .build("도메인 이름")
                        .save("./public/sitemap.xml")
            );
    }
  
    generateSitemap();

  • 따로 설치한 패키지의 css 파일에서 SyntaxError: Invalid left-hand side in assignment 에러가 발생해서, require.extensions['.css'] = () => {}; 항목을 넣어주었다.

• 위의 바벨을 적용하기 위해 다음 패키지를 설치한다.

    npm install --save-dev babel-cli 
    npm install --save-dev babel-preset-es2015 
    npm install --save-dev babel-preset-react 
    npm install --save-dev babel-register

• package.json 파일의 scripts 부분에 다음을 추가하여 사용한다.

    ... 
        "scripts": {     
            ...
            "sitemap": "babel-node 경로/sitemaGenerator.js"   
        } 
    ...

• yarn sitemap을 실행하면 sitemap.xml 파일이 생긴다.

• 배포할 때 자동으로 생성되도록 하려면 package.json 파일의 scripts 부분에 다음을 추가한다.

    ... 
        "scripts": {     
            ...    
            "predeploy": "yarn sitemap"   
        } 
    ...