프로젝트 13일차 - Upload 페이지 구현 및 PJT 클론 배포

---

목차

1. 오늘 팀 프로젝트 업무

2. 배포를 위한 GitHub Fork

3. Netlify로 배포하기

4. GitHub Pages로 배포하기

---

1. 오늘 팀 프로젝트 업무

---

1-1. 댓글관련 버그 및 접근성 개선

- Home 페이지에서 Feed 댓글 개수가 안보이는 버그 해결

- Feed 이미지뿐만 아니라 Text를 포한한 FeedContent에서 마우스 커서를 Pointer로 변경

- FeedContent에서 마우스를 클릭하면 DetailFeed 페이지로 이동하고, DetailFeed에서는 Click Event 제거

- Feed Comment 추가 시 쌓이는 위치를 제일 아래에서, 제일 위로 변경

 

 

1-2. 새로운 Upload 구현 및 Issue 생성

- 새로운 Feed를 작성할 수 있는 게시물 업로드 페이지이다.

Feed Upload 페이지 디자인

 

2. 배포를 위한 GitHub Fork

---

2-1. GitHub Fork

- 권한 문제없이 내가 이런저런 작업을 해보고 싶을 때 GitHub Clone 또는 Fork를 사용할 수 있다.

- 이번에 사용할 포크(Fork)는 클론(Clone)과 달리 원본 프로젝트의 원격저장소와 연결을 유지하여 업데이트가 될 때 git pull 받아 함께 발전해 나아갈 수 있다. 그렇기 때문에 클론과 달리 remote 작업을 추가로 해준다.

- GitHub Fork 의 전체과정과 명령어는 아래와 같다.

# 원본 저장소에서 내 GitHub 저장소로 Fork 수행
# 본인의 PC에 코드를 다운받을 새로운 폴더를 생성
git clone [내 저장소의 포크 레포지토리 주소]
git remote [원본 저장소 레포지토리 주소]
# 코드 수정
git add .
git commit -m "[메시지]"
git push

- 희망하는 GitHub Repository를 Fork하여 내 계정 하위의 새로운 Repo.를 생성한다.

- Fork 버튼은 GitHub 레포지토리의 프로젝트 명의 오른쪽 상단에 있다.

GitHub Fork를 통해서 생성된 나의 신규 Repository

- Fork를 하여 생성된 Repository에는 원본 프로젝트 원격저장소가 명시된다.

- 본인의 PC에 새로운 폴더를 만들고, 해당 폴더에서 Git Teminal 또는 VSCode Teminal를 실행시킨다.

- 터미널창에 아래 명령로 클론을 받고 원본 저장소와 연결한다.

GitHub Fork한 Clone에 원본 PJT 원격저장소를 연결(remote)

- 이제 코드를 수정하고 클론과 동일한 방식으로 사용하면 된다.

- git pull을 쓰면 remote로 연결된 원본 프로젝트 저장소에서 코드를 가져오므로 충돌에 주의하자

 

2-2. 원본의 원격 저장소에 코드 git pull 하기

-  새로운 merge가 발생했을 때, 원본 PJT 원격 저자송에서 코드를 가져오는 방법은 아래와 같다.

# 연결(remote) 등록된 원격 저장소 확인
git remote -v

# 단축 이름 upsteam의 리모트 저장소 develop 브런치에서 pull 수행
git pull upsteam develop

- 보통 react 프로젝트는 .gitignore 파일에 node_modules가 등록되어 있어 pull 받아도 package.json에 등록된 패키지 모듈들이나 build 파일이 존재하지 않는다.

- 그래서 배포하기 전에 설치와 실행 또는 빌드(build)를 하여 정상동을 확인한다.

npm install # package.json 기반으로 설치
npm start # react PJT 실행

npm run build # react PJT 빌드

 

npm run build 결과

- build를 수행하고 나면 프로젝트 폴더의 루트 경로에 build 폴더가 생성된다.

- build 폴더의 index.html을 Live server로 실행하면 프로젝트가 실행되어야 하는데... 빈 페이지만 나온다.

- build 가 완료된 터미널을 보니 serve 모듈을 설치하여 정적서버로 실행하라고 가이드가 나와 있다.

- serve 모듈을 설치해서 실행한다.

npm install -g serve # 글로벌로 serve 모듈 설치
serve -s build [-l 희망포트] # 지정포트로 serve 실행

- 이제 터미널에 생성된 링크로 들어가면 build 폴더의 index.html 을 실행하여 프로젝트 결과를 확인할 수 있다.

serve -s build 결과

3. Netlify로 배포하기

---

3-1. Netlify에 GitHub 저장소 연결

- GitHub 계정 인증 및 저장소 권한 승인 과정을 수행하고, 기본 설정으로 Netlify를 저장소와 연결한다.

 

3-2. Netlify 배포 설정

- Netlify에서는 build 명령어와 build 결과물의 폴더 경로를 지정해주면 자동으로 GitHub에서 코드를 가져와 빌드하고 배포하는 과정을 해준다.

