분류 전체보기91 [ReactJS] Publishing - ReactJS 로 영화 웹 서비스 만들기 (12) 구현한 프로젝트를 GitHub Pages 로 배포하기 #7.7 Publishing gh-pages 설치 npm i gh-pages gh-pages : 결과물을 github pages 에 업로드 할 수 있게 해주는 패키지 github 에서 제공하는 무료 서비스이다. package.json build scripts 의 build 를 이용하면 웹 사이트의 production ready code 를 생성 production ready code : 코드가 압축되고 모든게 최적화 된다 npm run build => build 폴더가 생성됨 homepage 추가 package.json 에 homepage 추가 "homepage": "https://{github username}.github.id/{github rep.. 2021. 12. 12. [ReactJS] Parameters - ReactJS 로 영화 웹 서비스 만들기 (11) 사실상 ReactJS 강의의 마지막 이론 부분이다. Parameter 를 이용해 movie 의 id 를 넘겨받아보자. #7.6 Parameters 영화의 제목을 클릭하면 해당 영화의 정보 페이지로 넘어가도록 구현해보자. 그러기 위해서 영화의 id 를 주고받아야 함 React Router 는 동적인 url 을 생성할 수 있다. 여기서 동적 이라는 의미는 url 에 변수를 넣을 수 있다는 것. 동적 url 에서 Parameter 를 이용해 정보를 넘겨줄 수 있다. 이것을 이용해서 영화의 id 를 주고받을 것이다. App.js function App() { return ( ); } Detail 컴포넌트 부분의 Route 를 보자. "/movie/:id" 의 형태를 이용하면 id 부분에 변수 넣기 가능 Home.. 2021. 12. 12. [ReactJS] React Router - ReactJS 로 영화 웹 서비스 만들기 (10) React Router 를 이용해 페이지 전환 구현하기 #7.5 React Router 영화 제목을 클릭하면 Detail 페이지로 라우팅 되도록 구현할 것이다. React-Router-Dom 설치 npm i react-router-dom@5.3.0 이번 실습을 위해서는 버전 설정을 해주지 않으면 오류가 날 수 있다. -> 버전에 따라 구현 방식이 다름 참고) 공식 튜토리얼 v5 https://v5.reactrouter.com/web/guides/quick-start Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best featur.. 2021. 12. 8. [ReactJS] Practice Movie App - ReactJS 로 영화 웹 서비스 만들기 (9) 드디어 본격적인 Movie App 만들기 시간!! #7.3-7.4 Practice Movie App 영화 정보들을 나열하기 부터 시작! 영화 정보는 https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year api 를 이용 => 평점 8.5 이상 & 년도 순으로 정렬 의 조건을 가짐 loading, movies 생성 const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); loading : 데이터 fetch 여부에 따라 변경 movies : 영화 정보 리스트 useEffect 와 getMovies const getMovies = async.. 2021. 12. 7. [ReactJS] Practice Coin Tracker & Coin Converter - ReactJS 로 영화 웹 서비스 만들기 (8) 이번 시간에는 저번에 이어서 두 번째 실습인 Coin Tracker 를 만들어 볼 것이다. 저번에 useState 실습을 해봤다면 이번엔 useEffect 실습이 될 것이다. #7.2 Practice Coin Tracker 데이터 업로드 전 로딩 기능을 추가하고 로딩이 완료되면 코인 리스트를 쭉 보여줄 것이다. 코인 리스트는 https://api.coinpaprika.com/v1/tickers api 이용 loading, coins 생성 const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); loading : 로딩 상태 여부 coins : 코인 리스트 useEffect 로 데이터 fetch useEffect.. 2021. 12. 7. [ReactJS] Practice To Do List - ReactJS 로 영화 웹 서비스 만들기 (7) 본격적으로 Movie App 을 만들기 전에 두 가지 실습을 진행한다. 첫 번째는 To Do List 만들기!! #7.0-7.1 Practice To Do List input 에 입력하는 값들의 list 를 보여주기 toDo, toDos 생성 const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); toDo : 현재 입력받는 값 toDos : 입력받은 toDo 들의 총 집합 화면에 그려지는 부분 return ( My To Dos ({toDos.length}) Add To Do { toDos.map((item, index) => ( {item} )) } ); h1 > 제목에는 toDos 의 길이도 함께 출력 form > in.. 2021. 12. 7. 이전 1 2 3 4 5 6 7 ··· 16 다음
