댓글 검색 목록

[Nodejs] Deno에서 명령 줄 날씨 앱 빌드

페이지 정보

작성자 운영자 작성일 20-08-19 11:54 조회 710 댓글 0

Deno에 대한 소개 기사를 따라왔다면 첫 번째 프로그램을 작성하는 데 관심이 있을 것입니다. 이 기사에서는 Deno 런타임을 설치하고 도시 이름을 인수로 사용하여 다음 24 시간 동안의 일기 예보를 반환하는 명령 줄 날씨 프로그램을 만드는 과정을 살펴 보겠습니다.

https://www.sitepoint.com/deno-build-command-line-weather-app/

Deno 용 코드를 작성하려면 공식 Deno 플러그인과 함께 Visual Studio Code를 적극 권장합니다. 좀 더 흥미롭게 만들기 위해 TypeScript로 앱을 작성할 것입니다.

Deno 설치

먼저 스크립트 작성을 시작할 수 있도록 Deno를 로컬에 설치해 보겠습니다. 세 가지 주요 운영 체제 모두에 대한 설치 프로그램 스크립트가 있으므로 프로세스가 간단합니다.

Windows

Windows에서는 PowerShell에서 Deno를 설치할 수 있습니다.

iwr https://deno.land/x/install/install.ps1 -useb | iex

Linux

Linux 터미널에서 다음 명령을 사용할 수 있습니다.

curl -fsSL https://deno.land/x/install/install.sh |  sh

macOS

Mac에서 Deno는 Brew와 함께 설치할 수 있습니다.

brew install deno

설치 후

설치 프로세스가 완료되면 다음 명령을 실행하여 Deno가 올바르게 설치되었는지 확인할 수 있습니다.

deno --version

이제 다음과 비슷한 내용이 표시됩니다.

deno 1.2.0
v8 8.5.216
typescript 3.9.2

새 프로젝트를 위한 폴더를 만들고 (홈 폴더 안에 또는 코딩 프로젝트를 보관할 위치에) index.ts 파일을 추가해 보겠습니다.

mkdir weather-app
cd weather-app
code index.ts

참고 : 위에서 언급했듯이 이 자습서에서는 VS Code를 사용하고 있습니다. 다른 편집기를 사용하는 경우 위의 마지막 줄을 바꿉니다.

사용자 입력 받기

프로그램은 특정 도시의 일기 예보를 검색하므로 프로그램이 실행될 때 도시 이름을 인수로 받아 들여야 합니다. Deno 스크립트에 제공된 인수는 Deno.args로 사용할 수 있습니다. 이 변수를 콘솔에 로그 아웃하여 작동 방식을 살펴 보겠습니다.

console.log(Deno.args);

이제 다음 명령을 사용하여 스크립트를 실행하십시오.

deno run index.ts --city London

다음 출력이 표시되어야 합니다.

[ "--city", "London" ]

이 인수 배열을 직접 파싱 할 수는 있지만 Deno의 표준 라이브러리에는 이를 처리 할 플래그라는 모듈이 포함되어 있습니다. 이를 사용하려면 파일 상단에 import 문을 추가하기 만하면 됩니다.

import { parse } from  "https://deno.land/std@0.61.0/flags/mod.ts";

