영화/ReactJS (16) 썸네일형 리스트형 15. Practice Movie App - Axios Home.jsimport { useEffect, useState } from 'react';import Movie from "../components/Movie";import styles from "./Home.module.css";import axios from 'axios';function Home(){ const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await axios.get("https://yts-proxy.now.sh/list_movies.json"); setMovies(json.data... 14. Practice Movie App - Styles Movie.jsimport PropTypes from "prop-types"; //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!import {Link} from "react-router-dom";import styles from "./Movie.module.css";function Movie({id, coverImg, title, year, summary, genres}){ return( {title} {year} {summary... 13. Practice Movie App - Publishing 1. GitHub 사이트 로그인 후 repository를 추가 후 커밋 및 푸쉬를 진행한다.2. package.json 파일 내 scrips에 "deploy": "gh-pages -d build"와 "predeploy": "npm run build"를 추가한다.3. package.json 파일 내 "hompage":"https://깃허브 유저네임/github.io/푸쉬한 레퍼지토리명"를 추가한다.4. Visual Studio Code 툴 내 터미널에서 "npm run deploy" 명령어를 실행한다. Visual Studio Code 툴 내 터미널에서 "npx create-react-app 폴더명"을 실행하면 폴더가 생성되고 해당 폴더 내 package.json 함께.. 12. Practice Moive App - Parameters 아래 App.js 파일을 보면 Router를 사용하여 해당 경로에 맞게 화면이 보여지게 되는데} /> Parameter는 :(콜론) + parameter값을 입력하면 Parameter로 사용되어진다. Home.jsimport { useEffect, useState } from 'react';import Movie from "../components/Movie";function Home(){ const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await(await fetch(`https://yts.mx/api.. 11. Practice Moive App - React Router 1. Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm install react-router-dom 2. react-router-dom를 import 시켜준다.: 여러개가 아닌 하나만 랜더링 하기 위해서 Switch(Routes)를 사용한다.import { BrowserRouter as Router, Switch, Route} from "react-router-dom";function App() { // 누군가 만들어 놓은 컴포넌트를 잘 사용하면 된다. // Swith(Routes)가 하는 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. // 사용자가 "/" 경로에 있으면 Home Route를 랜더링한다. return } .. 10. Practice Movie App - part Two Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm i prop-types: npm install react-router-dom App.jsimport logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';import Movie from "./components/Movie";function App() { return null;}export default App; Movie.jsimport PropTypes from "prop-types"; //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!function Movie.. 09. Practice Movie App - part One import logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await(await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_ration=8.8&sort_by=year`)).json(); setMovies(json.data.movies); setLoading(fal.. 08. Coin-Tracker import logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(()=>{ //fetch("https://api.coinpaprika.com/v1/tickers"); /* 크롬 브루우저에서 F12로 network탭을 보면 tickers를 요청했다는 것을 확인할 수 있다. tickers를 클릭하면 Preview, Response 탭을 확인할 수 있는데, Pre.. 이전 1 2 다음
