Dev Environment - lekakid/ArcaRefresher GitHub Wiki

권장 개발 환경

image
다른 개발 환경에서는 미리 세팅해둔 사항이 정상 동작하지 않을 수 있으니 VSCode 사용을 적극 권장합니다.
Extensions 메뉴에서 @recommended를 입력해 확인하실 수 있습니다.

주요 패키지

React

본 프로젝트는 React 라이브러리를 기반으로 만들어졌습니다.
React에 대해서 잘 모르시는 분은 공식 자습서를 참고바랍니다.

Material UI

주요 컴포넌트 구현에 라이브러리인 MUI v4를 사용합니다.
이에 대한 문서는 이곳을 참고바랍니다.

프로젝트 사전 준비

  1. 프로젝트를 로컬에 저장합니다.
cd [저장 프로젝트 경로]
git clone https://github.com/lekakid/ArcaRefresher.git
  1. 패키지를 설치합니다.
npm install

프로젝트 디버그 (Tampermonkey)

  1. 확장 프로그램의 외부 스크립트 업데이트 주기를 항상으로 설정합니다.

💡 이미 설정했다면 이 과정을 생략해도 좋습니다.

Tampermonkey 의 설정에서 모드를 상급자로 수정합니다.

image

외부 코드의 업데이트 주기를 '항상'으로 설정합니다.

image

  1. 아래의 명령어를 입력해 디버그 코드를 생성합니다.
npm run dev

  1. 생성된 /dist/ArcaRefresher.proxy.user.js 파일을 확장 프로그램에 추가합니다.
    image

  2. 코드 수정 후 새로고침(2,3회 필요)을 해서 수정사항이 반영되는지 확인합니다.

프로젝트 빌드

  1. 아래의 명령어를 입력합니다.
npm run build
  1. 생성된 /dist/ArcaRefresher.user.js 파일을 확장프로그램에 추가하여 사용합니다.
    image