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

Today, What I learned? 어느덧 프로젝트가 중후반 정도 왔다. 😇 나의 담당 기능을 얼추 마무리 한 날!... 오늘은 파이어베이스의 DB에서 데이터를 집계해주는 함수에 대해서 정리해보려 한다. 삽질을 꽤 많이 하기도 함 ㅎ (2시간가량..) getCountFromServer getCountFromServer 라는 파이어베이스 API가 있다. 이 메서드는 스냅샷을 찍어서 데이터의 개수를 가져올 수 있는 함수이고, 현재 백엔드 서버에서 직접적인 응답을 통해서만 동작하는 함수다. 아래와 같은 방식으로 구동한다. const coll = collection(db, "cities"); const query_ = query(coll, where('state', '==', 'CA')); const sn..

프로젝트 3~4일차 어찌저찌 정신없이 하다보니 일지 쓸 짬이 없었다 ^^.. 그래도 생각보다 완료들이 슬슬 늘어나고 있어서 다행이라는 생각!.. 또 팀원 모두가 최소 1개의 기능을 구현했다. 👏👏👏 기능 추가 할당도 협의를 통해 잘 이루어지는 중. 아직까지는 깃허브도 문제 생긴적이 없어서 다행이다! PR날리고 병합하는 것에 익숙해지는 중... 제법 그럴듯해~

Today, What I learned? 내 기능 구현도 하고 팀원들 에러도 봐주다보니 살살 녹는 하루... 🫠🫠🫠 프로젝트를 진행하며 파이어베이스에서 실시간으로 DB를 반영이 필요한 기능이 있었다. 오늘은 이 부분에 대해서 정리해보려고 한다! 파이어베이스에서 실시간으로 DB 반영하기 onSnapShot() 이라는 메서드를 이용한다. 이 메서드는 문서 스냅샷을 즉시 생성하고, 내용이 변경될 때마다 다시 호출되어 문서 스냅샷을 업데이트한다. 자세한 내용은 아래 파이어베이스 문서에서 확인해볼 수 있다. https://firebase.google.com/docs/firestore/query-data/listen Cloud Firestore로 실시간 업데이트 받기 | Firebase Firebase Summit..

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

프로젝트 찐 시작?.. 2일차. 사실상 오늘이 본격적인 시작이라고 봐도 무방할듯 하다? 본격적인 협업의 서막이 열렸다 😇 라우터 연결과 배포 준비 완료 주말동안 페이지간 라우터 연결에 성공하고 가비아에서 도메인 사다가 S3에 배포도 우선적으로 해두었다. 🙌 나중에 프로젝트 마무리 되면 업로드만 하면 된다~ PR 오늘 하루동안 이루어진 PR! PR을 보내고 받는 것에 좀 더 익숙해져가는 하루 🙂 유다시티 커밋 컨벤션을 써보기로 해서 좀 더 정돈된 문구로 커밋하고 PR을 보내고 있다. 디자인 보강.. 팀원들과 소통하며 디자인쪽의 허술한 부분 보강.. 유독 리뷰페이지에 그런 부분이 많았다. 🤔 작업 진척도 HTML/CSS 생각보다 마크업 작업이 빠르게 진행되고 있는 중 👏👏 일부 페이지들은 반응형 작업도 되어..

Today, What I learned? 바닐라 JS로 SPA를 구현하는 프로젝트 진행 중!.. 담당 페이지를 마크업 하고, 버튼을 클릭했을 때 이벤트 일어나는 것을 SPA 방식으로 어떻게 구현하는가.. 🤔 에 대해서 좀 헤맸던 지라 오늘은 이것에 대해 정리해보려 한다. Cannot read properties of null (reading 'addEventListner') 오늘 만난 에러. 이 전에도 한 번은 만난 적이 있던 것 같은 녀석.. 일단 저 에러는 이런 이유로 발생한다. html이 로드되기 전에 script를 먼저 불러왔다. 아직 html이 로드되기 전이기 때문에 addEventListener를 부여할 DOM을 찾지 못했다. 고로 null 값이 뜬다. 이 경우는 보통 script 태그를 ht..

11월 셋째 주를 보내며 11월 1일이 된 게 엊그제 같은데 왜 벌써 20일인지 의문.. 🤔 금요일을 기점으로 프로젝트가.. 본격적으로 시작되었다. 😂 새롭게 학습하게 된 개념들로 프로젝트를 진행해야 해서 걱정 반 용기반.. 그나마 희소식인 것은 발표일이 하루 미뤄졌다는 것!.. 이와 별개로 평일에 작성 중인 TIL... TIL 이라는 카테고리로 범주화하지 않고 그간 써오던 방식대로 각각 해당 카테고리에 쓰는 것이 낫지 않나 고민 중이다. 🤔 일단 다음주부터는 1개의 주제에 대해 써보기로!.. 👀 Fact 자료구조와 알고리즘 공부를 느리지만 이어가는 중.. 프로그래머스 문제들을 꾸준히 푸는 중 (아직 0단계지만~) 바닐라 js로 SPA 구현 특강을 들었다. 공부기간이 끝나고 프로젝트가 시작했다. 주말이 ..

프로젝트를 시작하며, 1일차. 본격적으로 기초 프로젝트가 시작되었다. 😇 지난 프로젝트를 바탕으로 이번 프로젝트 때는 기획을 좀 더 세부적으로 신경써서 해야겠다고 느끼며!.. 팀원들과 열심히 프로젝트에 뼈대를 붙였다. 주제? 좋은 아이디어를 가지고 있던 팀원분 덕분에 빠르게 주제를 정하고 슉슉 진행할 수 있었다. 이번 우리의 프로젝트명은 Swivee. (좀 멋진 이름인듯) 그럴듯하게 말해보자면 이용자들의 신발 리뷰를 통해 여러 브랜드의 신발과 구매자의 연결고리가 되어주는 서비스다. 짧게 신발 리뷰 모음 서비스라고도 축약할 수 있겠다. AI로 브랜드 이름과 로고를 생성할 수 있는 시대.. (대박적) 다른 팀원 분의 빠른 서칭으로 우리 프로젝트는 멋진 이름을 가지게 되었다. 👍 와이어 프레임 와이어 프레임은..

Today, What I learned? 본격적으로 프로젝트가 시작된 첫날.. 😂 기획과 와이어프레임을 잘 잡고~ 프로세스와 스레드에 대한 강의를 들었다. 쉽지 않은 개념인데 나름대로 풀어서 정리해본다. 프로세스? 운영체제로부터 할당받은 작업의 단위를 말한다. 이 각각의 작업들은 운영체제로부터 시스템 자원을 할당받는데, 자원이라는 것은 CPU 시간과 실행에 필요한 메모리 영역이다! 쉽게 말하면 프로세스는 실행되고 있는 하나의 프로그램이다. 아래와 같이 윈도우의 작업 관리자나 맥의 활성 상태 보기에서 실행되고 있는 많은 프로세스들을 볼 수 있다. 프로세스 주소공간 각각의 메모리를 할당받은 프로세스는 메모리를 관리하기 위한 프로세스 주소 공간을 갖는다. 프로세스 주소 공간은 이렇게 구성되어 있다. Code ..