이중 벡터 호일 탈출: 우주선 발사 제어

소개

이 프로젝트에서는 우주선의 발사 요청을 수집하고, 우주선의 결과를 기반으로 다음 우주선 배치를 자동으로 정렬하는 RequestControl 클래스를 개발하는 방법을 배우게 됩니다. 이는 3 차원 공간을 2 차원 평면으로 축소시키는 삼체 문제의 "이중 벡터 호일 (Dual Vector Foil)"의 영향을 피하도록 돕습니다.

👀 미리보기

spacecraft launch simulation preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

우주선 발사를 처리하기 위해 RequestControl 클래스에서 run 함수를 구현하는 방법.
render 함수를 사용하여 페이지에 발사 결과를 렌더링하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

프로미스 (promises) 를 사용하여 우주선 발사 과정을 시뮬레이션합니다.
발사 대기열을 관리하고 한 번에 발사할 수 있는 우주선의 수를 제어합니다.
발사 결과를 표시하기 위해 사용자 인터페이스를 업데이트합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── index.html
└── main.js

그 중:

index.html은 메인 페이지입니다.
main.js는 코드를 보충해야 하는 js 파일입니다.

main.js 파일에서:

createRequest 메서드는 우주선 발사 요청을 위한 promise입니다.
RequestControl 클래스의 addRequest 메서드는 우주선 발사 요청을 수집합니다. 우주선 발사 요청은 this.requestQueue 발사 대기열에 배치됩니다.
run 메서드는 발사 결과를 기반으로 다음 우주선 배치를 자동으로 정렬합니다.
render 메서드는 페이지에 발사 결과를 렌더링하는 데 사용됩니다.

max = 2를 예로 들면, 우주선 발사 과정은 다음과 같습니다:

Spacecraft launch process diagram

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다. 초기에는 아무런 효과가 없습니다.

RequestControl 클래스에서 run 함수 구현

이 단계에서는 발사 결과를 기반으로 다음 우주선 배치를 자동으로 정렬하기 위해 RequestControl 클래스에서 run 함수를 구현합니다.

제공된 프로젝트에서 main.js 파일을 엽니다.
RequestControl 클래스에서 run 함수를 찾습니다.
run 함수 내부에 다음 코드를 추가하여 우주선 발사를 처리합니다:

run() {
  // Get the length of the request queue
  let len = this.requestQueue.length;

  // If the request queue is empty, return
  if (len === 0) return;

  // Get the minimum of the max number of spacecraft and the length of the request queue
  let min = Math.min(this.max, len);

  // Launch the spacecraft one by one
  for (let i = 0; i < min; i++) {
    // Decrement the max number of spacecraft that can be launched
    this.max--;

    // Get the next request from the queue
    let req = this.requestQueue.shift();

    // Launch the spacecraft and handle the result
    req()
      .then((res) => {
        this.render(res);
      })
      .catch((error) => {
        this.render(error);
      })
      .finally(() => {
        // Increment the max number of spacecraft that can be launched
        this.max++;
        // Recursively call the run function to launch the next batch of spacecraft
        this.run();
      });
  }
}

구현의 핵심 사항은 다음과 같습니다:

요청 대기열의 길이 (this.requestQueue.length) 를 가져옵니다.
요청 대기열이 비어 있으면 반환합니다.
최대 우주선 수와 요청 대기열 길이 중 더 작은 값을 가져옵니다 (Math.min(this.max, len)).
우주선을 하나씩 발사하고, 발사할 수 있는 최대 우주선 수를 감소시킵니다 (this.max--).
req()에서 반환된 프로미스의 then 및 catch 메서드를 사용하여 우주선 발사 결과를 처리합니다.
발사할 수 있는 최대 우주선 수를 증가시키고 (this.max++) run 함수를 재귀적으로 호출하여 다음 우주선 배치를 발사합니다.

프로젝트 테스트

main.js 파일을 저장합니다.
브라우저에서 웹 페이지를 새로 고칩니다.
페이지에 표시된 발사 결과를 확인합니다. 페이지에는 우주선의 성공적인 발사와 실패한 발사가 표시되어야 합니다.

최종 페이지 효과는 다음과 같습니다:

spacecraft launch results display

축하합니다! 우주선 발사를 자동으로 정렬하는 RequestControl 클래스의 구현을 완료했습니다. 이제 프로젝트가 완전히 작동해야 합니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.