< api/hotel.js >
const SERVER_BASE_URL = 'https://x0ofq07ykl.execute-api.ap-northeast-2.amazonaws.com/dev';
export const getHotelList = (page, filters) => {
const url = `${SERVER_BASE_URL}/hotels?page=${page}&filters=${filters}`;
return fetch(url, {method: 'GET', credentials: 'same-origin'}) ***
.then((response) => response.json())
.catch((err) => console.log(err));
};
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}`)
.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;
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>
)
}
}
credentials가 제가 알기로는 default value가 same-origin으로 알고있어요!
코쿼에서는 보통 include로 해줘야 CORS 에러가 안나더라고요!
이건 이유가 백엔드 서버가 프론트에 없어서 생긴일 같기는 한데, 참고하시면 좋을 것 같아용!
https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials