Web Service42 [영화 웹 서비스 만들기] #11. Movie App ~7.4까지의 강의 이제 메인 프로젝트인 영화 웹 서비스를 만든다. 근데 앞에서 설명했던 거랑 비슷한 게 많아서 헷갈렸던 개념을 한 번 더 정리한다고 생각해야겠다. const getMovies = async () => { const json = await ( await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` ) ).json(); setMovies(json.data.movies); setLoading(false); }; 영화를 받을 수 있는 api를 가지고 온 후 fetch를 한다. 이 때 링크 뒤를 보자. minimum_rating이 8.8이고, year순으로 정렬! 앞선 강의와 다른 점은, async.. 2022. 3. 25. [영화 웹 서비스 만들기] #10. Coin Tracker ~7.2강 그냥 단순하게 암호화폐들과 그 가격들을 나열할 것인데, 이것을 위해서 useEffect를 사용할 것이다. 처음에는 로딩메시지가 보이고, 코인들이 나열되면 로딩메시지를 숨기고 리스트로 보여주는 것이다. state를 만들면서 시작할 것인데, 하나는 loading, 하나는 coin용이다. 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.. 2022. 3. 25. [영화 웹 서비스 만들기] #9. To Do List ~7.1까지의 강의 엄청 간단한 to-do-list를 만들어 보자. onChange const onChange = (event) => setToDo(event.target.value); input에 값이 Change될 때, 호출되는 함수이다. setToDo에 값이 들어간다고 생각하면 편하다. 이걸 지정하지 않으면, 값이 변해도 내 눈에 보이지 않는다. onSubmit const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; toDo가 비어 있으면 그냥 return 한다. 여러개의 toDo를 받.. 2022. 3. 25. [영화 웹 서비스 만들기] #8. Effects ~6.4까지의 강의 App.js import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } export default App; 딱히 달라진 건 없지만, state 변경시, 모든 코드가 다시 실행된다. console로 확인가능 위에서 state 변경 시 모든 코드가 다시 실행되는 것을 확인할 수 있었다. 그런데 가끔은 우리가 특정 코드의 실행을 제한하고 싶다. 즉, component가 처음 render되.. 2022. 3. 24. [영화 웹 서비스 만들기] #7. Create REACT App ~5.1까지의 강의 create-react-app을 사용한다면, 어플리케이션을 만듦에 있어 훨씬 쉬워질 것이다. create-react-app이 엄청나게 많은 스크립트와 사전 설정이 있기 때문이다. 시작하는 거 정리할 겸 나름 자세하게 적었음 1. nodejs 다운로드 node -v : 있는지 버전확인 가능함 2. npx 작동 3. npx create-react-app react-movie-service react-movie-service 자리에 자기가 원하는 이름을 적어주면 된다. 이렇게 하면 react-movie-service라는 이름을 가진 리액트가 생성되는데, 그 전에 저장될 공간을 옮기자~ 4. code react-movie-service vs코드에서 열기 참고) package.json으로 가면.. 2022. 3. 23. [영화 웹 서비스 만들기] #6. Props ~4.3까지의 강의~ 앞선 강의에서, 우리는 logic을 가지고 말 그대로 JSX를 분리된 component로 만들었다. ( 이런거) props는 부모 component로부터 자식 component에 데이터를 보낼 수 있게 해주는 방법이다. 앞서서, 자식 component는 부모 component의 데이터를 필요로 하지 않고, 독립적이 었다. (자식 component는 이런거 였고, 부모는 이었음) 이제, 부모 component로부터 자식 component로 데이터를 보내보자. 그 전에 props로 해결이 가능하게 될 문제들을 가정해보자. 어플리케이션은 다양한 버튼을 가지고 있는데, 어떻게 리액트 component를 재사용 할 수 있을까?! component는 단지 JSX를 반환하는 함수이다. 그게 co.. 2022. 3. 22. 이전 1 2 3 4 5 6 7 다음
