[FE - ConnecTo] DAY58 TIL👩🏻‍💻

22.10.04 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

• 처음 상태로 관리하려고 했던 조건들이 너무 많은 것 같아서, 줄일 수 있는 방법을 생각했고, 그 결과 turn값과 isEnd 값 두 가지만 이용하여 다시 구조를 짰다.
• 함수 이름을 함수 기능에 맞게 변경하였습니다. ex) initPlayer → setPlayer 처음 initPlayer 함수는 초기 player를 셋팅하기 위해서 사용했던 함수였는데, 초기 셋팅 이후로도 player가 누군지 알려주기 위해 많은 곳에서 사용하고 있어서, 리팩토링을 하면서 이름을 변경하였습니다.
  
• 그리고 여러번 사용하는 변수를 전역으로 사용하기 위해, 리팩토링을 하면서, render해주는 함수를 제일 위로 끌어올려서, 전역 변수를 선언하고, 반복되는 공통 부분을 제거하였습니다.
• 리팩토링 때, 코드의 가독성을 높기기 위해서 이벤트 핸들러를 분리하였습니다.
• isEnd라는 게임 종료 여부를 나타내는 상태를 관리하여, 코드 양도 줄이고, 코드의 가독성도 높였습니다.

• nav, newsList 등등 각 역할에 맞게 분리
  • 처음에는 nav에서 newsList의 요소까지 동적으로 생성을 하고 App.js 에서 nav에 대한 이벤트를 등록했다.
  • 리팩토링 후에는 nav에서는 nav에 대한 일만, newsList에서는 newList에 대한 일을 하도록 역할을 명확하게 분리했다.

PAGE_SIZE = window.innerHeight > 1000 ? 10 : 5;

• NewsList가 호출될 때 마다 viewport에 따른 render되는 뉴스 개수 조건을 추가했다.

• calendar가 다른 calendar의 input 클릭시, 기존 calendar가 display: none 이 되는 현상이 있었는데 input에 관한 조건문을 추가해줌으로서 이를 해결하였다.