21-23일차 내일배움캠프

안녕하세요 여러분.

간무징어 인사드립니다.

원래 매일 TIL을 쓰겠다는 의지를 가지고 시작했지만

야간 아르바이트를 하는 월요일과 화요일에는

체력적인 한계를 느껴서

일주일에 3번은 꼭 TIL을 쓰는 걸로

스스로 타협을 해버렸습니다.

 

사실 월요일과 화요일의 경우

이틀을 통틀어 제대로 잠잘 시간이 없답니다.

게다가 일하는 동안 앉아서 쉴 수 있는 시간이 없기 때문에

이런 선택을 하게 되었습니다.

 

 

벌써 내일배움캠프를 진행한지 1달이 지났고,

이제 3달이 남았습니다.

금전적인 여유가 없어

중간에 포기할 수 있겠지만

지금은 이렇게라도 하고싶은 공부를 할 수 있다는 생각에

신나기만 하네요.

 

어제까지 머신러닝 강의와 알고리즘 강의를 모두 수강완료하고

오늘부터는 새로운 팀 프로젝트를 시작했습니다.

바로 머신러닝 서비스를 구현하는 것입니다.

 

6시간 정도 팀회의를 하면서

기획을 하고 포지션을 정한 뒤

기능을 구현하고 있습니다.

 

https://www.notion.so/14-83ce004ff8614504b0ce09c75c221a03

회의 내용은 노션에 정리를 하고 있습니다.

그리고 기능을 구현할 때마다 진행중 상황에 공유를 하면서

협업을 하고 있습니다.

 

개발 협업과 관련하여 Git 저장소를 사용합니다.

https://github.com/hayongwoon/space_project2

GitHub - hayongwoon/space_project2: 머신러닝

프로젝트 인원이 소수이기 때문에 브랜치를 따로 사용하지 않고

게더타운과 슬랙을 적극적으로 활용하여

코딩을 하고 있습니다.

 

저와 팀원 대부분은 프론트, 백앤트 두 포지션 역할을 맡았고

Kaggle 데이터는 서브 포지션을 맡아

사실상 모든 포지션의 코드를 리뷰하고 공유 및 피드백하고 있습니다.

 

https://www.figma.com/file/PakZwmd6FgONHmjmOdwFw5/space-2%EC%B0%A8-%ED%8C%80%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?node-id=0%3A1 

figma에 기획 내용을 정리한대로

이번 주제는 요가 자세 이미지 데이터셋을 머신러닝 프로젝트로

아침에 일어날 때 알람을 설정하면

그에 맞는 요가 자세를 취해 알람을 끄는 방식의 프로젝트를 진행하기로 했습니다.

 

다만 이번에는 웹페이지 배포를 하지 않기 때문에

유저가 알람 시간을 따로 설정할 수 있게 하지 않고

타이머 기능을 구현하는 것을 1차 목표로 두었습니다.

그리고 그 타이머가 타임아웃되면

알람이 울리고 주어진 요가자세를 취하고 찍어서 올리면

성공과 실패의 결과를 내는 서비스를 최종적으로 구현하는 것이 목표입니다.

 

저는 오늘 stackoverflow를 참고하여 startTimer 메서드를 push했습니다.

 

//parseInt는 문자열 인자를 파싱을 통해 특정 정수로 표현할 수 있습니다.
function startTimer(duration, display, bar) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10); //10진수 표현을 위해 radix를 10으로 합니다.(만약 2이면 2진수)
        seconds = parseInt(timer % 60, 10);

javascript를 사용해 메서드를 사용합니다.

setInterval 함수는 타이머 실행이 끝나면 자동으로 반복이 되게 해줍니다.

 

minutes = minutes < 10 ? "0" + minutes : minutes; // ? 조건문입니다. 10분 아래로 떨어지면 09:30 이렇게 9분 앞에 0을 붙입니다. 방식으로 표현합니다.
seconds = seconds < 10 ? "0" + seconds : seconds;

javascript는 이렇게 ?를 사용하여 조건문을 만들 수 있었습니다.

 

// document.querySelector는 CSS의 클래스, 아이디를 찾아 같은 값을 반환합니다.
window.onload = function () {
    var minutes = 60 * 1,
    display = document.querySelector('#time');
    bar = document.querySelector('#progressBar');
    startTimer(minutes, display, bar);
};

더하여 document.querySelector는 css 선택자와 연결이 가능하게 합니다.

개인적으로 굉장히 신기했습니다.

 

부트스트랩을 사용하여 HTML을 나름 쉽게 구현할 수 있었습니다.

 

내일은 오늘 작성한 타이머 코드를 좀 더 수정하고

막대바 형태가 아니라 동그란 시계 형태의 타이머를 만들어볼려고 합니다.

더하여 백앤드 부분의 데이터와 연결하는 방법에 대해

좀 더 고민해보려합니다.

 

그럼 오늘은 여기까지 입니다!