전체 글
-
Detail Container 1React 2019. 11. 14. 22:22
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";) Header.js export default withRouter(({ location: { pathname } }) => ( Movies TV Search )); {Detail}는 Header.js 파일처럼 링크설정을 해줄 필요가없는데, 리액트라우터가(react-router-dom) 디폴트로 모든 정보를 Route들에게 주므로, 따로 꾸며줄필요가 없다고함 (props를 디폴트로 전달해줌) 해야 할 작업 url경로가 /movie에 있는지, /show에 있는지 알아야함 DetailContainer.js import React from "react"; imp..
-
Home ,TV, Search, Detail ContainerReact 2019. 11. 14. 09:51
api.js 로부터 데이터 가져오기 HomeContainer.js import React from "react"; import HomePresenter from "./HomePresenter"; import { moviesApi } from "../../api"; export default class extends React.Component { state = { nowPlaying: null, upcoming: null, popular: null, error: null, loading: true }; async componentDidMount() { try { const { data: { results: nowPlaying } } = await moviesApi.nowPlaying(); const { ..
-
#5 Container Presenter PatternReact 2019. 11. 13. 09:18
API verbs,fuctions들을 화면 안에 넣는 작업 Container Presenter Pattern이란?: 컨테이너는 data와 state(상태값)을 갖고, api를 불러옴, Presenter은 컨테이너에서 가져온 데이터를 화면에 뿌려줌(Presenter는 스타일이고, Container은 data) 각각의 폴더를 생성후 그안에 index.js파일과 Container, Presenter.js파일을 생성해줌(니코는 이런식의 구조가 좋다고함) index.js파일안에 HomeContainer.js을 import해줌 HomeContainer.js에서 HomePresenter.js을 import해줌 HomeContainer.js import React from "react"; import HomePrese..
-
api 파트 2React 2019. 11. 11. 23:10
Append To Response: video[예고편]나 image[포스터] 같은 것들을 append(덧붙이기) 할때 사용 the movie database API 에 접속하면 시뮬레이션을 해볼수있다. 사진의 빨간동그라미 부분에 vidoes를 입력하면 json오브젝트 맨 하단에 videos라는 객체가 추가됨 app.js import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "d72dd1ba6c0d1b77338e9259724d1db9", language: "en-US" } }); export const moviesApi = { nowPlaying: () =..
-
api 파트 1React 2019. 11. 11. 22:35
api.js api.get()안에들어가는것은 theMovieApi참조 import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "d72dd1ba6c0d1b77338e9259724d1db9", language: "en-US" } }); export const moviesApi = { nowPlaying: () => api.get("movie/now_playing"), upcoming: () => api.get("movie/upcoming"), popular: () => api.get("movie/popular") }; export const tvApi = { ..
-
# 4 Movie DB API 를 활용한 AxiosReact 2019. 11. 11. 08:40
theMovieApi사이트에 접속, 회원가입, 로그인, 설정-> api 카테고리에서 api키를 발급받아 이를 활용함 yarn add axios Axios는 request랑 작업하기에 좋음 api.js 파일 index.js파일에 import "./api"; import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: "", language: "en-US" } }); api.get("tv/popular"); // api.get("/tv/popular"); X 절대 /를 앞에 붙여주면안됨 baseURL에 덮어쓰게됨 // "/"로 시작하는것은 절대경로를 의미, 상대경로..
-
GlobalStylesReact 2019. 11. 11. 07:32
Global 스타일 설정 Global 스타일 설정을 하는 이유 해당 사이트의 폰트를 설정하거나 SC(Style Component)를 설치하기위함 yarn add styled-reset SC을 이용해서 css를 초기화해서 0의 상태에서 시작 코드 먼저 글로벌하게쓰일 파일 하나를 생성 GlobalStyles.js import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const globalStyles = createGlobalStyle` ${reset}; a{ text-decoration:none; color:inherit; } *{ box-sizing: border-box; } body{ font-fam..