이 프로젝트는 https://github.com/microbit-foundation/python-editor-v3 를 fork 하여 생성한 프로젝트입니다.

python-editor-v3 를 CodeBridge 에 맞게 커스터마이징 하는 프로젝트 입니다.

git remote

• origin ➡️ fork 한 저장소
• upstream ➡️ 원본 저장소

1. 원본 저장소 변경사항 가져오기

   git fetch upstream

2. 브렌치에 합치기

   git merge upstream/main
   
   # or
   
   git rebase upstream/main

1. 저장소 clone

   git clone https://github.com/CODEBEE-dev/python-editor-v3.git

2. 의존성 설치

   npm install

3. 개발 실행

   npm start

npm run build

Microbit 에디터의 Text Block 기능은 외부 CDN을 통해 블록 정의 데이터를 로드합니다.

기본적으로 프로젝트가 3000번 포트에서 실행될 경우, CORS 문제가 발생하지 않아 아래와 같이 정상적으로 에디터를 사용할 수 있습니다.

그러나 프로젝트의 포트 번호가 변경되면, 외부 CDN에 데이터를 요청하는 과정에서 CORS 오류가 발생하며, 정상적으로 에디터를 사용할 수 없습니다.

이를 해결하기 위해, CDN 요청을 Client에서 직접 보내는 대신, Proxy 서버를 통해 요청하도록 변경하였습니다.

FrontEnd는 Proxy서버에 요청을 보내고, Proxy서버가 CDN에 데이터를 요청하여 응답을 받아온 뒤 다시 FrontEnd에 전달합니다.

이 방식으로 CORS 오류 없이 모든 포트에서 에디터 기능을 사용할 수 있습니다.

Microbit 에디터의 블록 정의 데이터 CDN요청은 aiot 프로젝트에서 처리됩니다.

개발 환경에서는 이 프로젝트의 vite.config.ts에서 proxy 설정을 통해 aiot 프로젝트 backend가 요청을 처리합니다.
따라서 aiot 프로젝트가 실행되고 있어야 정상적으로 에디터를 사용할 수 있습니다.
aiot 프로젝트 실행 방법은 aiot 프로젝트 문서를 참고하세요.

배포 환경에서는 이 프로젝트가 build되어 aiot 프로젝트에서 정적서빙 되어야 합니다.