{"meta":{"title":"JavaScript 작업 만들기","intro":"이 가이드에서는 작업 도구 키트를 사용하여 JavaScript 작업을 빌드하는 방법을 알아봅니다.","product":"GitHub Actions","breadcrumbs":[{"href":"/ko/enterprise-server@3.14/actions","title":"GitHub Actions"},{"href":"/ko/enterprise-server@3.14/actions/tutorials","title":"자습서"},{"href":"/ko/enterprise-server@3.14/actions/tutorials/create-actions","title":"액션 만들기"},{"href":"/ko/enterprise-server@3.14/actions/tutorials/create-actions/create-a-javascript-action","title":"JavaScript 작업 만들기"}],"documentType":"article"},"body":"# JavaScript 작업 만들기\n\n이 가이드에서는 작업 도구 키트를 사용하여 JavaScript 작업을 빌드하는 방법을 알아봅니다.\n\n> \\[!NOTE]\n> GitHub Enterprise Server 호스트 실행기는 현재 GitHub에서 지원되지 않습니다.\n\n## 소개\n\n이 가이드에서는 패키지된 JavaScript 작업을 만들고 사용하는 데 필요한 기본 구성 요소에 대해 알아봅니다. 작업을 패키지하는 데 필요한 구성 요소에 가이드의 초점을 맞추기 위해 작업 코드의 기능은 최소화됩니다. 작업은 로그에 \"Hello World\"를 인쇄하거나 사용자 지정 이름을 제공하는 경우 \"Hello \\[인사말]\"을 출력합니다.\n\n이 가이드에서는 GitHub Actions 도구 키트 Node.js 모듈을 사용하여 개발 속도를 향상합니다. 자세한 내용은 [actions/toolkit](https://github.com/actions/toolkit) 리포지토리를 참조하세요.\n\n이 프로젝트를 완료하면 사용자 고유의 JavaScript 작업을 빌드하고 워크플로에서 테스트하는 방법을 이해하게 됩니다.\n\nJavaScript 작업이 모든 GitHub 호스트된 실행기(Ubuntu, Windows 및 macOS)와 호환되도록 하려면 작성하는 패키지된 JavaScript 코드는 순수 JavaScript이고 다른 이진 파일에 의존하지 않아야 합니다. JavaScript 작업은 실행기에서 직접 실행되며 실행기 이미지에 이미 있는 이진 파일을 사용합니다.\n\n> \\[!WARNING]\n> 워크플로와 작업을 만들 때는 코드가 공격자의 신뢰할 수 없는 입력을 실행할 수 있는지 항상 고려해야 합니다. 특정 컨텍스트는 공격자가 자신의 악성 콘텐츠를 삽입할 수 있으므로 신뢰할 수 없는 입력으로 취급해야 합니다. 자세한 내용은 [안전 사용 참조](/ko/enterprise-server@3.14/actions/security-guides/security-hardening-for-github-actions#understanding-the-risk-of-script-injections)을(를) 참조하세요.\n\n## 필수 조건\n\n시작하기 전에 Node.js를 다운로드하고 퍼블릭 GitHub 리포지토리를 만들어야 합니다.\n\n1. npm을 포함하는 Node.js 20.x를 다운로드하여 설치합니다.\n\n   <https://nodejs.org/en/download/>\n\n2. GitHub에 새 퍼블릭 리포지토리를 만들고 \"hello-world-javascript-action\"이라고 합니다. 자세한 내용은 [새 리포지토리 만들기](/ko/enterprise-server@3.14/repositories/creating-and-managing-repositories/creating-a-new-repository)을(를) 참조하세요.\n\n3. 컴퓨터에 리포지토리를 복제합니다. 자세한 내용은 [리포지토리 복제](/ko/enterprise-server@3.14/repositories/creating-and-managing-repositories/cloning-a-repository)을(를) 참조하세요.\n\n4. 터미널에서 디렉터리를 새 리포지토리로 변경합니다.\n\n   ```shell copy\n   cd hello-world-javascript-action\n   ```\n\n5. 터미널에서 npm으로 디렉터리를 초기화하여 `package.json` 파일을 생성합니다.\n\n   ```shell copy\n   npm init -y\n   ```\n\n## 작업 메타데이터 파일 만들기\n\n다음 예제 코드를 사용하여 `action.yml` 디렉터리에 `hello-world-javascript-action`이라는 새 파일을 만듭니다. 자세한 내용은 [메타데이터 구문 참조](/ko/enterprise-server@3.14/actions/creating-actions/metadata-syntax-for-github-actions)을(를) 참조하세요.\n\n```yaml copy\nname: Hello World\ndescription: Greet someone and record the time\n\ninputs:\n  who-to-greet: # id of input\n    description: Who to greet\n    required: true\n    default: World\n\noutputs:\n  time: # id of output\n    description: The time we greeted you\n\nruns:\n  using: node20\n  main: dist/index.js\n```\n\n이 파일은 `who-to-greet` 입력 및 `time` 출력을 정의합니다. 또한 작업 실행기에서 JavaScript 작업 실행을 시작하는 방법을 알려줍니다.\n\n## 작업 도구 키트 패키지 추가\n\n작업 도구 키트는 더 일관적으로 JavaScript 작업을 빠르게 빌드할 수 있는 Node.js 패키지의 컬렉션입니다.\n\n도구 키트 [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) 패키지는 워크플로 명령, 입력 및 출력 변수, 종료 상태, 디버그 메시지에 대한 인터페이스를 제공합니다.\n\n또한 도구 키트는 인증된 Octokit REST 클라이언트를 반환하고 GitHub Actions 컨텍스트에 액세스하는 [`@actions/github`](https://github.com/actions/toolkit/tree/main/packages/github) 패키지를 제공합니다.\n\n도구 키트는 `core` 및 `github` 패키지 이상을 제공합니다. 자세한 내용은 [actions/toolkit](https://github.com/actions/toolkit) 리포지토리를 참조하세요.\n\n터미널에서 작업 도구 키트 `core` 및 `github` 패키지를 설치합니다.\n\n```shell copy\nnpm install @actions/core @actions/github\n```\n\n이제 설치된 모든 종속성과 종속성의 버전을 추적하는 `node_modules` 디렉터리와 `package-lock.json` 파일이 표시됩니다.\n`node_modules` 디렉터리를 리포지토리에 커밋해서는 안 됩니다.\n\n## 작업 코드 작성\n\n이 작업은 도구 키트를 사용하여 작업의 메타데이터 파일에 필요한 `who-to-greet` 입력 변수를 가져오고 로그의 디버그 메시지에 \"Hello \\[who-to-greet]\"를 출력합니다. 다음으로 스크립트는 현재 시간을 가져오고 나중에 작업에서 실행되는 작업에서 사용할 수 있는 출력 변수로 설정합니다.\n\nGitHub Actions 웹후크 이벤트, Git refs, 워크플로, 작업 및 워크플로를 트리거한 사용자에 대한 컨텍스트 정보를 제공합니다. 컨텍스트 정보에 액세스하려면 `github` 패키지를 사용할 수 있습니다. 작성할 작업은 웹후크 이벤트 페이로드를 로그에 출력합니다.\n\n다음 코드를 사용하여 `src/index.js`라는 새 파일을 추가합니다.\n\n```javascript copy\nimport * as core from \"@actions/core\";\nimport * as github from \"@actions/github\";\n\ntry {\n  // `who-to-greet` input defined in action metadata file\n  const nameToGreet = core.getInput(\"who-to-greet\");\n  core.info(`Hello ${nameToGreet}!`);\n\n  // Get the current time and set it as an output variable\n  const time = new Date().toTimeString();\n  core.setOutput(\"time\", time);\n\n  // Get the JSON webhook payload for the event that triggered the workflow\n  const payload = JSON.stringify(github.context.payload, undefined, 2);\n  core.info(`The event payload: ${payload}`);\n} catch (error) {\n  core.setFailed(error.message);\n}\n```\n\n위 `index.js` 예제에서 오류가 throw되면 `core.setFailed(error.message);`는 작업 도구 키트 [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) 패키지를 사용하여 메시지를 기록하고 실패한 종료 코드를 설정합니다. 자세한 내용은 [작업의 종료 코드 설정](/ko/enterprise-server@3.14/actions/creating-actions/setting-exit-codes-for-actions)을(를) 참조하세요.\n\n## README 파일 생성하기\n\n사람들에게 작업을 사용하는 방법을 알리기 위해 추가 정보 파일을 만들 수 있습니다. 추가 정보는 작업을 공개적으로 공유하려는 경우에 가장 유용하지만 사용자 또는 팀에게 작업 사용 방법을 알려주는 좋은 방법이기도 합니다.\n\n```\n          `hello-world-javascript-action` 디렉터리에서 다음 정보를 지정하는 `README.md` 파일을 만듭니다.\n```\n\n* 작업의 수행 내용에 대한 자세한 설명입니다.\n* 필수 입력 및 출력 인수입니다.\n* 선택적 입력 및 출력 인수입니다.\n* 작업에서 사용하는 비밀입니다.\n* 작업에서 사용하는 환경 변수입니다.\n* 워크플로에서 작업을 사용하는 방법의 예입니다.\n\n````markdown copy\n# Hello world JavaScript action\n\nThis action prints \"Hello World\" or \"Hello\" + the name of a person to greet to the log.\n\n## Inputs\n\n### `who-to-greet`\n\n**Required** The name of the person to greet. Default `\"World\"`.\n\n## Outputs\n\n### `time`\n\nThe time we greeted you.\n\n## Example usage\n\n```yaml\nuses: actions/hello-world-javascript-action@e76147da8e5c81eaf017dede5645551d4b94427b\nwith:\n  who-to-greet: Mona the Octocat\n```\n````\n\n## 액션을 커밋하고 태그 지정하며 푸시하세요.\n\nGitHub는 런타임 중에 워크플로에서 실행되는 각 작업을 다운로드하고 전체 코드 패키지로 실행한 후 `run`과 같은 워크플로 명령을 사용하여 실행기 머신과 상호 작용을 할 수 있습니다. 즉, JavaScript 코드를 실행하는 데 필요한 패키지 종속성을 포함해야 합니다. 예를 들어, 이 작업에서는 `@actions/core` 및 `@actions/github` 패키지를 사용합니다.\n\n```\n          `node_modules` 디렉터리를 체크 인하면 문제가 발생할 수 있습니다. 다른 방법으로, [`rollup.js`](https://github.com/rollup/rollup) 또는 [`@vercel/ncc`](https://github.com/vercel/ncc) 등의 도구를 사용하여 코드와 종속성을 하나의 파일에 결합하여 배포할 수 있습니다.\n```\n\n1. 터미널에서 이 명령을 실행하여 `rollup` 및 해당 플러그인을 설치하세요.\n\n   `npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve`\n\n2. 다음 코드를 사용하여 `rollup.config.js`라는 새 파일을 리포지토리 루트에 만듭니다.\n\n   ```javascript copy\n   import commonjs from \"@rollup/plugin-commonjs\";\n   import { nodeResolve } from \"@rollup/plugin-node-resolve\";\n\n   const config = {\n     input: \"src/index.js\",\n     output: {\n       esModule: true,\n       file: \"dist/index.js\",\n       format: \"es\",\n       sourcemap: true,\n     },\n     plugins: [commonjs(), nodeResolve({ preferBuiltins: true })],\n   };\n\n   export default config;\n   ```\n\n3. ```\n          `dist/index.js` 파일을 컴파일합니다.\n   ```\n\n   `rollup --config rollup.config.js`\n\n   코드와 종속성이 포함된 새 `dist/index.js` 파일이 표시됩니다.\n\n4. 터미널에서 업데이트를 커밋합니다.\n\n   ```shell copy\n   git add src/index.js dist/index.js rollup.config.js package.json package-lock.json README.md action.yml\n   git commit -m \"Initial commit of my first action\"\n   git tag -a -m \"My first action release\" v1.1\n   git push --follow-tags\n   ```\n\n코드를 커밋하고 푸시할 때, 업데이트된 리포지토리는 다음과 같이 표시됩니다.\n\n```text\nhello-world-javascript-action/\n├── action.yml\n├── dist/\n│   └── index.js\n├── package.json\n├── package-lock.json\n├── README.md\n├── rollup.config.js\n└── src/\n    └── index.js\n```\n\n## 워크플로에서 작업 테스트\n\n이제 워크플로에서 작업을 테스트할 준비가 되었습니다.\n\n퍼블릭 작업은 모든 리포지토리의 워크플로에서 사용할 수 있습니다. 작업이 프라이빗 또는 내부 리포지토리에 있는 경우 리포지토리 설정은 동일한 리포지토리 내에서만 작업을 사용할 수 있는지 또는 동일한 조직 또는 엔터프라이즈에서 소유한 다른 리포지토리에서도 사용 가능한지 여부를 지정합니다. 자세한 내용은 [리포지토리에 대한 GitHub Actions 설정 관리](/ko/enterprise-server@3.14/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository)을(를) 참조하세요.\n\n> \\[!NOTE]\n> GitHub Actions의 GitHub Enterprise Server는 GitHub.com 또는 GitHub Marketplace의 작업에 대한 액세스가 제한될 수 있습니다. 자세한 내용은 [GitHub.com 작업에 대한 액세스 관리](/ko/enterprise-server@3.14/admin/github-actions/managing-access-to-actions-from-githubcom)을(를) 참조하고 GitHub Enterprise 사이트 관리자에게 문의하세요.\n\n### 퍼블릭 작업을 사용하는 예제\n\n이 예제에서는 외부 리포지토리 내에서 새 퍼블릭 작업을 실행할 수 있는 방법을 보여줍니다.\n\n다음 YAML을 `.github/workflows/main.yml`의 새 파일에 복사하고 위에서 만든 퍼블릭 리포지토리의 이름과 사용자 이름으로 `uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b` 줄을 업데이트합니다.\n`who-to-greet` 입력을 자신의 이름으로 바꿀 수도 있습니다.\n\n```yaml copy\non:\n  push:\n    branches:\n      - main\n\njobs:\n  hello_world_job:\n    name: A job to say hello\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Hello world action step\n        id: hello\n        uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b\n        with:\n          who-to-greet: Mona the Octocat\n\n      # Use the output from the `hello` step\n      - name: Get the output time\n        run: echo \"The time was ${{ steps.hello.outputs.time }}\"\n```\n\n이 워크플로가 트리거되면 실행기는 퍼블릭 리포지토리에서 `hello-world-javascript-action` 작업을 다운로드한 다음 실행합니다.\n\n### 프라이빗 작업을 사용하는 예제\n\n작업 리포지토리의 `.github/workflows/main.yml` 파일에 워크플로 코드를 복사합니다.\n`who-to-greet` 입력을 자신의 이름으로 바꿀 수도 있습니다.\n\n```yaml copy\non:\n  push:\n    branches:\n      - main\n\njobs:\n  hello_world_job:\n    name: A job to say hello\n    runs-on: ubuntu-latest\n\n    steps:\n      # To use this repository's private action,\n      # you must check out the repository\n      - name: Checkout\n        uses: actions/checkout@v6\n\n      - name: Hello world action step\n        uses: ./ # Uses an action in the root directory\n        id: hello\n        with:\n          who-to-greet: Mona the Octocat\n\n      # Use the output from the `hello` step\n      - name: Get the output time\n        run: echo \"The time was ${{ steps.hello.outputs.time }}\"\n```\n\n리포지토리에서 **작업** 탭을 클릭하고 최신 워크플로 실행을 선택합니다. **작업** 아래 또는 시각화 그래프에서 **인사할 작업**을 클릭합니다.\n\n**Hello world 동작 단계** 클릭하면 “Hello Mona Octocat” 또는 `who-to-greet` 입력에 사용한 이름이 로그에 표시되어야 합니다.. 타임스탬프를 보려면 **출력 시간 가져오기**를 클릭합니다.\n\n## JavaScript 작업을 만들기 위한 템플릿 리포지토리\n\nGitHub은(는) JavaScript 및 TypeScript 작업을 만들기 위한 템플릿 리포지토리를 제공합니다. 이러한 템플릿을 사용하여 테스트, Linting 및 기타 권장 사례를 포함하는 새 작업 만들기를 빠르게 시작할 수 있습니다.\n\n* [\n  `javascript-action` 템플릿 리포지토리](https://github.com/actions/javascript-action)\n* [\n  `typescript-action` 템플릿 리포지토리](https://github.com/actions/typescript-action)\n\n## GitHub.com의 JavaScript 작업 예제\n\nGitHub.com에서 JavaScript 작업의 많은 예를 찾을 수 있습니다.\n\n* [DevExpress/testcafe-action](https://github.com/DevExpress/testcafe-action)\n* [duckduckgo/privacy-configuration](https://github.com/duckduckgo/privacy-configuration)"}