중요
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 이미지 지정을 참조하세요.
| 랩 계획 설정 | 지침 |
|---|---|
| 시장 이미지 | 'Ubuntu Server 18.04 LTS' 이미지를 사용하도록 설정합니다. |
랩 설정
랩을 만드는 방법에 대한 지침은 자습서: 랩 설정을 참조하세요. 랩을 만들 때 다음 설정을 사용합니다.
| 실험실 환경 | 값 |
|---|---|
| 가상 머신 크기 | 작다 |
워크로드를 테스트하여 더 큰 크기가 필요한지 확인하는 것이 좋습니다. 각 크기에 대한 자세한 내용은 VM 크기 조정을 참조하세요.
템플릿 머신 구성
이 섹션의 단계에서는 템플릿 VM을 설정하는 방법을 설명합니다.
- 개발 도구를 설치합니다.
- 웹 브라우저용 디버거 확장을 설치합니다.
- 방화벽 설정을 업데이트합니다.
개발 도구 설치
원하는 웹 브라우저를 설치합니다.
Node.js설치합니다.
sudo apt install nodejsReact, Redux 및 JSX를 설치하는 데 사용되는 노드 패키지 관리자를 설치합니다.
sudo apt install npmVisual Studio Code를 설치합니다.
React 앱 만들기 는 공식적으로 지원되는 React 앱 만들기 방법이며 npm 5.2 이상을 사용하는 경우 추가 구성이 필요하지 않습니다. React 앱 만들기를 사용하는 방법에 대한 자세한 지침은 시작 설명서를 참조하세요.
React 기반 웹 사이트에 필요한 다른 구성 요소는 NPM을 사용하여 특정 애플리케이션에 설치됩니다. 예를 들어, 다음 명령을 입력하여 Redux 및 JSX 라이브러리를 설치합니다.
npm install react-redux
npm install react-jsx
디버거 확장 설치
브라우저용 React 개발자 도구 확장을 설치하여 React 구성 요소를 검사하고 성능 정보를 기록합니다.
- React Developer Tools Edge 추가 기능
- React Developer Tools Chrome 확장
- React Developer Tools FireFox 추가 기능
개발 모드에서 앱을 실행하려면 기본 제공 명령 npm start을 사용합니다. 로컬 및 네트워크 url이 명령 출력에 나열됩니다. HTTP 대신 HTTPS를 사용하는 방법에 대한 자세한 내용은 React 앱 만들기: 개발에서 HTTPS 사용
방화벽 설정 업데이트
공식 Ubuntu 빌드에는 iptable이 설치되어 있으며 기본적으로 들어오는 모든 트래픽을 허용합니다. 그러나 더 제한적인 방화벽이 있는 VM을 사용하는 경우 NodeJS 서버에 대한 트래픽을 허용하는 인바운드 규칙을 추가합니다. 아래 예제에서는 iptable을 사용하여 포트 3000에 대한 트래픽을 허용합니다.
sudo iptables -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
중요
교육자는 템플릿 VM 또는 다른 랩 VM을 사용하여 학생의 웹 사이트에 액세스해야 합니다.
다음 단계
이제 템플릿 이미지를 랩에 게시할 수 있습니다. 자세한 내용은 템플릿 VM 게시를 참조하세요.
랩을 설정할 때 다음 문서를 참조하세요.