React

더보기 이전글 :: [React] useState, onChange를 활용하여 input값 변화시키기! input 상태관리 https://june6.tistory.com/33 :: [React] Input - submit - form 구현하기 [리로딩 방지 외] https://june6.tistory.com/36 목표 useState를 사용하여 간단하게 리스트에 내용을 추가한다. 일단 이전에 작성했던 코드를 가져와보았다. //InputForm.js import React, { useState } from 'react' const InputForm = ()=>{ const [text, setText] = useState('') const onChange =(e)=>{ setText(e.target.valu..

목표 input에 있는 내용을 submit 하였을 때 리로딩을 방지하고 input값을 제대로 전달한다. InputForm.js 파일 생성 후 아래와 같이 기본 내용을 마크업한다. ** InputForm.js ** import React from 'react'; const InputForm = () => { return( 이름 : ) } export default InputForm; Input에 내 이름을 입력하고 버튼을 클릭했을때 내가 입력한 input 값이 제대로 넘어가는지가 궁금했다! 일단 input 상태를 먼저 변화시키자. const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); } . .생략 . ..

목표 useState, onChange를 활용하여 input값 변화시키기! input 상태를 관리할때는 useState, onChange 를 사용할 수 있다. input에 value값 수정했을때 바뀌지 않을 경우 아래와 같이 설정을 바꿔보쟈 import { useState } from 'react'; import './App.css'; function App() { const [value, setValue] = useState(''); const onChange =(e)=>{ setValue(e.target.value) //console.log(e.target.value) } return ( 내용 : {value} ); } export default App; 1. const onChange는 input에..

https://developers.naver.com/notice/article/9553 영화 서비스 API 지원 종료 안내 [23.3.31.예정] - 공지사항 developers.naver.com 서비스 지원 종료로 안되는거였다........

오랜만에 신규 프로젝트를 생성했는데 아래와같은 오류가 떴다.. O는 성공한 방법 X는 시도했지만 실패한 방법 ( 다른사람은 될 수도 있음 ) [eslint] Failed to load plugin 'jsx-a11y' declared in 'package.json » eslint-config-react-app': Cannot find module 'deep-equal' 모르는 건 냅다 구글검색. ❌npm 공식 홈페이지 https://www.npmjs.com/package/deep-equal deep-equal node's assert.deepEqual algorithm. Latest version: 2.2.1, last published: 2 months ago. Start using deep-equal ..

목표 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..

목표 구글 로그인 구현하기. 엄청난 오류 발생으로 머리가 아팠지만.. 엄청난 구글링으로 해결했습니다.. 주요 키워드 : 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..