# Javascript 개발 가이드

**zep-script-SDK** 라이브러리를 사용해 폴더 구조를 깔끔하게 유지하고, 프로젝트 압축 및 배포를 명령어만으로 간단하게 진행 할 수 있습니다. **zep-script-SDK** 사용 방법을 알아보겠습니다.

<div align="left"><figure><img src="/files/8zMrv1XpdsztvAqt8Eah" alt=""><figcaption></figcaption></figure></div>

### 1. **node.js 설치**

{% hint style="info" %}
<https://nodejs.org/ko/> 링크로 이동해 node.js를 설치합니다.

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

<div align="left"><figure><img src="/files/ujIFDbEHeSr4RZV1lm26" alt=""><figcaption></figcaption></figure></div>

### 2. **프로젝트 폴더 구성하기**

라이브러리 사용을 위해 프로젝트 폴더는 다음과 같이 구성합니다.

res 폴더는 앱에서 쓰일 이미지, 사운드, html 파일 등을 넣는 폴더입니다.

→ 폴더 이름을 **res**로 지정해야합니다.

<div align="left"><figure><img src="/files/7TS2Xpi3QkaJeJQFmX0W" alt=""><figcaption></figcaption></figure></div>

### 3. CLI를 사용해 프로젝트를 .zip 파일로 만들기

CLI를 사용해 명령어로 프로젝트를 **.zip** 파일로 만들 수 있습니다.

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

> **Windows에서 PowerShell 실행하기**
>
> main.js가 있는 폴더 빈 공간에 **Shift + 오른쪽클릭**을 해서
>
> **`여기에 PowerShell 창 열기`** 또는 **`여기서 명령창 열기`** 메뉴를 누르면
>
> ![](/files/Pd9nBSWgjnEPWVJhuLx4)
>
> 다음과 같이 **Windows PowerShell** 또는 **명령 프롬프트** 창이 실행됩니다.
>
> ![](/files/JNJ5d0UwlJ2pScJMIKt9)

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

<pre class="language-powershell"><code class="lang-powershell"><strong>npx zep-script archive
</strong></code></pre>

<figure><img src="/files/IBsD0fXVtCLmFwmARcJk" alt=""><figcaption></figcaption></figure>

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

<div align="left"><figure><img src="/files/TSBCGxLc8D4qp0pWaaOI" alt=""><figcaption></figcaption></figure></div>

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

### 4. 프로젝트 배포하기

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

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

[<mark style="color:purple;">**ZEP Script 배포 가이드**</mark>](/creator/dev-guide/zep-script.md) 페이지를 참고해서 앱을 배포해보세요!

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

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

다음과 같이 <mark style="color:purple;">`zep-script.json`</mark> 파일을 생성해 업로드 될 앱을 설정합니다. (이름이 동일해야 합니다.)

<div align="left"><figure><img src="/files/YjqoDz2rSVJEyBNkyhKF" alt=""><figcaption></figcaption></figure></div>

```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입**니다)

<div align="center"><figure><img src="/files/ICjkMOXGcpydMFGmNhgk" alt=""><figcaption></figcaption></figure></div>

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

```powershell
npx zep-script publish
```

앱 업로드 과정에서 계정 인증이 필요합니다.

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

<div align="left"><figure><img src="/files/LxF3PNzwgMPZQ349xKeF" alt=""><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/Kc9q2Oc89aKO25No5xGL" alt=""><figcaption><p>인증 메일 예시</p></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/YHzooKbVCj0isTdmXIhr" alt=""><figcaption></figcaption></figure></div>

위에서 **zep-script.json 파일**에 작성한 내용대로 [**나의 앱**](https://zep.us/me/apps) 페이지에 앱이 배포된 것을 확인 할 수 있습니다.

<figure><img src="/files/ef7CVhLHdP7td4TzidL9" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**배포에 실패하는 경우 아래의 단계를 따라 재시도 해보세요.**

**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" 명령어로 배포 시도
   {% endhint %}

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

:clap:[zep-script-sdk/packages/zep-script-cli at main · zep-us/zep-script-sdk](https://github.com/zep-us/zep-script-sdk/tree/main/packages/zep-script-cli)

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-kr.zep.us/creator/dev-guide/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.