All

목표 Firebase 를 이용하여 신규 사용자 가입 (이메일 가입) 구현하기. 구글에서 제공한 기본 코드 그대로 복붙하여봤지만 역시나 제대로 구현이 안됐습니다.. 하지만 2시간동안 지지고볶다가 겨우 완성한 기능!!! 너무뿌듯해요. import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCo..

에러가 발생한 곳: const onSubmit = async (event) => { // createUserWithEmailAndPassword는 promise를 return 하기 때문에 async로 비동기화 시킴 event.preventDefault(); try { createUserWithEmailAndPassword(/*이 부분에서 에러 발생*/ email, password); } catch(error) { console.log(error); } }; 해결 : const onSubmit = async (event) => { // createUserWithEmailAndPassword는 promise를 return 하기 때문에 async로 비동기화 시킴 event.preventDefault(); tr..

목표 :hover 이벤트에 대해 알기 특성 마우스를 올릴 요소를 A, 주고싶은 변화를 B 라고 칭했을 때. A:hover {B;} 형식으로 CSS를 작성해주면 됩니다. 학습 1) HTML 마크업 저는 각 텍스트에 마우스를 올렸을때 (hover 했을 때) 해당 글씨대로 색깔을 변경해보려고 합니다. 빨간색 파란색 검정색 배경, 하얀색 글씨 2) CSS 그리고 무쟈게 간단한 CSS .red:hover{color:red;} .blue:hover{color:blue;} .bnh:hover{color:white; background:black;} 결과

목표.on('click',function(){}) 함수에 대해 알아보자. 함수.on('click',function(){발생시킬 이벤트 함수 작성})이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다..on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.그건 나중에 따로 다루도록 하겠습니다. 학습1. HTML 우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다. 이 버튼을 클릭 해 보세요. 2. JavaScript이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.$(function(){ console.lo..

목표 append, appendTo, prepend, prependTo 함수에 대해 알아보자. 함수 1) append(), appendTo() : 원하는 요소를 '맨 뒤' 에 추가하는 함수. 2) prepend(), prependTo() : 원하는 요소를 '맨 앞' 에 추가하는 함수. 학습 1) HTML 마크업 안녕하세요. 배가고파요. 2) JacaScript A, B 의 위치를 정확하게 파악할것. $(function(){ console.log('연결성공!') //A = 새로 추가할 내용 //B = A가 추가될 요소(태그) //append = B의 맨 마지막에 추가됨. //appendTo //A.appendTo(B) $('이건 뒤에 추가되는 append() ').appendTo('div > ul') //..

목표 구글 로그인 구현하기. 엄청난 오류 발생으로 머리가 아팠지만.. 엄청난 구글링으로 해결했습니다.. 주요 키워드 : signInWithGoogle, GoogleAuthProvider Firebase 가입 및 로그인 https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 내 SDK 설정 및 구성 확인하기. 사진에 체크된대로 누르고 아래로 스크롤을 내리면 나의 SDK 키를 확인할 수 있습니다. 추가 생성 파일 목록 jsconfig.json(선택사항) fbase.js 1) jsconfig.json (선택사항 : import 시 파..

렌더링이 될 때 마다 감지하는 useEffect. react class형 컴포넌트의 [componentDidMount, componentDidUpdate]와 유사합니다. Info.js import {useState, useEffect } from 'react'; const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(()=>{ console.log('렌더링 완료'); console.log({name, nickname}); }); const onChangeName = e => { setName(e.target.value); }; const onChangeNi..

useState는 가장 기본적인 Hook 이며, 가변적인 상태를 지닐 수 있게 해 주는 훅 입니다. 함수 컴포넌트에서 상태 관리를 할 때에는 useState 를 사용할 것입니다. Counter.js import {useState} from 'react'; const Counter = () => { const [value, setValue] = useState(0) //useState의 파라미터는 기본값을 의미한다. 따라서 0 은 value의 기본값이 된다. return( 현재 카운터 값은 {value} 입니다. {setValue(value + 1)}} >+1 {setValue(value - 1)}} >-1 ); }; export default Counter; 현재 useState 가 호출되었을 때 [va..

HTML 이나 CSS 에서는 이미지를 넣기가 쉽지만 React에서는 다른 방법으로 이미지를 넣어야만 합니다. 방법은 아래처럼 import 이후 사용하면 됩니다. import myImg from '이미지경로/이미지이름.jpg' // myImg는 아무렇게나 바꿔도 된다.