react-query 카테고리별 데이터 가져오기 (+ 반복되는 코드 줄이기)

개발환경 * react * typeScript * Firebase * react-query react-query로 데이터 가져오기 + firebase [api.ts] import { db } from '../shared/firebase'; import { collection, getDocs, orderBy, query, where } from 'firebase/firestore'; import { PostType } from '../types/Posts'; //관리자 (콘텐츠 by Mango) export const getAdminPostList = async (): Promise => { const q = query(collection(db, 'test'), where('role', '==', 'adm..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 9.
• textsms

리액트 기술면접 대비 (1)

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? * 상태관리 이유 : 데이터 일관성 / 코드 관리성 / 디버깅 용이성 * 평소 state관리 : (1) state와 props: 컴포넌트 내부 상태(state)와 부모 컴포넌트로부터 전달 받은 props (2) LifeCycle 메소드 : 클래스 컴포넌트에서 상태 업데이트와 같은 사이드 이펙트 관리에 사용 (3) Redux : 전역 상태관리 라이브러리 (4) React Query : 서버상태 관리 라이브러리. 데이터 패칭. 캐싱, 동기화 등 효과적 관리 ▶ 간단한 로컬 상태는 useState로 관리 / 애플리케이션의 전반 상태는 redux / react query 2.Redux가 무엇인가요, 왜 Redux를 사용하시나요? * R..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 5.
• textsms

최종 프로젝트 구현 : 와이어프레임

(1) 선택 기술 스택 * React * Firebase * TypeScript * React-query * recoil (2) 세부 기획 * 작은 것 부터 시작하자 ! (친환경 습관 & 노하우 공유 커뮤니티) (3) 구현 내용 * 콘텐츠 - 인기 게시글 (좋아요 높은 게시글) - 환경 인플루언서 랭킹 top 10 - 카테고리 : 노하우 / 오늘 뭐했다/ 제품추천 - 좋아요 기능 * 마이페이지 - 매일 습관 (해빗 트래커) - 캘린더 : 게시글 + 스티커 - 기프티콘 발행 : 특정 일자 채웠을때 - 내가 올린 게시글 - 프로필 수정 - 관리자 페이지 *About - 만들어진 이유 - 이용안내 - 뉴스룸 (환경 문제 기사) - 지금 시작하기 ( 웹사이트 이용) * 로그인/회원가입 페이지 끝.

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 4.
• textsms

리액트 : 반응형 사이드 바 (햄버거 메뉴 🍔 )

[핵심] (1) input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id' (2) 🍔 햄버거 모양 : span으로 만들기 * 3개 (3) 토글되면 햄버거 => x 모양으로 변경되며 사이드바 사용 (1) 🍔 햄버거 모양 구현 : input 태그 + label 태그 [NavBar.jsx] : return 문 안의 ui구현 { navigate('/top'); }} > TOP { navigate('/bottom'); }} > Bottom { navigate('/acc'); }} > Accessories { navigate('/hit'); }} > HIT ▶ input 태그의 checkbox 타입 사용 + label 태그의 htmlfor = 'input태그의 id..

• format_list_bulleted React
• · 2024. 1. 2.
• textsms

리액트 : 로딩화면 스피너 추가하기

1. 로딩화면 컴포넌트 생성 (Loading.jsx) import React from 'react'; import styled from 'styled-components'; import Spinner from '../assets/imgs/Loading/Spinner.gif'; const Loading = () => { return ( ); }; const ScDivBackground = styled.div` position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; background-color: #ffffffb7; z-index: 999; display: flex; flex-direction: column; align-items: center;..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 29.
• textsms

form 유효성검사에 react-hook-form 라이브러리 적용

회원가입시 이메일/패스워드/닉네임 유효성 검사로 사용 ▶ 목적 : state가 없어지면서 + 유효성 검사가 가능하여 컴포넌트의 랜더링 횟수를 최소화 시킨다 1) 패키지 설치 : yarn add react-hook-form 2) register, handleSubmit, formState, watch const { register, handleSubmit, watch, formState: {errors}, clearErrors, } = useForm({ defaultValues: { email: '', password: '', nickname: '', }, mode: 'onChange', //실시간 검증 활성화 }); formState ▶ register 함수에 validation 넣어주고, formSta..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 27.
• textsms