[React & NodeJS]영화웹페이지#1

날짜 : 21.06.29
참고 강의

[React.js]

1. boiler-plate 활용

1) 공부 #1 - 공부 #6에서 만든 boiler-plate를 github에서 clone or download

2. Movie API key

1) https://www.themoviedb.org/?language=ko 회원가입

2) [개인정보] - [설정]

3) [API]에서 API 요청
--> 요청 후 첫 번째 빨간색 박스 API 주소 사용

4) [client] - [src] - [Config.js] 생성

export const USER_SERVER = '/api/users';

export const API_URL = 'https://api.themoviedb.org/3/';

export const IMAGE_BASE_URL = 'http://image.tmdb.org/t/p/';

export const API_KEY = 'your api_key';

--> 자주 사용할 주소들 입력

3. Landing Page 작성

1) [LandingPage.js]의 기본 UI 작성

function LandingPage(props){
	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>Movies By Latest</h2>
                <hr />

                {/* Movie Grid Cards */}
            </div>

            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <button>Load More</button>
            </div>

        </div>
    )
}

2) [LandingPage] - [Section] - [MainImage.js] 생성

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={{ color: 'white' }}>{props.title}</h2>
                    <p style={{ color: 'white', fontSize: '1rem' }}>{props.text}</p>
                </div>
            </div>
        </div>
    )
}

export default MainImage;

props를 사용하여 LandingPage에서 정의한 image정보를 가져올 수 있다.

3) [LandingPage.js] 함수 작성

function LandingPage(props) {

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

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

        fetch(endpoint)
            .then(response => response.json())
            .then(response => {

                console.log(response)

                setMovies([...response.results])
                setMainMovieImage(response.results[0])

            })
    }, [])
  return(...)
}

4) [LandingPage.js] 전체 소스코드

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

function LandingPage(props) {

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

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

        fetch(endpoint)
            .then(response => response.json())
            .then(response => {

          		// 불러올 image의 변수명 확인 가능
                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>Movies By Latest</h2>
                <hr />

                {/* Movie Grid Cards */}
            </div>

            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <button>Load More</button>
            </div>

        </div>
    )
}

export default withRouter(LandingPage);

4. Landing Page - Grid Card 작성

1) [src] - [components] - [commons] - [GridCards.js] 생성

import React from 'react';
import { Col } from 'antd';

function GridCards(props) {
    return (
      	// Col의 최대 사이즈 : 24
        <Col lg={6} md={8} xs={24}>
            <div style={{ position: 'relative' }}>
                <a href>
                    <img  />
                </a>
            </div>
        </Col>
    )
}

export default GridCards;

• lg = {6} : large 화면에서 4개의 포스터
  
• md = {8} : medium 화면에서 3개의 포스터
  
• xs = {24} : 가장 작은 화면에서 1개의 포스터
  

2) [LandingPage.js]의 return 수정

import { Row } from 'antd';
import GridCards from '../commons/GridCards';

function LandingPage(props){
	...
    ...
    return(
    	...
      	...
      	{/* Movie Grid Cards */}
                <Row gutter={[16, 16]}>
                    {Movies && Movies.map((movie, index) => (
                        <React.Fragment key={index}>
                            <GridCards
                                image={movie.poster_path ?
                                    `${IMAGE_BASE_URL}w500${movie.poster_path}` : null}
                                movieId={movie.id}
                                movieName={movie.original_title}
                            />
                        </React.Fragment>
                    ))}

                </Row>
    
    )
}

3) [GridCards.js]에 props를 사용하여 이미지 삽입

import React from 'react';
import { Col } from 'antd';

function GridCards(props) {
    return (
        <Col lg={6} md={8} xs={24}>
            <div style={{ position: 'relative' }}>
                <a href={`/movie/${props.movieId}`}>
                    <img style={{width:'100%', height:'320px'}} src={props.image} alt={props.movieId} />
                </a>
            </div>
        </Col>
    )
}

export default GridCards;

Full Code

Walang Github

Walang Notion