어떤 에러? 이것은 사실 내가 발견하고 해결한 버그가 아니지만 오래 고생한 만큼 기록해 두기 위해.. 😇 리액트 네이티브 프로젝트 중 안드로이드에서만 발생하는 버그가 잡혔다. 뒤로 가기 버튼을 눌렀을 때 간헐적으로 다른 스택으로 가버리는 경우가 있었다. 스택을 reset을 이용해서 다시 쌓아주기도 했지만 별반 다를 것이 없었음.. 🤔 원인 스택 네비게이션에 탭 내비게이션의 아이콘 영역이 잡혀서 이 영역을 누르면 다른 스택으로 가는 것을 알게 됐다. 참고: 안드로이드 디버그 메뉴는 cmd + m으로 열 수 있다. 저게 무슨 영역인가 보니 하단 탭바를 구성하는 아이콘이었다. 특정 화면에서만 탭바를 보여주기 위해 보여줄 화면 이외에는 {display: "none"} 처리를 하고 있었는데, 뭔가 버그가 있던 것..

어떤 에러? Uncaught TypeError: ~~. map is not a function API 호출 중에 유독 한 API 만 이런 에러가 발생... 스택오버플로우를 보니 오브젝트는 map 메서드를 갖고 있지 않아서 사용할 수가 없다~ 이런 얘기들이 많았는데, 나는 당연히 배열로 잘 빼왔는데 무슨 말이야?.. 하고 있었던 것이다 ^^.. const getTeamsData = async (companyId) => { try { const response = await axios.get( `~~~API 주소` ); setTeamsData(response.data.teams); } catch (error) { console.log(error); } }; 현재 API 호출 함수에서는 바로 배열을 state..

어떤 에러? 프로필 이미지가 사용되는 어느 곳이던 나타나던 이 403 에러.. 프로필 이미지를 제대로 못가져와서 그런 듯 보였다. 그래서 프로필 이미지가 빈번하게 제대로 뜨지 않았다. 이렇게 비어있는 이미지를 확인해보면 src가 비어있는 것을 볼 수 있다. 원인 파악 이 문제는 구글로 로그인한 계정에만 나타나는 현상.. 403 에러는 서버에 요청을 했지만 권한상의 문제로 거절되었다는 에러라는데, 보통 다른 도메인에서 호출할 때 발생한다고 한다. 다른 도메인에서 온 요청임을 확인하고 거절했단 것이다. 해결 과정 https://stackoverflow.com/questions/56242788/http-403-on-images-loaded-from-googleusercontent-com HTTP 403 on ..

어떤 에러? 파이어베이스 스토리지에 이미지 업로드를 구현하던 중 CORS 에러를 만나게 되었다. Access to XMLHttpRequest at '~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 원인 파악 교차 출처 리소스 공유 (Cross-origin resource sharing)가 허용이 되어있지 않아서 생긴 오류!.. CORS 에러를 해결하기 위해서는 클라이언트 ..

어떤 에러? 프로젝트를 진행하며 내려준 props를 뿌려주다가 input 관련 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 원인 파악 위의 콘솔들을 보니 페이지 진입 시에는 괜찮은데, 새로고침 했을 때 uid를 가져오는 시간이 있어 userDat..

어떤 에러? 플랫리스트를 여러 개 사용하려다 보니 아래와 같은 에러가 발생했다. ERROR A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list. 플랫리스트가 중첩되지 않고 여러번 쓰일 때 모든 형제 리스트에게 키값이 필요한 것 같았다. 사실 에러에서 답을 주고있었지만 listKey가 keyExtractor와 연관이 있는줄 알고 많은 삽질을 했다 (...) key가 유니크한 값이 아니어서 그런가? 싶어서 이런 삽집들을 했었다. ..

에러 발생 멀쩡히 잘 되고있던 expo 서버가 갑자기 yarn start 하니 아래 오류를 내면서 종료되었다. node:events:505 throw er; // Unhandled 'error' event ^ Error: EMFILE: too many open files, watch at FSWatcher._handle.onchange (node:internal/fs/watchers:204:21) Emitted 'error' event on NodeWatcher instance at: at NodeWatcher.checkedEmitError (/Users/yjlee/project/intermission/node_modules/sane/src/node_watcher.js:143:12) at FSWatche..

Uncaught FirebaseError: The query requires an index. You can create it here: 파이어베이스로 프로젝트를 진행하던 도중 만난 에러!.. 지금까지는 DB에 있는 모든 댓글을 가져와서 렌더링 해주고 있었는데, 각 리뷰에만 작성한 댓글을 불러오기 위해 코드를 짜다가 만났다. 위의 에러 메세지를 보면 인덱스(색인)를 생성해야 한다고 해결 방법을 알려주고 있다. 아래 쿼리문 보면 where와 orderBy를 함께 쓰고 있는데 복합 쿼리여서 그런지 저 부분에 색인이 필요한 것 같다. 해결 파이어베이스 콘솔에서 firestore에 들어오면 탭에 색인이라는 것이 있다. 색인 추가를 누르면 아래와 같이 복합 색인을 만들 수 있는데, 적용할 컬렉션과 필요한 필드들의..

FirebaseError: Missing or insufficient permissions. 오늘 프로젝트를 진행하다가 파이어베이스에서 Cloud Firestore를 이용해서 데이터를 가져오려 하는데 만난 파이어베이스 에러다. 이 에러는 파이어베이스의 DB 접근과 관련해서 관련된 권한이 없어서 발생한 것이다. 그래서 파이어베이스 DB에서 보안규칙을 변경 해주어야 한다. 해결! 파이어베이스 보안 규칙 설정 아마 firestore를 생성했다면 이렇게 기본적으로 설정이 되어있을 것이다. 여기서 5번째 줄을 allow read, write: if true; 로 변경한다. 하지만 이 설정은 모든 사람이 권한없이 DB를 읽고 쓸 수 있는 것이기 때문에 테스트 환경에서만! 유효한 해결방법이라는 점... 일단 나는 테..