리액트에서 useState, useEffect를 주로 다루다보니, 다른 Hook도 잘 활용하고 싶은 마음에 여러 가지를 시도하고 있는 요즘은 useContext로 '다크모드'를 다루는 와중에.. ThemeContext 파일을 따로 생성하여 전역 객체로 다룰 수 있도록 설정해주고,useContext 훅을 사용하여, styled-component에 다크모드를 적용하고 있었다.뒷배경에도 다크모드를 적용해야 했기에, 초기에 설정해둔 GlobalStyle 수정 중에 에러가 발생했다. Cannot read properties of undefined (reading 'body')The above error occurred in the component  다크모드로 설정해둔 객체를 읽지 못하여, 컴포넌트 렌더링이 안..

드디어 chart.js를 적용해보았다.이미 기본 스타일, 애니메이션이 적용되어 있어 너무 만족스럽게 적용하였다.다른 프로젝트에 적용할 땐 헤매지 않도록 말끔하게 정리해보자. 1. 터미널에서 chart.js 다운받기 npm install chart.js react-chartjs-2 2. ChartComponent.js 컴포넌트 작성하기나는 제목, Bar, Grid 스타일을 수정했다. return은 Bar 태그에 props만 전달하면 되었기에 매우 간단하다.import {  Chart as ChartJS,  CategoryScale,  LinearScale,  BarElement,  Title,  Tooltip,  Legend,  ChartOptions,} from "chart.js";import { Bar..

개인 프로젝트의 묘미는 기능과 코드를 내 마음대로 할 수 있다는 것! 인턴십 전까지 남아 있는 시간동안 개인 프로젝트를 할 수 있는 시간이 있어서 다행이다.역시 사람이 여유가 조금 생기니, 만들어 보고 싶었던 기능, 시도해보고 싶은 것들이 떠오르네.. 참 신기해.. 중복 파일, 코드를 최대한 줄여보고 싶은 마음에, [수입], [지출] 버튼을 눌렀을 때 나오는 RegistModal을 하나의 파일에서 적용 해보기로 하였다. 수입 모달과 지출 모달의 차이점1) 제목2) 색상3) input placeholder4) [등록하기] 버튼 클릭 시, props 전달 내가 적용한 방법은 아래와 같다. 1. 지출을 기준으로 상태를 초기화한다.  const [modalColor, setModalColor] = useStat..

개인 프로젝트 진행 중에.. Button 클릭 후에 Modal이 위 화면에 생성되면서 Modal UI 제외 부분은 Blur 처리를 하려고 했다.  코드를 아래와 같이 작성하고나서 저장하니,띠링?어떻게 이렇게 되지? 신기해서 다른 스타일 코드를 마구 보며, 원인을 찾기 시작했다.레이아웃과 요소 배치 방식과 관련된 속성인 position, display에 원인이 있지 않을까? 생각하고 관련 속성 코드들은 // 주석처리를 하며 확인해보았다. 그 결과, position: relative 부분에 원인이 있었다. CSS의 속성들을 별도로 공부하고 React를 했던게 아니었기에 요소의 정확한 개념과 활용 방식을 숙지해야함을 다짐하고 이유를 찾아보았다.블러 처리된 배경 위에서 position: relative로 설정한..