[230308] 스파르타 코딩 클럽 9일차 'Timer' | TIL

학습 목표

• 최대 60초까지 Silder를 통해 설정 가능한 타이머를 만들어보기
• 60초라는 설정이 가능한 방법을 알기
• Start 버튼이 눌렸을 때 Silder가 매 초 움직이면서 남은 시간을 표기하기
• 타이머 동작이 끝나면 알람이 울리도록 설정하기
• Reset 버튼을 눌렀을 경우 즉시 초기화되며 첫 화면으로 돌아오기

1차 완성본

화면 기록으로 녹화한 장면이라 소리가 안들어간게 아쉽다...

스토리 보드 구성

가장 기본적인 스토리보드 구성이다.
단일 view Controller로 구성되었다.

'타이머'라는 Label 추가

mainLabel은 Slider의 반응에 따라 유동적으로 초를 나타낼 영역

그리고 선을 나타내기 위해 view를 그리고 depth를 1로 주었다.

0초 Label과 60초 Label, Slider를 Stack View로 묶어 Spacing을 10으로 설정

그리고 지금까지 나타낸 전체를 Stack View로 묶음

RESET START버튼 또한 Stack View로 결합.

이후 전부 구속을 잡은 모습.

코드 진행

IBOutlet은 mainLabel과 slider 두 개만 필요하다고 생각했다. 나머지는 변동될 사항이 없고, Button은 Action에서 다룰 내용이기 때문이다.

viewDidLoad 내부에 configureUI() 만 남겨놓기 위해 별도로 함수를 빼서 작업했다.

함수를 별도로 뺀 이유는 viewDidLoad의 가독성도 있지만 이따 나올 resetButtonTapped 기능이 초기 설정 작업과 똑같기때문에

두 번 구현하기 번거롭기에 함수로 빼서 정리했다.

mainLabel의 글씨가 "초를 선택하세요"로 변하게 되며

slider.value로 slider의 위치를 지정할 수 있는데 0~1이 기본값이기에 정중앙을 설정하려면 0.5로 셋팅하면 되었다.

그리고 초기 단계에서는 필요가 없지만 실제로 타이머가 진행이 된 후에 Reset 버튼을 눌러서 초기화할 경우

Timer의 작동이 멈추어야 하기 때문에 중단 명령을 하는 함수도 작동시켜두었다.

silderChanged

슬라이더를 밀고 당길 때 mainLabel의 text를 변경해주기 위한 코드이다.

silder의 value에 60을 곱해서 0~1이던 값을 60으로 변경해주었다.

왜 Int로 감싸야하는지 몰랐는데 감싸지 않고 그냥 해보니 소수점 아래 15자리까지 Double 형태의 숫자가 전부 표기되었다.

계산기같은 어플을 만들 때에는 Int로 감싸버리면 소수점 이하가 날아가버려서 정확하지 않다며 쓰지 않은 기능인데

무조건 Int형의 숫자만 반환하고자( 0부터 60 ) 의도적으로 Int로 감쌌다.

그리고 slider를 조금씩 밀 때마다 반응하는 mainLabel.text.는 sec으로 표현했으며 num은 설정한 초부터 1초씩 줄어들때마다의 연산을 위해 viewController Class에 0으로 선언해둔 상태인데 해당 num을 slider를 밀어 설정한 sec 값으로 지정해주었다.

가장 고생해서 만들었다 생각이 드는 startButtonTapped

startButtonTapped를 어떻게 구현할지 감을 못잡고 있어서 우선 한글로 원하는 코드가 무엇인지 작성부터 하고 시작했다.

타이머의 작동을 시작하게하는 timer?invalidate()는 긁어와서 사용할 수 있었다.

하지만 가장 메인으로 구현해야할 항목에는 두 가지 있었는데

1. 슬라이더가 1초마다 움직일 것

2. mainLabel의 초가 1초마다 줄어들 것

viewController Class 내부에 Timer? Class를 상속시켜 사용한다.

기존에 Xcode에 담겨있는 기능을 가져와 사용하기로 했다.

이러면 Timer의 옵션인 scheduledTimer 기능을 사용할 수 있게되며, 인터벌은 1초로 주었다. 리피트도 당연히 true.

