[React] qs 라이브러리 사용해서 posts 리스트 가져오는 작업순서 정리

• API에서 username, page, tag 값을 쿼리 값으로 넣어서 사용
• qs 라이브러리를 사용하여 쿼리 값을 생성
• qs를 사용하면 쿼리값을 더 편하게 JSON으 형태로 변환이 가능

$ yarn add qs

Front

src/lib/api/posts.js

export const listPosts = ({ page, username, tag }) => {
  const queryString = qs.stringify({
    page,
    username,
    tag,
  });
  return client.get(`/api/posts?${queryString}`);
};

• 요청시에는 /api/posts?username=tester&page=2와 같이 주소를 호출
• redux 모듈은 modules/posts.js에 생성
• modules/index.js에 만든 리듀서와 saga를 등록
• containers/posts/PostListContainer.js를 생성
• 기존 pages/PostListPage.js에 Container로 변경
• components/posts/PostList.js에 props 결과를 보여주도록 수정

Server

sanitize-html 을 추가

yarn add sanitize-html