리액트 설치(create-react-app)부터 깃헙으로 배포(gh-pages)까지

월요일에 배웠는데 수요일에 복습하는데 다 까먹은 나를 보며 내 자신이 마음아파 적는 리액트 설치하고 배포까지 하는 법을 빠르게 작성해본다. (라며 다 작성했더니 2시간이 걸렸다)물론 배포는 제일 마지막에 배우는 거라고 하는데, 맛보기? 로 빠르게 할 수 있음을 알아두자.

 

*참고로 npm은 깔려 있다고 가정했다..

npm 설치는 검색해보자..!

 

요약.

• 1. npx create-react-app@latest .
• 2. npm start (확인차 해봄)
• 3. hello world (확인차 해봄)
• 4. github 레포지토리 생성
• 5. git remote add origin <원격 저장소 URL>
  •  5-1. git add .
     5-2. git commit -m "hello world"
     5-3. git push --set-upstream origin main
• 6. npm run build
• 7. npm install --save-dev gh-pages
• 8. npx gh-pages -d build
• 9. ex) "homepage": "https://admin.github.io/reactprac/" - package.json dependencies 위에 작성
• 10. npm run build, npx gh-pages -d build 한번 더 
• 11. 잘 되는지 확인
• 12.  꿀팁 "deploy": "npm run build && npx gh-pages -d build" - package.json scripts 안에 작성,                                     실행할 때는 npm run deploy 로 실행

 

** 9번 홈페이지 경로 설정을 다시 하기에 10번을 했는데, 6번 build 전에 홈페이지 경로 설정을 해두고, 

12번 꿀팁을 설정해두면 더 편하다. 단지 에러가 있음을 보여주기 위해 요약의 순서로 작성했다.

1. 리액트 설치 (create-react-app)

리액트를 설치하는 법은 다양하다. 그 중 제일 대중적으로 쓰이는 커맨드가 create-reat-app 이다.

터미널에서 다음과 같이 실행해보자.

npx create-react-app@latest .

npx 는 내가 한 번만 실행하고 지우는 명령어라고 한다. 

뒤에 @latest를 붙이는 이유는 가장 최신의 버전을 깔아달라는 말.

 

오류가 안뜨면 (오류가 뜨면 같이 체크해보고싶은데 나는 오류없이 완료됐다.)

다음과 같이 폴더들이 저절로(!) 촤르륵 생긴다.

 

 

 

2. npm start로 실행되는 지 확인

터미널에 아래처럼 쳐주게 되면 다음과 같은 화면을 볼 수있다.

npm start

 

3. Hello World 출력해보기

사진처럼 src폴더 - App.js 의 function App에서 제일 부모 태그인 <div className ="App-header"> 를 제외한 내용을 삭제해준다.

그리고 해당 div 안에 Hello World를 적어 저장.

다시 npm start를 하게 되면 (ctrl + c, 맥은 ,command + c 하면 실행된 npm start가 꺼진다.)

위처럼 Hello world 를 얻을 수 있다 ! 

 

4. 깃헙 레퍼지토리 만들기

 4-1. 깃헙에 접속한다.

 4-2. 레포지토리 접속

4-3. New 클릭

4-4. 레포지토리 생성

 - 지금은 딱히 손 댈 부분 없음 

레포 생성이 잘 됐다면 다음과 같은 창이 뜬다.

아까 바로 위에서 New 눌렀을 때 다른 설정을 하나도 안했기 때문에 저렇게 나온다.

사진의 파란 박스 Quick setup에 있는 HTTPS 주소를 복사한다.

 

5. 원격저장소(깃헙) 연결하기

다시 VSCode로 돌아와 터미널에 다음과 같이 적는다.

git remote add origin <원격 저장소 URL>

이후 commit, push 를 해준다.

git add .
git commit -m "hello world"
git push --set-upstream origin main

처음 원격저장소에 push 할때는 set upstream 해줘야한다.

정상적으로 됐다면, 깃헙의 해당 레포지토리로 다시 가보자.

 

짠! 나의 로컬 저장소가 원격저장소인 깃헙과 잘 연결이 된 것을 볼 수 있다.

이제 배포를 해볼까?

 

6. npm run build

 

다음의 명령어를 터미널에 쳐보자.

npm run build

 

 