- build 폴더는 기본값으로 설정되어 있으며, 자신의 프로젝트 package.json의 build 명령어를 입력하면 된다.

- 나는 기본 React build 명령어인 npm run build 명령으로 수정해주었다.

Build Command: npm run build
Publish Directory: build

Netlify 빌드와 배포 설정

- 정확히 입력을 해도 배포가 안되는 경우가 있는데, 그럴 경우에는 netlify 터미널 창을 보면서 무엇이 문제인지 파악해볼 수 있겠다. netlify 터미널 창은 Production deploys에서 Failed 라고 되어 있는 부분을 눌러보면 error log를 볼 수 있다.

production deploys

- 배포가 성공하면 Published 가 뜨게 되고, 프로젝트 명 아래 링크가 초록색으로 변한다.

- 성공적인 배포를 기원한다!

배포된 프로젝트

3-3. netlify 새로고침 에러 해결법 (참조 원본)

- CRA로 프로젝트를 만들면 프로젝트 루프 경로에 public 폴더가 있다.

- pulic 폴더 하위에 _redirects 파일을 생성하고 아래 내용을 작성하고 저장한다.

/* /index.html 200

- 위 내용은 어떤 경로 (/*) 로 들어와도, 200 상태코드를 내려주며 index.html 파일을 렌더링 하겠다는 의미이다. 

- 이렇게 작성해두면 Netlify에서 배포한 페이지에서 새로고침을 할 때 404 Not fined 에러가 뜨면서 페이지 다운 현상을 막을 수 있다.

- 새로고침 시에 404 Not fined 에러의 원인은 보통 API 라우팅이다. 렌딩 페이지에서 데이터를 받다가 다른 페이지로 이동 후 새로고침하는 통에 받아 왔던 데이터가 날아간 상태로 이동한 페이지가 렌더링하며 에러가 발생하는 것이다.

4. GiHub Pages로 배포하기 (참조 원본1, 참조 원본2)

---

4-1. GitHub Page 생성

- GitHub page를 생성한다.

GitHub page 생성

- GiHub page가 생성되어 들어가보면 README만 보이고 프로젝트 내용은 보이지 않는다.

REDME 내용만 보이는 GitHub page

 

4-2. gh-pages 설치 및 설정

- React 프로젝트를 GitHub page로 배포하기 위해서는 추가적인 모듈인 gh-pages가 필요하기 때문에 설치한다.

npm install -D gh-pages # -D와 --save-dev는 같다. (devDependencies)

- npm run build 실행

build 성공 후 터미널의 가이드

- build 를 성공하고 보니 package.json 에 Scripts 명령어를 등록하라고 되어 있다.

- package.json 에 Scripts 명령어를 추가한다.

package.json 명령어 추가

  "scripts": {
	...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

- deploy 명령어를 터미널에서 실행해 본다.

npm run deploy

- deploy 가 성공하면 publish 되었다고 터미널에 로그가 찍힌다.

deploy 성공

- GitHub 저장소에 돌아가서 보면, gh-pages 모듈로 push된 커밋내역이 보이고 PR 버튼이 활성화된다.

gh-pages 모듈을 통해서 push된 commit 내역이 확인됨

- 브랜치를 눌러보면 gh-pages 브랜치가 생성된 것을 확인할 수 있다.

생성된 gh-pages 브랜치

- gh-pages를 통해 gh-pages 브랜치가 생성된다. 이제 GitHub pages의 배포 브랜치 설정을 gh-pages로 변경한다.

- 꼭 옆에 브랜치 옆에 save 버튼을 눌러주도록 하자. save를 하지 않으면 변경사항이 저장되지 않는다.

GitHUb pages 브랜치 설정 변경

- 이제 GitHub Pages 주소로 들어가면 즉각 변경되지 않고 조금 기다리거나 새로고침을 해보면 브랜치 변경내역이 적용된다.

- 그런데 빈 gh-pages 브랜치 내역을 보여주는 페이지가 빈 페이지다.

빈 페이지로 보이는 GitHub Pages

- console 창을 열어보면 빈화면에 대한 에러가 나온다.

error

 

4-3. React 프로젝트 PUBLIC_URL 환경변수 설정

- 프로젝트가 열리는데, 라우팅이 안되는 것으로 보여 추가적인 설정을 해준다.

- 프로젝트의 pagekage.json에 homepage (GitHub page 주소) 를 등록한다.

- PUBLIC_URL은 package.json의 homepage URL값으로 설정된다.

package.json에 GitHub page의 경로를 homepage로 등록

- BrowserRouter에 basename을 등록해준다.

<BrowserRouter basename={process.env.PUBLIC_URL}>
...
</BrowserRouter>

Router를 사용할 컴포넌트는 BrowerRouter로 감싸고 basename props 속성 추가

Routes 컴포넌트는 변경할 필요 없음

- 이제 추가적인 설정이 끝났다.

- npm start 를 해도 정상적으로 작동한다면, 다시 npm run deploy를 수행하고 GitHub pages를 열어보자

git run deploy

GitHub pages에서 동작하는 React 웹 페이지