정권찌르기[리팩토링 1일차]: 컴포넌트 분리하기

취업을 위한 정권 찌르기.. 오늘의 할일은

1. 프로젝트 코드 리팩토링

💥문제:

1. 분리하지 못한 컴포넌트

• 자율 프로젝트 당시 점점 쌓여가는 기술부채로 인해 두려움을 느꼈었는데.. 기술 부채의 정점을 찍은 컴포넌트가 있었으니...
  
  Editorhead로 표시한 컴포넌트...
  프로젝트 당시 기능 개발 후 컴포넌트를 분화할려고 기능을 다 넣어버렸더니 1000줄이 넘어버려서 남이 보고 코드를 수정할 수 없는 컴포넌트가 되어있었다..
  

2. 라이브러리 없이 구현한 달력

• 아마 줄이 길어진 원인 1등 공신은...
  date picker 없이 예약 발행시간을 만들어 보겠다는 다는 알 수 없는 나의 의지가 아니였을까 싶다.
  당시에는 라이브러리 설치하고 익혀서 내가 원하는 대로 쓰는게 러닝커브 때문에 시간이 더 오래 걸리꺼라 생각 했는데..
  내 생각에 예외 처리한다고 걸린 시간 생각하면 비슷할 것 같다.
  
  사진에 보이는 예약 날짜를 만들기 위해 약 두시간 정도 걸려 하드 코딩 했던 것으로 기억했는데 윤년도 처리를 해줘야 했기 때문에 짜면서 어지러웠던 기억이 있다..
  프로젝트 마감 하루전에 구현하였기에 완벽하게 예외처리가 되어있는지 점검할 필요성이 있고 하드코딩한 예약 날짜를 쓰는게 나을지, date picker 라이브러리를 도입하여 사용하는게 나을지 고민하며 리팩토링을 진행 할 예정이다.

3. 사이트 성능 측정

• 이전 프로젝트를 같이 한 친구에게 리팩토링을 한다고 말하니 최적화도 함께 해보는데 어떠냐고 해서 리팩토링 이전 light house로 성능 측정도 함께 해보았다.
  

• 퍼포먼스:
  

• 접근성:
  
  
  

• best practice:
  

• SEO:
  

이러한 이유로 처참한 성능 점수를 받게 되어... 최적화도 함께 진행 하려고 한다!

🥅목표:

1. 주석 달기

2. 컴포넌트 분리하기

3. 예약 날짜 설정 예외처리 확인하기

⚽결과:

1. 주석달기

2. 컴포넌트 분리하기

3. 예약 날짜 설정 예외처리 확인하기

: 현재 날짜보다 이전의 날짜를 예약시간으로 설정 하면 안되기 때문에 버튼을 클릭 했을때 년,월,일,시간이 기준시간(현재시간)과 동일한 경우 다른 요소들이 현재 값보다 작을 때 현재 값으로 만들도록 코드에 예외 처리를 진행 하였다.