참고 : 표준 라이브러리 모듈에 대한 문서의 예제는 항상 최신 버전의 코드를 가리키는 버전 없는 URL (예 : https://deno.land/std/flags/mod.ts)을 제공합니다. 향후 업데이트로 인해 프로그램이 손상되지 않도록 가져 오기에서 버전을 지정하는 것이 좋습니다. *

가져온 함수를 사용하여 인수 배열을 더 유용한 것으로 구문 분석해 보겠습니다.

const args = parse(Deno.args);

또한 새로운 args 변수를 로그 아웃

하도록 스크립트를 변경하여 어떻게 보이는지 확인할 것입니다. 이제 코드는 다음과 같아야 합니다.

import { parse } from  "https://deno.land/std@0.61.0/flags/mod.ts";

const args = parse(Deno.args);

console.log(args);

이제 이전과 동일한 인수로 스크립트를 실행하면 다음 출력이 표시됩니다.

Download https://deno.land/std@0.61.0/flags/mod.ts
Download https://deno.land/std@0.61.0/_util/assert.ts
Check file:///home/njacques/code/weather-app/index.ts
{ _: [], city: "London" }

Deno는 스크립트를 실행할 때마다 새로운 import 문을 확인합니다. 원격으로 호스팅 되는 가져 오기는 향후 사용을 위해 다운로드, 컴파일 및 캐시됩니다. 구문 분석 함수는 입력을 포함하는 도시 속성을 가진 객체를 제공했습니다.

참고 : 어떤 이유로 든 스크립트 가져 오기를 다시 다운로드해야 하는 경우 deno cache --reload index.ts를 실행할 수 있습니다.

또한 city 인수에 대한 검사를 추가하고 제공되지 않은 경우 오류 메시지와 함께 프로그램을 종료해야 합니다.

if (args.city === undefined) {
    console.error("No city supplied");
    Deno.exit();
}

날씨 API와 대화하기

OpenWeatherMap에서 예측 데이터를 가져올 것입니다. API 키를 얻으려면 무료 계정을 등록해야 합니다. 5 일 예측 API를 사용하여 도시 이름을 매개 변수로 전달합니다.

예측을 가져오고 콘솔에 로그 아웃하여 결과를 확인하는 코드를 추가해 보겠습니다.

import { parse } from  "https://deno.land/std@0.61.0/flags/mod.ts";

const args = parse(Deno.args);

if (args.city === undefined) {
    console.error("No city supplied");
    Deno.exit();
}

const apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

const res = await fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${args.city}&units=metric&appid=${apiKey}`);
const data = await res.json();

console.log(data);

Deno는 가능한 한 많은 브라우저 API를 지원하려고 합니다. 따라서 여기서는 외부 종속성을 가져올 필요 없이 fetch를 사용할 수 있습니다. 또한 최상위 수준의 await에 대한 지원을 사용하고 있습니다. 일반적으로 await를 사용하는 코드를 비동기 함수로 래핑해야 하지만 TypeScript는 이를 수행하지 않으므로 코드가 조금 더 멋지게 만들어집니다.

지금이 스크립트를 실행하면 오류 메시지가 표시됩니다.

Check file:///home/njacques/code/weather-app/index.ts
error: Uncaught PermissionDenied: network access to "https://api.openweathermap.org/data/2.5/forecast?q=London&units=metric&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", run again with the --allow-net flag
    at unwrapResponse ($deno$/ops/dispatch_json.ts:42:11)
    at Object.sendAsync ($deno$/ops/dispatch_json.ts:93:10)
    at async fetch ($deno$/web/fetch.ts:266:27)
    at async index.ts:12:13

기본적으로 모든 Deno 스크립트는 보안 샌드 박스에서 실행됩니다. 네트워크, 파일 시스템 또는 환경 변수와 같은 것에 액세스 할 수 없습니다. 스크립트에는 액세스해야 하는 시스템 리소스에 대한 권한이 명시 적으로 부여되어야 합니다. 이 경우 오류 메시지를 통해 필요한 권한과 활성화 방법을 알 수 있습니다.

올바른 플래그를 사용하여 스크립트를 다시 호출 해 보겠습니다.

deno run --allow-net index.ts --city London

이번에는 API에서 JSON 응답을 받아야 합니다.

{
  cod: "200",
  message: 0,
  cnt: 40,
  list: [
    {
      dt: 1595527200,
      main: {
        temp: 22.6,
        feels_like: 18.7,
        temp_min: 21.04,
        temp_max: 22.6,
        pressure: 1013,
        sea_level: 1013,
        grnd_level: 1011,
        humidity: 39,
        temp_kf: 1.56
      },
      weather: [ [Object] ],
      clouds: { all: 88 },
      wind: { speed: 4.88, deg: 254 },
      visibility: 10000,
      pop: 0,
      sys: { pod: "d" },
      dt_txt: "2020-07-23 18:00:00"
    },
    ...
  ],
  city: {
    id: 2643743,
    name: "London",
    coord: { lat: 51.5085, lon: -0.1257 },
    country: "GB",
    population: 1000000,
    timezone: 3600,
    sunrise: 1595477494,
    sunset: 1595534525
  }
}

응답에서 반환 되는 내용의 전체 세부 정보를 확인할 수 있지만 주로 관심 있는 것은 목록의 예측 데이터 배열입니다. 배열의 각 객체에는 타임 스탬프 (dt), 대기 조건 (온도, 습도, 압력 등)에 대한 세부 정보가 있는 기본 객체 및 예측 된 날씨에 대한 설명이 있는 객체가 포함 된 날씨 배열이 포함됩니다.

예측 시간, 온도 및 기상 조건을 얻기 위해 메인 어레이를 반복 할 것입니다. 24 시간 동안 만 포함하도록 레코드 수를 제한하는 것부터 시작하겠습니다. 무료 요금제에서 사용할 수 있는 예측 데이터는 3 시간 간격으로 만 사용할 수 있으므로 8 개의 레코드를 가져와야 합니다.

const  forecast = data.list.slice(0, 8)

각 예측 항목을 매핑 하고 관심 있는 데이터의 배열을 반환합니다.

const forecast = data.list.slice(0, 8).map(item => [
    item.dt,
    item.main.temp,
    item.weather[0].description,
]);

지금 스크립트를 실행하려고 하면 컴파일 오류가 발생합니다 (VS Code와 같은 IDE를 사용하는 경우 코드를 입력 할 때 이 오류도 표시됨). 매개 변수 'item'에는 암시 적으로 '어떤 유형.

TypeScript는 런타임에 오류를 일으킬 수 있는 작업을 수행하고 있는지 알기 위해 항목이 있는 변수 유형에 대해 알려야 합니다. 항목의 구조를 설명하기 위해 인터페이스를 추가해 보겠습니다.

interface forecastItem {
    dt: string;
    main: { temp: number; };
    weather: { description: string; }[];
}

여기서는 개체의 모든 속성을 설명하지 않고 실제로 액세스 할 속성 만 설명합니다. 우리 상황에서는 우리가 원하는 속성을 알고 있습니다.

새 유형을 지도 콜백에 추가해 보겠습니다.

const forecast = data.list.slice(0, 8).map((item: forecastItem) => [
    item.dt,
    item.main.temp,
    item.weather[0].description,
]);

TypeScript를 지원하는 IDE를 사용하는 경우 입력 한 인터페이스 유형 덕분에 항목 속성을 자동 완성 할 수 있습니다.

서비스 클래스 만들기
출력을 위한 인터페이스 만들기

출력 포맷

이제 원하는 데이터 집합을 얻었으므로 사용자에게 표시 할 수 있도록 형식을 지정하는 방법을 살펴 보겠습니다.

먼저 타임 스탬프 값을 사람이 읽을 수 있는 날짜로 변환 해 보겠습니다. Deno의 타사 모듈 목록을 살펴보고 "date"를 검색하면 목록에서 date-fns를 볼 수 있습니다. 여기에 있는 링크를 사용하여 사용할 기능을 Deno 앱으로 가져올 수 있습니다.

import { fromUnixTime, format } from  "https://deno.land/x/date_fns@v2.15.0/index.js";

이제 fromUnixTime 함수를 통해 타임 스탬프를 전달하여 Date 객체를 가져온 다음 원하는 날짜 문자열을 얻기 위해 이 객체를 형식으로 전달할 수 있습니다.

format(fromUnixTime(item.dt), "do LLL, k:mm", {})

형식화 문자열 do LLL, k : mm은 "7 월 24 일, 13:00"형식으로 날짜를 제공합니다.

참고 : 세 번째 인수로 빈 개체를 전달하여 순전히 예상 인수 수에 대한 IDE 경고를 무음으로 지정합니다. 코드는 그것 없이도 여전히 잘 실행됩니다.

그 동안 온도 값을 소수점 한 자리로 반올림하고 단위 표시기를 추가해 보겠습니다.

`${item.main.temp.toFixed(1)}C`

이제 예측 데이터의 형식이 지정되고 표시 할 준비가 되었으므로 ascii_table 모듈을 사용하여 깔끔한 작은 테이블로 사용자에게 표시하겠습니다.

import  AsciiTable  from  'https://deno.land/x/ascii_table/mod.ts';

...

const table = AsciiTable.fromJSON({
  title: `${data.city.name} Forecast`,
  heading: [ 'Time', 'Temp', 'Weather'],
  rows: forecast
})

console.log(table.toString())

스크립트를 저장하고 실행합니다. 이제 다음 24 시간 동안 선택한 도시에 대한 예보를 멋지게 형식화 하고 표시해야 합니다.

.--------------------------------------------.
|              London Forecast               |
|--------------------------------------------|
|      Time       | Temp  |     Weather      |
|-----------------|-------|------------------|
| 23rd Jul, 19:00 | 17.8C | light rain       |
| 23rd Jul, 22:00 | 16.8C | light rain       |
| 24th Jul, 1:00  | 16.0C | broken clouds    |
| 24th Jul, 4:00  | 15.6C | light rain       |
| 24th Jul, 7:00  | 16.0C | broken clouds    |
| 24th Jul, 10:00 | 18.3C | scattered clouds |
| 24th Jul, 13:00 | 20.2C | light rain       |
| 24th Jul, 16:00 | 20.2C | light rain       |
'--------------------------------------------'

전체 코드 목록

매우 간결한 스크립트이지만 전체 코드 목록은 다음과 같습니다.

import { parse } from "https://deno.land/std@0.61.0/flags/mod.ts";
import {
  fromUnixTime,
  format,
} from "https://deno.land/x/date_fns@v2.15.0/index.js";
import AsciiTable from "https://deno.land/x/ascii_table/mod.ts";

const args = parse(Deno.args);

if (args.city === undefined) {
  console.error("No city supplied");
  Deno.exit();
}

const apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

const res = await fetch(
  `https://api.openweathermap.org/data/2.5/forecast?q=${args.city}&units=metric&appid=${apiKey}`,
);
const data = await res.json();

