자바스크립트에서 JSON 데이터를 이용하여 타이머 생성하기

15 Sep 2023

javascript

JSON 데이터를 사용하여 동적으로 타이머를 생성하고 제어하는 것은 자바스크립트에서 매우 유용한 작업입니다. JSON(JavaScript Object Notation)은 데이터를 효율적으로 표현하기 위한 경량의 데이터 교환 형식입니다. 이를 활용하여 타이머의 정보를 저장하고 필요한 경우 해당 정보를 불러와 타이머를 생성할 수 있습니다.

먼저, JSON 데이터를 작성하여 타이머에 필요한 정보를 저장해야 합니다. 아래는 예시를 위해 JSON 데이터의 형식을 보여줍니다.

{
  "timerName": "My Timer",
  "duration": 60,
  "isRunning": false
}

위의 예시에서는 타이머의 이름(timerName), 지속 시간(duration), 그리고 타이머의 실행 여부(isRunning)를 저장하고 있습니다.

자바스크립트 코드에서는 아래와 같이 JSON 데이터를 활용하여 타이머를 생성할 수 있습니다.

// JSON 데이터 가져오기
const timerData = {
  "timerName": "My Timer",
  "duration": 60,
  "isRunning": false
};

// 타이머 객체 생성
const timer = {
    name: timerData.timerName,
    duration: timerData.duration,
    running: timerData.isRunning,

    start: function() {
        if (!this.running) {
            this.running = true;
            console.log(`타이머 "${this.name}"가 시작되었습니다.`);
            // 타이머 시작 로직 작성
        } else {
            console.log(`타이머 "${this.name}"가 이미 실행 중입니다.`);
        }
    },

    stop: function() {
        if (this.running) {
            this.running = false;
            console.log(`타이머 "${this.name}"가 중지되었습니다.`);
            // 타이머 중지 로직 작성
        } else {
            console.log(`타이머 "${this.name}"가 이미 중지되어 있습니다.`);
        }
    },

    reset: function() {
        if (!this.running) {
            console.log(`타이머 "${this.name}"가 재설정되었습니다.`);
            // 타이머 재설정 로직 작성
        } else {
            console.log(`타이머 "${this.name}"가 실행 중인 동안에는 재설정할 수 없습니다.`);
        }
    }
};

// 타이머 실행
timer.start();

위의 코드를 실행하면 타이머가 시작됩니다. 타이머는 start, stop, reset 메소드를 통해 제어할 수 있습니다. start 메소드를 호출하여 타이머를 시작하고, stop 메소드를 호출하여 타이머를 중지하며, reset 메소드를 호출하여 타이머를 재설정할 수 있습니다.

다양한 JSON 데이터를 활용하여 타이머를 동적으로 생성하고 제어할 수 있습니다. 이를 활용하여 다양한 기능을 가진 타이머를 구현할 수 있습니다.

#자바스크립트 #JSON #타이머