처음 시작 단계
새싹팀 야구 경기를 기록하는 사이트를 만들어야지
경기를 보다보면 아웃 상황이나 점수를 알기가 어려움
근데 현장에 오지 못한 지인들에게 정보를 실시간으로 공유해줘야함
경기 점수는 알려주는데 신뢰가 안갈때가 있음
내가 현장에서 직접 기록해야징
뭘 기록해야 잘 보여줄 수 있을지 고민됨
투수는 삼진아웃 방어율 던진 공 갯수
타자는 타석 안타 타점
도루는 없지만 포수 공 빠졌을 때 뛸 수 있으니 주자 움직임도 기록해야함
현장은 어떻게 하는지 실제 야구 기록지 찾아보고 현타옴
전문가여야 작성할 수 있을 것 같은 느낌이 나서 겁먹음
위에서 받은 느낌대로 내 맘대로 기록지를 만듬
공 하나 던질 때 : 투수 타자 1루수 2루수 3루수 가 움직임
투수 타자는 한 세트로 움직이고
주자들은 독립적으로 움직임
투수는 스트라이크 볼 데드볼 선택할 수 있고
타자는 파울 스윙 안타 2루타 3루타 홈런 그라운드홈런 내야아웃 외야아웃 선택할 수 있고
1루 주자는 1루=>2루 3루 홈 아웃
2루 주자는 2루=>3루 홈 아웃
3루 주자는 3루=>홈 아웃
선택할 수 있음
여기까지 정의하고 뷰를 통해 만들기 ㄱㄱ
경기 기록 화면
뷰로 만들려는데 디자인이 너무 어려움
뷰티파이 좋다길래 사용결정
뷰티파이쓰면 머테리얼 디자인이라는데 개념이 없다보니 내맘 같이 안됨
c# 윈폼과의 차이를 가장 크게 느낌
어쨌든 그냥저냥 컴포넌트를 붙여서 값을 입력받도록 만듬
대시보드 화면
입력받은 값을 대시보드처럼 보여주고 싶으니깐
입력받은 변수를 공용관리하려고 함
뷰엑스 좋다길래 사용 결정
state에 공용 변수 정의
기존 화면 입력값을 연동
대시보드 화면 생성
대시보드에서 공용 변수 값 가져와서 보여주도록 만듬
지금까진 로컬저장소에 저장해서 다른 사람은 값을 못봄
디비 연동 ㄱㄱ mysql
express 로 백엔드 만듬
axios로 통신 만듬
디비값 입력 및 조회 확인
경기 등록 화면
경기 및 선수 등록 기능 필요 ㅡ 투수 타자 등
경기 등록 화면 생성 및 개발
동영상 연동
경기 영상을 사이트에서 보고 싶다는 생각이 들음
영상에 맞춰 내가 기록한 내용이 반영되어 보여지면 좋겠음
뷰에 영상 가져오는 것 어려움 ㅡ 뭐가 뭔지 잘 모르겠음
어쨌든 html로 붙이고 영상의 현재 시간을 계속 가져온다음 그 시간에 맞춰 기록한 내용이 적용되도록 만듬
디자인
기능은 얼추 됐으나 안예쁨
디저이너랑 일하는 것처럼 해보고 싶음
피그마로 현재 티비 경기중계영상의 작은 상황판을 디자인 해봄
그림은 비슷하게 그렸는데 이걸 어떻게 웹에 적용함?!
하나씩 뜯어서?! 이렇게 일하고 있을 것 같진 않았음
피그마 플러그인 서치 ㅡ teleporthq
anima는 유료인듯
teleporthq 연동 후 뷰로 받아오니 거의 비슷함 ㅡ 와!!
근데 뷰티파이는 아니게 됨 ㅡ 어쩔수없지?
그리고 값 연동 확인
기존 대시보드도 디자인 다시 하기
