072DATA

오류 내용 supabase에서 user 데이터를 가져왔는데전체 데이터는 출력되지만 속성을 불러오면 속성 값이 없다는 오류가 나온다..Header.jsx:11 Uncaught TypeError: Cannot read properties of null (reading 'aud') at Header (Header.jsx:11:20) at renderWithHooks (chunk-6VWAHX6D.js?v=e96a4e37:11548:26) at mountIndeterminateComponent (chunk-6VWAHX6D.js?v=e96a4e37:14926:21) at beginWork (chunk-6VWAHX6D.js?v=e96a4e37:15914:22) at HTMLUnknownEl..

안녕 안녕하세욥 오늘은 중요한 Key와 같은 값을 .env 파일 안에서 관리하는 방법을 정리하겠습니다.  .env 생성 및 사용법 1. 먼저 생성하는 방법은 프로젝트의 루트 디렉토리에 .env 를 생성합니다 2.해당 파일안에 key = value 형식으로 환경 변수를 작성합니다VITE_API_KEY=your_api_key_here 참고로 Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여야 합니다 - 공식 문서 참고https://ko.vitejs.dev/guide/env-and-mode ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev  3. 환경 변수 사용const SUPABASE_KEY = import.meta.env.VITE_API_K..

안녕 오늘은 팀 프로젝트를 기획한 내용을 토대로 요약 정리 하겠습니다. 프로젝트 제목 / 간단 설명프로젝트 제목어?그로그램프로젝트 설명유저간의 취미를 공유할 수 있는 웹페이지뉴스피드 형식으로 게시 글을 자유롭게 읽을 수 있음프로젝트 제목과 프로젝트의 주제를 설정하여 취미 공유 커뮤니티를 만들어 볼 예정입니다. 기능정의 및 폴더 구조( 간단하게)`로그인 / 회원가입 로그인 기능 회원가입 기능 게시판 CRUD 글 작성 글 삭제 글 조회 글 수정 마이페이지 프로필 수정 나만의 게시 글 src/├── components/│ ├── commons/│ │ ├── BoardList.js│ │ ├── BoardCard.js│ ├── Auth/│ ├── Lo..

안녕하세요 오늘은 개인과제였던 포켓몬 도감 만들기에 대해 소개하겠습니다.  컴포넌트 및 페이지 구조src/├── pages/│ ├── Home.jsx│ ├── Detail.jsx│ └── Dex.jsx├── components/│ ├── Dashboard/│ │ └── DashBoard.jsx│ ├── Pokemon/│ │ ├── PokemonList.jsx│ │ ├── PokemonCard.jsx│ │ └── PokemonDetail.jsx├── contexts/│ └── PokemonContext.jsx 라이브러리 및 Context API 활용 import React from "react";import Home from "./pages/Home";im..

오류 내용부모 div의 onClick 이벤트에 상세페이지로 이동할 수 있도록 기능을 부여헀는데해당 div안에 다른 기능을 하고 있는 버튼을 눌렀을 때도 상세페이지로 이동하는 버그가 생겨버렸다 아무래도 부모 요소의 onClick이 자식 요소에게 까지 전파가 되어 버려서일어난 버그인 것으로 유추가 되지만 좀 더 자세히 알아볼 수 있도록 정보를 캐왔다 오류 원인HTML 문서에서 요소들은 "중첩 관계"라는 것을 가질 수 있다고 하는데 어떠한 요소가 또 다른 요소안에  존재할 수 있고 해당 요소의 클릭 이벤트는부모-> 자식 혹은 자식-> 부모로 계속 전파된다고 함 이를 "이벤트 버블링"이라 함 해결 방법그리하여 stopPropagation이라는 메소드를 사용해서현재 요소에 등록된 이벤트 리스너만 실행되고 상위 요..

안녕 개인 프로젝트 진행중 쿼리 스트링으로 URL에서 id 값을 가져와서 값에 해당하는 상세 페이지를렌더링하도록 코드를 짰는데 어째서인지 상세 페이지가 보이지 않는 것이다.. const searchParams = new URLSearchParams(location.search);//////////////////범인 검거/////////////const pokemonId = searchParams.get("id");////////////////////////////////////////console.log(typeof pokemonId);  콘솔 창에도 아무런 정보가 나오질 않아서 혹시나 하고 id 값에 타입을 확인해 보았더니String이 나오는 것이었다.. !  const searchParams = n..

오류 내용 선택한 포켓몬이 selectedPokemon에 추가는 되는데 렌더링이 안됨 알고보니 map 메서드 안에서 {} 중괄호를 사용하면, 코드 블록은 실행되지만아무것도 반환하지 않기 때문에 실제로 렌더링할 JSX가 없음map 메서드는 배열의 각 요소에 대해 함수를 실행하고그 함수가 반환한 값을 새로운 배열에 담아 반환함코드 확인 ㄱㄱ올바른 코드 selectedPokemon.map((pokemon, index) => { if (pokemon) { return ( ); } else { return ( ); }});  이렇게 하면 return 값인 jsx가 정상적으로 반환되지만  잘못된 코드 selectedPokemon.map((po..

오늘은 개인과제로 포켓몬 도감을 만들기 시작했습니다홈 화면, 포켓몬 목록을 보여주는 도감 화면까지 스타일드 컴포넌트와React Router Dom 으로 UI 및 페이지 이동을 구현했습니다. App.jsximport React from "react";import Home from "./pages/Home";import Dex from "./pages/Dex";import { BrowserRouter, Routes, Route } from "react-router-dom";import PkmDetail from "./pages/PkmDetail";import "./App.css";const App = () => { return ( } /> }..

React로 개발하면서 여러 페이지를 구현해야 할 때 매우 유용한 react router dom에 대해서 정리해보겠습니다. React Router DOMreact-router-dom은 React에서 페이지를 라우팅하고 관리할 수 있게 해주는 라이브러리임따라서 react-router-dom을 사용하면 URL로 화면에 표시할 컴포넌트를 쉽게 변경할 수 있음 설치 방법npm install react-router-dom  React Router Dom을 설치하고 아래 코드 예시대로 사용법을 살펴보자잉 Router, Routes, Route - 경로 설정 (코드 예시)import { Routes, Route } from 'react-router-dom';import Home from './components/Ho..

안녕React로 개발하다보면 불필요한 로직으로 인해 리렌더링 시 페이지의 성능이 떨어질 수 있는데이를 방지하기 위해 useMemo 훅을 사용하여 컴포넌트를 최적화하는 방법을 적어보겠습니다  useMemo useMemo는 React에서 제공하는 훅으로 특정 결과를 메모이제이션하여 성능을 최적화하고의존성 배열을 사용해 값이 변경되지 않으면 계산을 반복하지 않고 저장된 결과를 재사용함 코드 예시import React, { useState, useMemo } from "react";const HeavyComponent = () => { const [value, setValue] = useState(0); const heavyWork = () => { for (let i = 0; i heavyWork(..