프로그래밍
-
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..
-
[React MUI 5] 인스타그램 클론코딩 - PostModal 구현 | 게시물 생성 모달프로그래밍/클론 코딩 2022. 8. 29. 23:50
결과물 1. src/components/Modal.js 를 생성 (MUI Modal) import * as React from 'react'; import Modal from '@mui/material/Modal'; import Box from '@mui/material/Box'; const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '100%', maxWidth: '500px', height: '500px', bgcolor: 'background.paper', boxShadow: 24, paddingBottom: '2rem', borderRadius: '12px', }..
-
[GA4] SPA 페이지뷰 설정 - 향상된 측정 | react, nextjs, google analytics프로그래밍/흔적 2022. 8. 29. 21:09
React와 NextJS를 사용 중인데 페이지뷰 측정이 제대로 되지 않았다. 처음 페이지를 불러왔을 때나, 다른 페이지 이동 후 refresh를 했을 때만 측정이 됐다. 이런저런 검색을 해보니 설정에서 향상된 측정을 키면 된다. 1. 관리 - 데이터 스트림 2. 목록에서 수정할 항목 클릭 3. 향상된 측정을 킨다. (기본값으로 꺼져있다) 완료. 추가 설명 향상된 측정의 오른쪽 아래 ⚙ 아이콘을 눌러보면 해당 측정들에 대해 상세 설명이 나온다. 고급 설정 표시를 눌러보면 브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항에 체크가 되어있는데, 이게 SPA 페이지뷰를 지원하게 해준다. 끝
-
[React MUI 5] 인스타그램 클론코딩 - Login Page 소셜 로그인 버튼 | google, apple, facebook프로그래밍/클론 코딩 2022. 8. 27. 23:23
결과물 1. Header.js 에 테스트용 user 추가 const [user, setUser] = React.useState(false); 2. 3항 연산자로 user 변수에 따라 헤더 오른쪽 상단 다르게 보이도록 수정 {/* profile */} {user ? ( {/* desktop icon group */} ...... ) : ( 로그인 )} 3. 로고 및 로그인 버튼 클릭시 이동 처리 위해 next router 사용하기 import { useRouter } from 'next/router'; // ...... const router = useRouter(); const MoveHomePage = () => { router.push('/'); }; const MoveLoginPage = () =>..
-
[React MUI 5] 인스타그램 클론코딩 - 피드 오른쪽 프로필(MiniProfile, Suggestions) with Faker.js | Avatar, List프로그래밍/클론 코딩 2022. 8. 25. 23:59
결과물 1. MiniProfile.js 에 사용할 mockProfile 생성 import * as React from 'react'; import { faker } from '@faker-js/faker'; function MiniProfile() { const [profile, setProfile] = React.useState(); React.useEffect(() => { const mockProfile = { email: faker.internet.email(), username: faker.name.findName(), avatar: faker.internet.avatar(), id: faker.datatype.uuid(), }; setProfile(mockProfile); }, []); ret..
-
[React MUI 5] 인스타그램 클론코딩 - 게시물(Posts) 영역 만들기 with Faker.js | caption, comment, TextField프로그래밍/클론 코딩 2022. 8. 22. 23:57
결과물 1. CardContent와 Typography로 caption 채우기 import CardContent from '@mui/material/CardContent'; ...... {/* Caption */} {username} {caption} 2. 글자가 넘치므로 한 줄로 줄이기 {/* Caption */} ...... 3. Post.js 파일에 mockComments 생성 (with faker.js) import { useEffect, useState } from 'react'; import { faker } from '@faker-js/faker'; ...... function Post({ id, username, userImg, img, caption }) { const [comments,..
-
[React MUI 5] 인스타그램 클론코딩 - 게시물(Posts) 영역 만들기 with Faker.js | CardHeader, CardMedia, CardActions프로그래밍/클론 코딩 2022. 8. 21. 23:59
결과물 1. src/components/Post.js 생성 function Post({ id, username, userImg, img, caption }) { return ( {/* Header */} {username} {/* Media */} {/* Buttons */} {/* Caption */} {/* Comments */} {/* TextField */} ); } export default Post; 2. src/components/Posts.js 생성 및 Faker.js로 mock import { faker } from '@faker-js/faker'; import { useEffect, useState } from 'react'; import Post from './Post'; functi..