그리고 timer가 weak self로 선언되어있기때문에, 여기서는 self를 써서 코드를 진행해도 weak self로 인식하지만

옵셔널을 빼고 코드를 작성할 수 있다는 편리함이 있어 self를 해주었다.

if else 문을 활용하여 0보다 클 경우 반복적으로 동작하는데 이 안에 내가 고민했던 두 가지를 모두 넣어야 했다.

우선 반복적으로 num은 계속 1씩 줄어들어야하고, slider.value를 바꾸는 코드가 필요했는데

정말 60등분으로 움직이는 타이머가 필요했지만

굳이 Double까지 가지 않아도 float 정도면 충분히 실수를 커버할 수 있다고 생각해서 num을 float 형태로, 그리고 60등분을 위한

60도 float으로 설정했다.

그리고 num을 1씩 줄이고 있으니 당연히 mainLabel.text도 num값을 입혀주면 끝난다.

else 구문에서는 0보다 클 경우가 아닌 경우니까 아마 0이 된 경우일거다.

아까 별도로 빼두었던 configureUI 함수를 동작시켜 초기 셋팅으로 되돌린다.

그리고 아까 startButtonTapped와 동시에 작동시켰던 타이머 흐름을 중단시킨다.

이러면 mainLabel.text나 slider가 1초마다 반복해오던 작동을 멈춘다. 무한 else 호출에 빠지기 싫다면 반드시...

그리고 소리내는 방법은 구글링을 통해 찾아왔다. 다른 설명할 필요없이 그냥 저런 코드를 쓰면 특정 시점에 특정 사운드를 낸다.

이 버튼을 위해서 함수를 만들었지

resetButtonTapped는 초기설정 함수를 따로 빼두었기에 저 함수만 작동시키면 끝난다.

발전시킬 점

만들다보니 하나 아쉬운 점이 보였다.

slider를 5초로 만들고 start 버튼을 연타하면 5초에서 아무리 시간이 지나도 줄어들지 않는다는 것이다.

start Button Tapped 시 slider가 5 -> 4로 변하기 전에 무한으로 타이머를 시작하는 것이다.

이러면 만약 실수로 눌린다면 정확한 5초를 셀 수 없겠네? 하는 생각이 들어서

Start 버튼이 눌릴 경우 startButton.text가 Stop으로 변경되면서 STOP을 누를 경우 타이머가 일시 정지되며 Start 버튼으로 복귀.

다시 start Button을 누를 경우 다시 타이머의 작동.

이러한 기능을 넣어보고싶어졌다.

추가 Develop (Stop 기능 추가)

가장 먼저 필요한 작업은 StartButton에 대한 IBOutlet 추가이지않나 싶다.

이렇게 한 줄 더 만들어줬다.

그리고 타이머가 작동중인지 여부를 판단할 Bool이 하나 필요해서 true와 false에 따라 변경하는 방법을 생각했다.

당연히 시작부터 동작하지 않으니 기본값은 false이다.

그리고 초기화를 할 때 반드시 START 버튼으로 돌아와야한다.

타이틀을 start로 바꾼다는 간단한 코드

이후엔 Start Button Tapped 상황에 대해서 if와 else로 구분지어 동작을 수정해야 할 것 같았다.

기존의 if문에 하나를 더 덧씌워 이중 if문을 사용했다.

startButton.text가 아니라 setTitle이었다는 점을 새롭게 알게되었다. label일 경우에만 text가 통하는 것 같다.

그래서 타이머 작동하면 STOP으로 변하고 STOP을 누를 경우 타이머 중지와 함께 초가 흐르지 않으며 다시 START 버튼으로 돌아오게 된다.

최종 완성본

STOP 버튼이 잘 작동하는 모습이다.

모든 타이머가 끝나면 START 버튼으로 돌아오는 것까지 구현했다.

오늘의 한 마디

세상엔 내가 모르는 기능과 함수와 코드들이 무수히 많다. 어마어마하게 많다.
다 외우고 쓰는 사람은 없고 어떻게 잘 조각조각 붙여서 잘 사용하는지가 역량이라고 생각한다.
좌절하지 말고 멈추지 말자.