Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
저장된 프로젝트 데이터를 불러와서 현재 작업 환경에 적용하는 데 사용됩니다. 이 함수는 특정 프로젝트 파일이나 데이터베이스에서 프로젝트 정보를 읽어 현재 환경에 로드합니다. loadProject는 사용자가 이전에 작업했던 프로젝트를 계속해서 작업하고자 할 때 사용됩니다.
+
+
프로젝트 데이터는 Entry.exportProject 로 추출합니다.
+
+
+
+
+
파라미터
+
타입
+
선택적
+
기본값
+
설명
+
+
+
+
project
+
project
+
+
+
load할 프로젝트 데이터
+
+
+
Entry.loadProject();
+
+
Entry.exportProject
현재 작업 중인 프로젝트의 데이터를 외부 파일로 저장하거나 다른 형식으로 내보내는 데 사용됩니다. 이 함수의 주된 목적은 사용자가 작업한 프로젝트를 보존, 공유, 또는 다른 환경에서 사용할 수 있도록 하는 것입니다. exportProject를 통해 생성된 파일은 일반적으로 프로젝트의 모든 정보와 설정을 포함하며, 나중에 loadProject 함수를 사용하여 다시 불러올 수 있습니다.
현재 작업 중인 프로젝트의 모든 데이터를 비우고 초기화하는 데 사용됩니다. 이 함수의 주된 목적은 현재 프로젝트의 상태를 완전히 초기 상태로 되돌리는 것이며, 모든 설정, 데이터, 작업 내용 등을 제거합니다. 이는 새 프로젝트를 시작하기 전이나, 작업 환경을 처음부터 다시 설정하고자 할 때 유용합니다.
+
Entry.clearProject();
+
+
Entry.launchFullScreen
EntryJS 환경을 전체 화면 모드로 전환하는 데 사용됩니다. 이 함수는 웹 페이지의 특정 요소나 전체 페이지를 전체 화면으로 확장하여 사용자에게 더 몰입감 있는 환경을 제공합니다. 내부적으로 HTML5의 requestFullscreen API를 호출하여 이 기능을 구현합니다.
+
Entry.launchFullScreen();
+
+
Entry.exitFullScreen
전체 화면 모드에서 일반 화면 모드로 돌아가는 데 사용됩니다. 사용자가 전체 화면 모드를 종료하고 싶을 때 이 함수를 호출하여 원래의 화면 상태로 복귀할 수 있습니다. 내부적으로 exitFullscreen API를 호출하여 이 기능을 구현합니다.
+
Entry.exitFullScreen();
+
+
Entry.getStartProject
시작 프로젝트(기본 프로젝트)를 로드하고 반환하는 메서드입니다. 이 함수는 특히 새로운 사용자에게 기본적인 프로젝트 템플릿을 제공하거나, 사전에 정의된 학습 자료를 기반으로 프로그래밍 환경을 초기화할 때 유용합니다.
프로젝트 내 미디어 파일에 접근하기 위한 경로의 접두사입니다. 이 값에 따라, 프로젝트에서 사용하는 모든 미디어 자원의 경로가 조정됩니다.
+
+
+
const mediaFilePath = "/assets"; // 미디어 파일 접근 경로의 접두사 설정 const startProject = Entry.getStartProject(mediaFilePath);
+
+
Entry.captureInterfaceState
EntryJS 환경에서 현재의 인터페이스 상태를 캡처하고 그 상태 정보를 객체 형태로 반환하는 함수입니다. 이 메서드는 특히 사용자의 작업 환경(워크스페이스의 블록 메뉴 크기, 스테이지의 크기, 현재 선택된 오브젝트 등)을 저장하고, 나중에 이 상태를 Entry.loadInterfaceState 메서드를 사용하여 복원할 때 필요한 정보를 제공합니다.
Entry.captureInterfaceState 메서드를 통해 캡처된 EntryJS 환경의 인터페이스 상태를 복원하는 함수입니다. 이 메서드는 사용자가 이전에 저장한 워크스페이스의 블록 메뉴 크기, 스테이지의 크기, 현재 선택된 오브젝트 등의 정보를 다시 로드하여, 사용자의 작업 환경을 이전 상태로 되돌립니다.
EntryJS를 사용하면서, 다양한 이벤트를 처리하는 것은 애플리케이션의 동적인 상호작용을 만들어 내는 데 중요한 부분입니다. EntryJS는 이벤트를 추가, 제거, 실행하는 간단하면서도 강력한 메서드를 제공합니다. 이 문서에서는 EntryJS에서 이벤트를 다루는 기본적인 방법을 소개합니다.
+
이벤트 리스너 등록하기
이벤트 리스너를 등록하려면 Entry.addEventListener 메서드를 사용합니다. 이 메서드는 두 개의 매개변수를 받으며, 첫 번째는 이벤트의 이름이고, 두 번째는 해당 이벤트가 발생했을 때 실행될 콜백 함수입니다.
// aiUtilizeItems 팝업의 data type [ { "name":"translate", "imageName":"papago.svg", "category":"general", "sponsorText":"Powered by {image}", "sponsorImage":"naver.png", "sponsorOnImage":"naverOn.png", "title":{ "ko":"번역", "en":"translate", "jp":"翻訳" }, "titleKey":"template.translate_title_text", "description":"파파고를 이용하여 다른 언어로 번역할 수 있는 블록 모음입니다.", "descriptionKey":"Msgs.expansion_translate_description", "isInitialized":false, "api":"/api/expansionBlock/papago/", "sponsor":"papagoNaver", "typeMap":{ "dictionary":"nsmt", "artificial_intelligence":"n2mt" }, "apiType":"n2mt", "active":false } ]
+
+
+
+
expansionItems
// expansionItems 팝업의 data type [ { "name":"behaviorConductLifeSafety", "imageName":"firstaid.png", "title":{ "ko":"생활안전", "en":"LifeSafety", "jp":"生活安全" }, "titleKey":"template.behaviorConductLifeSafety_title_text", "description":"생활 속 안전을 위해 국민이 지켜야 하는 행동요령에 대한 블록 모음입니다. [국민안전처 제공]", "descriptionKey":"설명", "isInitialized":false, "api":"/api/expansionBlock/behaviorConduct", "apiType":"03", "active":false } ]
static.js는 EntryJS 환경에서 사용되는 중요한 설정 파일로, window.EntryStatic 변수에 다양한 옵션과 환경 설정 값을 할당하여 Entry의 워크스페이스 및 기타 환경을 구성하는 데 사용됩니다. 이 파일은 EntryJS의 사용성, 확장성, 그리고 커스터마이징을 용이하게 하기 위해 설계된 다양한 정적(static) 값들을 정의합니다.
EntryJS에서 블록 내의 텍스트 필드(textField)를 렌더링할 때, 폰트별로 적절한 Y축 오프셋 값을 주어 텍스트가 블록의 중앙 높이에 맞춰지도록 하는 옵션입니다.
+
// 기본값 EntryStatic.fontOffsetY = -2.5;
+
+
heightLetter
EntryJS에서 블록 내 텍스트 영역의 높이 값을 계산하는 데 사용되는 기준 문자를 지정하는 설정입니다. 이 옵션을 통해 개발자는 특정 문자의 너비를 기준으로 하여 블록 내의 텍스트 영역의 높이를 적절하게 조정할 수 있습니다. 기본값인 ‘M’은 텍스트 높이를 측정하기 위한 일반적인 기준 문자로 사용되며, 이는 대부분의 폰트에서 가로 세로의 차이가 비교적 비슷하기 때문입니다.
+
// 기본값 EntryStatic.heightLetter = 'M';
+
+
messageMaxLength
EntryJS 환경에서 신호 블록(메시지 블록)의 이름을 변경할 때 허용되는 최대 길이 값을 지정하는 설정입니다. 이 옵션을 설정함으로써, 개발자는 신호 이름의 길이를 제한할 수 있으며, 이는 사용자가 신호 블록의 이름을 입력할 때 길이 제한을 적용받게 됩니다.
+
// 기본값 EntryStatic.messageMaxLength = 10;
+
+
messageMaxLength
EntryJS 환경에서 신호 블록(메시지 블록)의 이름을 변경할 때 허용되는 최대 길이 값을 지정하는 설정입니다. 이 옵션을 설정함으로써, 개발자는 신호 이름의 길이를 제한할 수 있으며, 이는 사용자가 신호 블록의 이름을 입력할 때 길이 제한을 적용받게 됩니다.
+
// 기본값 EntryStatic.messageMaxLength = 10;
+
+
variableBlockList
EntryJS 환경에서 프로젝트를 오브젝트 파일로 내보낼 때 포함될 변수 블록을 지정하는 설정입니다. 이 옵션을 사용하면 개발자는 내보내기 작업 시 포함시킬 특정 변수 블록을 선별적으로 지정할 수 있으며, 이를 통해 내보낸 파일의 크기를 최적화하거나, 특정 사용 사례에 맞는 데이터만을 포함시킬 수 있습니다.
EntryJS 환경에서 오브젝트 파일로 내보내기(export) 시에 포함될 신호(메시지) 블록들을 지정하는 설정입니다. 이 옵션을 통해 개발자는 내보낼 객체 파일에 포함될 메시지 블록의 종류를 제한하거나 지정할 수 있습니다. 특히, 프로젝트의 특정 기능이나 상호작용에 필요한 신호 블록들만을 선택적으로 내보낼 때 유용하게 사용됩니다.
EntryJS에서 사용할 수 있는 블록 및 그 블록이 속한 카테고리를 지정하는 데 사용됩니다. 이 설정을 통해 개발자는 워크스페이스 내에서 사용자에게 제공될 블록의 종류와 그룹핑을 결정할 수 있으며, 특정 카테고리 또는 블록을 숨기거나 추가할 수 있습니다. getAllBlocks 값이 지정되지 않으면, 어떤 블록이나 카테고리도 워크스페이스에 나타나지 않게 됩니다.
EntryJS 워크스페이스 내에서 사용되는 블록들의 색상을 지정하는 일종의 테마(theme) 설정입니다. 이 옵션을 통해 개발자는 워크스페이스의 블록 색상을 커스터마이즈할 수 있으며, 이를 통해 사용자에게 시각적으로 일관성 있는 환경을 제공하거나 특정 학습 목적에 맞게 블록의 색상을 조정할 수 있습니다.
EntryJS의 핵심은 사용자 친화적인 인터페이스와 블록 기반 프로그래밍 언어를 제공하는 것입니다. 사용자는 복잡한 코드를 작성할 필요 없이, 블록을 조합하여 간단하게 프로그램을 만들 수 있습니다. 이를 통해 사용자는 논리적 사고와 문제 해결 능력을 자연스럽게 개발할 수 있습니다.
+
이 문서를 사용하는 방법
화면 왼쪽에는 문서 탐색 모음이 있습니다. 문서의 페이지는 기본부터 고급까지 순차적으로 구성되어 있으므로 애플리케이션을 구축할 때 단계별로 따라갈 수 있습니다. 그러나 순서에 관계없이 읽거나 사용 사례에 적용되는 페이지로 건너뛸 수 있습니다.
+
화면 오른쪽에는 페이지 섹션 간을 더 쉽게 탐색할 수 있는 목차가 표시됩니다. 페이지를 빠르게 찾아야 하는 경우 상단의 검색창을 이용하세요.
EntryJS를 사용하여 프로젝트에 풍부한 프로그래밍 교육 기능을 추가하는 방법은 매우 간단합니다. 현재는 IIFE 방식으로 제공되며, 특정 날짜의 릴리즈를 v3.날짜.빌드번호 태그에서 찾을 수 있습니다. 아래는 EntryJS를 웹 프로젝트에 포함시키는 기본적인 단계입니다:
+
+
EntryJS 라이브러리 찾기:
+
+
EntryJS의 최신 버전이나 특정 날짜의 버전을 GitHub의 v3.날짜.빌드번호 태그에서 찾습니다. 예를 들어, v3.20240227.1050와 같은 형식일 수 있습니다.
+
+
+
라이브러리 다운로드:
+
+
원하는 버전의 EntryJS 파일을 다운로드합니다. 일반적으로는 entry.min.js 같은 압축된 JavaScript 파일을 사용하게 됩니다.
+
+
+
웹 프로젝트에 포함시키기:
+
+
다운로드한 entry.min.js 파일을 웹 프로젝트의 적절한 위치에 저장합니다. 그리고 HTML 파일 내에서 이 JavaScript 파일을 참조하도록 <script> 태그를 추가합니다.
+
+
+
+
<!DOCTYPE html> <html> <head> <title>My EntryJS Project</title> </head> <body> <!-- Entry JS --> <scriptsrc="path/to/lib/entry-js/dist/entry.min.js"></script> <script> // 여기에서 EntryJS 라이브러리를 사용한 코드를 작성합니다. </script> </body> </html>
+
+
+
EntryJS 사용 시작하기:
+
<script> 태그 내부 또는 별도의 JavaScript 파일에서 EntryJS의 기능을 사용하여 프로젝트를 구현합니다.
+
+
+
+
의존성 라이브러리 포함하기
EntryJS를 웹 프로젝트에 성공적으로 통합하려면, EntryJS 라이브러리 뿐만 아니라, 그것의 작동에 필요한 여러 외부 라이브러리들을 포함시켜야 합니다. 아래의 단계와 예제 코드는 EntryJS와 필요한 의존성 라이브러리들을 어떻게 포함시키는지 보여줍니다. EntryJS와 그 의존성 라이브러리들은 https://entry-cdn.pstatic.net/ 주소를 통해 CDN으로도 배포되고 있어, 원하는 라이브러리를 받을수 있습니다.
+
+
HTML 문서에 라이브러리 포함하기
+
+
웹 프로젝트의 HTML 파일 내 <head> 태그 또는 <body> 태그의 끝에 다음과 같이 <script> 태그를 추가하여 EntryJS와 의존성 라이브러리들을 포함시킬 수 있습니다. 아래 코드는 필요한 모든 라이브러리를 로드하는 예제입니다:
<!-- EntryJS 라이브러리 --> <scriptsrc="path/to/lib/entry-js/dist/entry.min.js"></script> </head> <body> <divid="entryContainer"></div> <script> // 여기에서 EntryJS 초기화 및 사용 코드를 작성 </script> </body> </html>
+
+
결론
이 가이드를 통해 EntryJS를 포함한 외부 라이브러리들을 웹 프로젝트에 쉽게 통합할 수 있습니다. EntryJS와 함께 제공되는 다양한 라이브러리들은 프로젝트에 풍부한 기능을 추가하고, 개발 과정을 용이하게 만들어 줍니다. 프로젝트를 시작할 때 위의 예제 코드를 참조하여 EntryJS와 필요한 의존성 라이브러리들을 적절히 포함시키고, 공식 문서를 통해 추가 정보와 가이드를 확인하세요.
+
추후 변경사항에 대비하기
+
EntryJS의 배포 방식은 향후 더 정형화된 방식으로 제공될 예정입니다. 이는 npm 패키지로의 배포나, CDN을 통한 직접 참조 등이 될 수 있습니다.
+
배포 방식이 업데이트되면, 이 문서도 새로운 설치 방법에 맞추어 업데이트될 것입니다. 최신 정보를 확인하기 위해 정기적으로 EntryJS의 공식 문서나 GitHub 페이지를 방문하시는 것을 권장합니다.
<!-- EntryJS 라이브러리 --> <scriptsrc="path/to/lib/entry-js/dist/entry.min.js"></script> </head> <body> <divid="entryContainer"></div> <script> // 여기에서 EntryJS 초기화 및 사용 코드를 작성 </script> </body> </html>
+
+
+
+
EntryJS 초기화: 페이지가 로드되면, EntryJS를 초기화하고 기본 설정을 구성해야 합니다. 아래 코드는 EntryJS를 초기화하는 방법의 예시입니다.
프로젝트 내에 사용된 개별 오브젝트에 대한 상세 정보를 포함합니다. 각 오브젝트 데이터는 그 오브젝트의 유형, 상태, 위치, 모양, 사용된 스크립트(블록 코드) 등 오브젝트를 완전히 기술하는 데 필요한 모든 정보를 담고 있어, 프로젝트를 재구성하거나 수정할 때 기반이 됩니다.
EntryJS 워크스페이스에서 작업한 프로젝트의 전체 구성과 상태를 포함하는 JSON 형식의 데이터입니다. 이 데이터는 프로젝트의 블록 구성, 사용된 객체, 스크립트, 설정 등 프로젝트를 구성하는 요소에 대한 정보를 담고 있어, 프로젝트를 저장하고, 불러오고, 공유하는 데 사용됩니다.
A. 아예 실행조차 안되신다면 터미널 콘솔을, 실행은 된 후에 발생한 동작오류면 브라우저의 개발자도구 > 콘솔을 포함해서 문의주세요. 일렉트론 프로젝트의 경우 Control+Shift+i (mac 의 경우 Command+Alt+i) 를 입력하시면 개발자도구가 오픈됩니다.
+ 
