인브로즈 - 영화 앱 만들기

- asx 프로세스를 모두 활용해 보는 간단한 실습 진행

- 각각의 영화 데이터를 표현하는 movie component를 만들고 함수를 이용해 각각의 컴포넌트에 데이터를 전달하여 웹페이지 구성 예정

 

1. 영화 데이터 GET!!

- 직접 데이터 통신 X / 영화 정보 오픈 데이터만 가져와서 사용 

- tmdb api 발급받기

https://developer.themoviedb.org/reference/movie-now-playing-list 

Now Playing

-> tmdb 홈페이지의 변동으로 인하여 현재 상영중인 영화 데이터를 가져올 수 있는 link 올립니다.

 

한국에서 상영 중인 영화 데이터를 얻기 위해 ko/KR로 변경

API key Auth로 변경하여 api key 발급받기!

발급받은 API key를 활용하여 크롬에 호출하면 데이터 생성 완!!

- 이 데이터들을 프로젝트의 더미 데이터로 직접 넣어서 사용

 

2. vs code에서 new terminal 열어서 npx create-react-app으로 react-basic-demo 리액트 프로젝트 생성

npm start 하면 왜..이런 오류가 또 뜰가...

!! 오류 해결 !!

-> cd react-basic-demo 로 이동해서 npm start를 실행했어야 한다!!! (바보....)

 

3. react-basic-demo 폴더에서 필요없는 파일들 전부 삭제

 

4. src -> movieDummy.js 파일 생성 

: movieDummy.js 파일 생성 후 API로 받아온 데이터 복붙!!

 

5. component 생성하기 위해 src 안에 components라는 폴더 생성 

-> Movie.jsx 파일 생성해서 movie 컴포넌트 관리하기

: Movie component 생성하기 

import Movie from './components/Movie';
import { dummy } from './movieDummy';

function App() {
  return (
    <div>
      <div className='app-container'>
        {
          dummy.results.map((item)=>{
            return (
              <Movie />
            )
          })
        }
      </div>
    </div>
  );
}

export default App;

Movie Components 생성

 

6. Movie.jsx 파일 안에서 title, poster_path, vote_average를 props로 전달받음

import React from 'react';

export default function Movie({title, poster_path, vote_average}){
    return (
        <div className='movie-container'> //뷰작업
            <img/>
            <div className='movie-info'> 
                <h4>제목</h4>
                <span>평점</span> //평균 평점
            </div>
        </div>
    )
}

- 데이터 미연결 상태로 인해 제목, 평점만 보임

 

7. Movie.jsx 파일과 App.js 파일에서 props로 받은 실제 데이터 연결하기

Movie.jsx 파일에 props로 선언한 변수들 데이터 설정

App.js에서 props로 넘겨준 실제 데이터를 연결시킴

 

8. index.css 파일에서 화면 구성하기

- display : flex -> 화면 크기에 맞춰 1열로 배열됨 

- flex wrap : wrap 속성 -> 전체 데이터의 width 길이가 화면의 길이보다 길 때 다음줄로 내려주는 역할을 함

- justify-content : center -> 중앙 정렬 시키기

- 바탕색 변경 : body -> background color로 결정 

 

index.css -> 화면 구성

body{ //화면 전체 컬러 변경
    background-color: #22254b;
}

.app-container{ //app-container css 
    display: flex; //화면 구성 맞춰서
    flex-wrap: wrap;
    justify-content: center; //가운데 정렬
}

.movie-container {
    width: 250px;
    margin : 16px;
    background-color: #373b69;
    color:white;
    border-radius: 5px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);

}
.movie-container img{ //영화 포스터 이미지 너비 
    max-width: 100%;
}
.movie-info{
    display: flex; //title, post-rate에 대한 속성 정렬
    padding: 20px;
    justify-content: space-between;
    align-items: center;
}
.movie-info h4{
    margin: 0; //h4의 기본 값 초기화 
}
.movie-info span{
    margin-left: 3px;
}

 

 

10. 영화 앱 화면 구성 완~!!