[React] 배포를 위한 준비 / git push origin main 에러 해결법

react - create -app 을 활용해 배포 

 

1. 지금 개발용 리액트 라이브러리를 사용했는데 프로덕션 용 리액트 라이브러리로 바꿔줘야 한다.

 

2. 바벨을 떼야한다. 

바벨을 떼면 브라우저가 jsx를 이해하지 못할텐데 어떻게 가능한걸까?

브라우저에게 매번 바벨로 JS로 통역하는게 아닌 이미 통역된 JS를 올린다. (통역된 결과물만 서버에 올린다)

 

이걸 위해서 리액트 팀에서 만든 라이브러리인 create-react-app이 있다!

 

1) 간단한 앱 껍데기 

2) 리액트 라이브러리 셋업(개발/프로덕션용)

3)웹팩 셋업 -> 라이브 서버, 저장할때마다 JSX->JS

++)웹팩 -> 웹개발 할 때 필요한 라이브서버 , 코드 포멧팅 등등

변환,최소화,압축등의 빌드는 웹팩에서 진행된다.

 

4)테스트 셋업

5)빌드 셋업 ->JS로 변환,코드 용량 최소화, 프로덕트 라이브러리 등 

 

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

 

vscode 터미널에

dir을 해서 현재 파일이 잘 있는지 확인

npx create-react-app 앱의 이름 -cra

 

cra는 create-react-app의 약자

해피 해킹 나오면 성공 

cat-jjal-maker-cra 폴더로 이동해야한다. 폴더 이동 명령어는 cd my-app-cra  (만약에 에러가 나면 cd my-app 만 해도 되는듯)

한다음에 npm start하면

 

cra 폴더가 생성되는데 

package.json에서는 cra로 만든 프로젝트가 어떤 라이브러리로 쓰여졌는지 어떤 명령어로

뭘 할 수 있는지 확인할 수 있다.

 

이제 src 폴더를 보면 App.js 파일이 있다. 

 

여기보면 import,export가 있는데 파일을 모듈처럼 가져오고 내보내는 것이다.

 

https://joshua1988.github.io/vue-camp/es6+/modules.html#%E1%84%86%E1%85%A9%E1%84%83%E1%85%B2%E1%86%AF%E1%84%92%E1%85%AA%E1%84%8B%E1%85%B4-%E1%84%91%E1%85%B5%E1%86%AF%E1%84%8B%E1%85%AD%E1%84%89%E1%85%A5%E1%86%BC 

Modules | Cracking Vue.js

 

아무튼 이렇게 cra가 준비됐으니 지금까지 만들었던 파일을 cra에 옮겨줘야한다. 

 

App.js 파일에 바벨 밑부터 ReactDOM.render 전까지를 복붙하고 상단에

import 해줘야한다. 

 

 

이렇게 react 서버에서 띄울 수 있게 되었다. 

실무에서는 컴포넌트 하나에 파일 하나씩이 관례 

 

Title 컴포넌트만 Title.js파일로 빼보겠다.

components 폴더에 Title.js를 넣어주고

하단에 export default Title을 해줘야 한다.

 

이 파일을 App.js에서 import 시켜주면

끝!

 

++) ./ <--동일 폴더라는 의미 

 

깃허브에 진짜 배포

 

터미널에 git add .  <-- 을 해서 내가 바꾼 모든것을 선택하고

git commit -m "made CRA" <--커밋을 만들어준다.

 

https://velog.io/@s_yeah/Git-git-push-origin-main-%EC%97%90%EB%9F%AC

[Git] git push origin main 에러

이러고 git push origin main 에러가 떴는데

변경사항이 생겼을 때는 git pull origin main을 먼저해줬어야 했다.

그러고 git push origin main 하니까 커밋이 잘 되었다. 

 

하지만 이 cra에 있는게 브라우저가 읽을 수 있는 파일이 아니다. 

자바스크립트로 변환하는 과정이 필요하다. 

create - react -app애서 이런 빌드를 해주는 명령어가 npm run build 이다. 

나는 cd my-app을 하고 npm run build를 하니까 됐다. 

이제 압축을 해서 js문법으로 번역된 

build 폴더가 등장했다. 이제 이 build 폴더를 깃허브에 올려볼거다. 그러기 위해서는 github pages라는 라이브러리가 필요하다. 

npm install gh-pages 명령어를 입력한다. 설치가 다 된듯하면 src -> package.json으로 이동

저 빨간줄 친 deploy를 쓰면 이제 build 파일만 깃허브에 올라간다. 

이 json 파일 상단에 "homepage" 프로퍼티를 추가하여 값으로 내 깃허브 주소를 넣으면 된다. 

+)홈페이지 맨뒤에 슬래시는 지워줄 것 

 

그리고 한번 더 npm run build를 한다. 

그다음에는 npm run deploy를 하면된다. 

 

그리고 깃허브에 setting -> pages로 가서 

main이 아니라 gh-pages를 선택해주면 끝난다!