무비앱 시리즈 #4 Landing Page 만들기 (1)

- Landing Page 첫 화면 생성

 

 

1. 전체적인 Template 간단하게 만들기

src > components > views > LandingPage.js에 코드 작성 -> 웹화면 구성

import React from 'react'
import { FaCode } from "react-icons/fa";

function LandingPage() {
    return (
        <div style={{width: '100%', margin: '0'}}>
            {/* Main Image */}
            <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 LandingPage

자꾸 이런 오류가 발생하는데 원인은 모르니 일단 진행...

 

2. Movie API에서 가져온 모든 데이터 STATE에 넣기

import React, { useEffect, useState } from 'react'
import { FaCode } from "react-icons/fa";
import { API_KEY, API_URL } from '../../Config';

function LandingPage() {

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

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

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

    return (
        <div style={{width: '100%', margin: '0'}}>
            {/* Main Image */}
            <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 LandingPage

- movie에 관한 데이터를 useState로 받아오기

 

3. MainImage Component 만들기

- LandingPage Foler 안에 Sections Folder 생성

- Sections Folder 안에 MainImage.js 파일 생성

import React from "react"

function MainImage(){
    return (
<div style={{ background: 'url("")'}}>
    <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

- <div style= {{background: 'url("")}}> 콘솔 안에서 정보를 가져와야하는데 localhost:3000번 포트가 안 열러서 콘솔확인 불가....