실전프로젝트 5주차 회고

week12

 

이제 기능개발을 거의 끝나서 추가 작업이나 기존 코드를 가독성 좋게 리팩토링을 신경써야될 단계인거 같다.

어떤 방식으로 리팩토링을 해야될지 조금 막막한거 같다...

리팩토링에 대해 좀 찾아보고, 좋은 방식이란게 있는지, 왜 그렇게 썼는지 그런것들을 생각 하면서 코드를 짜는 연습을 많이 해야될꺼 같다.

이번주에는 리팩토링에 대해서 찾아보고 정리하는 주간으로 정하자~!!

 

 

- 실전 프로젝트를 진행하며 기술적으로 막혔던 부분이 있다면 무엇인가요? 해결했다면 어떻게 해결했는지 과정을 작성해주세요

알림 기능에 막혔던 부분을 적어보자~ 

 

예약된 날 표시
트러블 슈팅
- 예약이 있는날을 db에서 가져와 패키지에서 자체적으로 유무를 판별 한다.
- 유무를 반펼하는곳에서 available의 값을 true로 바꿔서 캘린더에서 정보가 있는지 없는지 판단한다.
- 하지만 db에서 저장하기 전에 시간 버튼을 누르면 availble의 값은 true로 바뀌여, availble의 값만으로 db에 저장이 되어있는 값인지 확인하기가 힘들다.
- 그래서 save라는 값을 생성해 db에서 가져온값에만 true로 바꿔줘서 저장되 있는 지 유무를 판별해서 button의 스타일과 정보표시를 다르게 해주었다!

 

 

 

트러블 슈팅

* 저장된 예약 일정을 예약됨이라고 표시하는 부분에서 막히는 부분이 있습니다.

* 문제는 시간을 클릭하게 되면 availble의 값이 db에 저장이 되지도 않는데 값이 true로 바뀌는 현상이 있다.

avaiability-calendar-react 패키지에서는 useState로 값을 추가 삭제해서, 클라이언트측에 값이 있는지 없는지 표시 해준다.

  const [availability, setAvailability] = React.useState([]);

setsetAvailability를 통해 선택한 값을 추가하거나 제거 해준다.
값이 있으면 available의 값은 true로 변경이 되면서, 클라이언트쪽에서 표시가 된다.

 

 const times = [
      {
        time: '0:00',
        available: false,
      },
      {
        time: '1:00',
        available: false,
      },
      {
        time: '2:00',
        available: false,
      },
      ...
]

처음 접근 방법으로는 available의 값으로 값이 있으면 예약이 있다는 표시를 해주었는데, 시간을 클릭하자 마자 available의 값이 true로 바뀌어, DB에 저장 되기도 전에 "예약됨" 이라고 떳다.
두번째 접근 방법은 DB에 있는 데이터를 판별하기 위해서 기준이 필요하다는 생각이 들었다. 그래서 위해 있는 times에 key값을 하나 추가하여 DB에 저장되있는 데이터인지 유무를 판별하는것이다.

const times = [
     {
        time: '0:00',
        available: false,
        save: false,
      },
      {
        time: '1:00',
        available: false,
        save: false,
      },
      {
        time: '2:00',
        available: false,
        save: false,
      },
      ...
]

이렇게 save라는 값을 추가 해주어 DB에서 데이터를 불러와서 값이 있으면 save의 값을 true로 바꾸어주어, 캘린더에서 삼항 연산자로 값이 true면 예약됨이라고 띄워주어 비활성화된 버튼을 보여주고, 아니면 선택할수 있도록 만들어 주었다.

function TimeButton({ className, start, end, available, handleClick, save }) {
    return (
      <>
        {save ? (
           <button
            style={{
              color: '#fff',
              background: '#aaaaaa',
            }}
            onClick={handleClick}
            disabled={save ? 'disabled' : ''}
          >
            예약이 있습니다.
          </button>
        ) : available ? (
         <Button
           onClick={handleClick}
           color='primary'
           className={className}
           variant={'contained'}
           disabled='disabled'
            >
           {start} - {end}
           </Button>
        ) : (
          <Button
           onClick={handleClick}
           color='default'
           className={className}
           variant={'contained'}
           disabled='none'
            >
           {start} - {end}
           </Button>
        )}
      </>
    );
  }