Make study group list Page

[saseungmin]

🚀 스터디 목록 구현하기 (홈 화면)

• json-server를 사용하여 데이터 가져오기
• redux-toolkit을 사용하여 redux 적용하기
• 스터디 그룹 리스트가 화면에 나타나게 하기
• CSS는 제외하고 기능 구현먼저.

[saseungmin]

• 추가적인 작업이 필요하다.
  (현재는 title만 띄워지지만 링크 추가 및 추가적인 group 상세 정보? 화면에 나타나기)
• 컴포넌트도 분리해주자.

[saseungmin]

• 좀 더 생각해보자.
• https://jestjs.io/docs/en/mock-functions#mocking-modules
• axios-mock-adapter

[hannut91]

describe('api', () => {
  describe('getStudyGroups', () => {
    beforeEach(() => {
      axios.get.mockResolvedValue({ data: STUDY_GROUPS });
    });

    it('returns study groups', async () => {
      const groups = await getStudyGroups();

      expect(groups).toEqual(STUDY_GROUPS);
    });
  });
});

[saseungmin]

• 계속 하다보니까 커밋을 계속 미뤄버렸다..
  그래서 마지막 커밋은 한꺼번에 많은 내용을 커밋하고 말았다.
  신경써서 커밋을 해야겠다.

[saseungmin]

• pull request를 조금 더 작은 단위로 나눠보자. 😅
  너무 크게 잡아버렸다.
  다음 PR부터는 구현할 기능 단위로 나눠봐야겠다.

[hannut91]

map이라는 더 명시적인 함수를 이용해서 표현해주면 좋을 것 같아요\

const range = (length) => Array.from({ length }, (, i) => i);
const randomMonth = () => Math.floor((Math.random() * (11 - 1)) + 1);
const randomDay = () => Math.floor((Math.random() * (30 - 1)) + 1);

module.exports = () => {
  const groups = range(30)
    .map((i) => {
      const month = randomMonth();
      const day = randomDay();

      return {
        id: i,
        moderatorId: `user${i}`,
        title: `스터디를 소개합니다. ${i}`,
        applyStartDate: `2020-${month}-${day}`,
        applyEndDate: '2020-12-3',
        personnel: month,
        contents: `우리는 이것저것 합니다.${i}`,
        tags: ['JavaScript', 'React', 'Algorithm'],
      }
    });

  return { groups };
}

[hannut91]

describe('api', () => {
  describe('getStudyGroups', () => {
    beforeEach(() => {
      axios.get.mockResolvedValue({ data: STUDY_GROUPS });
    });

    it('returns study groups', async () => {
      const groups = await getStudyGroups();

      expect(groups).toEqual(STUDY_GROUPS);
    });
  });
});