[Toy Project] 점진적 과부하 사이트 - 2

S3 배포링크

: 오늘의 운동 기록을 점진적 과부하 사이트로 기록하고 캡쳐해봤다 ㅎㅎ

1편 이후로 진전 사항

• 일단 메인 페이지의 로직을 구현했음. 저번에 만든 랜딩페이지에서 운동을 선택하면 메인페이지로 그 선택한 운동들을 가져와서 useEffect()로 componentDidMount와 같은 효과를 내서 첫 렌더링을 하자마자 내가 짜놓은 자료구조를 만들도록함.
  내가 짜놓은 자료구조는 다음과 같다

  
  {
      "벤치 프레스" : [["50", "15"], ["60","12"]],
      "턱걸이" : [["0","12"],["0","10"],["0","8"]],
      "스쿼트" : [["30","15"],["40","15"],["50","12"]]
  }
  
  

  : 위와 같은 형태로 만든 다음에 state로 관리한다. 그래서 만약에 위에 그림에서 +버튼을 누르고
  
  : 위와 같은 인풋이 뜨면 각각 kg와 reps(몇회 했는지)를 입력한 뒤에 clear를 누르면 해당 운동을 키로 해서 object의 값을 찾고, 그 값에 기록한 kg, reps를 배열 2차원 배열 형태로 저장해둔다. 그리고 그것을 setState로 하기 때문에 업데이트 될 때마다 리렌더링 된다.

발생했던 이슈

1) 처음에 + 버튼을 누르면 위와같은 인풋창이 안뜨는 문제가 생겼었다. 즉, 리렌더링이 안되는 문제가 생겼다. map 안에 이중 map 구조로 해서 그런가? 하는 직관적이고, 비논리적인 생각을 해봤지만 그럴 이유가 없었다. 그래서 setState를 추적하기위해 useEffect를 써서 해당 state가 업데이트 될 때 console.log를 찍도록 했는데, 분명히 제대로 값이 변하고 있었다.. ?! 즉, 내가 위에 만든 자료구조에 예를 들어, 벤치프레스면 해당 키의 값인 배열에 하나의 배열을 제대로 추가하고 있었다는 것!. 근데도 렌더링은 안되기에 뭐가 문제인가 해서 찾아보니 setState를 할 때 만약에 같은 주소값을 참조하는 값을 넣으면 리렌더링이 되지 않는다는 것을 알게 됐다. 물론 이러한 이유로 보통 배열이나 객체를 setState에 넣을 때는 깊은 복사를 해서 진행하는데, 결론적으로 문제는 내 '문법 실수'에 있었다.

const copyObj = Object.assign({}, objTOCopy}

Object.assign(target, ...sources)

위의 코드처럼 assign을 쓸 때는 먼저 빈 객체(새로운 주소값을 쓰기 위함)를 target에 두고, 복사할 요소가 담긴 state 객체인 objTOCopy 객체를 sources에 두면 자동으로 spread 연산자가 붙어서 해당 객체의 소스를 타겟 객체에 복사하게 된다. 그러면 주소값도 새로운, 즉 완전히 새롭고 소스만 같은 객체를 리턴하게 된다.

: 위와 같이 썼어야했는데.. 저걸 그냥 Object.assign(objTOCopy)로 했으니.. 그냥 해당 객체를 얕은 복사했을 뿐이었다. 그래서 setState를 해도 같은 주소값을 가진 객체를 넣으니 리렌더링이 안됐던 것! 아무리 객체의 요소가 바뀌어도 주소값이 안바뀌면 react가 state가 변한지 인식을 못한다는 것을 알아두자

• Object.assign을 쓰기보다는 그냥 spread operator 쓰자.

  
  const copyObj = { ...ObjToCopy } 
  
  

  : 이렇게 하는게 훨씬 간단하다. 사실상 Object.assign 이 하는 로직과도 비슷하고!

2)

{/ type= number로하면 current.value 안먹힘 /}

: 내가 주석으로 남겨놓은 것인데, useRef를 써서 input의 값을 받아서 어떤 로직을 처리해주려했는데, input type="number"로 해놓으니까 작동을 안하더라. 즉, inputRef.current.value를 했는데, inputRef.current가 null로 떠서 에러가 났다. 근데 지금 이걸 해보면서 다시 시도해보니까 에러가 안난다.. 이건 추후에 또 해보면서 봐야겠다. 중간에 로직이 꼬였었던건가..?

보완할 점 & 추가할 부분

• 한 운동당 reps를 다 더한 개수를 보여줘야할듯. 예를 들어, 벤치 프레스를 30kg 15를 3번했다고 하면 153 = 45가 뜨게하자
• 지난번 최고 무게 및 최고 개수 뜨게하기. 점진적 과부하라는 목표에 맞게 바로 이전 혹은 여태까지 최고기록을 해당 운동 옆부분에 표시하자.
• 오늘 최고 기록 (무게 위주로) 보여주기
• 모바일 웹앱에서 Input 누르면 확대되는것 없애기
• 한글버전 & 용기체(작성자 이름) 버전 만들기
• 이 앱은 모바일 웹앱에서는 운동하면서 기록용으로 쓸 것이고, 백엔드 부분을 더하면서 데스크탑 혹은 노트북에서는 반응형으로 여태까지 내가 했던 운동 데이터를 바탕으로 그래프를 보여주는식으로 하자. 예를 들어, 벤치프레스 자료가 한 12일치 생겼다고 할 때 그 12일치 기록을 그래프로 표시해줘서 내가 점진적으로 운동을 했는지를 알 수 있게 하자. chart js 써보면 될듯!
• 백엔드를 슬슬 만들긴 해야할 것 같은데 django... NodeJS 로 가자 일단. 데이터베이스는 MongoDB 한번 써보자(or graphQL).
• 반응형을 rem으로 해놓고, 폰 기종마다 px을 안바꿔놔서 엉망이다. vw or %를 이용하던지 폰마다 px설정해주자

추가 기획

• 운동 기록 데이터를 바탕으로 나중에 user 테이블까지 만들면 유저들끼리 인스타그램처럼 그것을 공유할 수 있는 커뮤니티 파트를 만들자. 이 때, 직접 업로드할 수 있는건 사진이고, 나머지는 그날 운동한 기록만 올릴 수 있도록 한다. 이전날 한 운동은 올릴 수 없음. 각자 그날 운동을 한두장의 사진과함께 자신이 실제 했던 기록을 자동으로 업로드하면서 공유할 수 있는 플랫폼으로 만들자.
• 나중에 식단 혹은 체중에 관해서도 공유 혹은 기록해도 좋을 것 같다. + 일기도 쓸 수 있도록! 플랫폼과 일기는 별개로