interface forecastItem {
  dt: string;
  main: { temp: number };
  weather: { description: string }[];
}

const forecast = data.list.slice(0, 8).map((item: forecastItem) => [
  format(fromUnixTime(item.dt), "do LLL, k:mm", {}),
  `${item.main.temp.toFixed(1)}C`,
  item.weather[0].description,
]);

const table = AsciiTable.fromJSON({
  title: `${data.city.name} Forecast`,
  heading: ["Time", "Temp", "Weather"],
  rows: forecast,
});

console.log(table.toString());

요약

이제 다음 24 시간 동안 일기 예보를 제공하는 자신 만의 Deno 명령 줄 프로그램이 있습니다. 이 튜토리얼을 따라하면 이제 새 프로그램을 시작하고 표준 라이브러리 및 타사에서 종속성을 가져오고 스크립트 권한을 부여하는 방법에 익숙해 져야 합니다.

그래서, 데노를 위한 프로그램 작성에 대한 맛을 봤다면, 다음에 어디로 가야 할까요? 다양한 명령 줄 옵션과 내장 API에 대해 자세히 알아 보려면 설명서를 읽어 보는 것이 좋습니다. 또한 더 많은 Deno 콘텐츠를 보려면 SitePoint를 계속 주시하십시오!

데노 재단

Deno와 함께 속도를 높이십시오. Deno Foundations 컬렉션은 Deno 세계와 그 너머로 첫 발을 내딛는 데 도움이 되며 지속적으로 추가하고 있습니다. 전문가가 되기 위해 필요한 자습서를 제공합니다. Deno 소개 마지막 부분에 업데이트 된 색인은 언제든지 참조 할 수 있습니다.