로컬에서 프로젝트 개발

HTML, CSS. JavaScript를 기반으로 빌드된 예제 클라이언트 측 애플리케이션을 사용하여 로컬 개발 환경을 만드는 방법을 알아봅니다.

이 문서의 내용

개요

로컬 개발은 클라우드 또는 원격 서버 대신 사용자 본인의 컴퓨터에서 프로젝트를 설정하고 실행하는 것을 의미합니다. 로컬에서 개발하는 경우 인터넷 연결하지 않고도 코드 작업을 수행하고 라이브 애플리케이션에 영향을 주지 않고 실험할 수 있습니다.

로컬 개발 환경을 구성하는 데 필요한 단계는 프로그래밍 언어, 프레임워크, 도구, 종속성에 따라 각 프로젝트마다 다릅니다. 이 가이드에서는 HTML, CSS, JavaScript를 기반으로 빌드된 클라이언트 측 애플리케이션 예제를 사용하여 프로젝트를 설정하는 데 필요한 핵심 기술을 학습합니다. 그러면 나중에 다른 프로젝트에도 동일한 기술을 적용할 수 있게 됩니다.

필수 개발 도구 설치

시작하기 전에, 로컬 개발에 널리 사용되는 몇 가지 필수 도구를 설치해야 합니다.

  1. GitHub Copilot으로 VS Code를 설정합니다.
  2. Git를 설치합니다.

VS Code에서 리포지토리 복제 및 열기

먼저 리포지토리를 복제하여 컴퓨터에서 복사본을 만듭니다.

  1. new2code/client-side-web-application 리포지토리를 복제하여 시작합니다. 이 링크를 클릭하면 VS Code에서 리포지토리를 복제하는 대화 상자가 열립니다.
  2. 컴퓨터에 리포지토리를 저장할 위치를 선택한 다음, Select as Repository Destination을 클릭합니다.
  3. 메시지가 표시되면 리포지토리를 엽니다.

프로젝트 요구 사항 설치

  1. Open Copilot 채팅을 열고 다음 프롬프트에 따라 설치해야 하는 항목을 확인하도록 요청합니다.

    Text
    What do I need to install to develop this project locally?

    이 예에서 Copilot은 이 프로젝트에 Node.js가 필요하다고 답합니다. Node.js를 사용하면 컴퓨터에서 JavaScript 코드를 실행할 수 있으며 웹 개발을 위한 도구를 제공합니다.

  2. Copilot에게 프로젝트 요구 사항을 설치하는 방법을 물어본 다음, 단계에 따라 컴퓨터에 설치합니다.

    이 예에서는 "How do I install Node.js?" 라고 질문할 수 있습니다. Copilot은 https://nodejs.org/를 방문하고 설치 프로그램을 다운로드하기 위한 지침을 제공합니다.

프로젝트 종속성 설치

이제 필요한 소프트웨어를 설치했으므로 이 특정 프로젝트에 이 소프트웨어를 사용하는 방법을 이해해야 합니다.

먼저 추가 정보 파일을 확인하세요. 대부분의 프로젝트에는 프로젝트를 설정하고 실행하는 방법을 설명하는 추가 정보 파일이 루트 디렉터리에 포함되어 있습니다. 이 프로젝트에서는 추가 정보 파일과 Copilot에게 요청하는 것 모두, 다음 단계로 프로젝트의 의존성을 npm(Node.js 패키지 관리자)을 사용하여 설치하라는 안내를 받을 것입니다.

  1. Ctrl+Shift+P(Windows/Linux) 또는 Cmd+Shift+P(Mac)를 눌러 명령 팔레트를 엽니다.

  2. Terminal: Create New Terminal을 입력하고 Enter 키를 누릅니다.

  3. 터미널 탭에 다음 명령을 붙여넣습니다.

    Bash
    npm install

