CustomCodeEditor
1.0.0
이 프로젝트는 Monaco 편집기를 활용하는 React 기반 코드 빌더입니다. 이를 통해 사용자는 웹 브라우저 내에서 코드 스 니펫을 작성하고 실행할 수 있습니다. 판 Judge0을 코드 실행 시스템으로 사용합니다
이 지침을 따르면 로컬 컴퓨터에서 프로젝트를 시작하고 실행하십시오.
Node.js가 컴퓨터에 설치되어 NPM 또는 원사 패키지 관리자
리포지토리를 로컬 컴퓨터로 복제하십시오.
git clone <repository-url>
.env 파일의 필요한 키를 작성하십시오.NPM 또는 원사 : 배쉬를 사용하여 종속성을 설치하십시오
npm install
# or
yarn install
프로젝트를 시작합니다
npm run start
프로젝트를 시작하기 전에 Docker를 설치했는지 확인하십시오. 그렇지 않은 경우 다음 단계에 따라 Docker를 설치하십시오.
Windows :
Mac :
Linux :
Docker Compose를 사용하여 프로젝트를 시작하려면 :
프로젝트 구축 및 실행 :
# Detach mode
docker-compose up -d docker-compose up
프로젝트 액세스 :
http://localhost:3000 에서 웹 브라우저를 사용하여 프로젝트에 액세스하십시오.닫기 프로젝트
docker-compose down
Judge0으로 이동합니다 .
기본 계획에 가입하십시오 .
RapidApi 대시 보드에 액세스하십시오 .
API 섹션으로 이동하십시오 .
제출 엔드 포인트 사용 :
X-RapidAPI-Key , X-RapidAPI-Host 및 URL ( url )이 있습니다. URL은 "코드 스 니펫"섹션 아래에 있습니다.필수 키 복사 :
RAPIDAPI_HOST 및 RAPIDAPI_KEY 값을 복사하십시오. 코드 실행 시스템에 API 호출을 수행하는 데 필요합니다.이 단계를 수행하면 RapidAPI의 인프라를 사용하여 코드 제출에 대해 Judge0을 설정하여 응용 프로그램 내에서 코드를 실행하고 평가할 수 있습니다.
https://custom-code-editor.vercel.app/.env 파일을 만들고 다음 값을 추가하십시오. REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
사용자 정의 코드 편집기의 Github 인증을 활성화하려면 다음 단계를 따르십시오.
Firebase 콘솔에서 Github 인증 활성화 :
GitHub에 새 OAUTH 애플리케이션을 등록하십시오.
http://localhost:3000 사용하십시오https://custom-code-editor.vercel.app/ )을 사용하십시오.GitHub 클라이언트 ID 및 클라이언트 비밀 검색 :
Firebase에 Github Oauth 자격 증명을 추가하십시오.
환경 변수 업데이트 :
프로젝트 루트에서 .env 파일을 열고 다음을 추가하십시오.
REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
YOUR_GITHUB_CLIENT_ID 및 YOUR_GITHUB_CLIENT_SECRET github에서 복사 한 값으로 바꾸십시오.
.env.example 에서 .env 로 컨텐츠를 복사 할 수 있습니다. cp .env.example .env
REACT_APP_RAPID_API_HOST=YOUR_HOST_URL
REACT_APP_RAPID_API_KEY=YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL=YOUR_SUBMISSIONS_URL
# key for docker container name
COMPOSE_PROJECT_NAME=custom_code_editor
your_host_url, your_secret_key, & your_submissions_url을 빠른 API 및 judge0 API 엔드 포인트에 대한 적절한 값으로 바꾸십시오.
프로젝트의 루트 디렉토리에서 .env 파일을 아직 존재하지 않으면 작성하십시오. .env 파일에서 jured0_submission_url 환경 변수를 설정하십시오. 이 변수는 코드 실행에 사용하려는 judge0 API 엔드 포인트의 URL을 가리켜 야합니다. 예를 들면 : 일반 텍스트
JUDGE0_SUBMISSION_URL=https://api.judge0.com/submissions
https://api.judge0.com/submissions를 Judge0 API 엔드 포인트에 적합한 URL로 바꾸십시오.
개발 서버 실행 구성이 완료되면 개발 서버를 시작하여 React Code Builder가 작동하는 것을 볼 수 있습니다.
npm start
# or
yarn start
웹 브라우저를 열고 http : // localhost : 3000으로 이동하여 응용 프로그램에 액세스하십시오.
현재 Project URL은 Judge0의 무료 버전을 기반으로합니다. 이는 대부분 하루에 50 개의 요청을 가질 수 있음을 의미합니다.
기부금을 환영합니다! 풀 요청 또는 열린 문제를 자유롭게 제출하십시오.
클라우드가없는 개발 환경에서 직접 코딩을 시작할 수 있습니다.
클라우드에서 gitpod를 사용할 수 있습니다
프로젝트의 특정 요구 사항 및 기능에 따라이 readme.md를 자유롭게 사용자 정의하십시오. 추가 지원이 필요하면 알려주세요!
