터미널에서 React 프로젝트 만들기
아래 명령어를 터미널에 입력하면 리액트 프로젝트를 시작할 수 있다.
npx 명령어는 npm 패키지를 1회성으로 내려 받아 실행할 때 사용하는 명령어이다.
최신버전으로 다운로드 받아야 개발과정에서 발생하는 에러가 적다고 한다.
단, 리액트 프로젝트의 디렉토리명은 react를 제외한 이름으로 설정해야 한다.
// 최신 버전 다운로드
npx create-react-app@latest .
// 기본적으로 git 셋팅되어 있음. remote 연결
git remote add origin <깃헙주소>
git push origin main
// 빌드 폴더 생성, 작업한 내용으로 production용으로 만듬
npm run build
cd build
ws // 웹서버
ws --https // https 환경에서 웹서버 실행
// 커맨드라인에서 실행할 수 있는 웹서버
npm install --global local-web-serverCDN을 활용하여 프로젝트 시작하기
CDN(Contents Delivery Network)은 지리적 물리적으로 떨어져 있는 사용자에게 컨텐츠 제공자의 컨텐츠를 더 빠르게 제공할 수 있는 기술을 말합니다. CDN을 사용하면 다음과 같은 이점이 있습니다.
- 온라인 콘텐츠를 빠르게 전송 가능합니다.
- 시스템을 정상적으로 사용가능한 정도(가용성)가 높습니다.
- 외부의 다양한 공격을 방지합니다.
React에서 CDN을 활용하기 위해서는 index.html 파일의 <head>태그 내에 crossorigin 속성을 이용하면 됩니다. 해당 속성을 통해 실행 중인 React 앱이 해당 출처의 리소스에 접근할 수 있는 권한을 부여할 수 있도록 알려줄 수 있습니다.
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>리액트 github에서 웹 호스팅하기
웹서버를 이용해 확인할 수도 있지만 깃헙을 이용해서 배포도 가능하다.
아래 명령어를 입력하고 깃헙 해당 repo의 [settings]-[pages]에서 배포된 사이트를 확인할 수 있다.
// 깃허브 원격저장소에 브랜치를 만들고 build 폴더를 커밋, 호스팅, pages 활성화
npx gh-pages -d build
// pakage.json 에 추가하면 상대경로를 반영하게 된다.
"homepage": "https://<username>.github.io/<reponame>/",
// 다시 빌드
npm run build
cd build
ws // 웹서버
// 다시 실행하기
npx gh-pages -d build
