Skip to content

라이브서버 동작

Jump to bottom
Head edited this page Sep 20, 2022 · 16 revisions

코드 받아오기

코드 최신화하기

  • git remote -v 를 통해 자신이 가지고 있는 remote 리파지토리의 주소를 알 수 있다. 기본값은 origin
  • remote 의 주소가 https://github.com/code-squad/homepage.git 인 곳에서 코드를 가져와야 한다.
  • git fetch {remote주소} develop 명령어를 통해서 개발되고 있는 최신 버전의 홈페이지 화면을 가져올 수 있다.

develop브랜치로 이동하기

  • 이미 develop 브랜치인 경우가 많겠지만, git checkout develop 명령어를 통해서 develop 브랜치로 이동할 수 있다.
  • 이후 git rebase {remote주소}/develop 명령어를 통해서 최신 코드를 로컬 브랜치의 내용으로 이동시킬 수 있다.
  • 위의 작업 진행 후 문서 업데이트 진행

이후 작업할 브랜치 만들기

  • git checkout -b {작업할 내용} 명령어를 통해 브랜치를 만들 수 있다.
  • 해당 브랜치에서 문서와 관련된 내용 작업을 진행하고 add, commit 을 진행하면 된다.

명령어 모음 및 순서 - remote 주소가 origin인 경우 / 작업할 내용의 브랜치명을 예시로 듬

  • git fetch origin develop
  • git checkout develop
  • git rebase origin/develop
  • git checkout -b docs-mastersPage

Gatsby

gatsby서버를 구동하여 홈페이지를 크롬/사파리 등의 브라우져에서 확인 가능

명령어

npm run start

서버 구동 확인

명령어 입력 후 gatsby 라이브 서버 성공/실패 여부을 확인 가능.

구동 성공

  • 명령어 입력 후 정상적으로 구동되면 아래 이미지에서와 같이 You can now view homepage in browser ~메시지 출력
  • 브라우져에서 http://localhost:8000/로 접속하여 확인 가능
You can now view homepage in the browser.
⠀
  http://localhost:8000/
gatsby-server

구동 실패

  • 명령어 입력 후 구동이 실패하면 아래 이미지에서와 같이 에러 메시지 출력 (에러 메시지는 상황에따라 다를 수 있음.)
  • 브라우져에서 홈페이지 확인 불가능
 ERROR #85911  GRAPHQL

There was a problem parsing "/Users/angelo/codesquad/homepage/src/pageComponents/main/Culture/Culture.tsx"; any GraphQL
fragments or queries in this file were not processed.
gatsby-server-fail

StoryBook

홈페이지의 각 컴포넌트 및 페이지를 웹상에서 확인 가능

명령어

npm run storybook

주의사항 스토리북은 홈페이지를 gatsby를 통해 빌드된 산출물을 참조하기때문에 아래 두 경우중 한가지를 만족해야함.

  • gatsby server가 구동중인 상태
  • gatsby server가 구동중이 아니라면 npm run build명령어를 통해 산출물이 만들어진 상태

서버 구동 확인

명령어 입력 후 스토리북 실행 성공/실패 여부 확인 가능.

구동 성공

  • 명령어 입력 후 정상적으로 구동되면 아래 이미지에서와 같이 Storybook 6.4.22 for React started ~메시지 출력
  • 브라우져에서 http://localhost:3001/로 접속하여 확인 가능
storybook-success

구동 실패

  • 명령어 입력 후 구동이 실패하면 아래 이미지에서와 같이 에러 메시지 출력 (에러 메시지는 상황에따라 다를 수 있음.)
  • 브라우져에서 스토리북 확인 불가능
storybook-fail

작업물 올리기

  • git status 명령어를 통해서 현재 내가 수정한 파일이 무엇인지 알 수 있다.

스크린샷 2022-09-20 오후 4 03 40

  • git diff 명령어를 통해서 내가 수정한 내용이 어떤것인지 간단하게 볼 수 있다. (VScode를 통해서 볼 수도 있음)
  • git add .명령어를 통해서 변경점을 추가해 줄 수 있다. 이후 git status 명령어를 다시 사용하여 현재 커밋했을 때 어떤 파일이 올라가는지 파악할 수 있다.

스크린샷 2022-09-20 오후 4 03 56

  • 이후 git commit -m '{커밋하고 싶은 명령어} 를 통해 변경사항을 커밋할 수 있다.
  • (참고사항) git log --oneline --decoreate --graph --all 명령어를 통해 커밋들의 전체적인 내용을 볼 수 있다.

스크린샷 2022-09-20 오후 4 04 54

  • 변경한 모든 내용들을 커밋하였다면, git push {remote주소} {[만들었던 브랜치 이름](https://github.com/code-squad/homepage/wiki/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EC%84%9C%EB%B2%84-%EB%8F%99%EC%9E%91#%EC%9D%B4%ED%9B%84-%EC%9E%91%EC%97%85%ED%95%A0-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%A7%8C%EB%93%A4%EA%B8%B0)} 명령어를 통해서 푸쉬할 수 있다.

스크린샷 2022-09-20 오후 4 05 16

PR 작성하기

  • 해당주소 로 이동한다.
  • 방금 푸쉬를 완료했다면 푸쉬된 브랜치에서 PR을 작성할 수 있는 버튼이 보인다.(아래 스크린샷은 develop 브랜치에 푸쉬된 내용이 있다는 뜻) 스크린샷 2022-09-20 오후 4 26 00
  • 만약 해당 내용이 보이지 않는다면, New pull request 버튼을 눌러 새로운 PR을 생성할 수 있다.
  • 해당 버튼을 눌러 아래와 같이 변경해준다. (base 는 develop 으로, compare는 본인이 생성했던 브랜치로) 스크린샷 2022-09-20 오후 4 27 24 스크린샷 2022-09-20 오후 4 27 42
  • create pull request 버튼을 누른후 이전에 작성했던 PR의 제목과 설명을 참고하여 나머지를 작성한다.
  • 마지막으로 Create pull Request버튼을 누르면 끝
Clone this wiki locally