msw api 연결 오류 문제 해결

[chaeeunj]

문제

PostLists 페이지 코드

// PostLists.jsx
import { useState } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import theme from '../style/theme';

import PostCard from '../components/PostCard';

const postStatusLists = [
  {
    title: '아직 결정하지 못한 고민들',
    postStatus: 'ongoing',
  },
  {
    title: '채팅 참여자가 많은 고민들',
    postStatus: 'mostChat',
  },
  {
    title: '투표 참여자가 많은 고민들',
    postStatus: 'mostVotes',
  },
];

function PostLists() {
  return (
    <ThemeProvider theme={theme}>
      <Wrapper>
        {postStatusLists.map((item, idx) => (
          <PostSection key={idx}>
            <SectionTitle>{item.title}</SectionTitle>
            <AllButton>전체보기 `></AllButton>`
            <PostCard postStatus={item.postStatus} />
          </PostSection>
        ))}
      </Wrapper>
    </ThemeProvider>
  );
}

export default PostLists;

게시글을 하나씩 불러오는 PostCard 컴포넌트

// PostCard.jsx
function PostCard({ postStatus }) {
  const [postData, setPostData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    fetch(`https://jsonplaceholder.typicode.com/posts?postStatus=${postStatus}`)
      .then((response) => {
        return response.json();
      })
      .then((json) => {
        setPostData(json);
      })
      .catch((error) => {
        console.log(`Something Wrong: ${error}`);
      });
  };

return (
  // UI 코드
  );
}

PostCard.propTypes = {
  postStatus: PropTypes.string.isRequired,
};

export default PostCard;

가로챌 api 와 mock 데이터를 작성해둔 msw의 handlers.js 파일

// handlers.js
import { rest } from 'msw';

