리액트 gh-pages 적용

• 리액트로 만든 사이트를 github에서 호스팅할 경우, gh-pages 패키지를 사용하면 편하다.

• 일반적인 깃허브 페이지는 빌드한 파일들을 해당 브랜치에 넣어두는데, 이 패키지를 사용하면 원격 리포지토리에 gh-pages라는 브랜치가 생기고, 거기에 빌드하게 된다.

적용 과정

• 다음 명령어 중 하나로 gh-pages 패키지를 설치한다.

  $ npm install gh-pages
  $ yarn add gh-pages

  • --save 옵션은 관습적으로 사용하는 것 같다. (https://xtring-dev.tistory.com/entry/NPM-npm-install-%ED%95%A0-%EB%95%8C-save%EB%A5%BC-%ED%95%A8%EA%BB%98-%EC%9E%85%EB%A0%A5%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0)

• 프로젝트의 package.json 파일을 아래처럼 수정한다.

  {
    "homepage": "도메인주소",
    ...(생략),
    "scripts": {
      ...(생략),
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }
  }

• 이 후 배포할 때 다음 명령어 중 하나를 실행하면 새로운 브랜치로 pull request를 할 수 있고, 이를 처리하면 gh-pages 브랜치가 생성된다.

  $ npm run deploy
  $ yarn deploy

• 이후 깃허브의 Settings -> Pages 에서 브랜치를 설정하면 페이지가 해당 브랜치에 대해 설정된다.

참고

• https://www.hohyeonmoon.com/blog/react-js-github-pages-deploy/

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

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

• 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"   
        } 
    ...

리액트 IE11 크로스 브라우징 설정

• 리액트로 만든 사이트가 IE11에서 작동하지 않는 현상이 있었다.

• 나는 create-react-app을 사용했다.

• 루트 디렉토리에서 패키지 매니저로 react-app-polyfill을 설치한다.

    yarn add react-app-polyfill

• index.js에서 라이브러리 불러오기

    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';

참고

• https://devhyun.com/blog/post/16