내배캠 WIL & TIL

TIL) 스파르타 개발일지 23-01-26

Top scrol btn 구현 usestate를 사용하여 버튼의 상태를 관리. 스크롤의 Y축(웹 페이지의 스크롤 정도) 에 따라 나타났다 사라졌다 하는 기능을 추가. 커서 hover를 통해서 투명도를 주었음. 이슈가 있다면, Link to를 통해서 들어간 특정 페이지에서 기능은 정상적이나, 이미지가 렌더되지 않는 현상이 있음... Try : 라우터를 통해서 주는경우, 직적접으로 페이지에서 주는 경우 둘다 렌더 되지않음. import 부분 import styled from 'styled-components'; import React, { useState, useEffect } from 'react'; 본문 코드 const TopButton = () => { const [showTopButton, setSh..

TIL) 스파르타 개발일지 23-01-25

HTML 삽입 미리보기할 수 없는 소스 firebase error 해결 // 전체 영상 불러오기 const getData = async () => { let list: object[] = []; const q = query( collection(dbService, 'CLASS'), category !== 'all' ? where('category', '==', category) : where('category', 'in', [ 'react', 'javascript', 'typescript', ]), orderBy('title', 'desc'), limit(16) ); const countSnap = await getCountFromServer(collection(dbService, 'CLASS')); c..

TIL) 스파르타 개발일지 23-01-20

문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열..

TIL) 스파르타 개발일지 23-01-19

타입 스크립트 프로젝트 시작 타입스크립트에서 라우터 설정방법 [ 1. 패키지 설치 ] $ npm install react-router react-router-dom $ npm install -D @types/react-router @types/react-router-dom [ 2. index.tsx에 BrowserRouter 추가 ] import * as React from 'react'; import ReactDom from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDom.render( , document.querySelector('#root')) ; [ 3. App.tsx에 R..