ReactNode - 무비앱만들기

전체적인 틀과 ModngoDB 연결

 

처음으로 Boiler Plate 를 다운 받는다.

https://www.youtube.com/watch?v=RxPJeeEgdIs&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV&index=2 

 

Boiler Plate 실행방법은 서버와 클라이언트에서 Dependencies 다운을 받고

npm install을 통해 설치해준다.

다음 dev.js파일을 만들어주고

MongoDB에 로그인 해

클러스터 만든 후 아이디 비번 생성

dev.js에 비번등을 넣는다.

module.exports = {
    mongoURI:'mongodb...'
}

 

Problem 

npm cannot read properties of null (reading 'pickalgorithm')

npm 설치 중에 생긴 오류인데

같은 문제가 생긴 블로그들을 보니 npm cache verify 

라고 명령한 뒤 다시 npm install 하니 다시 실행되었다.

 

 

The MovieDB API

먼저 the moviedb website로 이동한다.

https://www.themoviedb.org/

 

가입 후 로그인 후 API KEY를 받는다.

 

Text Editor에서 the movieDB API 설정을 한다.

export const API_URL = 'https://api.themoviedb.org/3/';
export const IMAGE_BASE_URL = 'http://image.tmdb.org/t/p/';

 

 

Landing Page

전체적인 Template을 간단하게 만든다.

function LandingPage() {

    useEffect(()=>{
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

        fetch(endpoint)
        .then(response => response.json())
        .then(response => {
            console.log(response)
        })
    }, [])

    return (
        <div style={{width:'100%', margin:'0'}}>
            <div style={{width:'85%', margin: '1rem auto'}}>
                <h2>Moview by latest</h2>
                <hr/>
                {/* {movie grid} */}
            </div>
            <div style={{display:'flex', justifyContent:'center'}}>
                <button>Load More</button>
            </div>
        </div>
    )
}

export default LandingPage

그럼 아래처럼 불러와진다.

Movie API에서 가져온 모든 데이터를 state에 넣는다.

  const [Movies, setMovies] = useState([])

MainImage Component를 만든다.

import React from "react";

function MainImage(props) {
    return (
        <div style={{
            background: `linear-gradient(to bottom, rgba(0,0,0,0)
        39%, rgba(0,0,0,0)
        41%, rgba(0,0,0,0.65)
        100%), 
        url('${props.image}'), #1c1c1c`,
            height: '500px',
            backgroundSize: '100%, cover',
            backgroundPosition: 'center, center',
            width: '100%',
            position: 'relative'
        }}>
            <div>
                <div style={{ position: 'absolute', maxWidth: '500px', bottom: '2rem', marginLeft: '2rem' }}>
                    <h2 style={{ col: 'white' }}>{props.title}</h2>
                    <p style={{ color: 'white', fontSize: '1rem' }}>{props.text}</p>
                </div>
            </div>
        </div>
    )
}

export default MainImage

 

LandingPage.js

import React, {useEffect, useState} from 'react'
import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config';
import MainImage from './Sections/MainImage';

function LandingPage() {

    const [Movies, setMovies] = useState([])
    const [MainMovieImage, setMainMovieImage] = useState(null)

    useEffect(()=>{
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

        fetch(endpoint)
        .then(response => response.json())
        .then(response => {
            console.log(response)
            setMovies([...response.results])
            setMainMovieImage(response.results[0])
        })
    }, [])

    return (
        <div style={{width:'100%', margin:'0'}}>
            {/* {main image} */}
            {MainMovieImage && 
            <MainImage 
            image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
            title={MainMovieImage.original_title}
            text={MainMovieImage.overview}/>
            }
            <div style={{width:'85%', margin: '1rem auto'}}>
                <h2>Moview by latest</h2>
                <hr/>
                {/* {movie grid} */}
            </div>
            <div style={{display:'flex', justifyContent:'center'}}>
                <button>Load More</button>
            </div>
        </div>
    )
}

export default LandingPage

 setMainMovieImage(response.results[0])로 제일 첫번째 영화를 불러와주고

MainImage에 이미지, 제목과 영화설명을 넣는다.

 

그러면 우선 아래 화면이 생성된다.