Project using React/Cloning Netflix
-
Netlify에 React 배포Project using React/Cloning Netflix 2021. 5. 9. 11:19
package.json { "scripts": { "start": "react-scripts start", "build": "CI=false react-scripts build", "deploy": "gh-pages -d build", "predeploy": "yarn run build" } "homepage": "", } package.json에 필요한 코드다. "build"에 CI=false를 해줘야 성공적으로 배포할 수 있다. netlify는 warn같은 에러 아닌 경고에도 배포를 하지 못 하게 막는다.. 참고 자료 노마드 코더의 React 멤버쉽 강의 Netlify 소스 코드 Add CI=false to 'scripts':'build'
-
React - Create Detail Container and PresenterProject using React/Cloning Netflix 2021. 5. 9. 11:12
Components/Poster.js import styled from "styled-components"; import PropTypes from "prop-types"; import { Link } from "react-router-dom"; const Container = styled.div``; const Image = styled.div` background-image: url(${(props) => props.bgUrl}); width: 100%; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; transition: opacity 0.1s linear; `; const..
-
React - Search Container and PresenterProject using React/Cloning Netflix 2021. 5. 9. 11:07
Search/SearchContainer.js import { moviesApi, tvApi } from "api"; import React from "react"; import SearchPresenter from "./SearchPresenter"; export default class extends React.Component { state = { movieResults: null, tvResults: null, searchTerm: "", loading: false, error: null, }; handleSubmit = (event) => { event.preventDefault(); const { searchTerm } = this.state; if (searchTerm !== "") { th..
-
React - Create TV Container and PresenterProject using React/Cloning Netflix 2021. 5. 9. 10:51
TV/TVContainer.js import { tvApi } from "api"; import React from "react"; import TVPresenter from "./TVPresenter"; export default class extends React.Component { state = { loading: true, airingToday: null, topRated: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: airingToday }, } = await tvApi.airingToday(); const { data: { results: topRated }, } =..
-
React - Create MoviePresenterProject using React/Cloning Netflix 2021. 5. 9. 10:47
Movie/MoviePresenter.js import Helmet from "react-helmet"; import styled from "styled-components"; import PropTypes from "prop-types"; import Loader from "Components/Loader"; import Poster from "Components/Poster"; import Section from "Components/Section"; const Container = styled.div` padding: 10px; `; const MoviePresenter = ({ nowPlaying, upcoming, popular, error, loading }) => ( Movies | Nomf..
-
React - Create Loader.jsProject using React/Cloning Netflix 2021. 5. 9. 10:27
Components/Loader.js import React from "react"; import styled from "styled-components"; const Container = styled.div` height: 100vh; width: 100vw; display: flex; justify-content: center; font-size: 28px; margin-top: 20px; `; export default () => ( ⏰ ); Movie/MoviePresenter.js import Loader from "Components/Loader"; import Helmet from "react-helmet"; const MoviePresenter = ({ nowPlaying, upcoming..
-
React - Create MovieContainerProject using React/Cloning Netflix 2021. 5. 9. 08:08
Movie/MovieContainer.js import { moviesApi } from "api"; import React from "react"; import MoviePresenter from "./MoviePresenter"; export default class extends React.Component { state = { loading: true, nowPlaying: null, upcoming: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: nowPlaying }, } = await moviesApi.nowPlaying(); const { data: { results..
-
React Life cycle MethodsProject using React/Cloning Netflix 2021. 5. 9. 07:10
Life Cycle Methods class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } componentDidMount() Component가 생성되면 다음과 같은 순서대로 실..