Frontend Guideline

Frontend Guide 🧭

환경 세팅

nvm 설치

nvm은 Node Version Manager의 약자로, nodejs의 버전을 관리합니다. 우리는 nvm으로 nodejs와 npm을 설치할 예정입니다. 다음 명령어로 nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
# or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

이후 ~/.bashrc(또는 ~/.zshrc, ~/.bash_profile 등)를 실행하여 변경사항을 적용하고 정상적으로 설치가 되었는지 확인합니다.

source ~/.bashrc
nvm --version
# 0.38.0

npm 설치

npm은 node 패키지 관리 툴입니다. 다만 우리 프로젝트에서는 npm 대신 yarn을 사용하므로, npm은 yarn을 설치하기 위한 용도로만 사용합니다. 다음 명령어로 npm의 LTS(Long Term Support, 장기지원) 버전을 설치합니다.

nvm install --lts

설치가 정상적으로 완료되었는지 확인합니다.

npm --version
# 6.14.13

yarn 설치

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 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로 만든 페이지를 쉽게 디버깅할 수 있습니다.