항해 사전준비 9일차 - 토이프로젝트 3 - 무비피디아

드디어 완성이다.

다 만들고 다른사람들의 작품을 보는데 주눅이 들긴 한다.

그냥 넷플릭스 느낌만 나게 해봤다.

https://kevinkim910408.github.io/-Web-MoiveSite/

 

이번 토이프로젝트에서 정말 많은것을 얻어간다.

1. React - Bootstrap 설치

npm install react-bootstrap bootstrap

최상단의 루트파일인 src/index.js 또는 App.js 파일에 코드를 추가하면 부트스트랩의 스타일을 적용할 수 있다.

import "bootstrap/dist/css/bootstrap.min.css";

- 원하는 컴포넌트 불러오기

버튼을 넣으려고 하는 컴포넌트 파일 상단에 코드를 추가한다.

import Button from "react-bootstrap/Button";
// 또는
import { Button } from "react-bootstrap";

- 컴포넌트 사용하기

<Button> 태그를 통해 Button 컴포넌트를 사용한다.

App.js

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap"

function App() {
  return (
      <div className="App">
        <Button>Hello</Button>
      </div>
  );
}

export default App;

2. Slider를 위한 Swiper.js  설치

npm i swiper

 

Document 주소

https://swiperjs.com/react#usage

3. 계속 오류나던 문제

- .map()은 배열에만 사용가능하다.

계속 객체에 사용하려다가 오류발생..

- react에서 return 다음에는 JSX문법을 써야하는데,

여기서는 if문 사용x -> 삼항연산자로 써야한다.

- for loop 도 사용x -> .map()을 사용

 

4. Youtube 혹은 비디오 집어넣는 코드

 <iframe width = "560"
    height = "315"
    src = {`https://www.youtube.com/embed/${details.yt_trailer_code}?autoplay=0&mute=0`}
    title = "YouTube video player"
    frameborder = "0"
    allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen 
/> }

5. Jquery의 ajax() 말고, js의 fetch()

  // async wait으로 api 가져오기
  const getRomanceMovies = async () => {
    const json = await (await fetch(`https://yts.mx/api/v2/list_movies.json?genre=romance&sort_by=year`)).json(); // url
    setRomanceMovies(json.data.movies);
  }

6. 이번에는 css를 대부분 inline으로 적용했다. 

물론 몇몇 hover라던지, 큼직큼직한거는 따로 파일을 만들었지만..

<div style={{
    width:"100%", 
    height:"100vh", 
    backgroundImage:`url(${details.background_image_original})`, 
    backgroundSize:"cover", 
    display:"flex", 
    flexDirection:"column", 
    justifyContent:"center", 
    alignItems:"center"
}}>

인라인을 이렇게까지 우겨넣기도 했다. 

따로 빼기 귀찮기도 했고, 가독성도 나빠 보이지는 않아서 이랬는데, 

당연히 이러면 안되겠지..

 

내 다음목표는 영화앱에 재도전이다.

이번에는 css에 조금 더 신경써서

https://10009ukk.github.io/react-movie

https://keinn51.github.io/React_JS_Movie_Web_Nomad/

https://heimish902.github.io/Movie-introduction/

위의 세 사람의 작품이랑 비슷하게 만들면서 공부를 더 해보고싶다.