<div id="readability-page-1" class="page"><div>
                <div id="SE-686a8aa4-f8b7-4e45-963c-d2b4a49b025a">
                                    <p id="SE-adbb24d6-ff56-4db6-9423-c261e310582e"><span id="SE-066d2b6e-dc80-4c35-a7d1-d8992d78c575">깃허브 액션으로 테스트 코드를 배포하는 방법을 알아보겠습니다. 깃허브 액션은 깃허브에서 제공하는 자동화 도구입니다. 이를 통해 개발자들은 소프트웨어 개발 워크플로우를 자동화할 수 있습니다. 깃허브 액션은 다양한 이벤트(예: 코드 푸시, PR 생성, 이슈 생성 등)에 반응하여 특정 작업을 수행하도록 설정할 수 있습니다. 주로 사용되는 용도는 다음과 같습니다.</span></p><p id="SE-c6e24c09-b2d5-4213-9667-6b037f5aede1"><span id="SE-b6b99556-8d28-4bb8-85a2-4a83eaab50c5">​</span></p><ul><li><p id="SE-e50eaf35-85d6-4394-ae2b-7c2e63bf9682"><span id="SE-3a9a02a9-3c78-4c02-878c-94ef915b4d66"><b>CI/CD (지속적 통합/지속적 배포)</b></span><span id="SE-d3ce87c8-ff90-4631-967c-5b038aa1c940"> : 코드를 변경할 때마다 자동으로 테스트를 실행하고 빌드 및 배포를 수행할 수 있습니다.</span></p></li><li><p id="SE-b8ec7cf0-4cff-4cdf-9ab7-f427da8e94db"><span id="SE-00fdf013-6625-444e-9daf-c86a56c26d40"><b>자동화된 테스트</b></span><span id="SE-a2ce72d2-8323-4504-88c4-4e575da06f01"> : 코드 품질을 보장하기 위해 모든 코드 변경 사항에 대해 자동으로 테스트를 실행할 수 있습니다.</span></p></li><li><p id="SE-f7220a1e-5ff4-4944-993d-79d44beb39af"><span id="SE-5333510f-1e7d-4bd1-829c-ab21619f91b1"><b>릴리스 관리</b></span><span id="SE-f8c9a3be-46bd-41dd-83d5-69d7df7b2153"> : 특정 조건이 충족되면 자동으로 릴리스를 생성하고 배포할 수 있습니다.</span></p></li><li><p id="SE-965552e9-0725-4045-a910-061c29c86b1f"><span id="SE-d35a83e8-b519-4e82-af5f-2986cf4f39fe"><b>이슈 및 PR 관리</b></span><span id="SE-0754c3bc-1ea8-430b-91a5-f2518d6b2610"> : 이슈나 PR 생성 시 자동으로 레이블을 추가하거나, 특정 조건에 따라 자동으로 응답을 달 수 있습니다.</span></p></li></ul><p id="SE-03fdec21-9c3c-49e9-bf27-e6f3c356d40f"><span id="SE-6da51176-7d47-4fb0-9292-c86e79c06bfe">​</span></p><p id="SE-2025c2fe-98be-4e21-ab5b-3aa6e1ece37d"><span id="SE-1983cf45-5ac3-4d26-93f5-2907ef289d76">깃허브 액션은 .github/workflows 디렉토리에 YAML 파일로 정의된 워크플로우를 사용합니다. 이 파일에는 어떤 이벤트에 반응할지, 어떤 작업(Job)들이 실행될지, 그리고 그 작업 내에서 어떤 단계(Step)들이 실행될지가 정의되어 있습니다.</span></p><p id="SE-49794227-d51c-4cf3-9cd2-474ad4856dd8"><span id="SE-637d122a-5a56-4d45-8039-d4375bc341b2">​</span></p><p id="SE-abd4144b-5725-4190-b429-d1d5f2a10968"><span id="SE-81bcf9ea-eaf8-43bd-ae83-3052c4c76f39">그럼 본격적으로 테스트 코드 배포를 실습해 보겠습니다. Page.tsx에서 다음 코드를 기입합니다.</span></p>
                            </div>                <div id="SE-eea7e268-3146-4361-9445-5f6e0ba21122">
                                    <p>'use client'

const Home = () =&gt; {

    return (
        &lt;h1&gt;Vitest Example&lt;/h1&gt;
    );
};

export default Home;</p>
                                </div>                <div id="SE-f3eab0c8-10c5-4cad-ac72-23d08c2c69d8">
                                    <p id="SE-fa8b3d26-77b0-4b99-8c7f-239c322cae64"><span id="SE-f25459c8-89aa-488b-9e0e-6b70fc6fe06a">​</span></p><p id="SE-ad27805d-44c6-4fc7-9c56-be2113bc7291"><span id="SE-8e1f426a-16c7-4ef9-9297-e951a9fa50f5">테스트 코드에는 오류가 발생되는 코드를 작성합니다.</span></p>
                            </div>                <div id="SE-7eba6d9e-0364-44ae-b931-6399919a2f25">
                                    <p>import {describe, expect, it} from "vitest";
import Home from "@/app/page";
import {screen} from "@testing-library/dom";
import {renderWithProviders} from "@/utils/test/render";

