ksw_devlog

CSS, background : linear-gradient() 배경색을 2가지 이상 넣고 싶을 때 사용 ex) const YellowBar = styled.div` width: 1152px; height: 320px; background-color: #feff80; background: linear-gradient(#111111 28%, #feff80 28%, #feff80 72%, #111111 72%); display: flex; align-items: center; position: relative; `;

React Recoil을 활용하여 클라이언트 서버 관리 react query로 서버 데이터를 불러오고 recoil로 클라이언트 데이터를 관리할려고 한다. 1. atom import { atom } from "recoil"; const postState = atom({ key: 'postState', default: [], }); export default postState; 전역으로 사용할 파일을 생성 2. 서버에서 불러온 데이터를 state에 넣어주기 import Router from './shared/router'; // import { init } from '@amplitude/analytics-browser'; import GlobalStyle from './components/GlobalStyl..

이번 주는 추가기능으로 알림 기능을 구현하기로 했다. 알림이란 단어에 너무 의식했는지 2~3일동안은 firebase realtime database 자료를 봤지만 참고할 자료가 대부분 옛 자료여서 어떻게 활용할 지 감이 안 잡혔었다. 알고보니 realtime database가 구버전이고 firestore database가 신버전이라 firestore를 활용하는게 맞는 선택이었다. 2~3일에 시간을 조금 낭비한 것 같은 생각이 들어 아쉬웠던 주였다.

알림 기능 만들기 알림 기능이 필요한 경우 : 1) 내가 신청한 모임에 참여 수락 되었을 때 2) 내가 개설한 모임에 참여신청이 들어왔을 때 1. teamPage 데이터 가져오기 useEffect(() => { const teamPageCollectionRef = collection(db, 'teamPage'); const q = query(teamPageCollectionRef); const getTeamPage = onSnapshot(q, (snapshot) => { const teamPageData = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); setTeamPage(teamPageData); }); return getTeamPage..

realtime database import { getDatabase, onValue, ref, set } from 'firebase/database'; onst NotiBadge = () => { const [isRead, setIsRead] = useState([]); const database = getDatabase(); const testboolean = false const testlist = 'testlist' const onIsRead = () => { // 데이터 덮어 씌우기 set(ref(database, 'list1/uid'), testboolean) .then(() => console.log('success1')) .catch(() => console.log('error')) } u..

.env 설정 파일 : .env # amplitude REACT_APP_API_KEY=2eb40f7cdcfb1bc9a9258300ca9ad5e7 # map api REACT_APP_KAKAOMAP_APP_KEY=8631eb1ce19123aae588635af8c9f953 # firebase REACT_APP_FIREBASE_API_KEY=yourapikey REACT_APP_FIREBASE_AUTH_DOMAIN=yourauthdomian REACT_APP_FIREBASE_DATABASE_URL=your~~ REACT_APP_FIREBASE_PROJECT_ID=your~~ REACT_APP_FIREBASE_STORAGE_BUCKET=your~~ REACT_APP_FIREBASE_MESSAGING_SENDER..

Vercel Preview Deployment https://velog.io/@real-bird/Vercel-Deploy [Vercel] Deploy Vercel로 Deploy velog.io https://velog.io/@jiseong/react-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-vercel%EB%A1%9C-%EB%B0%B0%ED%8F%AC-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98 react 프로젝트 vercel로 배포, 환경변수 Dj-playlist는 youtube api를 활용해서 음악목록을 가져오는 어플리케이션으로 해당 api에 요청하기 위해서는 key값이 필요했다. 지금까지는 가상서버호스팅 (VPS)인 vultr를 사용하여 해당 가상환경..

중간 발표날이 있는 주였다. 우리 팀이 받은 피드백 중에 하나는 클라이언트 데이터 관리를 어떻게 해줘야 될까라는 부분이었다. 팀원들하고 회의가 필요한 부분인 것 같다.