JudithHopps JudithHopps

이벤트 핸들링 const onChange = e => { const next = { ...form, [e.target.name] : e.target.value} setForm(nextForm); } ref : Dom에 이름 짓기 1. 사용 이유 - Dom을 직접 건드려야 할 때 ex 1. 특정 input에 포커스 ex 2. 스크롤 박스 조작 ex 3. canvas 요소 그림 그리기 2. 사용 방법 a. 콜백 함수 {this.input=ref}} /> b. createRef input = React.createRef(); 컴포넌트 반복 (= 반복 데이터 렌더링) 배열의 map 이용 const name = ['a', 'b', 'c', 'd', 'e'] const nameList = name.map((name..

컴포넌트 리액트로 만들어진 앱을 이루는 최소한의 단위 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 예시 ) App.js import TodoTemplate from "./TodoTemplate"; 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 const Welcome = ({props}) => { return Hello, {props.name}; }) 클래스형 컴포넌트와 함수형 컴포넌트 차이 클래스형 컴포넌트 함수형 컴포넌트 render 함수 필요하고 JSX 반환 return문으로 실행 후 사라..

Vs code 설정 1. ESlint : 문법확인 2. Prettier : 가독성 3. 자동저장 (설정 -> autosave) 4. ReactJS CodeSnippet : 코드 스니펫 rsc + enter (또는 tab) 5. VS-Code-Styled-Componenets : 색상 6. indent-rainbow : 블록 색상으로 표시 자동 저장 File -> Auto Save Fragment = return ( hello ) App.js import React from 'react'; const App = () => { const name = "Judith-hopps" return ( {name} ); }; export default App; 조건문 1. 삼항 연산식 { 조건식 ? () : () } ..

문제 : github에 배포 후에 소셜 로그인이 작동되지 않고 아래 에러 메시지 창이 뜬다. 이유: 파이업이스의 접근 권한 보안 설정으로 도메인이 인증되지 않아 firebase의 접근이 막혀있다. 해결 방법 : firebase 콘솔 >> Authentication >> setting >> 승인된 도메인에 url을 적어준다. 단, 위 사진처럼 도메인에 https를 제외하고 적어주어야 한다. 위 과정대로 하면 배포된 도메인에서 firebase가 실행되는 것을 볼 수 있다.

문제점: 파이어 스토어에 이미지 업로드를 할 수 없다. 이유 : 파이어스토어의 보안 규칙이 업로드를 제한하고 있기 때문이다. 해결방법 : 파이어 스토어 >> 콘솔 >> 빌드 >> storage >> Rules 에 들어가 규칙을 아래와 같이 수정해준다. rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } } 그럼 사진이 저장이 되는 것을 확인할 수 있다. 참고 사이트 https://stackoverflow.com/questions/70052479/firebase-storage-an-unknown-error-occurred-please-c..

[클론코딩 트위터] 104p 코드이다. // import { useState } from "react"; import { HashRouter as Router,Redirect, Route, Routes } from "react-router-dom"; import Auth from "routes/Auth"; import Home from "routes/Home"; import Profile from "routes/Profile" import Navigation from "./Navigation"; const AppRouter = ({isLoggedIn}) => { // const [isLoggedIn, setIsLoggedIn] = useState(true); return ( {isLoggedIn && }..

import { firebase } from "firebase/app"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIzaSyD_aU7oUOMoiFJpD3DdvDs3YPjQKe4-Yp0", authDomain: "twitter-3141f.firebaseapp.com", projectId: "twitter-3141f", storageBucket: "twitter-3141f.appspot.co..

배포를 했는데 제대로 작동이 되고 있지 않다. 문제를 해결해야 한다 해결방법 : package.json 페이지 "homepage"의 링크를 확인해준다. 꼭 https://judithhopps.github.io/movie_correct/ 이런 형식이여야 한다. npm run build 후에 npm run deploy를 해준다. 그 결과 아래와 같이 화면을 볼 수 있다. https://judithhopps.github.io/movie_correct/ Youflex judithhopps.github.io