describe("랜딩 페이지", () =&gt; {
    it('테스트 결과를 확인합니다.', async () =&gt; {
        renderWithProviders(&lt;Home /&gt;);
        const text = await screen.findByText('Vitest Example!!!');
        expect(text).toBeInTheDocument();
    });
});
</p>
                                </div>                <div id="SE-73d71bf6-1bdd-4242-811d-62365f35b4b8">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-73d71bf6-1bdd-4242-811d-62365f35b4b8&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMjU1/MDAxNzIyOTYwNDA5NDUz.9Jl0U7rq4DLpwz_EG92nh-dwNHJ3t_ixSwBpGKK768Ug.Q1SgmmZpY7hdsKw568jTj-zwc4qWkzwKJSxLBosHwjUg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.06.34.png&quot;, &quot;originalWidth&quot; : &quot;1448&quot;, &quot;originalHeight&quot; : &quot;1096&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMjU1/MDAxNzIyOTYwNDA5NDUz.9Jl0U7rq4DLpwz_EG92nh-dwNHJ3t_ixSwBpGKK768Ug.Q1SgmmZpY7hdsKw568jTj-zwc4qWkzwKJSxLBosHwjUg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.06.34.png?type=w800" data-width="886" data-height="670" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-f492345e-54d8-4b80-b382-f9d213408ada">
                                    <p id="SE-c8e93251-a156-453d-b6d2-bfc04717b997"><span id="SE-047ce38a-0823-42ba-ade7-b83706dda5de">​</span></p><p id="SE-a88e2ddf-6511-4906-8fed-db581da34c8b"><span id="SE-38db9737-a4d2-4886-89ca-7c0a567d7682">깃허브 액션 배포를 위해 다음 코드를 workflows 폴더 안에 추가합니다.</span></p>
                            </div>                <div id="SE-b0a3cc91-6174-4f3d-a853-f73d89552c18">
                                    <p>// .github/workflows/vitest.yml
name: 'vitest test'
on: pull_request
jobs:
  Component-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: 'yarn'
      - name: Install dependencies
        run: yarn install
      - name: run vitest
        run: yarn test</p>
                                </div>                <div id="SE-6217f4fa-84ac-472d-94c8-cd8325851038">
                                    <p id="SE-c92c09eb-50d7-43e8-9793-6f036e2a39f7"><span id="SE-95617abb-b8c3-4311-8077-38c4e7dd2110">​</span></p><p id="SE-6a3223a7-357d-492d-9709-cb363b9a4827"><span id="SE-42bf93a7-358a-4d38-ae29-f970d303364d">깃허브에 위 코드를 배포한 다음 PR을 올리면 깃허브 액션에서 테스트 실행 이유와 지점을 바로 확인할 수 있습니다.</span></p>
                            </div>                <div id="SE-cef522fd-c28a-4ccb-ae4d-cc78f39ca205">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-cef522fd-c28a-4ccb-ae4d-cc78f39ca205&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfNTUg/MDAxNzIyOTYwMTY2NjYy.c-QgbC3FU9VfQJYKtrFIZOcvipirkivHYQl-QXdqoCkg.6uXT8moGsiHhUmNC3yqQW74Snn-JlHdAEaU5moQ08OEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.00.04.png&quot;, &quot;originalWidth&quot; : &quot;2792&quot;, &quot;originalHeight&quot; : &quot;1586&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfNTUg/MDAxNzIyOTYwMTY2NjYy.c-QgbC3FU9VfQJYKtrFIZOcvipirkivHYQl-QXdqoCkg.6uXT8moGsiHhUmNC3yqQW74Snn-JlHdAEaU5moQ08OEg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.00.04.png?type=w800" data-width="886" data-height="503" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-84c39e25-0c14-4741-8ac5-801433ecffe1">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-84c39e25-0c14-4741-8ac5-801433ecffe1&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMzYg/MDAxNzIyOTYwODI1NzM5.arcIyQQYJFgh_sW0lpB19S07q4ersOFcvBO2lAETapkg.AbjGc15gMbT3ldo2tEoYrjslpsGH70KZ-fgZwr2CJi0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.03.44.png&quot;, &quot;originalWidth&quot; : &quot;1844&quot;, &quot;originalHeight&quot; : &quot;418&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDA4MDdfMzYg/MDAxNzIyOTYwODI1NzM5.arcIyQQYJFgh_sW0lpB19S07q4ersOFcvBO2lAETapkg.AbjGc15gMbT3ldo2tEoYrjslpsGH70KZ-fgZwr2CJi0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-08-07_%EC%98%A4%EC%A0%84_1.03.44.png?type=w800" data-width="886" data-height="200" alt="">
                                    </a>
                                </p>
                        </div>
                    </div></div>

개발하는 기획자. 기획하는 개발자.

깃허브 액션으로 테스트 코드를 배포하는 방법을 알아보겠습니다. 깃허브 액션은 깃허브에서 제공하는 자동화 도구입니다. 이를 통해 개발자들은 소프트웨어 개발 워크플로우를 자동화할 수 있습니다. 깃허브 액션은 다양한 이벤트(예: 코드 푸시, PR 생성, 이슈 생성 등)에 반응하여 특정 작업을 수행하도록 설정할 수 있습니다. 주로 사용되는 용도는 다음과 같습니다. CI/CD (지속적 통합/지속적 배포) : 코드를 변경할 때마다 자동으로 테스트를 실행하고 빌드 및 배포를 수행할 수 있습니다. 자동화된 테스트 : 코드 품질을 보장하기 위해 모든 코드 변경 사항에 대해 자동으로 테스트를 실행할 수 있습니다. 릴리스 관리 : 특정 조건이 충.......

Vitest GitHub Actions 배포

댓글