Frontend Guideline

Frontend Guide 🧭

환경 세팅

node 패키지 관리는 yarn을 이용해서 이루어지고 있습니다. 다음 명령어로 yarn을 설치해주세요.

> npm install -g yarn

Git repository를 clone하고, yarn으로 node 패키지를 설치해주세요.
이미 clone한 경우 다시 clone할 필요는 없습니다.

> git clone https://github.com/skku-npc/skku-coding-platform.git
> cd skku-coding-platform/frontend
> yarn install

실행 방법

frontend 부분만 미리 보려면 yarn serve 명령어를 이용하면 됩니다.
다만 주의할 점은 backend와 연결이 안 된 상태라 정상적으로 보이지 않는 부분이 많으니, 참고용으로만 사용해주세요.
(script를 잠시 수정해서 정상적으로 동작되는 것처럼 할 수도 있습니다)

> yarn serve

이후 브라우저에서 http://localhost:8080/에 접속하면 됩니다. 이미 8080 포트를 사용 중인 경우 yarn serve --port 8880 명령어를 사용해서 포트를 변경할 수 있습니다.

도커에 변경사항 반영하기

yarn serve 명령어와 달리, 변경한 내용을 직접 docker에 반영해서 "모든" 기능이 정상적으로 동작하는지 확인할 수 있습니다.
다음 명령어를 frontend 디렉토리에서 입력해주세요.

> yarn dll  # First time only
> yarn build
> find ./dist -name "*.*" -type f -exec sed -i "s/__STATIC_CDN_HOST__\///g" {} \;
> docker cp dist coding-platform:/app

이후 브라우저에서 http://localhost/에 접속하면 됩니다.

코드 스타일 검사

일관된 코드 스타일을 위해 build 시 eslint를 이용해 검사를 진행합니다.
빌드 전 별도로 코드 스타일 검사만 진행하고 싶다면, 다음 명령어를 실행해서 수정이 필요한 부분을 확인해주세요.

> yarn lint

아래의 명령어 실행 시 코드 스타일 검사와 동시에 자동으로 고칠 수 있습니다.
명령어를 실행한 이후에도 수정이 필요한 부분이 있다면 수동으로 고쳐주세요.

> yarn lint --fix

Frontend Hierarchy

Frontend Hierarchy 글을 참고해주세요.

How build & deploy works

Github Packages는 Github에서 소프트웨어 패키지 호스팅을 위해 제공하는 서비스입니다.

우리 프로젝트에서는 master branch의 frontend에서 build한 dist폴더를 배포하고 있고,
배포된 폴더는 coding-platform의 Dockerfile에서 이미지 빌드 시 다운로드되어 서버의 프론트에 적용됩니다.

Tips

Vue 개발용 크롬 확장 프로그램 ⇒ 크롬 웹 스토어의 Vue.js devtools를 이용하여, 크롬 개발자 도구를 통해 Vue로 만든 페이지를 쉽게 디버깅할 수 있습니다.