이 때, 시맨틱 태그에 유의하면서 만들어봤음(오늘 해당 내용을 공부했으므로 ㅎㅎ) => 코드 확인 가능 링크
랜딩페이지 -> 메인 페이지 -> 레코드 페이지로 가는 로직을 그림으로 보면 다음과 같다
: 이렇게 운동을 정하고 burning을 누르면
: 내가 선택한 운동들이 뜨고, 세트는 내가 직접 추가했다
: 마지막으로 record 페이지의 모습인데, 아직 프레임만 짜뒀다. 음 목적자체가 친구와 공유하기 위한 것이라서 카메라에 한번에 담길 정도면 좋긴 하겠지만 이걸 커뮤니티화해서 공유할 수 있도록 다시 프레임을 짤거니까 상관없다. 랜딩페이지 -> 메인 페이지 -> 레코드 페이지 까지의 로직은 개인을 위한 부분이다. 운동을 선택, 직접 실행, 오늘의 결과를 볼 수 있도록 하는 기능!. 그리고 이제 이걸 기록할 수 있게 해야한다.
추가할 사항
레코드 페이지 css 작성해야함
오늘 진행한 운동의 개수에 더해서 여태까지 기록을 깬 운동 종목 및 기록을 보여주고, 여태까지 운동을 몇일 연속으로 하고 있는지를 보여줘야한다. 이걸 백엔드 구현하고 할지 일단 로컬 스토리지에서 진행할지는 미정
슬슬 백엔드 시작하자.
테이블 태그 시맨틱하게 작성하는 법 혹은 웹 표준성 지키는 방법 관련해서 공부하자
PS
: 엉성하지만? 오늘 이부분을 설계한 노트
배운점
시맨틱 태그를 쓰다보니까 리액트에서 css module을 쓰는 이유인 다른 컴포넌트와 겹치지 않게 할수가 없었다. 그러나 방법을 찾은게 page 단위로 div 태그로 묶고, 해당 div 태그에 클래스명으로 특정 페이지 명을 적어주고, 그 div 태그의 자식요소로 셀렉팅을 하면 된다. 예를 들어,