: 점진적 과부하 사이트(앱)가 완전히 리모델링 됐고, 현재 운동 기록 부분 기능까지 완성을 한 상태인데, 그간 생겼던 이슈에 대해서 간단히 짚고 넘어가고자 한다.
** 링크(개발자 도구로 모바일 크기로 보시는걸 추천 드립니다) : https://bit.ly/3pFDC0V
배운점
1) 위에 그림에 보이는 finish 버튼은 내가 'GlowBtn'으로 명명한 컴포넌트인데, :before, :after 이렇게 이렇게 두개의 레이어를 추가해서 만들면서, :before에 'linear-gradient' 속성과 'filter: blur(5px);' 속성을 이용해서 효과를 줬다. 물론 keyframe과 animation 효과도 사용해서 그라디언트 효과를 준 색깔이 움직이게 했다. 근데, 이 때 발생했던 이슈가 'filter: blur' 속성이 모바일에서는 작동(?)하지 않는 것이었다. 모바일에서는 해당 css 속성이 인식되지 않는 문제가 발생해서 webkit 부분에 따로 속성을 걸어주고, 추가 속성을 적용해서 해결했다
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);2) 또한, 정말 이거는 JS 개발자로서 창피한(?)일이기도 하지만, 이전에는 spread syntax를 써오다가 Object.assign을 바탕으로 객체를 깊은 복사를 하려다가 'const newObj = Object.assign({},obj);' 이러한 문법을 'const newObj = Object.assign(obj,{});' 이렇게 잘못써서 문제가 발생했다. 본래 새로 만들려는 객체를 매개변수의 첫번째로 넣어주고, 두번째에 복사를 하려는 객체를 넣어줘야하는데, 그 반대로 해줘서 setState가 적용되지 않는 이슈가 발생해서 애먹었다.. 이런걸 헷갈리다니 반성하자..ㅎ
3) MDN을 참고하면 알 수 있는 사실이지만 'KeyboardEvent.keyCode' 는 더이상 사용하지 않기를 권장한다(deprecated). 그래서 KeyboardEvent.key를 대신 사용하고, 이 때, 이전처럼 키코드가 리턴되는 것이 아닌 예를 들어, 이전에는 엔터키를 조건문으로 조회하려면 'if(e.keyCode === 13)' 이런식으로 써줬는데, 이제는 'if(e.key === "Enter")' 이렇게 써주면 된다.
4) 간단한 사실이지만 모바일에서는 브라우저용 css 속성을 따로 처리해줘야하는 부분이 꽤 많은 것 같다. 그중에서 'position: -webkit-sticky;' 이것을 알게 됐다. position:sticky;를 모바일에서 적용시키려면 이렇게 다로 설정을 해줘야한다.
고칠점
1) 해쉬 테이블 형태의 자료구조로 운동 기록을 기록하다보니(JS로 치면 객체), 만약에 운동 이름을 수정하면 순서가 자동으로 뒤바뀌는 문제가 발생했다. 즉, 현재 Object.keys()를 통해 key값을 배열로 만든 다음에 운동기록을 나열하도록 설계해놨는데, 이렇게 했을 때 key값인 운동 이름을 수정하면 자동으로 알파벳 순으로 순서가 뒤바뀌게 되는데, UX 적으로 부적절하므로 수정이 필요하다.
2) 
: 본래 이런식으로 테이블 형태로 결과를 보여주려했는데, 생각해보니까 만약에 악의적(?)까지는 아니고 ㅎㅎ 특정 운동을 20세트 이상하시는 분이 계실 수 있을텐데, 그런분들을 고려했을 때 테이블의 UI가 애매해질 것이라는 판단하에 단순히 flex를 이용해서 위에서부터 세로로 나열하는 방식으로 보여주는 것이 낫다고 판단했다. 
: 그래서 위와 같은 UI로 바꿨다.
