26.2.2 포스트 목록 조회 API 연동하기

    PostList 컴포넌트에서 실제 데이터를 보여 줄 수 있도록 API를 연동해 봅시다. 우리가 사용할 list APIusername, page, tag 값을 쿼리 값으로 넣어서 사용합니다. API를 사용할 때 파라미터로 문자열들을 받아 와서 직접 조합해도 되지만, 여기서는 qs 라이브러리를 사용하여 쿼리 값을 생성하겠습니다. 이 라이브러리를 사용하면 쿼리 값을 더 편리하게 생성하고 JSON으로 변환할 수 있습니다.

    yarn으로 qs를 설치하세요.

    $ yarn add qs

    그리고 lib/api/posts.js 파일에 다음 함수를 추가하세요.

    lib/api/posts.js

    import qs from 'qs';
    import client from './client';
    
    export const writePost = ({ title, body, tags }) =>
      client.post('/api/posts', { title, body, tags });
    
    export const readPost = id => client.get(`/api/posts/${id}`);
    
    export const listPosts = ({ page, username, tag }) => {
      const queryString = qs.stringify({
        page,
        username,
        tag,
      });
      return client.get(`/api/posts?${queryString}`);
    };

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.