export const handlers = [
  // PostLists 페이지 - 아직 고민중인 고민들
  rest.get(
    'https://jsonplaceholder.typicode.com/posts?postStatus=ongoing',
    async (req, res, ctx) => {
      return res(
        ctx.json([
          {
            writer: 'ongoing',
            post_id: 1,
            created_at: '2023-09-25',
            chat_count: 13,
            vote_count: 20,
            image_url: 'https://via.placeholder.com/600/92c952',
            title:
              'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            preview:
              'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
          },
          {
            writer: 'ongoing',
            post_id: 2,
            created_at: '2023-09-22',
            chat_count: 3,
            vote_count: 13,
            image_url: 'https://via.placeholder.com/600/771796',
            title: 'qui est esse',
            preview:
              'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
          },
          {
            writer: 'ongoing',
            post_id: 3,
            created_at: '2023-09-23',
            chat_count: 10,
            vote_count: 22,
            image_url: 'https://via.placeholder.com/600/24f355',
            title:
              'ea molestias quasi exercitationem repellat qui ipsa sit aut',
            preview:
              'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
          },
          {
            writer: 'ongoing',
            post_id: 4,
            created_at: '2023-09-09',
            chat_count: 12,
            vote_count: 14,
            image_url: 'https://via.placeholder.com/600/d32776',
            title: 'eum et est occaecati',
            preview:
              'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
          },
          {
            writer: 'ongoing',
            post_id: 5,
            created_at: '2023-09-24',
            chat_count: 7,
            vote_count: 19,
            image_url: 'https://via.placeholder.com/600/f66b97',
            title: 'nesciunt quas odio',
            preview:
              'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
          },
        ]),
      );
    },
  ),

  // PostLists 페이지 - 채팅 참여자가 많은 고민들
  rest.get(
    'https://jsonplaceholder.typicode.com/posts?postStatus=mostChat',
    async (req, res, ctx) => {
      return res(
        ctx.json([
          {
            writer: 'mostChat',
            post_id: 1,
            created_at: '2023-09-25',
            chat_count: 13,
            vote_count: 20,
            image_url: 'https://via.placeholder.com/600/92c952',
            title:
              'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            preview:
              'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
          },
          {
            writer: 'mostChat',
            post_id: 2,
            created_at: '2023-09-22',
            chat_count: 3,
            vote_count: 13,
            image_url: 'https://via.placeholder.com/600/771796',
            title: 'qui est esse',
            preview:
              'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
          },
          {
            writer: 'mostChat',
            post_id: 3,
            created_at: '2023-09-23',
            chat_count: 10,
            vote_count: 22,
            image_url: 'https://via.placeholder.com/600/24f355',
            title:
              'ea molestias quasi exercitationem repellat qui ipsa sit aut',
            preview:
              'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
          },
          {
            writer: 'mostChat',
            post_id: 4,
            created_at: '2023-09-09',
            chat_count: 12,
            vote_count: 14,
            image_url: 'https://via.placeholder.com/600/d32776',
            title: 'eum et est occaecati',
            preview:
              'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
          },
          {
            writer: 'mostChat',
            post_id: 5,
            created_at: '2023-09-24',
            chat_count: 7,
            vote_count: 19,
            image_url: 'https://via.placeholder.com/600/f66b97',
            title: 'nesciunt quas odio',
            preview:
              'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
          },
        ]),
      );
    },
  ),

  // PostLists 페이지 - 투표 참여자가 많은 고민들
  rest.get(
    'https://jsonplaceholder.typicode.com/posts?postStatus=mostVotes',
    async (req, res, ctx) => {
      return res(
        ctx.json([
          {
            writer: 'mostVotes',
            post_id: 1,
            created_at: '2023-09-25',
            chat_count: 13,
            vote_count: 20,
            image_url: 'https://via.placeholder.com/600/92c952',
            title:
              'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            preview:
              'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
          },
          {
            writer: 'mostVotes',
            post_id: 2,
            created_at: '2023-09-22',
            chat_count: 3,
            vote_count: 13,
            image_url: 'https://via.placeholder.com/600/771796',
            title: 'qui est esse',
            preview:
              'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
          },
          {
            writer: 'mostVotes',
            post_id: 3,
            created_at: '2023-09-23',
            chat_count: 10,
            vote_count: 22,
            image_url: 'https://via.placeholder.com/600/24f355',
            title:
              'ea molestias quasi exercitationem repellat qui ipsa sit aut',
            preview:
              'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
          },
          {
            writer: 'mostVotes',
            post_id: 4,
            created_at: '2023-09-09',
            chat_count: 12,
            vote_count: 14,
            image_url: 'https://via.placeholder.com/600/d32776',
            title: 'eum et est occaecati',
            preview:
              'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
          },
          {
            writer: 'mostVotes',
            post_id: 5,
            created_at: '2023-09-24',
            chat_count: 7,
            vote_count: 19,
            image_url: 'https://via.placeholder.com/600/f66b97',
            title: 'nesciunt quas odio',
            preview:
              'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
          },
        ]),
      );
    },
  ),
];

postStatus 값을 props로 받아서 매번 다른 msw api에 연결해 해당 값을 가져오도록 코드를 작성했는데, 'ongoing', 'mostChat', 'mostVotes' 총 3가지의 postStatus중 첫 번째 값인 'ongoing' 값으로만 렌더링되는 문제가 있습니다.

postStatus 값에 따라 컴포넌트가 다르게 렌더링되는 것을 확인하기 위해 작성자 이름을 postStatus 값으로 지정했는데, 위의 사진처럼 전부 by. ongoing 으로 렌더링되어 문제의 원인을 찾아보았습니다.

---

원인 1. useEffect의 의존성 배열이 빈 배열로 되어있던 것

