★새로고침 시 인증여부에 따른 렌더링 방식의 이해 ★ (1) getAuth() : authentication 서버로부터 사용자 인증여부 가져오는 네트워크 요청이 아님! : getAuth는 authentication 서버에 요청할 때, 인자로 필요한 인스턴스 객체 => getAuth는 동기적으로 동작함 (2) onAuthStateChanged 리스너 : 비동기적으로 작동하는 네트워크 요청 : 사용자가 웹 사이트에 랜딩하면 가장 먼저 실행시키기 가능 [index.js] import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import GlobalStyle from "GlobalStyle"; imp..
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? * 상태관리 이유 : 데이터 일관성 / 코드 관리성 / 디버깅 용이성 * 평소 state관리 : (1) state와 props: 컴포넌트 내부 상태(state)와 부모 컴포넌트로부터 전달 받은 props (2) LifeCycle 메소드 : 클래스 컴포넌트에서 상태 업데이트와 같은 사이드 이펙트 관리에 사용 (3) Redux : 전역 상태관리 라이브러리 (4) React Query : 서버상태 관리 라이브러리. 데이터 패칭. 캐싱, 동기화 등 효과적 관리 ▶ 간단한 로컬 상태는 useState로 관리 / 애플리케이션의 전반 상태는 redux / react query 2.Redux가 무엇인가요, 왜 Redux를 사용하시나요? * R..
(1) 선택 기술 스택 * React * Firebase * TypeScript * React-query * recoil (2) 세부 기획 * 작은 것 부터 시작하자 ! (친환경 습관 & 노하우 공유 커뮤니티) (3) 구현 내용 * 콘텐츠 - 인기 게시글 (좋아요 높은 게시글) - 환경 인플루언서 랭킹 top 10 - 카테고리 : 노하우 / 오늘 뭐했다/ 제품추천 - 좋아요 기능 * 마이페이지 - 매일 습관 (해빗 트래커) - 캘린더 : 게시글 + 스티커 - 기프티콘 발행 : 특정 일자 채웠을때 - 내가 올린 게시글 - 프로필 수정 - 관리자 페이지 *About - 만들어진 이유 - 이용안내 - 뉴스룸 (환경 문제 기사) - 지금 시작하기 ( 웹사이트 이용) * 로그인/회원가입 페이지 끝.
Yalolja Project 소개 프로젝트 : e-sports LOL 구단 유니폼 추천하는 사이트 세부내용 : 주목 받고 있는 e-sports 종목이자, 게임인 LOL 구단의 유니폼을 추천받을 수 있음 개발기간 : 23.12.26 ~ 24.01.02 (5일) Keep - 현재 만족하고 있는 부분 기능별로 전역관리 시켜서 필요한 기능들을 서로가 맡은 부분에 사용 가능하게 알림 라이브러리 사용으로 코드를 작성하는 시간을 불필요하게 소모할 필요가 X Github PR 및 Merge 가 원활했음. Problem - 불편하게 느끼는 부분 파이어베이스 + 리코일을 사용하여 로그아웃 기능을 하는데 오류가 발생함.=> 얕은 복사로 인한 오류 발생 원인은 readonly 형식의 데이터를 다른 데이터로 업데이트 하려고 했..
[핵심] (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..
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;..