무비앱 - Favorite Button

Favorite Model 만들기

(useFrom, movieId, movieTitle, movieImage, movieRunTime)

이 들어간 틀을 만들 것이다.

 

server 폴더에 Favorite.js를 만든다.

 

안에 필드들을 넣어준다.

const favoriteSchema = mongoose.Schema({
    useFrom:{
        type: Schema.Types.ObjectId,
        ref: 'User'
    },
    movieId:{
        type: String
    },
    movieTitle:{
        type:String
    },
    moviePost:{
        type:String
    },
    movieRunTime:{
        type: String
    }
},{timestamps: true})

useFrom안에 있는 객체들이 의미하는 것은

예를 들어 ObjectId가 sdlkjlj241290일 때 이 아이디로 User.js에 정보들을 불러올 수 있다.

다음은 영화아이디, 제목 등을 어떤 형식으로 받을 건지 적는다.

timestamps:true는 생성된 시간 같은 것들을 자동으로 처리해 준다.

 

Schema는 mongoose에서 가져와 준다.

const Schema = mongoose.Schema;

외부 서도 불러올 수 있도록 처리한다.

module.exports = { Favorite }

 

---

Favorite Button UI 만들기

이렇게 버튼 모양을 잡아 준다.

 

버튼 컴포넌트를 따로 만들어 import 해준다.

 

---

 

Favorite 버튼 클릭 수 저장

Favorite.js에서 useEffect를 통해

얼마나 많은 사람이 해당 영화를 Favorite 리스트에 넣었는지 그 숫자 정보를 얻을 수 있다.

 

정보를 얻기 위해 서버에다가 요청을 해야 하는데 그 방법으로 fetch를 사용할 수도 있고 Axios를 사용할 수 도 있다.

 

이번에는 axios를 사용해 요청할 것인데,

 

그전에 fetch와 axios의 차이점을 알아보자.

아래는 문서화로 정리한 차이점이다.

Axios	Fetch
요청 객체에 url이 있다.	요청 객체에 url이 없다.
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

https://kimtongting.tistory.com/entry/React-axios-vs-fetch-axios-fetch-%EC%B0%A8%EC%9D%B4-axios-fetch-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

Fetch

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
  .then((response) => response.json())
  .then(console.log);

fetch는. then() 메서드에서 처리된 promise를 반환한다. 이때 JSON 데이터의 포맷으로 바꿔주기 위해 응답 객체의. json() 메서드를 호 한다. 그러면 JSON 형식의 데이터로 이행(resolve)된 또 다른 promise를 반환한다.

그럼 일반적인 fetch 요청은 두 개의. then() 호출을 갖게 된다.

 

Axios

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url).then((response) => console.log(response.data));

Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있다.

응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있다.

 

 

더 들어가면 딴 길로 샐 것 같으니 이어서 해보자면 post(' ') 안에 알맞은 endpoint를 넣어주어야 한다.

임의로 정하고 서버에 알맞는 정보들을 넣어주기 위해 variables를 넣어준다.

        let variables = {
            useFrom,
            movieId
        }
        Axios.post('/api/favorite/favoriteNumber', variables)
        .then(reponse =>{
            if(reponse.data.success){

            } else {
                alert('숫자 정보를 가져오는데 실패했습니다.')
            }
        })

이후 응답에 실패했을 때 알림을 띄운다.

 

 

 

이제 다시 MovieDetail.js에서 prop을 주어야 하는데

movieInfo라는 이름으로 영화정보들을 가져온다.

<Favorite movieInfo={Movie} movieId={movieId} useFrom={localStorage.getItem('userId')}/>

 

그리고 다시 Favorite.js에서 영화 아이디 등을 선언해 준다.

    const movieId=props.movieId
    const useFrom=props.useFrom
    const movieTitle = props.movieInfo.title
    const moviePost = props.movieInfo.backdrop_path
    const movieRunTime = props.movieInfo.runTime

 

그다음 내용은 다음 글에 이어서 적도록 하겠다.