그러면 맨처음 Create-react-app 때 생긴 폴더와 파일이 아닌, build 폴더가 새로 추가된다.

build 폴더는 내가 웹으로 내가 작성한 파일을 배포할 때 좋은 건데, 예를들어 build의 index.html 을 보면 

이렇게 띄어쓰기 하나 없이 모두 다 붙어있는걸 볼 수 있다. 배포할 때 공백조차 없애고 하면, 최적화가 되니 훨씬 좋다나?

 

7. gh-pages

gh-pages 는 github으로 코드와 리소스를 업로드하는 도구이다.

터미널에 다음과 같이 입력해주자.

//gh-pages 설치
npm install --save-dev gh-pages

https://www.npmjs.com/package/gh-pages

gh-pages

gh-pages가 더 궁금하면 들어가보자.

 

8. npx gh-pages -d build

그다음 터미널엔 다음과 같이 입력해준다.

npx gh-pages -d build

이건 build 폴더만 gh-pages 를 이용하여 배포를 하겠다는 말이다.

잘 됐으면 터미널에 다음처럼 Published 란 말이 뜬다.

 

그러면 다시 깃헙 홈페이지로 가보자. 상단의 메뉴바에 

Settings -> 왼쪽 메뉴의 Pages를 들어가면 

Source에는 지 마음대로 Branch가 gh-pages로 되어있고 알아서 내 사이트가 Published 됐다고 뜬다 .띠용 !

이게 바로 gh-pages -d build 를 해줬기 때문임 

그러면 당연히 저 초록색안에 링크로 된 내 주소로 들어가면, 

맨 처음 작성했던 Hello World가 보여야지?

그리고 들어가면 , 놀랍게도!

 

안뜬다.

왤까?!

이건 또 홈페이지 경로를 설정해주지 않았기 때문이라고 한다.

실제 개발자도구의 네트워크를 가보면, 404에러가 뜨는걸 볼 수 있는데, Request URL에 주소에 내가 만든 폴더인 reactprac 으로 적혀있지 않고 static/js 같이 써있는 것을 볼 수 있다.

 

그럼 경로설정을 해주자.

 

9. homepage 설정.

VSCode 의 package.json에 다음과 같이 작성해준다.

dependencies와 private 사이에 이렇게 넣어주고, 저장.

"homepage": "주소",
//ex) "homepage": "https://admin.github.io/reactprac/",
//이 주소는 아까 Setting->pages에서 본, 초록색 네모 안에 있는 내 site 주소임.

 

10. 다시 build, gh-pages 입력하기

다시  터미널에 작성한다.

npm run build
npx gh-pages -d build

 

11. 확인해보기

이렇게 배포하면 최소 1분정도는 기다려줘야 되는데, 언제 다 되는지 눈에 보기 쉽게 확인하는 법은 Actions 탭을 가면 된다.

다음 처럼 노란색으로 떠 있으면 아직 배포중이라는 소리.

다 되면 이렇게 초록색으로  표시된다.

다시 Settings - pages로 가서 사이트를 들어가보면 ?

Helo world 가 이렇게 반가울줄이야 ,

 

이렇게 끝!

나면 아쉬우니 꿀팁까지 작성해본다.

 

12. build와 배포 한 번에 하기 (팁)

사실 배포라는건 내가 다 하고 나서 하는 일이라, 엄청 많이 할 것 같지는 않은데 그래도 !

계속해서 npm run build, npx gh-pages -d build 를 작성하는 것도 귀찮은 사람이 있을 것이다.

아주 사소한 귀찮음도 해결하려하는 게 개발자니까 ㅎㅎ

이를 편하게 하기 위해 다시 VScode의 package.json 에 가보자.

여기 scripts 안에 다음과 같이 적어준다.

"deploy": "npm run build && npx gh-pages -d build"

그리고 터미널에 

npm run deploy

라고 한 줄만 적는다면?

알아서 build하고 배포까지 해준다 !! ㄷㄷㄷ

app.js 처음 작성한 Hello world에서 텍스트를 더 작성하고 저장 후 npm run build 하였다.

 

이렇게 짧고(?) 굵게  리액트 설치와 배포를 한 번에 알아보았다.

나를 위해서 작성했지만, 다른 분들도 혹시나 도움이 됐으면 좋겠다.