파이어베이스 + 리코일 오류 : Cannot assign to read-only property 'currentUser' of object '#<AuthImpl>

1. 오류 발생 파이어베이스 사용해서 로그인+로그아웃 기능 구현 => 로그아웃 클릭시 해당 오류 발생 2. 오류 원인 리코일을 사용해서 로그인 상태를 전역관리하였음 => 로그인 시 리코일을 사용해서 저장시 오류 발생 => readonly 형식의 데이터를 다른 데이터로 업데이트 하려고 했던 것 => 얕은 복사로 인한 오류 발생 3. 오류 해결 ★ 리코일의 깊은복사를 해주기 ★ 깊은 복사 방법 : JSON객체 사용 ( JSON은 텍스트로 변환되서 , 아닌 경우 오류 발생) JSON.parse(JSON.stringify(obj)); 문제를 같이 고민하고 해결해준 ㅅㅎ님👍 (+리코일 깊은 복사 내용 공유) https://github.com/firebase/firebase-js-sdk/issues/5722 sig..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 28.
• textsms

TypeScript 오류 : InputHTMLAttributes 형식에 target 속성이 없습니다.

function App() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const inputTitle = (e: React.InputHTMLAttributes) => { setTitle(e.target.value); }; return ( 제목 ) 1. 오류 input 태그 onChange 이벤트 발생시, 타입 작성 : React.InputHTMLAttributes "InputHTMLAttributes 형식에 target 속성이 없습니다." 2. 해결 (1) input 태그의 타입 : onChange? 뒤에 있는 것 (2) 타입뒤에 Handler는 제외해야함 => 결론 : input 태그의 타입은 ..

• format_list_bulleted TypeScript
• · 2023. 12. 14.
• textsms

리액트 오류 : Too many re-renders. React limits the number of renders to prevent an infinite loop.

[원인] 로그인 에 onClick이벤트에서 리랜더링이 무한으로 돌아서 오류 발생 [해결] { setIsMember(false); }} > 로그인 화살표 함수 제대로 활용하기 onChange = {(event)=>{ } } 끝.

• format_list_bulleted React
• · 2023. 11. 29.
• textsms

리액트 오류 : A component is changing a controlled input to be uncontrolled.

[App.jsx] import { useEffect, useState } from 'react'; import './App.css'; import axios from 'axios'; function App() { const [todos, setTodos] = useState(null); const [inputValue, setInputValue] = useState({ //id : json의 방식의 데이터는 자동으로 입력됨 title: '', }); const fetchTodos = async () => { const { data } = await axios.get('http://localhost:4002/todos'); console.log('data', data); setTodos(data); }; ..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[오류] 리액트 styled-component : You may see this warning because you've called styled inside another component.

TIL ▶ styled-component는 작성 위치가 정말 중요하다 [오류 증상] styled-component를 적용시키고 나서 input 박스에 입력시 속도가 매우 느리고 포커스가 나감 [확인] 개발자도구로 확인하니 콘솔창에 해당 warning 확인 [문제 파악] 찾아보니 styled-components로 만든 요소의 선언 위치 때문이라고함! Header.jsx부분이 문제인것 같아 찾아보러감 >> 아니였음 styled component안에 직접적으로 작성한 함수가 문제였음 ▼문제 코드 ▼ import React from 'react'; import styled from 'styled-components'; function WriteComments() { const StDivWrite = styled..

• format_list_bulleted React
• · 2023. 11. 12.
• textsms

[오류] 리액트 datas is not iterableTypeError: datas is not iterable at onSubmit

[원인] 자식 컴포넌트에서 매개변수를 구조분해할당으로 안 가져옴. (전) function AddMessage(datas, setData) { (변경 후) function AddMessage({datas, setData}) { 1.Home.jsx const initialState = [ { id: uuid(), name: '하니팬', content: '하니최고최고', idol: '하니' }, { id: uuid(), name: '혜린팬', content: '혜린최고최고2', idol: '혜린' }, ]; const [datas, setData] = useState(initialState); ▶ 여기에서 를 컴포넌트로 만들어서 사용하기 ▶ (기능) 댓글 남기기 기능과 유사 2. AddMessage.jsx i..

• format_list_bulleted React
• · 2023. 11. 11.
• textsms