전체 글212 140. [React] input이 많을 경우 TIL23.03.09 [React] input이 많을 경우 쇼핑몰 프로젝트를 만들던 중 새로운 제품을 등록할 때 input태그가 많이 필요했음 기존에 2개일경우 useState로 관리해 줬지만 input이 많아지니 일일이 관리해 줄 수 없었음 그래서 구글링을 해봄 구글링 결과 input태그에 name 속성을 지정한 후, 아래와 같이 {}, 객체 안에 name: value 형식으로 관리해 주면 됨 const [product, setProduct] = useState({}); setProduct({...product, [e.target.name]: e.target.value}) 전체 코드 import React, { useState } from "react"; function NewProduct(props) { const [pr.. 2023. 3. 9. 139. firebase database "setValue at ~ failed: DatabaseError: Permission denied" error TIL23.03.06 firebase database "setValue at ~ failed: DatabaseError: Permission denied" error firebase로 백엔드 연결해서 사용하던중 콘솔에 아래 오류나 떴음. firebase database "setValue at ~ failed: DatabaseError: Permission denied" error 구글링을 해보니 firebase Realtime Database에 규칙을 보니 read와 write이 모두 false로 되어 있어서 그랬음. 그래서 아래 사진과 같이 수정해주니 잘 작동 2023. 3. 8. 138. TIL23.03.07 TIL 📌 오늘 한 일 React 쇼핑몰 프로젝트 Router설정, Navbar까지 만듦 유튜브 클론코딩은 지속적으로 업데이트 할 예정(다크모드 만들 예정) 2023. 3. 7. 137. [React] useEffect, console.log TIL23.03.06 useEffect안에 console.log 사용이유 React에서 'console.log'를 'useEffect' 안에 쓰는 이유는 주로 컴포넌트의 라이프사이클 동안 어떤 일이 일어나는지 파악하기 위함 1. 'useEffect'는 React 컴포넌트가 렌더링 될 때마다 실행되는 함수로, 컴포넌트의 상태나 프로퍼티가 변경될 때마다 호출됨. 이를 이용해서 'useEffect' 안에서 'console.log'를 사용하여 해당 컴포넌트가 렌더링 되거나 업데이트될 때마다 어떤 상태값이 변경되었는지 쉽게 파악할 수 있음 2. 'useEffect' 안에서 'console.log'를 사용하면, 컴포넌트의 라이프사이클에서 특정 시점에 어떤 일이 일어나는지 디버깅하기도 쉬움. ex) 'useEffect'의 두번째인자로 전.. 2023. 3. 6. 136. [React] netlify 배포 오류 TIL23.03.02 netlify 배포 오류 netlify를 통해서 유튜브 클론코딩을 배포하려 했다. 하지만 오류가 났음 1. Build command 처음 웹을 디플로이 할 때, netlify에서 앱을 빌드하기 위한 Build command를 적는 칸이 있음. 이 칸에 리액트 기준 평소에 적었던 'npm run build' 만 적으면 오류가 날 수 있다. 그래서 아래 사진처럼 적어줬음 앞에 'CI=' 만 추가해 줌 사이트에서 경로는 Domain settings > Build & deploy > Build Settings 2. netlify.toml 프로젝트 최상위 루트에 netlify.toml 만들어 줌 위와 같이 작성 깃에 다시 push netlify페이지 가서 새로고침 후 확인했더니 정상작동 1번에 CI=yarn ru.. 2023. 3. 2. 135. [React] useParams, useLocation TIL 23.02.28 useParams useParams는 현재 URL의 파라미터 정보를 객체 형태로 반환해 주는 훅 ex) /users/:id 와 같은 URL 패턴에서 :id 부분에 해당하는 값을 피라미터로 받아와서 사용할 수 있음 useLocation useLocation은 현재 URL 정보에 대한 객체를 반환하는 훅 URL 경로, 쿼리 매개변수, 해시 등 URL의 여러 부분을 가져올 수 있음 👉 'useParams'는 URL 경로의 일부를 추출하는 데에 특화되어 있고 👉 'useLocation'은 URL의 다양한 부분을 추출할 수 있어 좀 더 일반적인 용도로 사용됨 2023. 2. 28. 134. [React] timeago.js 라이브러리 사용 TIL 23.02.24 timeago.js 사용 전 import {format, register } from 'timeago.js' //register 한국어 선택 import koLocale from 'timeago.js/lib/lang/ko' //한국어 선택 register('ko', koLocale) function VideoCard(){ return ( {publishedAt} ) } 결과 라이브러리 사용해 보기 👉 사용방법 yarn add timeago.js import {format, register } from 'timeago.js' //임포트하기 register 한국어 선택 import koLocale from 'timeago.js/lib/lang/ko' //한국어 선택 register('ko', koLocale.. 2023. 2. 24. 133. 의존성 주입 DI(Dependency Injection) TIL 23.02.23 의존성 주입 DI(Dependency Injection) 의존성 주입은 객체를 생성하고 조합하는 역할을 수행하는 코드에서 객체들 간의 의존 관계를 명시적으로 표현하고, 이를 외부에서 설정하여 코드의 유연성과 재사용성을 높이는 기술. 단, 의존성이 과다할 경우 1. 코드 복잡성이 증가 2. 설정 파일 복잡성 3. 런타임 오류 2023. 2. 23. 이전 1 2 3 4 5 6 ··· 27 다음 728x90
