본문 바로가기
카테고리 없음

초보자를 위한 JavaScript 사용 방법

by 부동산절대원칙 2022. 6. 8.
반응형

 

 

★ 현재 증권사 최대 관심주들 ★



 

초보자를 위한 JavaScript 사용 방법

 

JavaScript에서 약속은 진행 중인 작업의 값에 대한 자리 표시자(프록시)입니다.

일반적으로 작업 결과를 기다려야 하는 상황을 관리하기 위해 약속을 사용합니다. 예를 들어, 서버에 파일을 업로드하고 API 호출의 응답을 기다리거나 사용자에게 컴퓨터에서 파일을 선택하도록 요청합니다.

이 기사에서는 아래와 같은 실제 예제 앱을 빌드하여 JavaScript 약속에 대해 배울 것입니다.

약속이란 무엇입니까?

Promise는 단순히 다음을 반환하는 함수입니다. Object 콜백을 첨부할 수 있습니다.

Promise 객체에 연결된 콜백은 작업이 완료될 때만 호출됩니다. 콜백은 작업이 완료될 때까지 기다려야 합니다. 충족 또는 거부:

fetch(`some_api_url`).then((response) => {
  // Everything here will wait the fetch operation to complete
});

약속이 최종적으로 확정되기 전에(약속이 이행되거나 거부됨) 여러 상태를 거쳐야 합니다.

상태 설명 콜백
보류 중 작업이 아직 실행 중이고 약속이 보류 중임을 의미합니다. -
충족 작업이 완료되어 성공적으로 완료되었습니다. .then()
거부 작업이 완료되었지만 오류가 발생했습니다. .catch()
안정된 이 콜백이 호출되는 방식으로 약속이 해결되거나 거부되었습니다. .finally()

Promise가 생성되면 초기 상태는 Pending입니다. 그런 다음 작업의 출력에 따라 약속이 이행되거나 거부됩니다.

위의 표에서 Promise의 각 상태에 따라 호출되는 콜백을 쉽게 볼 수 있습니다.

fetch(`some_api_url`).then((response) => {
  // This will get called when the promise fulfills
}).catch((error) => {
  // This will get called when the promise is rejected
}).finally(() => {
  // This will get called all the time
})

JavaScript에서 Promise를 사용하는 방법

이제 Promise가 무엇인지 배웠으므로 Promise를 사용하는 방법을 보여 드리겠습니다. 이전에 본 영화 검색 앱을 빌드하여 JavaScript에서.

기본 영화 검색 앱에는 사용자가 좋아하는 영화를 검색할 수 있는 입력 필드가 있어야 합니다. 또한 검색한 영화에 대한 몇 가지 기본 정보를 표시하는 UI가 있어야 합니다.

생성하여 시작해 보겠습니다. HTML.

HTML을 작성하는 방법

이 튜토리얼을 위해 그리고 라이브 예제를 표시하기 위해 다음을 사용할 것입니다. 코드펜, 하지만 좋아하는 코드 편집기를 사용할 수 있습니다.

생성 index.html 파일을 만들고 다음 코드를 추가합니다.

  

 

 

Details

  • Premiered:
  • Rating:
  • Runtime:
  • Status:
