[wanted pre onboarding] 6번째 과제: API를 이용해 간단한 사이트 구현

배포: https://wanted-preonboarding-4.netlify.app/
과제 GitHub: https://github.com/NamgyungKim/wanted-codestates-project-3-4

과제: API를 이용해 간단한 사이트 구현

• 상단 Tab bar는 Click을 통해 각각의 Tab으로 이동할 수 있도록 구현
• 슬라이딩으로 새로나온컨텐츠 보여주기
• API로 제공하지 않는 like기능 구현, Local Storag로 저장
• 더보기 클릭시 컨텐츠 보여주기

✨ API로 제공하지 않는 like기능 구현, Local Storag로 저장

• 다음은 처음 사이트르 방문시 api를 store에 넣어주는 action이다.
  처음에 API를 store에 저장할때 isClick라는 key값을 넣어주었다.
  이후에 LocalStorage에 값이 있을때는 LocalStorage에 맞는 id가 있을 시 isClick의 초기값을 true로, like_cnt도 1씩 올려주었다.

// dataReducer.js
case GET_CONTENT_DATA: {
  const clickHeartId = getLocalData('clickHeartId');
  const content = action.payload.data.content.map(item => {
    if (clickHeartId && clickHeartId.indexOf(item.id) !== -1) {
      item.like_cnt = item.like_cnt + 1;
      item.isClick = true;
    } else {
      item.isClick = false;
    }
    return item;
  });
  const sector = action.payload.data.sector;
  return {
    ...state,
    data: {
      content: content,
      sector: sector,
    },
    isLoaded: action.payload.isLoaded,
  };
}

• 다음은 like를 클릭했을 경우의 action이다.
  한번 클릭시 isClick을 true로, like_cnt의 값에 +1 을 해주었다.
  다시 isClick의 값이 true인 데이터를 클릭할 경우 false로 변경되고 like_cnt의 값은 -1 을 해주었다.
  여기에서 누를때 마다 클릭한 아이디를 로컬스토리지에 올려주고, 내려주었다.

// dataReducer.js
case CLICK_LIKE: {
  const content = state.data.content.map(item => {
    if (item.id === action.id) {
      if (item.isClick === false) {
        return {
          ...item,
          like_cnt: item.like_cnt + 1,
          isClick: true,
        };
      } else {
        return { ...item, like_cnt: item.like_cnt - 1, isClick: false };
      }
    } else {
      return item;
    }
  });

  const clickHeartId = [];
  content.forEach(item => {
    if (item.isClick) {
      clickHeartId.push(item.id);
    }
  });
  // 로컬스토리지에 저장
  // setLocalData(Key, Value);
  setLocalData('clickHeartId', clickHeartId);
  return { ...state, data: { content: content } };
}

📚 배운점

• Redux로 API를 받아서 관리하는법을 배웠다. Local Storag에 저장하는 것도 처음해보는데 어렵지는 않았다. 다만 아직 Redux는 좀 더 익숙해질 필요는 있는 것 같다. 다음에도 다시 기회가 있으면 Redux부분을 맞아서 해보고 싶다.
• 처음으로 Redux를 맞아서 여려운점도 많았지만, 모르는 부분에서는 팀원들이 잘 알려줘서 잘 마칠 수 있었다.