처음 컴포넌트를 생성해서 fetchData() 코드를 작성했을 때는 api를 한 가지만 사용했기 때문에 의존성 배열을 빈 배열로 작성하면 처음 렌더링 될 때만 fetchData() 함수가 실행되어 해당 데이터를 문제 없이 받아올 수 있지만, props에 따라 다른 데이터 값을 받아오기 위해서는 의존성 배열에 'postStatus' 를 넣고, 넘어오는 props 값이 달라질 때 마다 fetchData() 함수를 실행하여 해당하는 데이터를 가져오도록 해야합니다.

수정 코드

// PostCard.jsx
  useEffect(() => {
    fetchData();
  }, [postStatus]);

원인 2. 요청 핸들러의 URL에서 쿼리 매개변수를 사용했던 것

개발자 도구 콘솔창에 해당 메세지가 뜨며 경고하고 있음을 알 수 있습니다.

1. "Found a redundant usage of query parameters": MSW가 요청 핸들러에서 쿼리 매개변수를 사용하는 방식이 중복되고 있음을 나타냅니다. 2. "in the request handler URL for 'GET https://jsonplaceholder.typicode.com/posts?postStatus=ongoing'": 이 부분에서는 중복된 쿼리 매개변수가 포함된 요청 핸들러의 URL을 가리킵니다. 3."Please match against a path instead": MSW는 URL 대신 경로 (path)에 대한 매칭을 사용하고, 쿼리 매개변수는 응답 해결 함수 내에서 req.url.searchParams를 통해 접근하라고 권장하고 있습니다.

• 출처 : chat GPT

수정 코드

// handlers.js
export const handlers = [
  // PostLists 페이지 - 아직 고민중인 고민들, 채팅 참여 많은, 투표 참여 많은
  rest.get(
    'https://jsonplaceholder.typicode.com/posts',
    async (req, res, ctx) => {
      const postStatus = req.url.searchParams.get('postStatus');
      return res(
        ctx.json([
          {
            writer: postStatus,
            post_id: 1,
            created_at: '2023-09-25',
            chat_count: 13,
            vote_count: 20,
            image_url: 'https://via.placeholder.com/600/92c952',
            title:
              'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
            preview:
              'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
          },
          {
            writer: postStatus,
            post_id: 2,
            created_at: '2023-09-22',
            chat_count: 3,
            vote_count: 13,
            image_url: 'https://via.placeholder.com/600/771796',
            title: 'qui est esse',
            preview:
              'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
          },
          {
            writer: postStatus,
            post_id: 3,
            created_at: '2023-09-23',
            chat_count: 10,
            vote_count: 22,
            image_url: 'https://via.placeholder.com/600/24f355',
            title:
              'ea molestias quasi exercitationem repellat qui ipsa sit aut',
            preview:
              'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
          },
          {
            writer: postStatus,
            post_id: 4,
            created_at: '2023-09-09',
            chat_count: 12,
            vote_count: 14,
            image_url: 'https://via.placeholder.com/600/d32776',
            title: 'eum et est occaecati',
            preview:
              'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
          },
          {
            writer: postStatus,
            post_id: 5,
            created_at: '2023-09-24',
            chat_count: 7,
            vote_count: 19,
            image_url: 'https://via.placeholder.com/600/f66b97',
            title: 'nesciunt quas odio',
            preview:
              'repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque',
          },
        ]),
      );
    },
  ),
];

중복된 쿼리 매개변수를 사용하지 않고 요청한 url의 'postStatus' params 값을 postStatus 변수에 저장하여 postStatus 값에 따라 다른 writer 값을 불러오게 수정했습니다.

해결 완료 φ(゜▽゜*)♪

[oinochoe]

@chaeeunj 정리가 너무 좋습니다. 포트폴리오 준비할 때 트러블 슈팅에 꼭 넣어주세요 😄 감동~

마크다운 형식인 블로그에 그대로 복사해서 넣으셔도 좋겠네요 ㅎㅎ

맞습니다. API 호출에 변경점인 주요한 변화가 있는 것을 감지하려면 dependencies를 활용해주세요.