[Dev-Log] 박진현 2021-12-12

### 오늘 한 것

### ArtList 필터링 구현
작품리스트내에 필터링이란 컴포넌트를 만들고 작품리스트에서 필터링핸들링을 props로 내려줘서 바뀐 필터를 요청하게 해놨다.
### ArtList 좋아요 구현
처음엔 작품목록을 아트리스트 컴포넌트 안에서 바로 뿌려줬었는데 이러면 하트에 대한 상태가 따로따로 관리가 안되어서 작품 하나하나를 컴포넌트로 만들어서 뿌려줬다.
### ArtDetail 좋아요 구현
이 부분은 작가상세페이지 좋아요랑 똑같이 구현했다. useEffect로 해당 작품의 likes배열에 localStorage에 있는 userInfo의 아이디가 들어있는지 여부에 따라 좋아요 state를 boolean값으로 바꾸고, 해당 버튼을 클릭하면 aiox요청을 통해 db에 있는 값을 바꾸고 , 좋아요 state도 변경하여 재랜더링 되게 했다.
```tsx
useEffect(() => {
// axios 요청
const userInfo = localStorage.getItem('lumiereUserInfo');
instance
.get(
`/artists/${window.location.href.split('artistdetail/')[1]}`,
)
.then((res) => {
setArtistInfo([res.data].flat());
setIsLiked(
!![res.data][0].artistDetail.likes.find(
(el) => el === JSON.parse(userInfo || '{}')._id,
),
);
})
.catch((err) => {
console.log(err);
});
}, []);
```
### 모든페이지 페이지네이션
'react-js-pagination' 라이브러리를 사용해서 페이지네이션을 구현하였다. 서버에 axios요청을 하면
이런식으로 현재페이지와 전체페이지를 받는데, 이걸 아래와 같이 컴포넌트로 간단하게 구현했다. 역시 라이브러리는 편한 것 같다.
```tsx
import Pagination from 'react-js-pagination';
import { PaginatorWrap } from './styled';

interface GreetingProps {
curPage: number;
totalPages: number;
pageChangeHandler: (page: number) => void;
}
const PageNation = ({
curPage,
totalPages,
pageChangeHandler,
}: GreetingProps) => {
return (



);
};
export default PageNation;

```

### 오늘의 느낀점
서버에서 뭔가 바뀔때마다 타입을 수정해줘야해서 타입스크립트는 정말 힘든 것 같다.. 그래도 쓰면 편한부분이 더 많아서 앞으론 절대 바닐라 자바스크립트로 코드를 짜진 않을 것 같다.