생각하다 생각하다

https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com firebase 홈페이지에서 프로젝트 생성 src/firebase.js 생성 src/firebase.js import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore"; import "firebase/compat/storage"; const firebaseConfig = { apiKey: "AIzaSyA5mG6njbjd4flGqr8TMo4Nn7tu-Rc..

npm i gh-pages 결과물을 github pages에 업로드할 수 있게 해주는 패키지 깃 레포지토리 생성 후 push까지 완료한 후에 아래 작업들을 수행한다. package.json }, "homepage": "https://[깃아이디].github.io/[레포지토리명]" } git remote -v 레포지토리명 확인 package.json "deploy": "gh-pages -d build", "predeploy": "npm run build" "scripts": { } 안에 위 코드 추가해주기 npm run deploy 배포하기

import { useState, useEffect } from "react"; function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); // console.log("i run all time."); useEffect(() => { console.log("i run only once."); }, []); useEffect(()=>{ console.log("i run when '..

1. CRA 사용하기 cra란? : create-react-app 사용법 npx create-react-app 리액트_파일명 cd 리액트_파일명 npm start 2. 컴포넌트에 css 입히기 방법 1. css 파일에 평범하게 작성 방법 2. js 파일에서 태그 내부에 style={{ }} 로 작성 방법 3. @@.module.css 사용하기 (권장됨) by using className @@.module.css 파일 내부에 평범하게 css 처럼 작성하고 사용할 파일에 import 해서 불러온 후 className={style.클래스이름} 으로 사용 import styles from "@@.module.css"; // 사용할 태그 내부에 // className = {style.title} 입력

시 분 변환기 function MinutesToHours() { const [amount, setAmount] = React.useState(); const [inverted, setInverted] = React.useState(); const onChange = (event) => { setAmount(event.target.value); } const reset = () => setAmount(0); const onInvert = () => { reset(); setInverted((current) => !current); } return ( Hours Reset {inverted ? "Turn back" : "Invert"} ) } function KmToMiles() { return( KM 2 ..

1. 함수형 컴포넌트 App.js function SaveBtn() { return Svae Changes ; } function ConfirmBtn() { return Confirm ; } function App() { return( ); } 과 과 같은 컴포넌트를 함수형 컴포넌트라고 한다. 2. 컴포넌트 변경하기 by using Props props를 이용하면 같은 버튼을 두 개 만들 필요가 없다. Btn이라는 함수형 컴포넌트를 하나만 만들고 text만 바꿔주면 위와 같은 두가지 버튼을 얻을 수 있다. function Btn() { return ; } function App() { return( ); } 1. Btn에 text 속성 추가하기 function Btn() { return ; } funct..

1. 클릭 수 세기 -> 바닐라JS, 리액트JS로 각각 구현 vanilla.html Total Clicks: 0 Click me ​ react.js const root = document.getElementById("root"); function Add() { const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter + 1); } return ( Total clicks: {counter} Click me ) } ReactDom.render(, root); 2. React.useState() state를 바꾸는 두 가지 방법 1. 직접 설정 const [counter, setCounter] = Rea..