JavaScript (28) 썸네일형 리스트형 [React JS] Movie App publishing https://github.com/ge5rg2/react-for-beginners/commit/9af4fe48e5acc554f01f66b7311b1ea003072fdf publishing · ge5rg2/react-for-beginners@9af4fe4 This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. github.com 지난번 css과정까지 마친 movie app을 publishing 하려고 한다. 우선 $ npm i gh-pages 을 진행한다. gh-pages란 결과물을 github pages에 업로드할 수 있는 패키지를 말한다. github pa.. [React JS] CSS 적용한 Movie App css를 적용시킨 movie app이다. https://github.com/ge5rg2/react-for-beginners/commit/d9bc73904ad3e2a8f0d662724614c1a649ceaab7 movie app style fn · ge5rg2/react-for-beginners@d9bc739 Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files movie app style fn Loading branch information Showing 5 changed files with 57 additions .. [React JS] React에서 css reset하기 React JS에서는 간단하게 css를 reset 할 수 있다. $ npm i styled-reset 다음 내용을 설치한다. 이후 사용을 원하는 js파일에서 import { Reset } from "styled-reset"; function App() { return ( ); } Reset을 import해준 다음, 원하는 부분에 을 작성한다. [React JS] React에서 Font Awesome icon 적용하기 이번에 제작하고 있었던 Movie App에 css를 적용하던 중 icon을 사용하고 싶은데 방법을 몰라서 여기저기 찾아봤다. 그 방법을 적어보려고 한다. 우선 다음의 내용들을 설치한다 $ npm i --save @fortawesome/fontawesome-svg-core 해당 내용을 먼저 설치 후 # Free icons styles $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons 둘 다 설치해도 되고, solid icon을 사용할 거면 첫 번째, regular icon을 사용할 거면 두 번째를 설치해준다. $ npm i --save @fortawesome/react-fonta.. [React JS] 간단한 Movie App 만들기2 이번엔 기존 기능에서 title을 클릭 시 세부 정보를 알 수 있는 기능을 추가하려고 한다. 이를 위해서는 react-router-dom 설치가 필요하다. (React JS에서 router기능을 수행하게 만들어준다.) routes/Home.js ↓ import { useEffect, useState } from "react"; import Movie from "../components/Movie"; const Home = () => { const [loading, setLoading] = useState(true); /* [1,2] 1이 배열의 데이터, 2가 배열 데이터를 수정하는 함수 */ const [movies, setMovies] = useState([]); const getMovies = asy.. [React JS] 간단한 Movie App 만들기1 사용할 영화 API는 https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 이다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); /* [1,2] 1이 배열의 데이터, 2가 배열 데이터를 수정하는 함수 */ const [movies, setMovies] = useState([]); useEffect( () => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) .then((response) => r.. [React JS] Coin price tracker 만들기 이번에는 React JS / useEffect를 이용해서 간단한 암호화폐 시세를 알려주는 앱을 만들어보기로 한다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []); return ( The Coins.. [React JS] 간단한 ToDo리스트 만들기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); }; const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArrary) => [toDo, ...currentArrary]); setToDo(""); }; return ( My ToDo List ({toDos.length}) Add To Do ); }.. 이전 1 2 3 4 다음
