분류 전체보기94 [트위터 클론 코딩] #1. Setup 이번에도 마찬가지로 노마드 코더의 강의를 참고해서 공부! 1월에 다 듣고 3강까지는 2회독을 해서, 수월하게 들을 수 있을 것으로 생각한다. https://nomadcoders.co/nwitter/lobby 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co ~1.2까지의 강의 먼저 npx create-react-app 프로젝트이름을 쳐서 프로젝트를 생성한 후, code 프로젝트이름을 쳐서 VScode를 통해 프로젝트를 열자. 그 후깃허브와 연결시킨다. 이미 만들어진 파일과 깃허브 repository를 연결시키는 방법 git remote add origin url 이제 깃허브-파일은 연결시켰고, 파이어베이스와 내 파일을 연.. 2022. 3. 27. [영화 웹 서비스 만들기] #13. Final! 깃허브를 통해 배포하는 방법을 알아보자! gp-pages 깃허브에서 제공하는 무료서비스이다. 깃허브 페이지에 업로드할 수 있게 해주는 것이다. npm i gh-pages 로 설치한다. 그 후 package.json에 있는 scripts를 확인하자. build가 있는 것을 확인할 수 있다. npm run buil 를 입력하면 build라는 파일이 생성된다. 이 파일에는 JS가 엄청 많은데, 이것은 브라우저가 이해할 수 있는 코드로 우리가 만든 코드들이 압축되었다고 생각하면 된다. push하기 전에, 마지막에 , "homepage" : "https://사용자이름.github.io/repository이름" 를 추가하자 이때, repository 이름은 git remote -v를 치면 확인가능하고, 마지막에 ... 2022. 3. 25. [영화 웹 서비스 만들기] #12. React Router ~7.6 까지의 강의 React Router dom에 대해서 알아보자. App.js import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( Hello ); } export default App; 먼저 사용하기전에 import를 해야한다. BrowserRouter는 URL의 생김새를 말한다. HashRouter도 있는데, 이것은 뒤에 #이 붙어서 아주 작은 차이점이 생긴다. Switch는 Route를 찾는 것이다. 이 때, Route는 URL을 의미한다. .. 2022. 3. 25. [영화 웹 서비스 만들기] #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. 이전 1 ··· 10 11 12 13 14 15 16 다음
