Typescript 개발 가이드

⭐ 타입스크립트 개발 시 주의할 점

타입스크립트로 개발 시 App, Map, Player, Widget 키워드 앞에 Script 키워드를 붙여야 합니다.

// 자바스크립트 개발 시
App.sayToAll("Hello World!");

// 타입스크립트 개발 시
ScriptApp.sayToAll("Hello World!");

1. node.js 설치

2. 프로젝트 폴더 만들기

CLI를 통해 ZEP Script 프로젝트를 개발하기 위한 샘플 프로젝트를 다운로드 받을 수 있습니다.

CLI는 MacOS의 경우 터미널, Windows의 경우 Windows PowerShell 또는 Windows 11부터 제공되는 터미널 환경에서 실행하실 수 있습니다.

Windows에서 PowerShell 실행하기

폴더를 생성하고 싶은 곳 빈 공간에 Shift + 오른쪽클릭을 해서

여기에 PowerShell 창 열기 또는 여기서 명령창 열기 메뉴를 누르면

다음과 같이 Windows PowerShell 또는 명령 프롬프트 창이 실행됩니다.

다음과 같이 프로젝트 폴더를 생성하기 위한 명령어를 입력합니다.

npx zep-script init {폴더 이름} --npm

npx zep-script@latest init MyZepApp --npm

위와 같이 Project {폴더 이름} initialized successfully 메시지가 출력 되었다면,

이제 타입스크립트로 ZEP Script를 개발할 수 있는 환경이 준비 된 것 입니다.

3. 폴더 구조 살펴보기

생성된 프로젝트 폴더로 이동하면 다음과 같이 파일들이 있는 것을 볼 수 있습니다.

여러 기능을 모듈로 나누고 싶다면, src 폴더내부에 파일을 추가해 확장할 수 있습니다. 예: playerUtils.ts, eventHandlers.ts 등

res 폴더는 ‘resources’의 약자로, 앱에 필요한 이미지나 html 파일 등을 넣는 폴더입니다.

여기서 생성된 main.ts 파일은 앱 로직을 작성하는 메인 파일입니다.

main.ts 에는 다음과 같이 샘플 코드가 적혀있습니다. 해당 코드를 참고하여 개발을 하시면 됩니다.

4. 빌드하기

ZEP Script는 자바스크립트가 아닌 언어로 실행 할 수 없기 때문에 타입스크립트를 자바스크립트로 변환하는 빌드 과정을 거쳐야 합니다.

main.ts 파일이 있는 폴더에서 명령 창을 열어 다음과 같이 빌드를 위한 명령어를 입력합니다.

npm run build 또는 npx zep-script build

빌드 완료 시 res 폴더에 main.js 파일이 생성됩니다.

5. 압축 파일 만들기

ZEP Script로 만든 앱을 배포하려면 main.js 파일과 앱에서 사용 할 이미지, html 파일 등을 함께 압축한 .zip 파일을 준비해야 합니다.

main.ts 파일이 있는 폴더에서 명령 창을 열어서 다음과 같이 압축 파일을 만들기 위한 명령어를 입력합니다.

npm run archive 또는 npx zep-script archive

압축 과정이 성공했다면 다음과 같이 폴더에 압축 파일이 생긴 것을 확인 할 수 있습니다.

압축 파일을 만드는 것을 마지막으로, 앱을 배포할 준비가 끝났습니다.

6. 프로젝트 배포하기

1. 홈페이지에서 배포하기

위에서 만든 압축(ZIP) 파일을 홈페이지에서 업로드 하는 방식으로 앱을 배포할 수 있습니다.

ZEP Script 배포 가이드 페이지를 참고해서 앱을 배포해보세요!

2. 명령어(CLI)로 배포하기

CLI를 사용해 위에서 만든 압축(ZIP) 파일을 배포할 수 있습니다.

프로젝트 폴더에서 zep-script.json 파일을 열어 업로드 될 앱을 설정합니다.

( zep-script.json 파일이 없다면 생성해주세요 )

{
    "appId": "Zjkgoj",  // app ID
    "name": "Template", // app 이름
    "description": "Template application" , // app 설명
    "type": "normal" // app 타입 ( "normal" or "minigame" or "sidebar" )
}

⭐ appID: 업로드할 앱의 ID를 입력합니다

• 기존 앱을 변경하시려면 https://zep.us/me/apps/에 접속해서 업로드할 앱을 선택 후 주소창에 apps/뒤에 붙는 값을 입력하시면 됩니다.(아래 예시 이미지에서 Zjkoj입니다)

설정이 끝났으면 프로젝트 폴더 경로에서 PowerShell 을 실행 한 뒤, 다음과 같이 배포를 하기 위한 명령어를 입력합니다.

npm run deploy 또는 npx zep-script publish

다음과 같이 email을 입력하는 부분이 나오면 배포 할 앱을 소유하고 있는 계정의 email을 입력합니다.

Sending login code to your email..이라는 메시지가 나오면 위에서 입력한 이메일의 메일 함에서 인증 코드를 확인한 뒤 입력해주면 배포가 시작됩니다.

다음 그림과 같이 Publishing… 텍스트 좌측에 초록색 체크 표시가 생기면 배포가 완료된 것 입니다.

나의 앱 페이지에서 zep-script.json 에 작성한 내용대로 앱이 배포된 것을 확인 할 수 있습니다.

라이브러리 관련하여 보다 자세한 내용은 아래 github 레포지토리 내용을 참고해주세요.

zep-script-sdk/packages/zep-script-cli at main · zep-us/zep-script-sdk