'서버가 없는 리액트' (+서버/노드,sql 필요)
- "인터페이스와 data 바인딩" (데이터-본체 분리! 빠른 유지보수/최적화렌딩)
- 아마존/우분트(월4만원) *서버 필요한데, 없다면... 깃페이지 만들기!
0. 리액트 npx create-react-app simple
1. 깃 페이지 만들기 - 배포 가능!
1-1. 레포지토리 생성
ex) AOS : 실존하는/렌딩되는 깃
1-2. npm run build → 빌드 폴더 생성
① npm run build (웹)
② build 폴더 생성
③ add file → upload files
④ (드래그) 그걸 깃페이지에 올림!
⑤ 메인 깃페이지 생성! (좀 기다려야 함)
1-3. 두번째 깃페이지 만들기
① 레포지토리 생성
② setting → pages에서 main / root 저장
2. 깃페이지 만들기 실습
⑴ junglasta.github.io 생성
⑵ 깃클론
⑶ 파일 복붙
⑷ 깃인잇 (깃이그노어에 이미지 빼! 깃페이지에 올려야함)
⑸ 깃페이지 확인 https://junglasta.github.io/
3. 페이지 배포 시, public과 src 경로 수정하기
방법1) src 폴더 안에 img 폴더 넣고 임포트... 하기 싫으면?
방법2) public 폴더 안에 img 경로 만들고! 경로 수정하기
package.json에서 리액트 페이지 경로를 homepage 실제경로로 설정한다
public폴더에 이미지 파일을 넣으면 웹팩에서 처리 되지 않습니다. 대신 빌드 폴더에 그대로 복사됩니다. 폴더 의 자산을 참조하려면 public이라는 환경 변수 PUBLIC_URL을 사용해야 합니다.
index.html 파일에 작성하는 경우
<img src="%PUBLIC_URL%/이미지경로/이미지파일.jpg" />%PUBLIC_URL% 라고 환경변수를 경로에 작성합니다.
JavaScript 파일에 작성하는 경우
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />process.env.PUBLIC_URL 라고 환경변수를 경로에 작성합니다.
