> ## Documentation Index
> Fetch the complete documentation index at: https://ayakaleaf-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 개발 환경 설정 (Codespace)

> GitHub Codespace로 개발 환경을 설정합니다.

시간을 절약하고 개발 환경을 빠르게 구축할 수 있도록, GitHub Codespace를 이용하는 또 다른 버전의 개발 환경 구성을 제공합니다.

## 구성 튜토리얼

<Steps>
  <Step title="Codespaces 생성">
    아래 버튼을 클릭하여 server-pro 개발용 클라우드 Codespaces를 생성하세요.

    [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ayaka-notes/overleaf-pro)

    **Machine Type**은 최소 **4-core** 이상을 선택하는 것을 권장합니다. 더 큰 머신 유형이 필요하다면 [여기](https://support.github.com/contact?tags=rr-codespaces%2Ccat_codespaces)에서 티켓을 제출하여 GitHub 공식 지원팀에 요청할 수 있습니다.

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=d723c8474a8fe076724ad4b8404c90a0" alt="" width="1319" height="990" data-path="images/dev/image.png" />
    </Frame>
  </Step>

  <Step title="설정 스크립트 실행">
    Codespace가 생성될 때까지 잠시 기다려야 합니다. 터미널에 접근할 수 있게 되면 다음 명령을 실행하세요.

    ```text theme={null}
    cd develop/
    bin/setup
    ```

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-1.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=67fe318b5d049b5eb8317b41154ca3b4" alt="" width="1086" height="587" data-path="images/dev/image-1.png" />
    </Frame>

    <Warning>
      이 스크립트(`bin/setup`)를 사용하면 `server-pro` 브랜치의 최신 커밋을 기준으로 가능한 한 짧은 시간 안에 개발 환경을 설정할 수 있습니다. 이전 버전이나 다른 브랜치에는 적용되지 않을 수 있습니다.

      개발용 Docker 이미지는 [GitHub Action](https://github.com/ayaka-notes/overleaf-pro/actions)으로 매일 빌드됩니다.
    </Warning>
  </Step>

  <Step title="Launchpad 접속">
    포트 탭으로 전환하면 사용 가능한 웹 포트 목록이 표시됩니다. `80` 포트를 클릭하면 launchpad 페이지가 보입니다.

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-2.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=649782162b3038fde73e6b9c3be0a5ce" alt="" width="1492" height="589" data-path="images/dev/image-2.png" />
    </Frame>

    다음과 같은 화면이 표시됩니다.

    <Frame>
      <img src="https://mintcdn.com/ayakaleaf-pro/x9kfDjtWlyyhG_mR/images/dev/image-3.png?fit=max&auto=format&n=x9kfDjtWlyyhG_mR&q=85&s=2cb7a394e9e4724a2145f5a631447237" alt="" width="1742" height="1183" data-path="images/dev/image-3.png" />
    </Frame>
  </Step>

  <Step title="개발 즐기기">
    이제 여러분만의 시간입니다! 멋진 기능을 만들어 보세요. 실시간 표시를 활성화하려면 다음 명령을 실행해야 합니다.

    ```bash title="bash" wrap theme={null}
    docker compose -f docker-compose.yml -f docker-compose.dev.yml -f ./docker-compose.image.yml up --no-deps --detach
    ```
  </Step>
</Steps>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.