Typescript 개발 가이드

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

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

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

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

1. node.js 설치

https://nodejs.org/ko/ 링크로 이동해 node.js를 설치합니다.

안정적인 버전인 LTS 버전으로 설치하는 것을 추천드립니다.

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 init MyZepApp --npm

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

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

3. 폴더 구조 살펴보기

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

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

여기서 생성된 main.ts 파일이 앱개발 코드를 적는 파일입니다.

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

main.ts 파일과 res 폴더를 제외한 나머지 파일과 폴더들은 타입스크립트로 ZEP Script를 개발하기 위한 설정 파일로, 개발 할 때 따로 수정하지 않으셔도 됩니다.

4. 빌드하기

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

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

npm run build 또는 npx zep-script build

빌드에 성공했다면 dist 라는 이름의 폴더가 생긴 것을 볼 수 있습니다.

dist 폴더에는 main.ts에 작성된 타입스크립트 코드를 자바스크립트로 변환한 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 에 작성한 내용대로 앱이 배포된 것을 확인 할 수 있습니다.

배포에 실패하는 경우 아래의 단계를 따라 재시도 해보세요.

npx 명령어를 사용하는 경우

1. 터미널에서 "npm i zep-script -g" 명령 실행하여 SDK 패키지를 최신화

2. root 폴더에서 ".zscsession" 파일 삭제

3. "npx zep-script publish" 명령어로 배포 시도

npm 명령어를 사용하는 경우

1. package.json 파일의 "zep-script" 버전이 최신이 아니라면 최신 버전으로 업데이트

2. root 폴더에서 ".zscsession" 파일 삭제

3. "npm run deploy" 명령어로 배포 시도

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

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

---