feat: 데이터 API 요청 처리

[bytrustu]

작업 주제

• 데이터 API 요청 처리 #7

작업 내용(어떤 부분을 리뷰어가 집중해서 봐야할까요?)

• 더미 데이터와 데이터 유틸 함수를 추가했습니다. 2aed2ea
• msw request handlers를 추상화하여 mockServer 함수를 추가했습니다. ab4a66b
• toss.tech 메인/아티클 페이지의 API 함수를 추가했습니다. ab4a66b

화면 스크린샷

관련 Docs

wiki: https://github.com/f-lab-edu/toss-tech-router/wiki/04.-%EB%8D%B0%EC%9D%B4%ED%84%B0-API-%EC%9A%94%EC%B2%AD-%EC%B2%98%EB%A6%AC

추가 코멘트

• 더미 데이터의 유틸 함수의 테스트코드를 작성해보았어요. src/lib/utils/articleUtils.test.js

체크리스트(PR 올리기 전 아래의 내용을 확인해주세요.)

• base, compare branch가 적절하게 선택되었나요?
• 로컬 환경에서 충분히 테스트 하셨나요?

리뷰 규칙

• P1: 꼭/적극적 반영해 주세요 (Request changes)
• P2: 웬만하면 반영해 주세요 (Comment)
• P3: 반영해도 좋고 넘어가도 좋습니다 (Approve)

[bytrustu]

@leeyun1533 @Muscardinus94
안녕하세요. 프롬님. 제형님.

데이터 fetch 작업을 완료해서 PR 드렸어요.
다음 단계로 UI 구현을 진행하겠습니다!

리뷰 부탁드립니다. 감사합니다! 🙇‍♂️

[Muscardinus94]

결과값이 undefined도 좋지만 명시적으로 null 값을 반환하는것도 좋은거 같아요 :)

Suggested change

	export const getArticleDetailById = (id) => ARTICLE_DETAILS.find((article) => article.id === id);
	export const getArticleDetailById = (id) => ARTICLE_DETAILS.find((article) => article.id === id) ?? null;

[bytrustu]

결과값이 undefined도 좋지만 명시적으로 null 값을 반환하는것도 좋은거 같아요 :)

명시적으로 null 값을 반환하는 것도 좋겠네요!
이 부분도 반영해 보겠습니다. 리뷰 감사합니다. 🙆🏻

[leeyun1533]

고생 많으셨습니다!

[leeyun1533]

P3: 아마 실무에서는 ErrorBoundary 또는 다른 방법으로 error를 캡처하실 것 같은데요, axios interceptor를 통해 에러를 처리하시는 것 어떠실까요? 시간이 되신다면 센트리 로그 설계까지 부탁드리고 싶지만 이부분은 다음 프로젝트 때 하셔도 무방합니다!

[bytrustu]

P3: 아마 실무에서는 ErrorBoundary 또는 다른 방법으로 error를 캡처하실 것 같은데요, axios interceptor를 통해 에러를 처리하시는 것 어떠실까요? 시간이 되신다면 센트리 로그 설계까지 부탁드리고 싶지만 이부분은 다음 프로젝트 때 하셔도 무방합니다!

UI구현 이후에 axios를 사용하여 데이터 핸들링 해보겠습니다.
sentry를 활용해보지 못했어서 프로젝트 마무리되면 찾아봐야겠어요. 🙆🏻

[leeyun1533]

👍 👍 추후 프로젝트에도 이함수는 계속 사용될 것 같아요.
참고로 oas generator 같은 친구들을 사용하면 api function, msw 등을 자동화할 수 있습니다.

[leeyun1533]

P3: 이미 잘 작성해주셨는데요! 가독성 측면에서 describe 중첩등 살짝 개선해보았습니다.

만약 에러 상태까지 테스트 한다면 이 테스트도 상당히 발전할 수 있을 것 같아요

import { getArticleList, getArticleDetailById } from './articleUtils';
import { ARTICLE_DETAILS, ARTICLES } from './constant';

describe('getArticleList 함수를 테스트합니다.', () => {
  test('Article List를 가져옵니다.', () => {
    const articles = getArticleList();
    expect(articles).toEqual(ARTICLES);
  });
});

describe('getArticleDetailById 함수를 테스트합니다.', () => {
  test('id가 1인 Article Detail 데이터를 정상적으로 가져오는지 확인합니다.', () => {
    const id = 1;
    const expectedArticle = ARTICLE_DETAILS[2];
    const article = getArticleDetailById(id);
    expect(article).toEqual(expectedArticle);
  });

  test('id의 Article Detail 데이터가 없을 경우 null이 반환되는지 확인합니다.', () => {
    const id = 0;
    const article = getArticleDetailById(id);
    expect(article).toBe(null);
  });
});

[bytrustu]

P3: 이미 잘 작성해주셨는데요! 가독성 측면에서 describe 중첩등 살짝 개선해보았습니다.

만약 에러 상태까지 테스트 한다면 이 테스트도 상당히 발전할 수 있을 것 같아요

import { getArticleList, getArticleDetailById } from './articleUtils';
import { ARTICLE_DETAILS, ARTICLES } from './constant';

describe('getArticleList 함수를 테스트합니다.', () => {
  test('Article List를 가져옵니다.', () => {
    const articles = getArticleList();
    expect(articles).toEqual(ARTICLES);
  });
});

describe('getArticleDetailById 함수를 테스트합니다.', () => {
  test('id가 1인 Article Detail 데이터를 정상적으로 가져오는지 확인합니다.', () => {
    const id = 1;
    const expectedArticle = ARTICLE_DETAILS[2];
    const article = getArticleDetailById(id);
    expect(article).toEqual(expectedArticle);
  });

  test('id의 Article Detail 데이터가 없을 경우 null이 반환되는지 확인합니다.', () => {
    const id = 0;
    const article = getArticleDetailById(id);
    expect(article).toBe(null);
  });
});

제가 작성한 내용보다 훨씬 깔끔해진 것 같아요! 👍
오류 상황 테스트 코드를 조금 더 추가해서 반영해 보았습니다.

[bytrustu]

두 분 다 리뷰 감사합니다!
axios 반영은 마무리 작업으로 진행해 볼게요.