[Fri/24/12/2021] Today I Learned

썸네일 새로 만들었다!

 

1. React movie project

(1) 영화 별점 로직 수정

별점 부분을 수정하느라 꽤나 많은 시간을 소요했다. 

Ant Design에서 별점(rating)을 가져와서 영화 별점을 매기는 것이었는데, 5점 만점 체계였다. 

그런데 나는 10점 만점 체계로 하고 싶었다.

처음에는 단순하게, 그냥 데이터도 5점 만점으로 저장하고 렌더링할 때만 2배로 해서 할까 싶었다. 

그러나 멘토로부터 피드백을 받았는데 DB와 UI의 일관성이 있어야 한다고 했다. 

그래서 다른 방법을 구상해 보기로 했다. 

우선 사용자가 입력한 rating을 db에 저장 시 2배로 저장해 줘야 한다. 

Ant Design 체계에서는 5점 만점에 4로 설정했더라도, db에서는 그게 8점으로 저장이 되어야 한다. 

그렇게 하기 위해 46번째 라인에서 values라는 객체(영화 하나의 정보가 들어 있는 객체)에서 rating을 2배로 설정한 후, 다시 values를 업데이트(할당)해준다. 이 업데이트가 된 values 객체를 onCreate 함수의 인자로 넘겨서 post 해준다. 그러면 별점이 제대로 등록된다.

그런데 수정 폼을 열었을 때는, 위와 같은 식으로 별점이 8점이지만 별은 4개가 채워져야 한다.

만약 별점이 5점이라면 별은 2.5개 채워져야 한다.

수정 전에는 별점이 5점이면 별이 5개 모두 채워져 있는 식이었다.

그래서 수정 폼을 별점의 1/2 만큼만 별이 채워져 있도록 수정해야 했다. 

Rate 컴포넌트를 통해서 rating 변수의 값이 정해지는데, 이 때에는 항상 5점 이하로 저장이 된다. 

그래서 values를 위의 rating으로 업데이트 해 주었다. 

또한 initialValues로 첫 값들을 채워줄 때에는 movie 객체의 rating 속성에 접근해 이것을 1/2 해줘서 별점을 그려주는 식으로 수정해 주었다. 

삼항 연산자를 중첩해서 사용해서, 수정 폼에서 영화 별점이 제대로 보여지지 않는 경우를 수정해 주었다. 

 

 

(2) 정렬 기능 업그레이드 

기존엔 영화를 연도 순으로 정렬할 때, 오름차순으로만 정렬이 되었다. 즉 옛날 영화부터 차례대로 정렬되는 식이었다. 옛날 영화의 연도 숫자가 최근 연도보다 작기 때문에 기본적으로 axios에서 제공하는 _sort를 파라미터로 전달하면 되었다. 

최근 순으로도 영화를 정렬할 수 있으면 좋을 것 같아서, 최근 순/예전 순으로 나눠서 영화가 정렬 수 있도록 수정해 보았다. 파라미터에 _order를 또 전달해 주었다.

그런데 useEffect를 많이 사용하고 있기도 하고, 중복되는 로직이 많아서 수정이 필요하다. 

 

(3) Ant Design 활용하여 수정 폼 구현하는 것 정리해보기

영화 수정 폼을 구현할 때 Ant Design을 활용했는데, 이 과정을 하나하나 되짚어 보면서 내가 어떻게 구현했는지를 복습해 보려고 한다. 

다음에 다시 구현할 때 찾아볼 수 있도록 이것은 따로 정리했다.

Ant Design 활용하여 수정 폼 구현하기

 

 

2. Sourcetree setup 

협업 프로젝트 할 때 소스트리를 사용해 보고 싶어서 셋업을 해 주었다. 

버전 관리가 좀 더 시각적으로 보이기 때문에 시도해보고 싶다. 

깃허브와 연동해서 이제 내가 가지고 있는 모든 레파지토리를 소스트리에서 관리할 수 있다.

내일은 좀 더 기능적으로 사용해보면서 GUI에 익숙해져 보려고 한다.