Skip to content

6. 클론 받아 이렇게 실행해보세요

YIJ edited this page Feb 27, 2022 · 17 revisions

클론 받은 뒤 실제로 실행해보려면 필요한 방법 정리

프론트엔드

⭐️ 본 프로젝트의 프론트엔드 파트는 패스트캠퍼스의 [한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online] 강의를 참고해서 제작되었음을 알립니다. ⭐️

0. 프로젝트 깃 클론

git clone https://github.com/GwaChaePah/jecheol42_frontend.git DIRECTORY_NAME

1. Node.js, NPM, NPX 설치

1. cd DIRECTORY_NAME
2. node -v 명령어로 node.js 설치 여부 확인
  * 설치되어 있지 않다면 공식 사이트 (nodejs.org)에서 node 다운로드 
  * 기본 설정을 그대로 두고 Next 눌러서 Node.js 설치 완료
  * node -v / npm -v 명령어로 잘 설치되었는지 확인
3. npm install npx -g 명령어로 NPX 설치
  * npx -v 명령어로 잘 설치되었는지 확인

2. Vue와 관련된 Webpack 설치

1. npx degit ParkYoungWoong/vue3-webpack-template#eslint DIRECTORY_NAME
2. npm i
3. npm i vue@next --save (vue 최신버전)
4. npm i vue-router@4 --save (vue router 4버전)
5. npm i vuex@next --save (vuex 최신버전)
6. npm i axios

프론트엔드 초격차 패키지 -> vue3-webpack-template

3. 개발자모드로 실행

1. npm run dev

백엔드

백엔드 자료는 여러 secret-key 를 환경변수로 관리하고 있으므로 클론해도 이대로 실행할 수 없음을 알려드립니다.

아래 내용은 백엔드 담당자가 잊지 않도록 하기 위해 남겨둡니다.

기본 셋팅

작업환경

  • pycharm

깃 브랜치 따서 작업하기

  • 브랜치 이름은 작업자intra아이디_작업할내용
  • git checkout -b branchname 을 하면 브랜치 만들고 그 브랜치로 스위치까지 한번에 가능
  • git branch 로 내가 작업하고 있는게 해당 브랜치 맞는지 확인하고 작업하기

협업시 모두 동일한 환경에서 작업하기 위해서 venv가 실행하기

  1. pwd 로 지금 작업 경로가 프로젝트 폴더인지 확인 → 아니면 이동
  2. virtualenv venv 실행 → 파일 디렉토리 보면 venv 폴더가 생김
  3. venv/bin/activate 파일에 로컬 작업시 필요한 secret-key 를 환경변수에 export 할 수 있도록 스크립트 수정
  • secret-key 를 잊었다면 헤로쿠 서버에서 확인할 수 있다. ‼️ value 넣을때 작은 따옴표로 감싸기 ‼️ 안그러면 특수문자때문에 에러를 띄웁니당
  • export SECRET_KEY='헤로쿠에 넣어둔 value'
  • export DATABASE_URL='헤로쿠에 넣어둔 value'
  1. source venv/bin/activate 실행
  2. pip install -r requirements.txt 를 이용하면 모두 동일한 환경에서 작업할 수 있도록 venv 환경에 필요한 모듈이 자동으로 좌라락 설치됨.
  3. 작업환경이 달라졌다면 pip freeze > requirements.txt 로 작업환경 저장하여 공유하기
  4. pycharm 에서 오른쪽 하단에 no interprete 로 되어있다면 꼭 클릭해서 파이썬 셋팅하기 (이걸 안해서 에러남)

활성화 유무는 backend 표시로 알 수 있다

  • source venv/bin/activate 로 활성화
Screenshot 2022-02-27 오후 5 05 39
  • deactive 로 비활성화
Screenshot 2022-02-27 오후 5 07 47

로컬 서버 띄워 확인하기

  • python manage.py runserver
  • 헤로쿠에는 안올라가있지만 로컬 서버에는 로컬에서 수정한 정보가 반영된 상태를 확인할 수 있다.
  • 파이썬 settings.py 에 DB 가 postgresql 로 적용되어있으므로 헤로쿠를 거치지 않아도 동일한 DB 작업은 가능하다.
  • 이를 위해서는 로컬 환경변수에 SECRET_KEYDATABASE_URL 추가하는 위의 작업을 해야함.
  • 위 상태는 로컬에서만 확인가능한 상태이며, 실제 서버에 반영하려면 git pushpull request 하여 merge, deploy 까지 완료되어야한다.