Web Service42 [트위터 클론 코딩] #4. Nweeting-Create, Read ~3.3까지의 강의 로그인 하면 나오는 Home에서 tweet용으로 form을 하나 만들것이다. Home.js import React,{useState} from "react"; const Home = () => { const [nweet, setNweet] = useState(""); const onSubmit = (event) => { event.preventDefault(); }; const onChange = (event) => { const { target: { value }, } = event; setNweet(value); }; return ( ); }; export default Home; 앞에서 설명했던 거랑 비슷한 코드가 너무 많아서, 딱히 설명할 것은 없는 듯 이제 Firestore .. 2022. 4. 1. [트위터 클론 코딩] #3. LogIn/Out-2 ~2.6까지의 강의 파이어베이스 공식문서에 가면 많은 것이 있는데, 우리는 Emailauthprovier을 보아야한다. 여기에 가보면, email과 password로 사용자를 생성하는 것과, 인증하는 것에 대해서 나와있다. Auth.js import { authService } from 'fbase'; import React,{useState} from 'react'; const Auth = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [newAccount, setNewAccount] = useState(true); const onChange = (event) => { c.. 2022. 3. 31. [트위터 클론 코딩] #2. LogIn/Out-1 ~2.2까지의 강의 AppRouter를 하나의 용도, 즉 Routes들만 보여주는 것으로만 사용해야 한다. 그래서 App.js에다가 useState를 쓴다음에 분리시켜서 쓸 수 있게 한다. 그 전에, fbase에 무엇인가를 추가해보자. export const authService = firebase.auth(); 먼저 authService를 사용하고 싶다면 import해야하는데, 우리는 이미 import했다. 그리고, 위의 코드를 export 시켜서 다른 곳에서도 authService를 사용할 수 있도록 한다. jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } jsconfig를 만들면, 덕분에 src로 시작되는 것을.. 2022. 3. 31. [트위터 클론 코딩] #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. 이전 1 2 3 4 5 6 7 다음
