프로그래밍/웹 개발46 [Firebase] Uncaught FirebaseError: Missing or insufficient permissions 문제 상황 : firebase의 firestore에 데이터가 입력되지 않음 에러메세지 : Uncaught FirebaseError: Missing or insufficient permissions 원인 : firestore 데이터베이스에 접근 권한 허용이 안 됨 해결방안 : Cloud Firestore의 '규칙'에서 false를 true로 변경 rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; // false를 true로 변경 } } } 2022. 1. 17. [React] 리액트의 카카오맵 API - 인포윈도우 위에 클릭 이벤트 등록하기 지도의 마커에 인포윈도우를 띄우는 것 까지는 카카오맵 API 문서에서 제공합니다. 그러나 인포윈도우 위에 버튼 클릭이벤트를 등록하는 것은 커스터마이징이 필요합니다. 제가 구현했던 방법을 순서대로 아래와 같이 포스팅합니다. 1. 지도에 마커 클릭이벤트로 인포윈도우 띄우기 (카카오맵 API 문서) 카카오맵 API 문서 링크 : https://apis.map.kakao.com/web/sample/addMarkerClickEvent/ API 문서에 따르면 인포윈도우 내용은 HTML 태그를 문자열 형식으로 입력해야 합니다. 인포윈도우를 띄우는 코드는 아래와 같습니다. // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다 // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document elemen.. 2021. 11. 23. [React] 리액트에서 onSubmit / onClick 이벤트와 form 태그 form 태그의 내부 / 외부에서 각각 onSubmit / onClick 속성을 통해 이벤트핸들러를 실행해보았다. 그 결과와 사용 방법은 아래와 같다. form 태그 외부 : onSubmit / onClick 속성 0. 이벤트 핸들러 제작 // 이벤트핸들러 제작 const ClickEvent = () => { // AJAX 요청 } 1. onSubmit 이벤트 onSubmit 속성은 form 태그 내부에서만 사용가능함 아래 코드는 form 태그가 없으므로 onSubmit 속성 사용 불가능 return ( form 밖의 onSubmit 속성 ); 2. onClick 이벤트 onClick 속성은 form 태그와 무관하게 사용 가능 아래 코드처럼 form 태그 외부에서도 onClick 속성 사용 가능 retu.. 2021. 11. 23. [React] setState로 배열(array)와 객체(object) state 변경하기 참고 링크 : https://dev.to/andyrewlee/cheat-sheet-for-updating-objects-and-arrays-in-react-state-48np 배열(Array) const [state, setState] = useState([]); 배열에 엘리먼트 추가하기 1. slice 메소드로 배열 복사 후, 엘리먼트를 추가한 뒤 setState에 넣기 const AddElement = (element) => { const newState = state.slice(); // 기존 배열을 slice 메소드로 복사 newState.push(element); // 새 배열에 element 추가 setState(newState); // 새 배열을 setState에 입력하기 } 2. sprea.. 2021. 11. 23. [React] setTimeout, setState, useEffect 관계 setState, useEffect, setTimeout이 서로 어떤 영향을 주는지 여러 케이스를 테스트 해보았다. 함수 내에 setState만 2번 사용하는 경우 (setState에 number 할당) const [state, setState] = useState(false) const stateHandler = () => { setState(1) // state를 초가깂에서 1로 변경 setState(2) // state를 초가깂에서 2로 변경 } console.log('state', state) useEffect(() => { console.log('useEffect 실행') }, [state]) // console.log 결과 // state 2 // useEffect 실행 1. 결과 - stat.. 2021. 11. 11. [React] setTimeout 내부 setState 사용 후 useEffect 동작 안 되는 에러 setTimeout 내에서 setState로 state를 변경시킨 후 useEffect를 실행시키는 코드를 구현했다. 그런데 setState가 실행되어도 useEffect가 실행되지 않았다. 원인 - setState는 비동기적으로 state를 변경시킴 - 앞에서 실행된 setState로 인해, 뒤에서 실행된 setState는 state를 바꾸지 못하므로 useEffect 실행 안 됨 - 반복문 내에 setState를 사용해도 데이터가 축적되지 않는 것과 같은 원리 const [state, setState] = useState(false) const createCareer = () => { axios .post( `${process.env.REACT_APP_SERVER_URL}/career`, { jobS.. 2021. 11. 11. [React] 반복문 내에서 setState 사용? (에러) 반복문 내에서 setState를 사용했더니, 데이터가 쌓이지 않고 마지막에 넣어준 데이터만 적용되었다. 문제 상황 - 반복문 내에 setState를 사용하여 데이터 축적 시도 - 그러나 데이터가 쌓이지 않고, 반복문에서 마지막 순서의 데이터만 입력되었다. - 즉 반복문 조건이 0부터 i번째 까지라면, i번째의 데이터만 state에 입력되었다. 원인 - setState는 즉각적으로 상태를 업데이트 하지 않고, Promise를 통해 비동기적으로 상태를 변경시킨다. - 반복문을 돌리는 과정에서 setState를 사용해도, 반복문이 끝나기 전까지는 State가 변경되지 않는다. - 반복문을 돌려도 state가 바뀌지 않아서, 계속 초기 상태의 state를 사용하기 때문에 데이터가 축적되지 않는다. const [.. 2021. 11. 10. [React] useEffect 무한루프 탈출 (에러핸들링) React에서 useEffect가 계속 작동하는 무한루프가 발생하여 이를 해결해보았다. useEffect 실행 조건 - 아래와 같이 새롭게 컴포넌트가 렌더링 될 때, useEffect의 첫 번째 인자인 함수가 실행됨 - useEffect의 두 번째 인자인 종속성 배열에 따라서 useEffect 실행 조건이 달라짐 useEffect(함수, [종속성1, 종속성2, ...]) 1. 종속성 배열 자체가 없을 때, useEffect는 아래와 같은 상황에서 작동됨 - 컴포넌트 생성 후 처음 화면에 렌더링 - 컴포넌트에 새로운 props가 전달되며 렌더링 - 컴포넌트의 state가 바뀌며 렌더링 2. 종송성 배열이 빈 배열일 때, useEffect는 아래와 같은 상황에서 작동됨 - 컴포넌트 생성 후 처음 화면에 렌더.. 2021. 11. 10. 이전 1 2 3 4 5 6 다음 반응형