ksw_devlog

https://www.notion.so/7be3db316f194cf2b61b9aaf01d76649 발표 자료 1. MOCO 소개 www.notion.so

메인 페이지 반응형 적용 https://www.npmjs.com/package/react-responsive react-responsive Media queries in react for responsive design. Latest version: 9.0.2, last published: 3 months ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1077 other projects in the npm registry using react-responsive. www.npmjs.com https://mytutorials.tistory.com/335 [다락재쉼터] react-r..

모달창 (영역 밖 클릭 시 닫기) 검색창 밖 영역을 클릭하면 모달창이 사라지게 하기 // 검색창 currentTarget const searchRef = useRef(null); // 검색창 드랍다운 생성유뮤 const [isSearchUserDropDown, setIsSearchUserDropDown] = useState(false); const searchModalOutSideClick = (e) => { // 검색창 영역 밖 클릭하면 닫히게 하기 if (searchRef.current === e.target) { setSearchdropDownClick(false); } }; ..... return ( {isSearchUserDropDown && searchModalOutSideClick(e)} >..

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..