2주프로젝트 8일차(주말점프!)

오늘 진행상황

전반적인 상황으로 저번 한주동안 각자 맡은 역할이 거의 끝나가는거 같아
오늘은 서버와 클라이언트의 코드병합을 진행해야 오류컨트롤을 할수 있을것 같아 그렇게 진행했더니
많은 에러가 발생했고 또한 많은 에러를 해결할수 있었다.
그래서 오늘 고생은 많이 했지만 클라이언트와 서버의 모든 코드들을 합칠수 있었고,
그 덕에 목표로 했던 bareminimum 의 조건을 충족하는 프로젝트가 완성되었다.

에러사항

• 가장 중요한 페이지를 완성했나 싶었는데..! 생각지도 못한 상황이 발생했다.
  /ing 페이지가 하는 역할은 시작버튼을 눌러 카메라를 켜서 모션을 탐지해서 스쿼트를 카운트해주는 역할인데, this.props.history.push를 이용해서 /ing => /result 이동하게 되면
  카메라가 꺼져야하는데.. /result페이지에서도 계속 켜져있고 콘솔로 확인해보니 /ing페이지의console.log(count)가 계속 충실히 스쿼트 갯수를 찍어내고 있었다../result 페이지에서..

그래서 생각해본 결과 카메라를 끄면 되겠다! 싶어서 티처러블머신 코드를 자세히 살펴보니

let webcam
webcam.setup()
webcam.play() //자세한 내용은 생략

뭐 이런게 있길래 play()는 또 뭐지..?검색해보니
HTMLMediaElement.play()이라는 HTML 내장메소드 같아 stop()있겠거니 하고 찾아서 적용시키려고 했지만 쉽지 않았고, 계속 풀리지 않아 일단 구현부터 해놓자 하여

두번째로 시도 했던 방법은

카메라가 안꺼지니 버튼태그를 이용해서 버튼이 클릭되면 
카운트갯수를 fetch 로 server로 보내서 서버를 통해 DB에 저장시켜놓고
history.push를 사용해서 /result로 가고, 페이지가 바뀌게 되면
unmount되면서
밑의 함수가 실행되면서 새로고침되는 방식이며
componentWillUnmount(e) {
  console.log("ing.js is unmounted")
  window.location.reload()
}
이렇게 되면 /ing 페이지의 state가 초기화되면서 사실상 /result에 props로 전달되는 값이 없게되므로 다시 
componentDidMount 함수를 통해 마운트가 되면 fetch로 아까 서버를 통해 DB로 저장시켜놓은
스쿼트 갯수를 다시 불러오는 방식으로 진행했건만..(어쨌든 작동은 잘 되었다...불필요한 fetch 2번만 아니라면..ㅎ)

그렇게 한참 고생해서 완성하였는데..!
다른 팀원이 결국 처음시도한 방법을 해결해서 결국 최종코드는 

 <button className="button" onClick={async (e) => {
           e.preventDefault()
           await this.handleWebCam();
           this.props.handleCounting(count)
           fetch('http://localhost:4000/count/saveCount', {
                 method: 'POST',
                 body: JSON.stringify({
                       categoryId: "1",
                       count: count
                 }),
                 headers: {
                       'Content-Type': 'application/json',
                       'accessToken':  JSON.stringify(localStorage.getItem('dailySquatToken')),
                        }})
                        this.props.history.push('/Result')
}}>완료</button>
이런 코드가 되었다! 
시도해본 모든것을 쓰자면 아마 오늘안에 다 작성 못할것 같아서
시도했던 것들중 의미있는 것들만 적어보았다.

##비동기로 루프하는 함수코드가 있는경우 실행순서를 잘 살펴봐야겠다.##

소감

• 주말사이의 리액트공부를 조금 했다고 생각했는데 아직 턱없이 모자르는 경험과, 아직도 어색한 컴포넌트활용 방법, 라이프사이클메소드, 렌더링순서, 스코프 등 모든게 아직은 어렵다.
  내일부터 일단 디자인을 다 같이 좀더 보완하고, bareminimum 조건에다 좀더 추가할 내용이 있는지 상의한 후 만약 없다면 AWS를 통해 배포를 까지해서 테스트를 해볼 예정이다.
  github 의 workflow는 아직도 낯설고, merge충돌이 나면 살짝 당황스러운건 여전하다..
  팀원들과 머지할때 굉장히 신중히 진행한다..ㅋㅋㅋㅋ 다들 겁내하는거 보면 웃기기도 하고 ㅋㅋㅋ재밌기도 하고.. ㅋㅋㅋ
  8일차 끝!