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

업데이트 사항

• record 페이지를 만들어서 그날의 운동이 끝나면 기록을 보여주는 표 페이지를 만들었음
• 이 때, 시맨틱 태그에 유의하면서 만들어봤음(오늘 해당 내용을 공부했으므로 ㅎㅎ) => 코드 확인 가능 링크
• 랜딩페이지 -> 메인 페이지 -> 레코드 페이지로 가는 로직을 그림으로 보면 다음과 같다
  
  : 이렇게 운동을 정하고 burning을 누르면
  
  : 내가 선택한 운동들이 뜨고, 세트는 내가 직접 추가했다
  
  : 마지막으로 record 페이지의 모습인데, 아직 프레임만 짜뒀다. 음 목적자체가 친구와 공유하기 위한 것이라서 카메라에 한번에 담길 정도면 좋긴 하겠지만 이걸 커뮤니티화해서 공유할 수 있도록 다시 프레임을 짤거니까 상관없다. 랜딩페이지 -> 메인 페이지 -> 레코드 페이지 까지의 로직은 개인을 위한 부분이다. 운동을 선택, 직접 실행, 오늘의 결과를 볼 수 있도록 하는 기능!. 그리고 이제 이걸 기록할 수 있게 해야한다.

추가할 사항

• 레코드 페이지 css 작성해야함
• 오늘 진행한 운동의 개수에 더해서 여태까지 기록을 깬 운동 종목 및 기록을 보여주고, 여태까지 운동을 몇일 연속으로 하고 있는지를 보여줘야한다. 이걸 백엔드 구현하고 할지 일단 로컬 스토리지에서 진행할지는 미정
• 슬슬 백엔드 시작하자.
• 테이블 태그 시맨틱하게 작성하는 법 혹은 웹 표준성 지키는 방법 관련해서 공부하자

PS

: 엉성하지만? 오늘 이부분을 설계한 노트

배운점

• 시맨틱 태그를 쓰다보니까 리액트에서 css module을 쓰는 이유인 다른 컴포넌트와 겹치지 않게 할수가 없었다. 그러나 방법을 찾은게 page 단위로 div 태그로 묶고, 해당 div 태그에 클래스명으로 특정 페이지 명을 적어주고, 그 div 태그의 자식요소로 셀렉팅을 하면 된다. 예를 들어,

  
  .recordPage main{
  	background-color:yellow
  }
  
  

: 이렇게 해주면 main 태그중 레코드 페이지 부분만 노란색 배경처리가 된다.