다음을 통해 공유

Linux에서 React에 랩 설정

  • 아티클

Important

Azure Lab Services는 2027년 6월 28일에 사용 중지됩니다. 자세한 내용은 사용 중지 가이드를 참조하세요.

참고 항목

이 문서에서는 랩 계정을 대체한 랩 플랜에서 사용할 수 있는 기능을 참조합니다.

React는 UI(사용자 인터페이스)를 빌드할 수 있는 JavaScript 라이브러리입니다. React는 웹 사이트에 재사용 가능한 구성 요소를 만드는 선언적 수단입니다. JavaScript 기반 프런트 엔드 개발을 위한 다른 유명한 라이브러리가 많이 있습니다. 랩을 만드는 동안 이런 라이브러리 중 몇 가지를 사용하게 됩니다. Redux는 JavaScript 앱에 대한 예측 가능한 상태 컨테이너를 제공하는 라이브러리이며 React를 보완하는 목적으로 자주 사용됩니다. JSX는 UI의 모양을 설명하기 위해 React와 함께 자주 사용되는 JavaScript 라이브러리 구문 확장입니다. NodeJS는 React 애플리케이션 웹 서버를 실행의 편리한 수단 중 하나입니다.

이 문서에서는 React 웹 개발 클래스에 필요한 개발 환경, 도구 및 라이브러리에 사용할 Visual Studio Code를 설치하는 방법을 설명합니다.

랩 구성

이 랩을 설정하려면 Azure 구독을 시작해야 합니다. Azure 구독이 없는 경우 시작하기 전에 체험 계정을 만듭니다.

랩 계획 설정

Azure 구독이 있으면 Azure Lab Services에서 새 랩 계획을 만들 수 있습니다. 새 랩 계획을 만드는 방법에 대한 자세한 내용은 랩 계획 설정 방법에 대한 자습서를 참조하세요. 기존 랩 계획을 사용할 수도 있습니다.

다음 표에 설명된 대로 랩 계획 설정을 사용하도록 설정합니다. Azure Marketplace 이미지를 사용하도록 설정하는 방법에 대한 자세한 내용은 랩 작성자가 사용할 수 있는 Azure Marketplace 이미지 지정을 참조하세요.

랩 계획 설정 지침
Marketplace 이미지 'Ubuntu Server 18.04 LTS' 이미지를 사용하도록 설정합니다.

랩 설정

랩을 만드는 방법에 대한 지침은 자습서: 랩 설정을 참조하세요. 랩을 만들 때 다음 설정을 사용합니다.

랩 설정 값
가상 머신 크기 소형

워크로드를 테스트하여 더 큰 크기가 필요한지 확인하는 것이 좋습니다. 각 크기에 대한 자세한 내용은 VM 크기 조정을 참조하세요.

템플릿 머신 구성

이 섹션의 단계에서는 템플릿 VM을 설정하는 방법을 설명합니다.

  1. 개발 도구를 설치합니다.
  2. 웹 브라우저용 디버거 확장을 설치합니다.
  3. 방화벽 설정을 업데이트합니다.

개발 도구 설치

  1. 원하는 웹 브라우저를 설치합니다.

  2. Node.js를 설치합니다.

    sudo apt install nodejs

  3. React, Redux 및 JSX를 설치하는 데 사용되는 Node 패키지 관리자를 설치합니다.

    sudo apt install npm

  4. Visual Studio Code를 설치합니다.

  5. Visual Studio Code용 Reactive Native 도구 확장을 설치합니다.

  6. 필요에 따라 Redux 및 JSX를 사용해 개발하는 데 쓰이는 확장을 설치합니다.

React 앱 만들기는 공식적으로 지원되는 React 앱을 만드는 방법이며 npm 5.2 이상을 사용하는 경우 추가 구성이 필요하지 않습니다. React 앱 만들기 사용 방법에 대한 자세한 지침은 시작 설명서를 참조하세요.

React 기반 웹 사이트에 필요한 다른 구성 요소는 NPM을 사용하여 특정 애플리케이션에 설치됩니다. 예를 들어, 다음 명령을 입력하여 Redux 및 JSX 라이브러리를 설치합니다.

npm install react-redux
npm install react-jsx

디버거 확장 설치

브라우저용 React 개발자 도구 확장을 설치하여 React 구성 요소를 검사하고 성능 정보를 기록합니다.

개발 모드에서 앱을 실행하려면 기본 제공 명령 npm start을 사용합니다. 로컬 및 네트워크 url이 명령 출력에 나열됩니다. HTTP 대신 HTTPS를 사용하는 방법에 대한 자세한 내용은 React 앱 만들기: 개발 시 HTTPS 사용을 참조하세요.

방화벽 설정 업데이트

공식 Ubuntu 빌드에는 iptables가 설치되어 있으며 기본적으로 모든 수신 트래픽을 허용합니다. 그러나 더 제한적인 방화벽이 있는 VM을 사용하는 경우 NodeJS 서버에 대한 트래픽을 허용하는 인바운드 규칙을 추가합니다. 아래 예에서는 iptables를 사용하여 포트 3000에 대한 트래픽을 허용합니다.

sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT

Important

교육자는 템플릿 VM 또는 다른 랩 VM을 사용하여 학생의 웹 사이트에 액세스해야 합니다.

비용

이 수업의 예상 비용 예시를 살펴보겠습니다. 선택한 가상 머신 크기는 소형으로, 랩 유닛 20개입니다.

예정된 클래스 시간이 20시간이고 숙제나 과제 할당량이 10시간인 25명의 학생이 있는 학급의 경우 예상 비용은 다음과 같습니다.

학생 25명 ×(예정된 20 시간 + 할당된 10 시간) × 20 랩 단위 × 시간당0.01 USD = 150.00 USD

Important

예상 비용은 예시용으로만 사용됩니다. 최신 가격 책정 정보는 Azure Lab Services 가격 책정을 참조하세요.

다음 단계

이제 템플릿 이미지를 랩에 게시할 수 있습니다. 자세한 내용은 템플릿 VM 게시를 참조하세요.

랩을 설정할 때 다음 문서를 참조하세요.