🏹 트러블 슈팅
github 배포 오류 (readme 출력)
github > Pages로 접근하여 자동 배포된 사이트주소 눌렀더니 뜬금없이 readme가 나옴...
Why?!?!!?!?
(해결 참고 : https://rosedaily101.tistory.com/81)
-
원인 : 리액트 진행 시 index.html, App.js 이런 파일들이 root폴더가 아닌 다른 폴더 내에 있어서 해당 index를 불러오지 못하는 경우 발생
-
해결 과정
1.package.json파일 수정
-
"homepage"의 경로 :
https://깃허브아이디.github.io/repository이름- 잘 모르겠다면 git remote -v 로 힌트를 얻을 수 있음
- git remote -v :
https://github.com/깃허브아이디/repository이름
-
"predeploy": "npm run build",
"deploy": "gh-pages -d build"- 쉼표 누락 없이, 그대로 잘 적어주기
-> 이 과정을 통해 웹에서 쓰이는 파일로 빌드됨
2. deploy 명령에서 필요한 gh-pages 도구 설치
-
터미널에 해당 명령어 차례로 입력하기
npm install gh-pages
npm install gh-pages --save-dev- github에 'gh-pages'라는 새로운 branch를 생성함
- 'gh-pages' branch에는 index.html이 root폴더에 있도록 파일들이 전부 재구성 되어있음
3. 배포 진행
-
진행 전 혹시 github에 이미 등록된 페이지가 있다면 초기화하기
-
배포 명령어 터미널 입력 :
npm run deploy
npm run deploy 오류 시 참고
https://rosedaily101.tistory.com/80
- 마지막에 Published 뜨는 것 확인하면 배포 완료!
4. github 페이지 경로 확인
- 기존 방법과 동일
(github > repository > Settings > Pages 에서 확인)
readme에 gif 파일 넣기
- readme 파일에 사진 대신 움직이는 동영상을 넣고싶다면 Gif 파일을 활용해보자!
- 예시
(동영상 gif로 변환하는 사이트 : https://www.movavi.com/kr/support/how-to/convert-video-to-gif.html)
-
맥에서 화면녹화하는 단축키
-
화면녹화 단축키
cmd shift 5 -
녹화 종료하기
cmd ctrl esc
-
Props 개념 정리
-
props란 : 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 사용하고 싶을 때 전달하는 방법 -
props를 가져오는 과정
1) 부모 -> 자식 정보 물려주기
// 자식 컴포넌트
function Child () {
return <div>'Hello World'</div>}
// 부모 컴포넌트
function App () {
const name = '리액트'; // 이 정보를 Child에게 넘겨줌
return <Child appName = {name}/>2) 자식은 정보를 받으려면 받는 과정이 필요함 = props
// 자식 컴포넌트
function Child (props) {
return <div> {props.appName}'Hello World'</div>}
// console.log(props)
// => {appName: '리액트'}
// props는 부모가 넘겨주는 정보를 '객체'형태로 받음!
// 부모 컴포넌트
function App () {
const name = '리액트'; // 이 정보를 Child에게 넘겨줌
return <Child appName = {name}/>