박주니 개발 정리

1. npm install chart.js 를 합니다. 2. 제공하는 코드를 사용합니다. chartjs의 구성에 맞춰서 넣은 것이기 때문에 기본폼이라고 생각하고 복사해서 붙여놓으시면 됩니다. import React, { useEffect, useRef } from "react"; import { Chart, LineController, CategoryScale, LinearScale, PointElement, LineElement, } from "chart.js"; const LineChart = () => { const chartRef = useRef(null); let chartInstance = null; useEffect(() => { const ctx = chartRef.current.getCo..

설명 이유 처음에 laravel로 진행할 때 nginx로 프론트와 백엔드 경로를 맞추다보니 프론트에서 proxy 설정을 하지 않아도 cors 에러가 발생하지 않았습니다. 그런데 spring를 서버로 해서 이미 설정된 host에 맞출려고할 때 생각처럼 되지 않았는데 그때 사용하는 것이 proxy라는 것을 알았습니다. proxy 는 일반적으로 서버와 클라이언트 사이에서 요청을 중개하고 수정하는 역할을 개념만 알았지 어떻게 이용되는 지는 잘 알지 못했지만 이번 계기로 정확하게 알게 되었습니다. 사용 방법 1. package.json에 proxy를 설정합니다. "proxy": "http://localhost:3001/" 설명 여기서 host 경로는 백엔드에서 값을 보내고 있는 host를 넣으시면 됩니다. 2. ..

설명 이유) quill editor을 적용을 했을 때 nextjs에 적용할 때에는 css 추가 작업한 것 없이 정상적으로 작동되는 것을 볼 수 있었으나 react에 적용할 때에는 특히 이미지를 링크 걸때 이벤트가 발생되더라도 깨짐현상 또는 나타나지 않는 현상을 확인하게 되었습니다. 그래서 해결 방법을 공유하고자 정리하게 되었습니다. 먼저 발생하는 원인을 파악해야합니다. 이미지 드래그하고 링크를 클릭한 후에 나오는 모달을 개발자 도구를 통해서 확인합니다. 지금 형광펜으로 체크한 부분을 선택해서 styles를 보시면 마우스 스크롤을 움직일 때 해당 모달이 스크롤에 영향을 받아서 움직이는 것을 볼 수 있고 margin-top도 변경되는 것을 볼 수 있습니다. 1. QuillEditor.css를 만들어서 mar..

해결 방법 const [adminInfo, setAdminInfo] = useState(""); useEffect(() => { setAdminInfo( {name: "user"} ) }, []) React default value를 사용하는 이유는 다음과 같습니다. 기본값 설정: 만약, 사용자가 입력하지 않았을 경우, 특정 기본값을 표시하기 위해서입니다. 초기 폼 상태 설정: 폼을 처음 렌더링할 때, 특정 초기 값을 가지도록 설정하기 위해서입니다. 초기 데이터 상태 설정: API를 통해 받은 데이터를 표시할 때, 그 데이터를 기반으로 폼의 초기 상태를 설정하기 위해서입니다. 기존 데이터 로딩: 기존에 저장된 데이터를 불러와 폼에 표시할 때, 그 데이터를 기반으로 폼의 초기 상태를 설정하기 위해서입니다...