Fetch API 사용해서 서버와 통신(HTTP)

블레어(blair)·2020년 6월 10일
2

HTTP

목록 보기
1/1
post-thumbnail

< api/hotel.js >

const SERVER_BASE_URL = 'https://x0ofq07ykl.execute-api.ap-northeast-2.amazonaws.com/dev';

// GET 호텔목록
// Q. 서버에 찌르는 역할!이아니라 역할의 폼을 만들어준거고 싶제로 찌르는건 HotelList.js에서 하는건가?!
export const getHotelList = (page, filters) => {
  const url = `${SERVER_BASE_URL}/hotels?page=${page}&filters=${filters}`;
  return fetch(url, {method: 'GET', credentials: 'same-origin'})  ***// fetch함수가 return하는 값은Promise객체이다.***
    .then((response) => response.json())
    .catch((err) => console.log(err));
};

// GET 단일 호텔 가격
export const getHotelPrice = (hotelId) => {
  const url = `${SERVER_BASE_URL}/hotel-prices?ids=${hotelId}`;
  return fetch(url, {method: 'GET', credentials: 'same-origin'})
    .then((response) => response.json())
    .catch((err) => console.log(err));
};

< api사용 1 >

import React from 'react';
import 'react-input-range/lib/css/index.css'
import './HotelList.scss'
import HotelListItem from "../../../Components/List/HotelListItem/HotelListItem";
import HotelRecentList from "../../../Components/List/HotelRecentList/HotelRecentList";
import * as Data from './hotelMockData';
import * as Keys from '../../../Common/Keys'
import { getHotelList } from '../../../Common/apis/hotel'

export default class HotelList extends React.Component {

  constructor(props) {
    super(props);
    if (!localStorage.getItem(Keys.LOCAL_STORAGE_KEY)) localStorage.setItem(Keys.LOCAL_STORAGE_KEY, JSON.stringify([]));

    this.state = {
      hotelList: [],
      recentlyViewedHotelList: JSON.parse(localStorage.getItem(Keys.LOCAL_STORAGE_KEY)),
      priceFilter: 1000000
    }
  }

  componentDidMount() {

    ***if(this.state.hotelList.length === 0) {
      getHotelList(1, `PRICE=0:${this.state.priceFilter}`) // fetch의 결과로 Promise가 반환되었으니 여기서 .then()해서 
        .then((res) => {
          this.setState({
            hotelList: res,
          });
        }).catch((err) => {
          console.log(err)
      })
    }***

  }

  manageRecentList(item) {
    if (this.isExistedItem(item)) {
      this.upDateExistedItem(item)
    } else {
      if (!this.isMaxLengthOfRecentList()) {
        this.addRecentItem(item)
      } else {
        this.removeRecentItem();
        this.addRecentItem(item)
      }
    }
  }

  isExistedItem(item) {
    const {recentlyViewedHotelList} = this.state;
    let isItem = false;

    recentlyViewedHotelList.map((hotelItem) => {
      if (hotelItem.id === item.id) {
        return isItem = true
      }
    });
    return isItem
  }

  upDateExistedItem(item) {
    const {recentlyViewedHotelList} = this.state;
    let copiedRecentlyViewedHotelList = recentlyViewedHotelList; // state 값의 불변성 유지를 위해서 똑같이 복사
    let existedItemIndex = copiedRecentlyViewedHotelList.findIndex((value) => (value.name === item.name));
    let existedItem = copiedRecentlyViewedHotelList.splice(existedItemIndex, 1);

    localStorage.setItem(Keys.LOCAL_STORAGE_KEY, JSON.stringify([...copiedRecentlyViewedHotelList, existedItem[0]]));

    this.setState({
      recentlyViewedHotelList: [...copiedRecentlyViewedHotelList, existedItem[0]]
    });
  }

  isMaxLengthOfRecentList() {
    const {recentlyViewedHotelList} = this.state;

    return recentlyViewedHotelList.length >= 5;
  }

  addRecentItem(item) {
    const {recentlyViewedHotelList} = this.state;

    localStorage.setItem(Keys.LOCAL_STORAGE_KEY, JSON.stringify(
      [...recentlyViewedHotelList, {
        id: item.id,
        name: item.name
      }]));

    this.setState({
      recentlyViewedHotelList: recentlyViewedHotelList
    });
  }

  removeRecentItem() {
    const {recentlyViewedHotelList} = this.state;
    let toBeRemovedItem = recentlyViewedHotelList.shift();

    this.setState({
      recentlyViewedHotelList: recentlyViewedHotelList.filter((item) => (item !== toBeRemovedItem))
    });
    localStorage.setItem(Keys.LOCAL_STORAGE_KEY, JSON.stringify(recentlyViewedHotelList));
  }

  render() {
    const {hotelList, priceFilter} = this.state;

    return (
      <div className="HotelListSection">
        <HotelRecentList recentViewItem={this.state.recentlyViewedHotelList}/>
        <div className="hotel-item-list-wrapper">
          {hotelList.map((item, idx) => (
            <div className="hotel-item" key={item.id} onClick={() => {
              this.manageRecentList(item)
            }}>
              <HotelListItem priceFilter={priceFilter} item={item} key={`${item.id}-${idx}`}/>
            </div>
          ))}
        </div>
      </div>
    )
  }
}
profile
프론트엔드 개발자 블레어의 개인 블로그 입니다. 개발공부를 하며 나누고 성장하고 싶습니다 :)

1개의 댓글

comment-user-thumbnail
2020년 7월 18일

credentials가 제가 알기로는 default value가 same-origin으로 알고있어요!
코쿼에서는 보통 include로 해줘야 CORS 에러가 안나더라고요!
이건 이유가 백엔드 서버가 프론트에 없어서 생긴일 같기는 한데, 참고하시면 좋을 것 같아용!

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

답글 달기