Watch Movie

 

    위에서 우리는 영화 앱의 골격을 만들었습니다. 이제 CSS로 생명을 불어넣어 봅시다.

    영화를 가져오는 방법

    영화를 가져오기 위해 TVMAZE API를 사용할 것입니다. 생성 main.js 파일을 만들고 다음 코드를 추가합니다.

    const get_movie = (value = "Game of thrones") => {
       fetch(
        `https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`
      ).then((response) => create_UI(response.json()));
    };

    우리는 함수를 만들었습니다 get_movie(value = "Game of thrones") JavaScript 가져오기 API를 사용합니다. 우리는 그것을 사용하여 GET 영화 API 엔드포인트에 요청합니다.

    가져오기 API는 약속을 반환합니다. API의 응답을 사용하기 위해 첨부합니다. .then() 우리가 전달하는 콜백 response.json() 새로운 기능으로 create_UI(). 계속해서 생성합시다. create_UI 기능:

    const create_UI = (data) => {
      const movie_img = document.querySelector("#img_src");
      const movie_icon = document.querySelector("#img_icon");
      const movie_title = document.querySelector(".movie_title");
      const movie_desc = document.querySelector(".movie_desc");
      const movie_link = document.querySelector(".btn");
      const movie_date = document.querySelector("#movie_date");
      const movie_rating = document.querySelector("#movie_rating");
      const movie_runtime = document.querySelector("#movie_runtime");
      const movie_status = document.querySelector("#movie_status");
    
    

    // set the UI
    movie_icon.src = data.image.medium;
    movie_img.src = data.image.original;
    movie_title.textContent = data.name;
    movie_desc.innerHTML = data.summary;
    movie_link.href = data.officialSite;
    movie_date.textContent = data.premiered;
    movie_rating.textContent = data.rating.average;
    movie_runtime.textContent = data.runtime;
    movie_status.textContent = data.status;
    };

     

    위의 함수는 이름에서 알 수 있듯이 영화 앱의 UI를 만드는 데 도움이 됩니다. 하지만 물론 여전히 사용자로부터 영화 이름을 수집하는 방법이 필요하므로 수정하겠습니다.

    우리가 해야 할 첫 번째 일은 다음을 추가하는 것입니다. onsubmit HTML 양식에 대한 이벤트 핸들러:

    //

    이제 우리의 main.js 파일을 제출할 때 발생하는 일을 처리할 수 있습니다.

    // handle form submit
    const search = (event) => {
      event.preventDefault();
      const value = document.querySelector(".header_form-input").value;
    
    

    get_movie(value);
    };

     

    사용자가 양식을 제출할 때마다 검색 상자에 입력한 값을 가져와서 get_movie(value = "Game of thrones") 앞서 만든 함수.

    약속 체이닝

    이전 예에서 본 것과는 달리, .then() 콜백이 정말 끝이 아닙니다. Promise의 값을 반환하면 또 다른 Promise를 얻을 수 있기 때문입니다. 이것은 일련의 비동기 작업을 순서대로 실행하려는 경우 매우 유용합니다.

    예를 들어, 우리의 영화 API는 영화에 대한 정보를 반환할 뿐만 아니라 모든 에피소드에 대한 정보도 반환합니다. Game of Thrones의 모든 에피소드를 표시하고 싶지는 않고 처음 4개의 에피소드만 표시하고 싶다고 가정해 보겠습니다.

    Promise Chaining으로 우리는 이것을 쉽게 달성할 수 있습니다:

    const get_movie = (value = "Game of thrones") => {
    

    fetch(https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes)
    .then((response) => response.json())
    .then((data) => {
    if (data._embedded.episodes.length > 0) {
    const new_data = data._embedded.episodes.slice(0, 4);

    
    
        create_UI(data);
        return create_episodesUI(new_data);
      } else {
        return create_UI(data);
      }
    });
    
    
    

    };

     

    이것은 여전히 ​​우리의 get_movie() 하지만 이번에는 데이터를 create_UI 응답을 반환하는 함수 .then((response) => response.json()). 이것은 우리가 더 많은 콜백을 첨부할 수 있는 새로운 약속을 만듭니다.

    이상적으로는 이 사슬이 원하는 만큼 계속해서 계속될 수 있습니다. 약속의 값을 반환하기만 하면 됩니다.

    프라미스의 오류를 처리하는 방법

    Promise 내에서 발생하는 오류는 즉시 .catch() 콜백:

    fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    
    .then((response) => response.json())
    .then((data) => {
      // any error here will trigger the .catch() callback
    }).catch((error) => {
    // all errors are caught and handled here
    })
    
    
    

    그만큼 .catch() 콜백은 .then(null, (error) => {}). 위의 내용을 다음과 같이 작성할 수도 있습니다.

    fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)
    
    .then((response) => response.json())
    .then((data) => {
      // any error here will trigger the .catch() callback
    }, (error) => {
    // all errors are caught and handled here
    })
    
    
    

     

    
    

    예를 들어 영화 검색 앱을 사용하면 오류가 발생하면 처리하고 사용자에게 멋진 오류 메시지를 표시할 수 있습니다. .catch() 콜백:

    const get_movie = (value = "Game of thrones") => {
    

    fetch(https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes)
    .then((response) => response.json())
    .then((data) => {
    if (data._embedded.episodes.length > 0) {
    const new_data = data._embedded.episodes.slice(0, 4);

    
    
        create_UI(data);
        return create_episodesUI(new_data);
      } else {
        return create_UI(data);
      }
    })
    .catch((error) => {
      console.log(error.message);
      // Challange: display your error here
    });
    
    
    

    };

     

    
    

    이제 어떤 이유로든 오류가 발생하면 .catch() 콜백이 호출되고 사용자에게 올바른 오류가 표시됩니다.

    JavaScript에서 약속을 만드는 방법

    Promise가 무엇이고 어떻게 사용하는지 배웠으니 이제 JavaScript에서 Promise를 생성하는 방법을 살펴보겠습니다.

    JavaScript에서 Promise를 생성하려면 Promise 생성자를 사용합니다. 생성자는 하나의 인수를 취합니다: 두 개의 매개변수가 있는 함수, resolve 그리고 reject:

    const is_true = true
    

    const new_promise = new Promise((resolve,reject) => {
    if(is_true) {
    // everything went fine
    resolve()
    } else {
    // Oops there was an error
    reject()
    }
    })

     

    
    

    그런 다음 우리는 계속해서 우리의 new_promise 콜백을 첨부하여:

    new_promise
    

    .then((response) => {
    // everything went fine
    })
    .catch((error) => {
    // handle errors
    });

     

    
    

    결론

    이 튜토리얼에서 우리는 영화 검색 앱을 구축하여 약속, 그것이 무엇인지, 사용하는 방법에 대해 배웠습니다. 우리 영화 앱의 전체 코드와 라이브 미리보기는 Codepen: Movie Search App에서 찾을 수 있습니다.

    도전

    영화 앱을 만드는 동안 새로운 Promise 기술을 연습하는 데 유용할 것으로 생각되는 몇 가지 부분을 생략했습니다.

    1. API 응답을 기다리는 동안 영화 앱이 정지된 것처럼 보입니다. 약속이 보류 중임을 사용자에게 알리기 위해 로더를 추가할 수 있습니다.
    2. 우리는 현재 그냥 사용 console.log(error) 오류를 로그아웃합니다. 그러나 우리는 그것을 원하지 않으므로 사용자에게 친숙한 방식으로 모든 오류를 표시하는 방법을 알아낼 수 있습니다.
    
    

    이것으로 멋진 것을 만들었다면 자유롭게 트윗하고 저를 태그해주세요. @sprucekhalifa. 그리고 팔로우 버튼을 누르는 것도 잊지 마세요.

    즐거운 코딩!

    
    
    
                        
    
    
    

     

     

    
    

    
    
    ★ 현재 증권사 최대 관심주들 ★




    반응형