level 1 - 자동차 경주 게임 후기

이번 과제를 하면서 js의 실행 순서, callback 함수 등을 익히게 되었습니다.

javaScript는 어떻게 작동하는가

여기서 많이 익히게 되었습니다. (링크 눌러서 꼭 보면 좋습니다. )

저도 수시로 완벽히 이해하도록 보려고 합니다.

다른 것들은 전의 것들과 비슷해서 조금 더 발전 시키고 있습니다. :)

 

setTimeout 설정

setTimeout을 사용할 때 위의 링크(javaScript는 어떻게 작동하는가)를 보면

해당 함수는 Web APIs에 이동 -> Callback Queue -> Call Stack에 함수가 없어진 후 ->> Call Stack이동 하여 함수 진행 하기 때문에 이런 관계를 잘 파악해야 합니다.

그래서 전체를 묶어 서 함수를 짜게 되었습니다.

구조체

function Car(name) {
    this.name = name
}

ex) 내부 변수 추가
const setCarName = (carNameList) => {
    const carList = carNameList.map((carName) => new Car(carName));

    carList.forEach((carName) => {
        carName.cnt = 0;
    })
}

과 같은 식으로 만들어야 하며 내부의 변수를 추가하고 싶을 때 그냥 추가하면 됩니다.

 

 

Cypress alert

Cypress에서 alert를 나타내기 위해 stub()를 사용할 수 있습니다.

cypress - stub 사용법, Alert 테스트 예제, 이벤트타입

const alertStub = cy.stub();

cy.on("window:alert", alertStub);
cy.get("").click().then(() => {
    expect(alertStub.getCall(0)).to.be.calledWith(
    "alert 경고 문"
    );
})

 

 

Error 처리

[Javascript] 에러 처리 방법

에러가 나면 alert를 출력하고 마무리를 하려고 했는데 다른 분의 코드를 보니

throw new Error('자동차 입력이 잘못되었습니다.');

 

과 같은 코드를 써지고 하니 다음과 같은 것을 출력하고 마무리 합니다.

 

 

링크를 보고 찾아보니 위와 같은 코드는 에러 인스턴스를 생성하고, 에러 처리를 하지 않으면 스크립트 실행을 멈춥니다.

그리고 싱글 thread를 가지고 실행하는 js로서 굉장히 Error처리가 중요한 것을 알게 되었습니다.

위의 링크를 읽어보고 에러처리를 잘 해야 겠습니다.