[TIL.5] 노마드코더 Deploying to Github pages 깃허브에 리액트 프로젝트 홈페이지 올리기

와 나 이거 진짜 너무 궁금했는데 우연히 다른 강의를 듣다가 알게되네...

역시 세넓모많(세상은 넓고 모르는 건 많다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

 

 

개발자 포트폴리오라던가 이런저런 개발 관련된 것들을 검색하다보면 github.io로 시작하는 페이지를 종종봤는데 깃허브랑 관련된 것 같긴한데 사람들마다 페이지 디자인이 다 제각각이고 뭔가 블로그같으면서도 개인 홈페이지 같은 느낌이라 이게 뭔가...?싶었다.

 

알고보니 깃허브에서 제공하는 아주 좋은 서비스 중에 하나로 개인 프로젝트를 바로 홈페이지처럼 구현시켜주는 것이다.

 

 

다른 언어나 프레임워크로 만든 프로젝트는 어떻게 올리는지 모르겠지만 오늘 본 강의는 리액트 프로젝트를 올리는 방법으로 생각보다 간단해서 빨리 내 프로젝트도 만들어서 올리고싶어졌다 +_+

 

 

 

---

 

① 깃허브에 프로젝트 올리기

일단 너무나 당연하지만 첫째는 해당 프로젝트가 깃허브에 올라가있어야 한다

 

 

 

② gh-pages 설치

 

npm i gh-pages

 

 

 

③ package.json 설정

 

요기가 중요하다. 홈페이지 주소가 될 "hompage"를 마지막에 입력해주고

"script"안에 "deploy"와 "predeploy"를 설정해준다

*참고로 deploy는 '배치하다'라는 뜻

  "private": true,
  "dependencies": {
	//...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build", // -d 디렉토리 build안에 있는 것들을 gh-pages로 올려라
    "predeploy": "npm run build" //말그대로 pre-deploy, deploy 전에 실행해라
  },
  "eslintConfig": {
	//...
    ]
  }
  },
  "homepage": "https://my_github_name.github.io/my_project_name/"
}

"homepage"에서 //바로 뒤에는 내 깃허브 이름이 오고 마지막에는 내 프로젝트 이름으로 설정한다

 

"homepage": "https://{내 깃허브 이름}.github.io/{내 프로젝트 이름}"

 

 

이전에 npm run build로 프로젝트내에 build폴더가 생성되면 이폴더를 통째로 cafe24나 dothome에 올려서 데모를 실행해볼 수 있었는데 이젠 그럴필요 없이 이렇게 deploy를 설정함으로써 그 과정을 한큐에 끝낼 수 있다

대박사건. 와 진짜 나 왜 이거 이제앎ㅠㅠ

 

 

④ npm run deploy

그리고 내 프로젝트 경로 터미널에서 deploy를 실행하면 끄읕-

 

npm run deploy

 

수정사항이 생기면 수정하고 다시 npm run deploy만 해주면 된다.

와... 찬양하라 리액트.....🎉🎉🎉ㅋㅋㅋㅋㅋㅋ

 

 

 

 

빨리 내꺼도 만들어서 올리고 싶다 +_+

요즘 내가 리액트 공부한다고 사용하고있는 api가 xml으로 오고 cors?문제때문에 조금 난처한데 함수방법으로 진행했던걸 이 강의에서 알려준 클래스방식을 써서도 한번 구현해봐야겠다. 잘됐음 좋겠다ㅠ

 

 

 

 

▼원본 영상

 

 

참고로 이영상은 노마드코더 홈페이지에서 무료로 수강할 수 있는 <리액트js로 영화 웹서비스 만들기> 강의 중 하나이다. 마지막 라우팅만 빼고 다 들었는데 리액트 기초를 다지기에 너무 좋고 무엇보다 재미있음!!!

리액트를 배우고자하는 주니어 개발자에게 적극 추천한다!