프로그래밍/흔적
-
firebase algolia extension 설정 (Algolia API Key)프로그래밍/흔적 2022. 11. 21. 16:53
firebase extension으로 algolia 사용하려는데 Aloglia API Key 부분에서 막혀서 삽질의 기록을 남김 1. Algolia에 로그인 후 왼쪽 하단 Settings를 클릭 2. API Keys 클릭 3. All API Keys 탭에서 New API Key 버튼 클릭 4. 여러 정보들을 입력 후 가장 아래 ACL 에서 addObject, deleteObject, listIndexes, deleteIndex, editSettings, settings 추가 후 Create 버튼 클릭 5. 생성된 API 키를 복사해서 firebase extension Search with Algolia에서 사용 - 끝 -
-
firebase AppCheck 설정 in web ( with NextJS ) | localhost에서 사용 (debug mode)프로그래밍/흔적 2022. 11. 21. 15:13
App Check - 승인되지 않은 클라이언트가 백엔드 리소스에 액세스하는 것을 방지하여 API 리소스를 남용하지 않도록 보호 1. 빌드 - AppCheck - 앱 - 내 앱 클릭 2. reCAPTCHA 보안 비밀 키 입력을 위해, recaptcha 생성 사이트로 이동하여 reCAPTCHA 생성을 위한 필수 값 입력 후 제출 3. 제출 후 등록된 reCAPTCHA 비밀 키 복사 클릭 4. 빌드 - AppCheck - 앱 - 내 앱 - reCAPTCHA의 보안 비밀 키에 붙여넣기 후 저장 5. 등록 완료 되면 오른쪽 메뉴 열기를 클릭 후 디버그 토큰 관리 클릭 6. 디버그 토큰 추가 클릭 (웹 브라우저 콘솔에서 받아오는 방법 or 토큰 생성 버튼 클릭해서 생성하는 방법) (첫번째 방법으로 설명) 7. lo..
-
[GA4] SPA 페이지뷰 설정 - 향상된 측정 | react, nextjs, google analytics프로그래밍/흔적 2022. 8. 29. 21:09
React와 NextJS를 사용 중인데 페이지뷰 측정이 제대로 되지 않았다. 처음 페이지를 불러왔을 때나, 다른 페이지 이동 후 refresh를 했을 때만 측정이 됐다. 이런저런 검색을 해보니 설정에서 향상된 측정을 키면 된다. 1. 관리 - 데이터 스트림 2. 목록에서 수정할 항목 클릭 3. 향상된 측정을 킨다. (기본값으로 꺼져있다) 완료. 추가 설명 향상된 측정의 오른쪽 아래 ⚙ 아이콘을 눌러보면 해당 측정들에 대해 상세 설명이 나온다. 고급 설정 표시를 눌러보면 브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항에 체크가 되어있는데, 이게 SPA 페이지뷰를 지원하게 해준다. 끝
-
firebase cloud functions 설치, 설정 with typescript | cors프로그래밍/흔적 2022. 8. 11. 17:25
여러번 설치 했었음에도 같은 실수를 반복하는거 같으니 메모. 1. firebase-tools 설치 후 터미널에서 폴더 하나를 만들어 들어간 후 아래 명렁어 입력. firebase init functions 2. project 선택 후 Typescript 선택 3. ESLint는 생략을 추천한다. (no) (이게 많은 번거로움과 문제들을 일으키곤 하니, 필요하다면 나중에 설정하도록 하자.) 4. 실행하면 로컬에서 테스트 할 수 있는 http 주소를 준다. 이를 브라우저 주소창에 입력 후 접속해본다. cd functions && npm run serve 5. server-side에서 요청시는 문제가 없지만, client-side에서 요청시 cors 에러가 나므로 cors를 추가해준다. import * as ..
-
[오류 해결] serviceAccount is not assignable to parameter of type 'string | ServiceAccount'. | firebase cloud functions프로그래밍/흔적 2022. 8. 10. 20:34
소스 코드 admin.initializeApp({ credential: admin.credential.cert(serviceAccount), }); 오류 메시지 import serviceAccount Argument of type '{ type: string; project_id: string; private_key_id: string; private_key: string; client_email: string; client_id: string; auth_uri: string; token_uri: string; auth_provider_x509_cert_url: string; client_x509_cert_url: string; }' is not assignable to parameter of type ..
-
codeload github 주소 의미 해석프로그래밍/흔적 2022. 8. 9. 15:43
예시 명령어 curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript codeload.github.com github 파일 다운로드 및 보관을 위한 캐싱 목적의 subdomain mui github 계정 소유자 id (owner) material-ui 해당 계정의 repository 이름 (repo) tar.gz 다운로드 받을 압축파일 형식 (tar, zip 등) master branch 이름 ( 주로 main, master ) tar 관련 명령어 -xz x는 압축해제, z는 gzip 사용 —strip=2 상위 2개의 경로를..
-
[React MUI] - 1분만에 nextjs, material ui, typescript 설치 및 사용하기프로그래밍/흔적 2022. 7. 28. 00:09
요약 1. Material-UI, NextJS, Typescript 적용된 프로젝트 다운로드 curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript 2. 폴더 이동 후 패키지 설치 cd nextjs-with-typescript && npm install 3. 실행 (아래는 실행결과) npm run dev 주의 사항 package.json에 의존성들이 모두 latest로 되어 있음으로 배포시 문제가 생길 수 있다. 따라서 학습용이 아니라면 패키지들을 모두 개별로 설치 해주자. (혹은 버전을 모두 적어주거나) npm insta..