이 프로젝트는 Node.js를 사용하므로 npm install을 사용하여 package.json 파일을 읽고 프로젝트가 제대로 작동하는 데 필요한 모든 종속성을 다운로드했습니다. 다른 유형의 프로젝트에서는 다른 명령을 사용합니다. 예를 들어, Python 프로젝트에서는 pip install -r requirements.txt를 사용할 수 있고, Ruby 프로젝트에서는 bundle install을 사용할 수 있습니다.

추가 정보에 종속성 설치에 대한 정보가 포함되어 있지 않으면 다음을 수행할 수 있습니다.

  • 구성 파일 찾기: 프로젝트마다 종속성을 나열하는 데 사용하는 파일이 다릅니다. 예를 들어, Node.js 프로젝트는 package.json을 사용하고, Python 프로젝트는 requirements.txt를 사용하고, Ruby 프로젝트는 Gemfile을 사용합니다.
  • Copilot에게 질문하기: "이제 Node.js 설치했으므로 이 프로젝트를 설정하기 위한 다음 단계는 무엇인가요?"와 같은 프롬프트를 시도해 보세요.

프로젝트 실행 및 개발

이제 개발 환경이 설정되었으므로 개발 서버를 시작하고 이를 사용하여 코드의 변경 내용을 미리 볼 수 있습니다.

  1. 프로젝트 폴더에서 추가 정보 파일을 확인하여 프로젝트를 시작하는 방법을 알아보세요.

    이 예제의 경우, 추가 정보의 "Steps for running locally" 섹션에서는 npm start 명령을 사용하여 개발 서버를 시작할 수 있다고 설명합니다. 터미널에서 다음 명령을 입력하세요.

    Bash
    npm start

  2. 로컬 서버를 사용할 수 있는 위치를 확인하려면 터미널 출력을 검토하세요. http://localhost:8080에서 로컬 서버를 사용할 수 있다는 것을 알 수 있습니다. 브라우저에서 해당 주소로 이동합니다.

  3. HTML 파일에서 일부 텍스트를 편집하거나 CSS 파일에서 색을 변경하는 등 코드를 약간 변경해 보세요. 변경 내용을 저장합니다.

  4. 변경 내용을 확인하는 방법을 알아보려면 프로젝트 문서나 터미널 출력을 확인하세요. 일부 프로젝트는 변경 내용을 저장하면 자동으로 새로 고쳐지지만, 다른 프로젝트는 브라우저 창을 새로 고쳐야 합니다.

    이 프로젝트의 경우에는 브라우저 창을 새로 고쳐 변경 내용을 확인할 수 있습니다.

추가 정보에 필요한 정보가 포함되어 있지 않으면 구성 파일에서 사용 가능한 명령을 확인하세요. 다음 프롬프트를 사용하여 Copilot 채팅에 질문할 수도 있습니다.

Text
How do I start this project locally?

후속 단계

이제 첫 번째 로컬 개발 환경을 성공적으로 설정했으므로 이러한 기술을 다양한 유형의 프로젝트에 적용할 차례입니다.

다른 프로젝트 연습하기: 다른 요구 사항이 필요한 또 다른 프로젝트를 설정해 보세요. 예를 들어, @new2code의 Python 웹 애플리케이션은 Node.js 대신 Python과 Flask를 사용합니다.

이 자습서에서 배운 내용을 활용하여 다음을 수행하세요.

  • VS Code를 사용하여 리포지토리를 복제합니다.
  • Copilot에게 어떤 도구와 종속성을 설치해야 하는지 물어보세요.
  • 추가 정보 파일을 자세히 읽고, 프로젝트를 실행하는 방법을 익혀 보세요.
  • 브라우저에서 실행 중인 애플리케이션 다운로드

이러한 연습은 다양한 기술에서 나타나는 패턴을 인식하고 모든 프로젝트를 로컬에서 설정하는 능력에 대한 자신감을 키우는 데 도움이 됩니다.