연습 - Visual Studio Code에서 Node.js 앱 만들기 - Training

10분

이 단원에서는 Visual Studio Code를 사용하여 Node.js 애플리케이션을 빌드하고 리소스가 포함된 Azure 샌드박스에 대해 실행합니다.

프로그래밍 방식으로 Cosmos DB Core(SQL) 데이터베이스를 사용할 수 있는 npm 패키지를 설치합니다.
Contoso 제품 데이터 세트를 컨테이너에 업로드하는 JavaScript 코드를 작성합니다.

참고

이 연습에서는 데스크톱 컴퓨터에 Node.js 및 npm을 이미 설치하고 Learn 샌드박스를 시작하고 Visual Studio Code에 연결했다고 가정합니다.

Node.js 프로젝트 만들기

Node.js 애플리케이션을 원하는 폴더 위치에서 터미널을 사용합니다. 다음 명령을 입력하여 해당 위치에서 Visual Studio Code를 엽니다.
```
code .
```
터미널 메뉴에서 새 터미널을 선택하거나 바로 가기 키인 Ctrl + Shift + `를 사용합니다.
터미널 창에서 다음 명령을 실행하여 Node 애플리케이션에 대한 contoso-retail이라는 새 폴더를 만든 후 해당 폴더로 변경합니다.
```
mkdir contoso-retail && cd contoso-retail
```
다음 명령을 실행하여 새 Node 애플리케이션으로 이동하여 초기화합니다.
```
npm init -y
```
npm init 명령은 package.json 파일을 만들고 해당 콘텐츠를 표시합니다. 이 파일에는 기본 이름, 설명 및 진입점을 비롯하여 애플리케이션의 초기 메타데이터가 포함됩니다.
Visual Studio Code의 파일 메뉴에서 폴더 열기를 선택한 후 contoso-retail 폴더를 엽니다.
탐색기 창에서 package.json 파일을 선택합니다.

편집기 창에서 package.json 파일에 대해 다음을 변경합니다.

속성	값
type	`module` - 모듈의 JavaScript 코드는 ES6 구문을 사용합니다.

파일은 다음과 같이 표시됩니다. 샘플 코드는 ES6 구문을 사용하므로 애플리케이션 유형을 모듈로 설정해야 합니다.

{
    "name": "contoso-retail",
    "version": "1.0.0",
    "description": "Student and course grades maintenance",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "MIT"
}

파일 메뉴에서 저장을 선택합니다.

파일 변경 내용을 자동으로 저장하도록 Visual Studio Code 구성

파일 > 기본 설정 > 설정, Ctrl + ,을 사용하여 자동 저장을 켭니다.
파일 자동 저장을 검색합니다.
afterDelay1000을 선택합니다.

.gitignore 파일 만들기

.gitignore 파일을 사용하면 추가하면 안 되는 파일이 소스 제어에 체크 인되지 않도록 합니다.

Ctrl + N을 사용하여 .gitignore라는 파일을 만든 후 다음을 추가합니다.

node_modules
.env

비밀 환경 파일 만들기

Visual Studio Code의 파일 메뉴에서 새 텍스트 파일을 선택합니다.
파일 메뉴에서 다른 이름으로 저장을 선택합니다. 이름을 .env로 지정하여 새 파일을 저장합니다.

다음 변수를 파일에 추가합니다.

COSMOS_CONNECTION_STRING=
COSMOS_DATABASE_NAME=ContosoRetail
COSMOS_CONTAINER_NAME=Products
COSMOS_CONTAINER_PARTITION_KEY=categoryName

Azure 탐색기, Shift + Alt + A에서 구독을 선택한 다음, Azure Cosmos DB 노드를 선택하여 리소스를 확인합니다.
Cosmos DB 계정을 마우스 오른쪽 단추로 클릭하고 연결 문자열 복사를 선택합니다.
COSMOS_CONNECTION_STRING 변수의 .env 파일에 연결 문자열을 붙여넣습니다.

Cosmos DB 패키지 설치

통합 터미널에서 Cosmos DB SDK를 추가합니다.
```
npm install @azure/cosmos
```
통합 터미널에서 npm 패키지를 추가하여 환경 변수에 .env 파일을 사용합니다. 이 패키지는 .env 파일을 읽고 해당 값을 process.env 런타임 개체에 추가합니다.
```
npm install dotenv
```

제품 셰이프

문서에서 JSON을 이해하면 작업 및 응답에 대한 입력을 이해하는 데 도움이 됩니다.

이 데이터 세트의 제품에는 다음과 같은 셰이프를 포함합니다.

{
      "id": "FEEFEE3B-6CB9-4A75-B896-5182531F661B",
      "categoryId": "AE48F0AA-4F65-4734-A4CF-D48B8F82267F",
      "categoryName": "Bikes, Road Bikes",
      "sku": "BK-R19B-52",
      "name": "Road-750 Black, 52",
      "description": "The product called \"Road-750 Black, 52\"",
      "price": 539.99,
      "tags": [
        { "id": "461ADE06-0903-4BAF-97AB-CC713E5B1DD4", "name": "Tag-174" },
        ...
      ],
      "inventory": [
        { "location": "Dallas", "inventory": 91 },
        ...
      ]
    }

속성	Description
id	Cosmos DB는 사용자 지정 식별자 id를 사용하여 각 항목을 고유하게 식별합니다. ID는 숫자, 문자열 등과 같은 어떤 데이터 형식도 될 수 있습니다. ID를 제공하지 않으면 Cosmos DB에서 ID를 만듭니다.
categoryName	이 속성은 파티션 키로 이 데이터 세트에 대해 특별히 선택됩니다. 제품 범주 이름은 파티션 키에 적합한 데이터의 균일한 분산을 제공합니다. 또한 categoryName은 자주 변경되지 않으며 이는 파티션 키에 중요합니다.
태그 및 인벤토리	`JOIN` 키워드를 사용하여 쿼리 결과를 찾고 재구성하는 데 사용할 수 있는 하위 속성을 나타냅니다.

컨테이너에 제품을 추가하는 스크립트 만들기

Visual Studio Code의 파일 메뉴에서 새 텍스트 파일을 선택합니다.
파일 메뉴에서 다른 이름으로 저장을 선택합니다. 이름이 1-contoso-products-upload-data.js인 새 파일을 저장합니다.

다음 JavaScript를 복사하여 파일에 붙여넣습니다.

import * as path from "path";
import { promises as fs } from "fs";
import { fileURLToPath } from "url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));

// Get environment variables from .env
import * as dotenv from "dotenv";
dotenv.config();

// Get Cosmos Client
import { CosmosClient } from "@azure/cosmos";

// Provide required connection from environment variables
const cosmosSecret = process.env.COSMOS_CONNECTION_STRING;

// Authenticate to Azure Cosmos DB
const cosmosClient = new CosmosClient(cosmosSecret);

// Set Database name and container name
const databaseName = process.env.COSMOS_DATABASE_NAME;
const containerName = process.env.COSMOS_CONTAINER_NAME;
const partitionKeyPath = [`/${process.env.COSMOS_CONTAINER_PARTITION_KEY}`];

// Create DB if it doesn't exist
const { database } = await cosmosClient.databases.createIfNotExists({
  id: databaseName,
});

// Create container if it doesn't exist
const { container } = await database.containers.createIfNotExists({
  id: containerName,
  partitionKey: {
    paths: partitionKeyPath,
  },
});

// Get product data
const fileAndPathToJson = "products.json";
const items = JSON.parse(await fs.readFile(path.join(__dirname, fileAndPathToJson), "utf-8"));

let i = 0;

// Insert products into container
for (const item of items) {
  const { resource, activityId, statusCode } = await container.items.create(item);
  console.log(`[${i++}] activityId: ${activityId}, statusCode: ${statusCode}, ${resource.name} inserted`);
}

// Show container name - copy/paste into .env
console.log(`\n\ncontainerName: ${containerName}`);// 

// Run script with 
// node 1-contoso-products-upload-data.js

products.json이라는 새 파일을 만들고 샘플 데이터 파일 products.json의 내용을 복사합니다.

파일에 JSON 개체 배열이 포함됩니다.
Visual Studio Code 터미널에서 JavaScript 파일을 실행하여 Cosmos DB 컨테이너에 데이터를 업로드합니다.
```
node 1-contoso-products-upload-data.js
```
터미널에는 항목 수, activityId, statusCode 및 항목 이름이 표시됩니다.

작업의 결과 개체

작업에서 반환된 결과 개체는 Cosmos DB SQL 참조 설명서에 설명되어 있습니다. 결과에는 작업과 관련된 정보가 포함될 수 있지만 각 결과에는 항상 반환되는 몇 가지 속성이 있으며 발생한 결과를 확인하는 데 유용합니다.

결과 속성	설명
activityId	특정 작업과 연결된 고유한 이벤트 ID. 이 ID는 리소스 이름 및 구독과 함께 작업이 실패하고 지원에 문의해야 하는 경우 문제를 식별하는 데 도움이 될 수 있습니다.
statusCode	작업의 성공 또는 실패를 나타내는 HTTP 상태 코드.
resource	컨테이너의 JSON 문서와 같은 최종 개체의 JSON 개체입니다.

Visual Studio Code의 Cosmos DB 문서 보기

Visual Studio Code에서 Azure 탐색기를 열거나 바로 가기 키 Shift + Alt + A를 사용합니다.
컨시어지 구독 노드를 찾아 확장하고 Azure Cosmos DB 리소스 노드를 확장합니다.
ContosoRetail 데이터베이스와 해당 Products 컨테이너를 찾아 확장합니다.
문서 노드를 확장하여 Node.js 스크립트가 추가된 제품을 확인합니다. 각 문서의 노드 이름은 name 속성입니다.
첫 번째 제품을 선택하여 전체 JSON을 확인합니다.

작업 확인

Visual Studio Code의 Azure Databases 확장 프로그램에 Cosmos DB 계정, 데이터베이스, 컨테이너가 표시됩니다.
컨테이너를 확장하면 문서 노드 아래에 많은 항목이 표시됩니다.

계속

연습 - Visual Studio Code에서 Node.js 앱 만들기