Web/React

리액트 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%..

리액트 프로젝트 사이트맵 생성 구글 검색을 최적화하려면 사이트맵을 제출해야 한다. 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..

리액트 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