예전에 jekyll theme을 사용해서 깃허브 페이지를 만들었었는데
이제 어느정도 html, css, js에 익숙해졌으니 내가 직접 만들어보자 해서
리액트로 웹 페이지 겸 포트폴리오를 만들게 되었다.
이용하기 편한 깃허브 페이지로!
리액트로 깃허브페이지 만드는 방법은 자세히 다른 분들이 적어주셨으니 내가 참고한 링크와 가장 어려웠던 문제만 리스트업하겠다.
내가 리액트로 깃허브 페이지 만든 순서
0. 웹 페이지 레이아웃 구성 및 디자인
- 레이아웃은 무조건 깔끔하게 하기로 했다. 일단은 정적 페이지로 하기로 결정했다. 성격상 개발하면서 추가하고 싶은게 계속계속 생기기 때문에 ㅋㅋㅋ 일단은 간단하게 기초공사하기로 굳게 다짐하고 시작했다.
- 웹 페이지는 그냥 하나의 웹 사이트일 수도 있지만 나 자신을 브랜딩, 마케팅할 수 있는 공간. theme color에 노랑, 네이비를 섞고 싶었으나 디자인, CSS하다가 다른 것 못 할까봐 일단 올 화이트로 결정. 포인트 요소는 나중에 추가하면 되니깐!!
1. 디렉토리 만들고 yarn, react 에 필요한 것들 환경설정, create-react-app
2. HTML, CSS 레이아웃 구성
3. 각 카테고리(blog, project, resume 등)에 리액트 라우터 연결
4. 각 페이지에서 쓰이는 컴포넌트 제작
5. 빌드, 깃허브에 푸시
6. 404.html, index.html 수정 (리액트로 깃허브 페이지 만든 경우 완전 중요!!)
- 리액트는 SPA인데 깃허브 페이지는 SPA를 지원하지 않는다. 그래서 404.html과 index.html에 약간의 트릭을 줘야한다. package.json에 홈페이지 필드를 추가해두고 라우터에 basename을 넣으면 그 링크를 기준으로 이동하게 된다. 자세한 건 https://chinsun9.github.io/2021/07/30/serve-react-app-simply/ 를 참고했다.
리액트 SPA 쉽게 공유해보기
내가 만든 리액트 앱을 친구들에게 공유하기 위한 간단한 방법을 소개한다방법은 2가지가 있다 nodejs express github pages 방법1. nodejs express 집에서 포트포워딩을 통해 공유할 때나, AWS EC2를 통해 공
chinsun9.github.io
7. 깃허브 repo 내 page 설정
8. 나는 내 웹페이지의 도메인인 hailey99.github.io 를 mango.dev 로 바꿨다. 저절로 DNS에 등록되는데 1일 정도가 소요된다.
+ 완전 간단히 빌드용 파일만 올릴 땐 이 블로그를 참고해도 좋다.
https://codingapple.com/unit/react-build-deploy-github-pages/
만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌
(리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리시는게 아니라 build용 파일
codingapple.com
'JavaScript > React' 카테고리의 다른 글
| 리액트 create-react-app으로 생성되는 파일들 (0) | 2021.08.06 |
|---|---|
| 리액트로 개발할 때 주의할 점, 알아둘 것들 (0) | 2021.08.06 |
| 리액트로 개발할 때 함수형, 클래스형 컴포넌트 차이 (0) | 2021.08.06 |
| 리액트 컴포넌트가 리렌더링되는 때와 리렌더링 방지법 (0) | 2021.08.06 |
| 왜 난건지 모르겠는 createBrowserHistory 관련 에러 (0) | 2021.08.06 |