져니의 개발 & 공부 기록 블로그

Dream Coding의 NextJS 강의를 들으면서 import Image from 'next/image';를 임포트하며 태그를 사용했는데, 가끔씩 이미지가 잘 보이다가도 계속 이미지가 보이지 않는 문제가 발생했다. 개발자 도구에서 소스를 살펴봐도 정상적으로 출력되는 것 같아 보이는데...'next/image' 를 활용하지 않고, HTML 태그를 사용하면 정상적으로 보여진다!! 원인태그로 이미지를 로드했을 때는 정상적으로 표시되지만, next/image 컴포넌트로는 이미지가 보이지 않는 경우, 몇 가지 원인과 해결 방법이 있을 수 있다. 1. Dynamic Path Handling Issue: next/image는 정적 경로나 빌드 시점을 기준으로 이미지를 최적화하는데, 동적 경로(path 변수)에서..

현재 React.js 기능 중 타이머 버튼을 눌렀을 때 새로 타이머가 갱신되면서 알림을 띄워주는 구조가 있다. 기본 라이브러리를 MUI(Material UI)를 활용해서 개발하고 있고, 알람을 SweetAlert2를 활용하려고 하였다.기본 구조먼저 부모 컴포넌트에서 버튼을 눌렀을 때 refreshSend 클릭이벤트가 발생하고 showAlert가 true일 시 컴포넌트가 발생하도록 한다. // Parents.jsx {timeString} {showAlert && ( )}자식 컴포넌트에서 SweetAlert2 를 활용한 알람이 발생되도록 설정했다.// Child.jsximport React, {useEffect} from 'react';imp..

화면에서 Grid를 7:5 구조로 나누고 각 컴포넌트를 배치했다.Grid 7 영역에서는 API로 불러온 데이터가 수집됨과 동시에 Chart를 시각화하고,Grid 5 영역에서는 Grid 7 영역과 높이를 맞춰주기 위해 반응형으로 height 값을 가지는 Map이 출력되도록 설정했다. Grid 7 영역에 해당하는 컴포넌트는 API 요청이 시작되기 전 기본 세팅 형태로, Box Form만 존재하고,API 요청으로 데이터가 호출되면 차트가 그려지는 형식의 구조이기 때문에기본 형태의 높이와 API가 호출되어 차트가 그려진 후의 높이가 다르다.(그렇다고 해서 Chart Data API를 호출해서 가져오는 시간이 오래 걸리지는 않는다.)  여기서 페이지가 렌더링되면서 자동으로 컴포넌트는 컴포넌트 높이에 맞춰지..

React-ApexCharts는 React 차트를 생성하기 위해 React-ApexCharts 구성요소를 사용하여 React.js 애플리케이션에서 다양한 차트를 손쉽게 만들 수 있다. 나도 React에 React-ApexCharts 라이브러리를 사용하여 LineChart를 개발하고 있던 도중 에러를 발견했다. 코드설계 import React, { useState } from 'react'; import ReactApexChart from "react-apexcharts"; const Chart = ({cnrMapSatCnr, cnrMapEventDate}) => { // 차트 데이터 및 옵션 설정 const [chartData, setChartData] = useState({ series: [ { nam..

에러발생 React 에서 MUI 라이브러리를 활용하여 Button에 fullWidth 를 적용했는데, 콘솔창을 보니 MUI fullWidth 가 발생했다. return( {expanded ? : } {expanded && ( {/* Toggle이 expanded 시 보여지는 컨텐츠 */} )} ) 사진첨부 발생코드 Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it fr..