내장함수 리뷰 강의 질문입니다.

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 내장함수 리뷰

해결된 질문

작성

128

내장함수 리뷰 강의에서 let isStarted = false 이 부분을 작성해주는 이유와 let timer를 해서 setInterval 앞에 timer를 붙여 재할당부분 그리고, clearInterval(timer) 이 부분에 대해 강의를 여러번 봐도 설명이 조금 어렵더라구요. 조금 쉽게 설명부탁드리겠습니다 ^^

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! 부드러운 족제비님!

아래 답변을 참고해 주세요!^^
============================================================

let isStarted = false 사용하는 이유

=> 함수의 중복 실행을 방지하기 위해 사용되었어요!

쉬운 예를 하나 들어볼까요?!

철수, 영희, 훈이가 동굴에 들어갔는데, 노란색 스위치를 발견했어요!
노란색 스위치를 누르면 금괴를 획득할 수 있답니다!
스위치는 1번 밖에 누를 수 없는데요!
코드가 아래와 같다면 어떨까요?
```
function 노란스위치(){
  return "금괴 1개"
}

const 철수 = 노란스위치() // 금괴 1개
const 영희 = 노란스위치() // 금괴 1개
const 훈이 = 노란스위치() // 금괴 1개
```

스위치는 1번 밖에 누를 수 없는데, 3번이나 눌렸고, 철수 영희 훈이 각각 금괴를 1개씩 얻었어요!
따라서, 스위치는 1번만 눌리도록 코드를 변경해 주어야 할 것 같네요!

let isPushed = false // 질문에서의 isStarted와 동일한 역할

function 노란스위치(){
  if(isPushed === false){
    
    isPushed = true
    return "금괴 1개"

  } else {

    return "더이상 금괴가 없어요."

  }
}

const 철수 = 노란스위치() // 금괴 1개
const 영희 = 노란스위치() // 더이상 금괴가 없어요.
const 훈이 = 노란스위치() // 더이상 금괴가 없어요.

질문에서의 isStarted는 동일한 맥락으로 타이머를 1회만 작동하게 만드는 코드로 이해하시면 되겠죠?!^^

============================================================

let timer 에서 timer = setInterval 재할당 하는 이유

2-1)
let timer = setInterval()

2-2)
let timer
timer = setInerval()

=> 본 수업에서의 위 2가지 방식의 차이는 없습니다!^^
따라서, 2-1) 방식으로 진행하셔도 무관해요!

============================================================

clearInterval(timer)를 사용하는 이유

=> 타이머가 끝났을 때, 종료하기 위함이에요!^^

아래의 예시를 볼까요?!

아래는 1초에 1번씩 "바나나" 를 콘솔에 보여주는 코드랍니다

setInterval(() => {

  console.log("바나나")

}, 1000)

// [ 실행결과 ]
// 바나나
// 바나나
// 바나나
// 바나나
// 바나나
// 바나나
// ... 계속

위 코드를 실행해 보니, "바나나"를 무한히 보여주고 있는데요!
딱 3번만 보여주고 싶다면, 아래처럼 만들어 볼 수 있겠죠!

let 보여준횟수 = 0

setInterval(() => {

  console.log("바나나")
  보여준횟수 = 보여준횟수 + 1

  if(보여준횟수 >= 3) {
    // 보여준횟수가 3번 이상인 경우, 타이머 종료해야함
  }

}, 1000)

여기서, 타이머를 종료하려면 어떻게 하는게 좋을까요?!
네! 바로 이 때 사용하는 것이 claerInterval() 이랍니다!^^
따라서, 아래와 같이 setInterval을 변수에 담아 놓고, 해당 변수를 필요할 때 종료시켜 주면 되겠죠?!^^

let 보여준횟수 = 0

let 나의타이머 = setInterval(() => {

  console.log("바나나")
  보여준횟수 = 보여준횟수 + 1

  if(보여준횟수 >= 3) {
    claerInterval(나의타이머) // 보여준횟수가 3번 이상이므로 타이머 종료해야함
  }

}, 1000)

// [ 실행결과 ]
// 바나나
// 바나나
// 바나나

참고) 보여준횟수가 3보다 작을 때만 "바나나"를 보여주면 굳이 타이머를 종료하지 않아도 되는데요?
```
let 보여준횟수 = 0

setInterval(() => {

  if(보여준횟수 < 3){
    console.log("바나나")
    보여준횟수 = 보여준횟수 + 1
  }

}, 1000)

// [ 실행결과 ]
// 바나나
// 바나나
// 바나나
```
네! 맞아요!
하지만, 이 경우는 사실상 "바나나"만 화면에 안찍힐 뿐, setInterval()이라는 함수는 계속 실행중인 상태이기 때문에, 컴퓨터는 계속 1초에 1번씩 보여준횟수가 3보다 작은지 비교하는 일. 즉, if(보여준횟수 < 3) 을 검사 해야 한답니다! 무한히요!

따라서, 이러한 코드가 많으면 많을수록 불필요한 일을 무한히 해야하므로,
웹개발의 경우, 느리고 버벅거리는 홈페이지가 만들어지게 되고,
휴대폰 앱개발의 경우, 배터리가 빨리 소모 되는 등의 문제가 발생되는 것이랍니다!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

부드러운 족제비님의 질문과 관련하여 제공된 정보가 없어서 정확한 답변을 드리기 어렵습니다만, 질문하신 내용에 대해 일반적인 설명을 해드리겠습니다.

let isStarted = false 이 부분을 작성하는 이유:
isStarted 변수는 타이머가 시작되었는지 여부를 추적하는 데 사용됩니다. 초기에 false로 설정함으로써 타이머가 아직 시작되지 않았음을 나타냅니다. 이 변수는 나중에 타이머를 시작하거나 중지할 때 조건으로 사용될 수 있습니다. 예를 들어, 사용자가 타이머를 시작하는 버튼을 누를 때 isStarted가 false인 경우에만 setInterval을 호출하여 타이머를 시작하고, isStarted를 true로 설정할 수 있습니다.
let timer 와 setInterval 앞에 timer를 붙여 재할당하는 부분:
let timer는 setInterval 함수에 의해 반환되는 타이머 식별자를 저장하기 위한 변수입니다. setInterval 함수는 주어진 시간 간격으로 반복해서 함수를 실행시키며, 실행된 타이머를 나타내는 식별자를 반환합니다. timer 변수에 이 식별자를 저장함으로써 나중에 clearInterval 함수를 사용하여 타이머를 중지시킬 수 있습니다. 즉, timer 에 setInterval을 통해 반환된 타이머 식별자를 재할당하는 것입니다.
clearInterval(timer) 부분:
clearInterval은 setInterval에 의해 설정된 타이머를 중지시키는 함수입니다. clearInterval에 timer 변수를 인자로 전달함으로써 해당 타이머 식별자에 해당하는 타이머를 중지시킵니다. 이를 통해 반복되던 함수 실행을 멈출 수 있습니다. 예를 들어, 타이머를 중지하는 버튼을 누르거나 특정 조건이 만족됐을 때 타이머를 중단할 수 있습니다.

간략히 요약하자면, let isStarted는 타이머의 실행 여부를 추적, let timer는 타이머 식별자를 저장, clearInterval(timer)는 실행 중인 타이머를 중지하는 역할을 합니다. 각각의 코드가 갖는 목적과 역할을 이해하는 것이 중요합니다.

강의 내용이 어렵다면, 개념을 하나씩 분리해서 작은 예제 코드를 짜보며 실습하는 것도 많은 도움이 됩니다.

인프런 커뮤니티 질문&답변

내장함수 리뷰 강의 질문입니다.