Skip to content

Latest commit

 

History

History
124 lines (100 loc) · 5.21 KB

2024-03-05-run.md

File metadata and controls

124 lines (100 loc) · 5.21 KB
Raw
layout title type category order keywords genre description thumbnail author date updated
page
EntryJS 실행하기
entryjs
시작하기
2
Entrylabs
2024-03-05
2024-04-29

이 문서는 EntryJS를 웹 페이지에 통합하고 실행하는 방법을 단계별로 안내합니다.

필요한 준비

EntryJS를 사용하기 전에, 아래의 준비 사항을 확인하세요:

  • 웹 서버 또는 로컬 환경에서 실행할 수 있는 HTML 파일.
  • 최신 버전의 웹 브라우저(예: Google Chrome, Mozilla Firefox).

HTML 작성하기

  1. 라이브러리 포함: 먼저, EntryJS와 필요한 의존성 라이브러리들을 HTML 파일에 포함시켜야 합니다. 아래는 필요한 스크립트 태그 예제입니다.

EntryJS의 example폴더를 확인하시면 도움됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EntryJS Integration Example</title>

    <!-- style sheet -->
    <link href="path/to/lib/entry-tool/dist/entry-tool.css" rel="stylesheet" />
    <link href="path/to/lib/entry-js/dist/entry.css" rel="stylesheet" />

    <!--language-->
    <script src="path/to/lib/entry-js/extern/lang/ko.js"></script>

    <!-- 의존성 라이브러리들 -->
    <script src="path/to/lib/lodash/dist/lodash.min.js"></script>
    <script src="path/to/js/ws/locales.js"></script>
    <script src="path/to/js/react18/react.production.min.js"></script>
    <script src="path/to/js/react18/react-dom.production.min.js"></script>
    <script src="path/to/lib/PreloadJS/lib/preloadjs-0.6.0.min.js"></script>
    <script src="path/to/lib/EaselJS/lib/easeljs-0.8.0.min.js"></script>
    <script src="path/to/lib/SoundJS/lib/soundjs-0.6.0.min.js"></script>
    <script src="path/to/lib/SoundJS/lib/flashaudioplugin-0.6.0.min.js"></script>
    <script src="path/to/lib/jquery/jquery.min.js"></script>
    <script src="path/to/lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
    <script src="path/to/lib/velocity/velocity.min.js"></script>
    <script src="path/to/lib/codemirror/lib/codemirror.js"></script>
    <script src="path/to/lib/codemirror/addon/hint/show-hint.js"></script>
    <script src="path/to/lib/codemirror/addon/lint/lint.js"></script>
    <script src="path/to/lib/codemirror/addon/selection/active-line.js"></script>
    <script src="path/to/lib/codemirror/mode/javascript/javascript.js"></script>
    <script src="path/to/lib/codemirror/addon/hint/javascript-hint.js"></script>
    <script src="path/to/js/ws/jshint.js"></script>
    <script src="path/to/lib/fuzzy/lib/fuzzy.js"></script>
    <script src="path/to/js/ws/python.js"></script>
    <script src="path/to/lib/socket.io-client/socket.io.js"></script>
    <script src="path/to/lib/entry-js/extern/util/filbert.js"></script>
    <script src="path/to/lib/entry-js/extern/util/CanvasInput.js"></script>
    <script src="path/to/lib/entry-js/extern/util/ndgmr.Collision.js"></script>
    <script src="path/to/lib/entry-js/extern/util/handle.js"></script>
    <script src="path/to/lib/entry-js/extern/util/bignumber.min.js"></script>
    <script src="path/to/lib/components-webfontloader/webfontloader.js"></script>
    <script src="path/to/lib/entry-lms/dist/assets/app.js"></script>

    <!-- Static JS -->
    <script src="path/to/lib/entry-js/extern/util/static.js"></script>

    <script src="path/to/lib/entry-tool/dist/entry-tool.js"></script>
    <script src="path/to/lib/entry-paint/dist/static/js/entry-paint.js"></script>
    <script src="path/to/external/sound/sound-editor.js"></script>

    <!-- EntryJS 라이브러리 -->
    <script src="path/to/lib/entry-js/dist/entry.min.js"></script>
</head>
<body>
    <div id="entryContainer"></div>
    <script>
        // 여기에서 EntryJS 초기화 및 사용 코드를 작성
    </script>
</body>
</html>
  1. EntryJS 초기화: 페이지가 로드되면, EntryJS를 초기화하고 기본 설정을 구성해야 합니다. 아래 코드는 EntryJS를 초기화하는 방법의 예시입니다.
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // EntryJS 초기화 코드
        var initOption = {
            type: 'workspace',
            textCodingEnable: true,
        };
        Entry.creationChangedEvent = new Entry.Event(window);
        Entry.init(document.getElementById('entryContainer'), initOption);
        Entry.loadProject();
    });
</script>
  1. 실행 및 테스트: 위의 코드를 모두 포함한 HTML 파일을 웹 서버에 업로드하거나, 로컬에서 파일을 열어 EntryJS가 올바르게 실행되는지 확인합니다.

추가 설정

  • EntryJS는 다양한 설정과 옵션을 제공합니다. 예를 들어, 사용자 정의 블록을 추가하거나, 특정 기능을 활성화/비활성화 할 수 있습니다.
  • 추가적으로 사용할 블록등의 static.js 에서 세팅하도록 되어 있습니다.
  • 공식 문서와 API 가이드를 참조하여, 원하는 기능과 설정을 구현하세요.

문제 해결

  • EntryJS 실행 중 문제가 발생하면, 먼저 콘솔 로그를 확인하여 오류 메시지를 검토하세요.