프로젝트

Firestore는 Full Text Search를 지원하지 않는다. Full Text Search는 검색어를 입력했을 때 그 검색어가 포함된 문서들을 보여주는 것이다. Firestore 자체의 기능으로는 불가능하므로 써드파티가 제공하는 서비스를 이용해야 한다. https://firebase.google.com/docs/firestore/solutions/search?hl=ko 전체 텍스트 검색 | Firestore | Firebase Firebase 데모 데이가 시작되었습니다. Google 최고의 기술을 활용하여 AI 기반 풀 스택 앱을 빌드하고 성장시키는 방법에 관한 데모를 시청하세요. 의견 보내기 전체 텍스트 검색 컬렉션을 사용해 firebase.google.com Firestore에서는 3개의 업..

CRA의 대체로 나온 Vite를 사용해볼 것이다. Vite는 CRA보다 속도가 빠르고 메모리를 적게 잡아먹는다는 장점이 있다고 한다. 프로젝트 만들기 npm create vite@latest 위 명령어를 입력하면 프로젝트를 만들 수 있는데 설정해주어야 할 것이 몇 개 있다. Project name - 따로 설정해주지 않으면 vite-project로 생성된다. Select a framework - 방향키를 이용하여 아래의 목록 중에 원하는 프레임워크를 선택하면 된다. Select a variant - 자바스크립트/타입스크립트 중에 선택할 수 있고 SWC를 사용할건지 선택할 수 있다. SWC에 대한 설명은 여기로 리액트 프로젝트 실행 vite-project 폴더로 이동해서 필요한 패키지를 설치하고 실행시켜보..

로그인 후 유저 데이터는 잘 받아오고 배열도 잘 있는데 이 오류가 떠서 의아했다. 찾아보니 리액트에서 화면이 처음 렌더링될 때 발생하는 오류인 것 같다. 다시 화면을 새로고침하면 화면이 정상적으로 나온다. 이 오류가 발생하는 이유는 리액트는 렌더링이 화면에 커밋된 후에야 모든 효과를 실행하기 때문이라고 한다. 즉, map을 실행할 배열이 아직 undefined 상태이기 때문에 이런 일이 발생하는 것이다. 이 오류를 해결하려면 3가지 방법을 이용하여 해결할 수 있다. map이 실행되는 배열을 빈 배열로 초기화시켜준다. 삼항 연산자 또는 && 연산자를 이용하여 객체의 속성값이 없거나 undefined라면 map 함수가 실행이 되지 않게 한다. optional chaining 연산자(.?)를 이용하여 객체의 ..

와 과 같은 몇몇 태그들은 클릭 시 페이지 이동이나 새로고침이 발생하게 된다. react는 SPA(Single Page Application)이므로 submit이 동작했을 때 페이지가 새로고침되지 않도록 하려면 e.preventdefault() 함수의 사용이 필요하다. 비슷한 함수로는 e.stopPropagation()이 있는데 이는 이벤트 버블링을 막기 위한 함수이다. 이벤트 버블링이란 자식 element에서 발생한 이벤트가 부모 element로 전달되는 현상인데 e.stopPropagation()을 사용하면 이것을 막아줄 수 있다. 하지만 기본 이벤트를 막아주지는 못한다.

유저가 같은 문장에 대해 이미지 재생성을 원할 경우 재생성을 할 수 있는 기능을 추가하였다. 재생성 버튼을 누르면 같은 문장에 대해 새로운 이미지를 생성해주고 S3에 저장된 이미지를 새로운 이미지로 바꿔준다. 그렇지만 같은 URL을 사용해서 그런지 화면에서는 새로운 이미지가 아닌 이전 이미지만 계속 나오는 현상이 있었다. 원인을 생각해본 결과 아마 이미지가 캐싱돼서 그런 것으로 추측하고 이미지가 캐시되지 않도록 해주었다. img className 옵션에 NO-CACHE 를 추가해주고 이미지 src 뒤에도 Date.now() 함수를 넣어 파라미터를 넣어주었다. +) 이때는 시간이 없어서 그냥 이렇게 한다고만 하면 되고 대충 넘어갔는데 프로젝트를 정리하며 찾아보니 S3에서 파일의 메타데이터 설정을 통해서 캐..