1) URL

서비스 :https://funnystyle.github.io/ttt/

2) 스크린샷

3) 자기소개

인천/서울에 서식중인 개발자입니다.

제 소개라기보단, 꿈을 하나 이야기자면...

1년에 언어 한 개씩 공부해서 (말하기/듣기/읽기/쓰기에 대해) multi-lingual 혹은 polyglot 프로그래머가 되는 것입니다.

지난 2주간 Python 챌린지를 끝내면서 "읽을 줄 아는" 언어 목록에 Python 추가했습니다.

4) 서비스 소개

사실, 서비스라고 할 수는 없을 것 같네요. 그냥, textarea 에 있는 HH:MM:SS 나 MM:SS 형식의 시간들을 추출하여 모두 더해서 MM:SS 형식으로 계산해주는 화면 하나짜리 html 페이지입니다.

아무리 기능이 없어도 이름은 멋지게 짓자 하여 TTT (Time Table Total) 라고 지었는데 3x3 Eyes 가 우는 것 같군요. ㅠㅠㅠ

5) 시작하게 된 계기

지난 4주간 챌린지를 3개 끝냈는데요(vanilla javascript, react 와 python 은 같이). 챌린지 과제가 주어질 때마다 #3.1~#3.5를 보라는 식으로 범위가 주어지는데, 회사일과, 사이드 잡을 하는 와중에 짬을 내서 니꼬샘 강의를 들으려다보니 그 강의들의 총 플레이 시간이 어느 정도인지를 계산해서 시간 안배를 했어야 했습니다. 그럴 때마다 계산기로 계산하는 것이 너무너무너무 귀찮았습니다. 엑셀로도 계산해보고, 이리저리 하다가 그냥 이런걸 만들어버렸습니다.

물론 챌린지가 다 끝난 후에야 말이죠. ㅋㅋ

6) 개발

html+js 끝입니다. 저는 미적감각이 전혀 없기 때문에, UI 는https://mdbootstrap.com/ 의 힘을 빌렸습니다. 저는 Material Design 이 좋아요.

개발 내용을 두 개 정도 소개하자면,

i) HH:MM:SS 와 MM:SS 를 추출하는 것은 정규식을 썼습니다.

const regex = /([0-9]+:)+[0-9]+/gim;

var found = text.match(regex);

정규식은 사랑입니다.

물론, 이 정규식으로는 33:33:33:33 같은 것도 추출이 됩니다만,

노마드코더는 정말 formatting 이 잘 되어 있는 사이트이므로 예외처리 따위는 없습니다.

ii) HH:MM:SS 와 MM:SS 를 초로 변환하는 것은 split 후 reduce 함수를 썼습니다.

function sumSeconds(time) {

const splitted = time.split(":");

return splitted.reduce((prev, curr) => prev * 60 + curr, 0);

}

reduce 를 쓰니, 두 가지 경우를 나눌 필요가 없어서 좋더군요.

7) 바라는 것은?

저처럼 니꼬샘 강의 66%, 84% 등 완강 하지 못한 강의들 쌓여있는 분들이 있다면,

이 계산기로 남은 시간 계산 후 완강에 대한 계획을 세우셔서 100% 만들고 Course Complete Certification 받으세요. ^^