API 및 JavaScript를 프런트엔드에 통합

Fetch와api의 위력fetch()은 클라이언트 웹 응용 프로그램이 웹 엔드포인트에 HTTP 요청을 할 수 있도록 하는 비동기식 자바스크립트 함수입니다.이것은 브라우저에서 API 호출을 수행하는 데 가장 많이 사용됩니다.
비동기 함수를 '비막힘' 이라고 부른다.비저항 함수는 반환 값을 기다리는 대신 프로그램에서 다른 작업을 수행할 수 있습니다.이로 인해 응답 속도가 더 빠른 응용 프로그램이 생겼다.
Fetch의 비동기식 속성을 사용하면 API 응답을 기다리는 동안 처리 스레드를 해제할 수 있습니다.이것은 대상 서버와 애플리케이션에 따라 응답 속도가 달라질 수 있으므로 API 호출을 처리하는 데 유용합니다.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

위의 예는 Mozilla에서 제공합니다.
fetch 방법은 상대적으로 간단하다.가장 기본적인 형태인 fetch()에는 HTTP 끝점의 URL이라는 매개변수가 있습니다.다른 매개변수를 추가하여 끝점에 데이터를 보낼 수 있습니다(예: HTTP PUT 요청 JSON).이를 통해 개발자는 API 요청을 프런트엔드 애플리케이션에서 활용할 수 있습니다.
위 예에서는 서버에서 클라이언트로 데이터를 반환하는 HTTP GET 요청이 실행되었습니다.응답이 성공적으로 반환되면 .then() 함수는 응답을 JSON으로 해석한 다음 콘솔에 인쇄합니다.그러나 컨트롤러 로그는 이 기능에서 유일하게 완성할 수 있는 일이 아니다.
또한 API 응답에서 데이터를 추출하여 변수로 설정하는 데 .then() 자문을 사용할 수 있습니다.예를 들어 이 예에서 보여준 응용 프로그램에서 freegeoip.app/json의 응답은 특정 IP 주소의 사용자 위치를 식별하는 데 사용된다.latitude longitude city 및 region_name 필드는 API가 반환하고 애플리케이션이 추적하는 변수입니다.다음은 API에서 반환된 JSON 데이터의 예입니다.

{
"ip": "104.38.28.100",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "University Park",
"zip_code": "16802",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

이 JSON blob은 freegeoip.app/json API의 예제 API 응답입니다.

요소 변수 및 렌더링then() 방법 호출 중의 변수 부여는 응용 프로그램의 상태 업데이트를 지원합니다.API를 호출하고 데이터를 성공적으로 반환할 때마다 인스턴스 변수가 업데이트되고 새 데이터로 DOM이 다시 그려집니다.함수의 역할은 DOM을 그릴 때마다 페이지가 표시되는 방식을 결정하는 것입니다.프로그램의 모든 변수가 이런 행동을 할 수 있는 것은 아니다. static get properties() 방법에서 정의한 변수만 DOM을 다시 그릴 수 있다.참고: API 호출에서 반환된 변수에 따라 새 변수를 생성할 수도 있습니다.예를 들어, 나는 location을 $city, $region_name으로 설정했는데, 이것은 응용 프로그램에서 여러 번 사용된다.

static get properties() {
    return {
      lat: { type: Number, reflect: true },
      long: { type: Number, reflect: true },
      city: { type: String, reflect: true },
      region: { type: String, reflect: true },
      location: { type: String, reflect: true },
    };
  }

이 메서드에 정의된 속성은 다시 그릴 DOM을 트리거합니다.<location-from-ip> 구성요소에 대해 자세히 살펴보겠습니다.먼저 위에 나열된 속성은 렌더링할 데이터를 사용하여 어셈블리를 채웁니다.데이터는 API에 의해 채워집니다.getGEOIPData() 함수는 이 데이터 포인트를 얻는 모든 논리를 포함한다.
먼저 사용자의 IP 주소를 식별하는 UserIP 객체 인스턴스를 만듭니다.이것은 요청한 사용자의 IP를 반환하는 API에 의존합니다.그리고 이 IP 주소 데이터는 다른 API(freegeoip.app)로 보내집니다. 이 API는 사용자로부터 IP 주소를 얻고 이 IP 주소에 대한 위치 데이터를 되돌려줍니다.위의 API 응답 예제를 참조하십시오.응답이 반환되면 지정된 변수가 업데이트되어 DOM의 재드로잉이 트리거됩니다.이 업데이트에서는 이러한 새 변수를 render() 함수에 정의된 여러 서비스에 입력합니다.

const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`
      <iframe title="Where you are" src="${url}"></iframe>
      <br /><a
        href="https://www.google.com/maps/@${this.lat},${this.long},15z"
        target="_blank"
        >Expand Map to ${this.location}</a
      >
      <br /><br />
      <wikipedia-query search="${this.location}"></wikipedia-query>
      <wikipedia-query search="${this.city}"></wikipedia-query>
      <wikipedia-query search="${this.region}"></wikipedia-query>
    `;

은 lat과 long 변수를 <iframe>을 채우는 Google Maps 내장 링크에 삽입합니다.

lat, long과 location 변수는 하이퍼링크를 채우기 위해 온전한 구글 지도 사이트에서 위치를 엽니다.

은 <wikipedia-query> 웹 구성 요소를 이용하여 GEOIP API가 정한 위치에 대한 글을 제공합니다.이 구성 요소는 표시할 위키백과 페이지의 search 속성에 의존합니다.총 3개의 <wikipedia-query> 라벨이 있습니다.하나는 location 속성을 검색 문자열로 하고 다른 두 개는 city과 region을 사용한다.

<location-from-ip> 요소, 시각적
최종적으로 웹 구성 요소에서 API를 쉽게 사용할 수 있습니다. 이것은 정적 사이트에 응답 요소를 추가하는 좋은 방법입니다.
이 애플리케이션에서 사용하는 API에 대한 자세한 내용은 freegeoip.app, wikipedia element, IPFast IP Address API 을 참조하십시오.
application repository here 보기

출처
General asynchronous programming concepts - MDN Web Docs
Using Fetch - MDN Web Docs